README.md

agarun.com

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

Getting Started

The prerequisites are Yarn and Node >= 14.

First, install the dependencies:

yarn install

Run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the app.

Preview 🚀

To build the site:

yarn build

Then, to serve it locally:

yarn start

Technologies 🧰

Hosted with Netlify. Built with React and Next.js.

Tooling

• ESLint
  • The ESLint config (.eslintrc.json) extends the create-react-app config, Next.js config, and includes a few plugins
• Prettier
• Husky
  • Pre-commit hooks that run tools like ESLint & Prettier on modified files via lint-staged
• Lighthouse to collect performance metrics about webpages
  • I use this locally and on Netlify, in addition to web.dev/measure

Styling

• Color modes and theming tokens are implemented with CSS variables (custom properties)
  • Josh Comeau's dark mode guide, Theme UI, useDarkMode were really useful resources to avoid FOUC.
• Emotion for writing style modules with JavaScript
• Framer Motion for creating animated components

Writing

• https://github.com/unifiedjs/unified libraries including remark & rehype to process HTML and markdown
• MDX to use React components (like next/image, or custom ones) in Markdown files. I chose to use next-mdx-remote over mdx-bundler here.
• Prism to theme code snippets (with prism-theme-vars!)
  • Custom theme based on Night Owl by Sarah Drasner

Testing

• Jest and React Testing Library for unit and integration tests
• Cypress for integration and end-to-end tests

Misc.

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