https://github.com/agarun/agarun.com
My personal website where I host my portfolio, contact information, and blog posts
https://github.com/agarun/agarun.com
blog nextjs portfolio react website
Last synced: 6 months ago
JSON representation
My personal website where I host my portfolio, contact information, and blog posts
- Host: GitHub
- URL: https://github.com/agarun/agarun.com
- Owner: agarun
- Created: 2021-08-22T01:22:20.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2026-01-15T21:36:30.000Z (6 months ago)
- Last Synced: 2026-01-16T00:48:44.148Z (6 months ago)
- Topics: blog, nextjs, portfolio, react, website
- Language: JavaScript
- Homepage: https://agarun.com
- Size: 7.87 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [agarun.com](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:
```bash
yarn install
```
Run the development server:
```bash
npm run dev
# or
yarn dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the app.
## Preview 🚀
To build the site:
```bash
yarn build
```
Then, to serve it locally:
```bash
yarn start
```
## Technologies 🧰
Hosted with [Netlify](https://www.netlify.com/). Built with React and [Next.js](https://nextjs.org/).
### Tooling
- [ESLint](https://eslint.org/)
- The ESLint config (`.eslintrc.json`) extends the `create-react-app` config, Next.js config, and includes a few plugins
- [Prettier](https://prettier.io/)
- [Husky](https://github.com/typicode/husky)
- Pre-commit hooks that run tools like ESLint & Prettier on modified files via `lint-staged`
- [Lighthouse](https://github.com/GoogleChrome/lighthouse) to collect performance metrics about webpages
- I use this locally and [on Netlify](https://www.netlify.com/blog/2021/03/26/netlify-build-plugin-of-the-week-lighthouse/), in addition to [web.dev/measure](https://web.dev/measure/)
### Styling
- Color modes and theming tokens are implemented with CSS variables (custom properties)
- [Josh Comeau's dark mode guide](https://www.joshwcomeau.com/react/dark-mode/), [Theme UI](https://theme-ui.com/), [useDarkMode](https://github.com/donavon/use-dark-mode) were really useful resources to avoid FOUC.
- [Emotion](https://github.com/emotion-js/emotion) for writing style modules with JavaScript
- [Framer Motion](https://www.framer.com/motion/) for creating animated components
### Writing
- [https://github.com/unifiedjs/unified](Unified) libraries including remark & rehype to process HTML and markdown
- [MDX](https://mdxjs.com/) 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](https://github.com/PrismJS/prism) to theme code snippets (with `prism-theme-vars`!)
- [Custom theme](https://github.com/agarun/agarun.com/blob/main/styles/prism.css) based on [Night Owl by Sarah Drasner](https://marketplace.visualstudio.com/items?itemName=sdras.night-owl)
### Testing
- [Jest](https://jestjs.io/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) for unit and integration tests
- [Cypress](https://www.cypress.io/) for integration and end-to-end tests
### Misc.
This is the third iteration of `agarun.com`. The first one was made with [Jekyll](https://jekyllrb.com/), and the second with [Gatsby](https://www.gatsbyjs.com/).