agarun.com

My personal website where I host my portfolio, contact info, and writing. It's always a work in progress, but feel free to look around.

Getting Started

First, setup pnpm 9 and Node >= 22.

Next, install the dependencies:

pnpm install

Run the development server:

pnpm dev

Visit http://localhost:3000 to see the site.

Preview Build

To export the site for production and preview it locally:

pnpm site

Tech Stack

Codebase

This project uses React and Next.js

.
├── components
│   ├── …
│   ├── Icon
│   ├── Link
│   ├── Nav
│   ├── Layout
│   ├── PostLayout
│   └── ProjectLayout
├── pages
│   ├── …
│   ├── posts
│   └── projects
├── lib
├── posts
├── projects
├── public
├── styles
└── tests
    ├── …
    └── e2e
        └── …

Hosting

• Netlify

Tooling

• ESLint: linting
• Prettier: formatting
• Husky: pre-commit hooks that run on modified files using lint-staged
• Lighthouse to collect performance metrics

You can use Lighthouse locally and on Netlify, in addition to PageSpeed (web.dev/measure).

Styling

• Theming: color mode support and theming tokens are implemented with CSS variables
• CSS: Emotion CSS prop in addition to regular stylesheets
• Animations: Framer Motion
• Shaders: Paper

Josh Comeau's dark mode guide, Theme UI, Tailwind, and useDarkMode were really useful resources to avoid flash of unstyled content (FOUC).

Writing

• unified: libraries to process HTML and markdown content, including remark & rehype plugins
• MDX: use React components in Markdown files, using next-mdx-remote over mdx-bundler
• Prism: code syntax highlighting themes, using prism-theme-vars

I use a custom syntax highlighting theme based on the lovely Night Owl by Sarah Drasner theme.

Testing

• Vitest and React Testing Library for unit and integration tests
• Playwright for end-to-end tests

Colophon

• Inter: sans-serif (website)
• TASA Orbiter: sans-serif (resume)
• Cousine: monospace

History

This is the third iteration of agarun.com. The first one was made with Jekyll, and the second with Gatsby.