This is the second iteration of my personal website. You can find the repository for my first website here.

I am now on version 3. This repository is for the old website. For the latest version, see website3.

Stack

1. This is a Next.js application (13.4.12) using the pages router & JS.
2. AWS - uses dev and prod environments on DynamoDB for view count storage and guestbook management.
3. NextAuth.js - to ensure users are authenticated with GitHub to leave a note in the guestbook.
4. MDX - website uses MDX with next-mdx-remote for loading MDX in getStaticProps and turn MDX (with components, of course) into pages.
5. SCSS - all components are custom-styled by hand with help from SCSS.
6. Framer-Motion - adding animation and interactivity w/framer.
7. Remark Rehype - for managing image syntax, LaTeX, syntax highlighting, etc.

Design Inspiration

This website was influenced by various blogs and design systems:

Blogs:

1. Josh Comeau
2. Chronark
3. Paco Coursey
4. Maxime Heckel

Design:

1. MTA Design
2. NY Subway Signs
3. Mini Metro

Deployment

If you want to clone this, it running it locally will not work because of the implementation of a view counter with Dynamo - you will encounter some errors. If you want to fully copy my website and have it run locally, either (a) remove the stuff that uses dynamo (two api routes, the hook usage, and view counts on each post and on the post list) or (b) make a dynamo tables with primary keys of "slug" and "note" (respectively) and add the proper api keys to an .env.development file (if you want a prod table, make an .env.prod with the correct table name & api keys). Or don't, I don't care.

# install dependencies
pnpm install

# dev - looks at .env.development
pnpm dev

# prod - looks at .env.production
pnpm start

This was also deployed on Vercel - as easy linking my repo and clicking "Deploy."