V2

.eslintrc.json

@@ -3,7 +3,7 @@
     "react-app",
     "eslint:recommended",
     "plugin:prettier/recommended",
-    "plugin:cypress/recommended",
+    "plugin:playwright/recommended",
     "next/core-web-vitals"
   ]
 }

.gitignore

@@ -35,3 +35,10 @@ yarn-error.log*
 
 # Lighthouse
 *.report.html
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

README.md

@@ -1,74 +1,105 @@
 # [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.
+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
 
-The prerequisites are Yarn and Node >= 14.
+First, setup [pnpm](https://pnpm.io/) and [Node](https://nodejs.org/en/download) >= 20.
 
-First, install the dependencies:
+Next, install the dependencies:
 
 ```bash
-yarn install
+pnpm install
 ```
 
 Run the development server:
 
 ```bash
-npm run dev
-# or
-yarn dev
+pnpm dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the app.
+Visit [http://localhost:3000](http://localhost:3000) to see the site.
 
-## Preview 🚀
+## Preview Build
 
-To build the site:
+To export the site for production and preview it locally:
 
 ```bash
-yarn build
+pnpm site
 ```
 
-Then, to serve it locally:
+## Tech Stack
+
+### Codebase
+
+This project uses [React](https://react.dev/) and [Next.js](https://nextjs.org/)
 
 ```bash
-yarn start
+.
+├── components
+│   ├── …
+│   ├── Icon
+│   ├── Link
+│   ├── Nav
+│   ├── Layout
+│   ├── PostLayout
+│   └── ProjectLayout
+├── pages
+│   ├── …
+│   ├── posts
+│   └── projects
+├── lib
+├── posts
+├── projects
+├── public
+├── styles
+└── tests
+    ├── …
+    └── e2e
+        └── …
 ```
 
-## Technologies 🧰
+### Hosting
 
-Hosted with [Netlify](https://www.netlify.com/). Built with React and [Next.js](https://nextjs.org/).
+- [Netlify](https://www.netlify.com/)
 
 ### 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/)
+- [ESLint](https://eslint.org/): linting
+- [Prettier](https://prettier.io/): formatting
+- [Husky](https://github.com/typicode/husky): pre-commit hooks that run on modified files using `lint-staged`
+- [Lighthouse](https://github.com/GoogleChrome/lighthouse) to collect performance metrics
+
+> You can use Lighthouse locally and [on Netlify](https://www.netlify.com/blog/2021/03/26/netlify-build-plugin-of-the-week-lighthouse/), in addition to PageSpeed ([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
+- **Theming**: color mode support and theming tokens are implemented with CSS variables
+- **CSS**: [Emotion](https://github.com/emotion-js/emotion) CSS prop in addition to regular stylesheets
+- **Animations**: [Framer Motion](https://www.framer.com/motion/)
+- **Shaders**: [Paper](https://github.com/paper-design/shaders)
+
+> Josh Comeau's [dark mode guide](https://www.joshwcomeau.com/react/dark-mode/), [Theme UI](https://theme-ui.com/), [Tailwind](https://github.com/tailwindlabs/tailwindcss/blob/c45616ff915c4bddb551f92f4c651ca76c4448ea/packages/tailwindcss/src/compat/dark-mode.ts#L4), and [useDarkMode](https://github.com/donavon/use-dark-mode) were really useful resources to avoid flash of unstyled content (FOUC).
 
 ### 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)
+- [unified](https://github.com/unifiedjs/unified): libraries to process HTML and markdown content, including remark & rehype plugins
+- [MDX](https://mdxjs.com/): use React components in Markdown files, using `next-mdx-remote` over `mdx-bundler`
+- [Prism](https://github.com/PrismJS/prism): code syntax highlighting themes, using `prism-theme-vars`
+
+> I use a [custom](https://github.com/agarun/agarun.com/blob/main/styles/prism.css) syntax highlighting theme based on the lovely [Night Owl by Sarah Drasner](https://marketplace.visualstudio.com/items?itemName=sdras.night-owl) theme.
 
 ### 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
+- [Vitest](https://vitest.dev/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) for unit and integration tests
+- [Playwright](https://playwright.dev/) for end-to-end tests
+
+### Colophon
+
+- [Inter](https://rsms.me/inter/): sans-serif (website)
+- [TASA Orbiter](https://uncut.wtf/sans-serif/tasa-orbiter/): sans-serif (resume)
+- [Cousine](https://fonts.google.com/specimen/Cousine): monospace
 
-### Misc.
+## History
 
 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/).

components/AnimateArrowRight.js

@@ -0,0 +1,117 @@
+import { motion } from 'motion/react';
+import useColorMode from '../lib/hooks/useColorMode';
+
+const hoverColor = 'var(--colors-black)';
+
+export function AnimateArrowRight({ isHovering }) {
+  const { colorMode } = useColorMode();
+  const defaultColor = colorMode === 'dark' ? '#696d72' : '#d1d5db';
+
+  return (
+    <div
+      style={{
+        flexGrow: 1,
+        display: 'flex',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+      }}
+    >
+      <svg
+        width="300"
+        height="20"
+        viewBox="0 0 177 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <motion.path
+          d="M0 10 H177"
+          stroke={defaultColor}
+          strokeWidth="2"
+          strokeDasharray="16 20"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          initial={{ opacity: 0, clipPath: 'inset(0% 0% 0% 0%)' }}
+          animate={{ opacity: 1, clipPath: 'inset(0% 0% 0% 100%)' }}
+          transition={{
+            clipPath: {
+              duration: 1,
+            },
+          }}
+          style={{
+            transform: 'translateY(2px)',
+          }}
+        />
+        <motion.path
+          stroke={defaultColor}
+          d="M5 12h24 M22 5l7 7-7 7"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          initial={{ opacity: 0, clipPath: 'inset(0% 0% 0% 0%)' }}
+          animate={{ opacity: 1, clipPath: 'inset(0% 0% 0% 100%)' }}
+          transition={{
+            clipPath: {
+              delay: 1,
+            },
+          }}
+          style={{
+            transform: 'translateX(177px)',
+          }}
+        />
+
+        <motion.path
+          d="M0 10 H177"
+          stroke={hoverColor}
+          strokeWidth="2"
+          strokeDasharray="8 10"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          initial={{
+            pathLength: 0,
+            pathOffset: 0,
+          }}
+          animate={{
+            pathLength: 0.3,
+            pathOffset: 1,
+          }}
+          transition={{
+            duration: 1,
+          }}
+          style={{
+            transform: 'translateY(2px)',
+          }}
+        />
+        <motion.path
+          d="M5 12h24 M22 5l7 7-7 7"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="none"
+          initial={{ stroke: defaultColor, clipPath: 'inset(0% 100% 0% 0%)' }}
+          animate={{
+            stroke: isHovering ? hoverColor : defaultColor,
+            clipPath: 'inset(0% 0% 0% 0%)',
+            translateX: [177, 177 + 6, 177],
+          }}
+          transition={{
+            delay: isHovering ? 0.6 : 0,
+            type: 'spring',
+            stiffness: 100,
+            damping: 20,
+            translateX: {
+              delay: 1.33,
+              duration: 0.75,
+              repeat: Infinity,
+              repeatDelay: 0.75,
+            },
+          }}
+          style={{
+            transform: 'translateX(177px)',
+          }}
+        />
+      </svg>
+    </div>
+  );
+}
+
+export default AnimateArrowRight;