<!-- Frameworks -->
<img src="https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white" alt="Next.js">
<img src="https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB" alt="React">
<img src="https://img.shields.io/badge/MDX-v2-000?logo=mdx&style=for-the-badge" alt="MDX">
<!-- Languages -->
<img src="https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E" alt="JavaScript">
<img src="https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript">
<img src="https://img.shields.io/badge/latex-%23008080.svg?style=for-the-badge&logo=latex&logoColor=white" alt="LaTeX">
<!-- Styling -->
<img src="https://img.shields.io/badge/SASS-hotpink.svg?style=for-the-badge&logo=SASS&logoColor=white" alt="SASS">
<img src="https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white" alt="TailwindCSS">
<!-- Tools -->
<img src="https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white" alt="Visual Studio Code">
<img src="https://img.shields.io/badge/Giscus-enabled-9B83FF?logo=github&style=for-the-badge" alt="Giscus">
<!-- Package Managers -->
<img src="https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white" alt="NPM">
<img src="https://img.shields.io/npm/v/next?label=npm&logo=npm&style=for-the-badge" alt="npm (Next.js)">
<!-- Backends -->
<img src="https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white" alt="Node.js">
<!-- URL Shortening -->
<img src="https://img.shields.io/badge/YOURLS-v1.9+-3178C6?logo=link&style=for-the-badge" alt="YOURLS">
<!-- Commit Activity -->
<img src="https://img.shields.io/github/commit-activity/t/wyattowalsh/personal-website?style=for-the-badge&logo=github" alt="GitHub Commit Activity">
- Custom link tree with social media links and contact information with a particles background.
- Blog supporting:
- MDX content with frontmatter metadata.
- LaTeX math rendering with KaTeX
- Inline and block math equations.
- Equation autonumbering
- Copy-to-clipboard support for underlying LaTeX code + autolinked anchor url
- Gist embedding with Super React Gist
- Full-text search with Fuse.js
- Reading time estimation with reading-time
- Pagination
- Tags with tag page + indices
- RSS feed generation with feed
- Automatic created and modified dates (with optional frontmatter override)
- Custom 404 page with more particles!
- Predev + Prebuild scripts for pre-computation of data for faster builds.
- Light + Dark mode theme toggling with local storage persistence.
- Linkshortener with YOURLS.
- Vercel: A global hosting and deployment platform for frontend web projects.
- TypeScript: A typed superset of JavaScript for enhancing code reliability and maintainability.
- Next.js: A React-based framework for server-side rendered and static web applications.
- React: A JavaScript library for building user interfaces.
- shadcn/ui: A modular set of pre-built UI components for React applications.
- Tailwind CSS: A utility-first CSS framework for creating custom designs without writing custom CSS.
- SCSS: A CSS preprocessor with features like variables and mixins.
- MDX: A format that combines Markdown and JSX for seamless component rendering.
Full Table
| Technology/Plugin | Description | Summary Description | Links |
|---|---|---|---|
| Vercel | App hosting | A platform for frontend developers, providing global hosting and deployment for web projects. | Documentation |
| TypeScript | Programming language | A typed superset of JavaScript that compiles to plain JavaScript, enhancing code reliability and maintainability. | Handbook |
| Next.js | App framework | A React-based framework for building server-side rendered and static web applications. | Learn Next.js |
| React | UI library | A popular JavaScript library for building user interfaces. | Getting Started |
| shadcn/ui | UI components | A set of pre-built UI components for React applications, offering a modular approach to design. | Components |
| Tailwind CSS | CSS framework | A utility-first CSS framework for creating custom designs without writing custom CSS. | Documentation |
| SCSS | CSS preprocessor | A CSS preprocessor that adds features like variables, nested rules, and mixins to standard CSS. | Guide |
| MDX | Markdown for JSX | A format for writing JSX and Markdown together, allowing seamless component rendering within Markdown files. | Getting Started |
| Framer Motion | Animations | A library for creating animations and interactions in React applications. | API Reference |
| React Scroll | Scrolling library | React components for smooth scrolling within a page. | GitHub Repository |
| MDX Plugins | Various plugins to enhance MDX functionality. | ||
| remark-gfm | MDX Plugin | Adds GitHub Flavored Markdown support in MDX. | GitHub Repository |
| remark-math | MDX Plugin | Adds support for math notation in MDX content. | GitHub Repository |
| remark-mdx-math-enhanced | MDX Plugin | Enhances math rendering capabilities in MDX. | GitHub Repository |
| remark-emoji | MDX Plugin | Converts emoji shortcodes to Unicode emojis in MDX. | GitHub Repository |
| remark-code-titles | MDX Plugin | Adds custom titles to code blocks in MDX. | GitHub Repository |
| remark-code-blocks | MDX Plugin | Enhances code blocks with additional functionality. | GitHub Repository |
| remark-code-frontmatter | MDX Plugin | Adds frontmatter support within code blocks. | GitHub Repository |
| remark-code-import | MDX Plugin | Allows importing code snippets from external files. | GitHub Repository |
| remark-code-screenshot | MDX Plugin | Captures screenshots of code blocks as images. | GitHub Repository |
| remark-codesandbox | MDX Plugin | Integrates CodeSandbox embeds within MDX documents. | GitHub Repository |
| remark-custom-header-id | MDX Plugin | Customizes header IDs for improved linkability. | GitHub Repository |
| remark-definition-list | MDX Plugin | Adds support for definition lists in MDX content. | GitHub Repository |
| remark-docx | MDX Plugin | Converts MDX content to DOCX format. | GitHub Repository |
| remark-embed-images | MDX Plugin | Embeds images directly into MDX files. | GitHub Repository |
| remark-extended-table | MDX Plugin | Adds support for extended table features in MDX. | GitHub Repository |
| remark-frontmatter | MDX Plugin | Supports parsing and using frontmatter metadata. | GitHub Repository |
| remark-github-blockquote-alert | MDX Plugin | Styles blockquotes as alerts with GitHub-like design. | GitHub Repository |
| remark-hint | MDX Plugin | Adds hint and tip boxes to MDX content. | GitHub Repository |
| remark-oembed | MDX Plugin | Embeds external content like tweets and videos. | GitHub Repository |
| remark-prism | MDX Plugin | Adds syntax highlighting using Prism.js. | GitHub Repository |
| remark-smartypants | MDX Plugin | Converts quotes and dashes to typographically correct symbols. | GitHub Repository |
| remark-sources | MDX Plugin | Lists sources and references in MDX content. | GitHub Repository |
| remark-mdx-frontmatter | MDX Plugin | Adds MDX-specific frontmatter support. | GitHub Repository |
| remark-toc | MDX Plugin | Generates a table of contents. | GitHub Repository |
| remark-validate-links | MDX Plugin | Validates links in MDX content. | GitHub Repository |
| Rehype Plugins | Various plugins to enhance HTML output. | ||
| rehype-slug | MDX Plugin | Adds unique IDs to headings for linkability. | GitHub Repository |
| rehype-autolink-headings | MDX Plugin | Adds anchor links to headings. | GitHub Repository |
| rehype-katex | MDX Plugin | Renders math notation using KaTeX. | GitHub Repository |
| rehype-prism | MDX Plugin | Adds syntax highlighting using Prism.js. | GitHub Repository |
| rehype-callouts | MDX Plugin | Adds callout boxes to content. | GitHub Repository |
| rehype-citation | MDX Plugin | Enables citation formatting. | GitHub Repository |
| rehype-color-chips | MDX Plugin | Displays color chips for visualization. | GitHub Repository |
| rehype-infer-reading-time-meta | MDX Plugin | Infers reading time and adds metadata. | GitHub Repository |
| rehype-prism-plus | MDX Plugin | Advanced code block syntax highlighting. | GitHub Repository |
| rehype-semantic-blockquotes | MDX Plugin | Styles blockquotes with semantic HTML. | GitHub Repository |
| Other Tools and Libraries | Additional tools used in the project. | ||
| Lucide React | Icon library | A collection of customizable React icons. | Documentation |
| Fuse.js | Search library | Lightweight fuzzy-search library. | Documentation |
| Reading Time | Reading time estimator | Estimates reading time for text content. | GitHub Repository |
| Gray Matter | Frontmatter parser | Parses frontmatter from markdown files. | GitHub Repository |
| React Syntax Highlighter | Syntax highlighting | Syntax highlighting component for React using highlight.js or Prism.js. | GitHub Repository |
| React Icons | Icon library | Include popular icons in React projects easily. | Documentation |
| React Katex | Math rendering | Display math equations in React using KaTeX. | GitHub Repository |
| React Particles | Particle animations | Create particle animations in React. | GitHub Repository |
| React Confetti | Confetti animation | Confetti animation for celebrations in React apps. | GitHub Repository |
| React Share | Social media sharing | Social media share buttons and icons for React. | GitHub Repository |
| ESLint | Linting tool | Identifies and reports on patterns in JavaScript. | Documentation |
| Prettier | Code formatter | An opinionated code formatter. | Documentation |
| Zod | TypeScript schema validation | TypeScript-first schema validation with static type inference. | GitHub Repository |
| Tippy.js | Tooltip library | Highly customizable tooltip and popover library. | Documentation |
| React Custom Scroll | Custom scrollbars | React component for custom scrollbars. | GitHub Repository |
| Super React Gist | GitHub Gists in React | Embed GitHub Gists in React applications. | GitHub Repository |
| Clsx | Utility | A tiny utility for constructing className strings conditionally. | GitHub Repository |
| Class Variance Authority | Utility | Manage complex className logic. | GitHub Repository |
| Usehooks-ts | React hooks | A collection of React hooks ready to use. | Documentation |
| Sass Loader | Webpack loader | Loads and compiles Sass/SCSS files. | Documentation |
| PostCSS | CSS tool | A tool for transforming CSS with JavaScript. | Documentation |
| Autoprefixer | CSS tool | Parse CSS and add vendor prefixes. | GitHub Repository |
| Tailwind Merge | Utility | Merge Tailwind CSS classes without conflicts. | GitHub Repository |
| Tailwind CSS Animate | CSS plugin | Adds animation utilities to Tailwind CSS. | GitHub Repository |
| TsParticles | Particle animations | Easily create highly customizable particle animations. | GitHub Repository |
| Gray Matter | Frontmatter parser | Parse frontmatter from strings or files. | GitHub Repository |
| Feed | RSS and Atom Feeds | A library for creating RSS and Atom feeds for web applications. | GitHub Repository |
