I use this site to test out & learn new technologies, and have done so with the previous iterations of my site too. I've previously used Jekyll, CRA and Gatsby, which you can read more about on the Site Archive page.

Here's the stack I decided on for this iteraton:

Framework - Next.js

I went with Next.js because I wanted this site to be a mix of static and dynamic pages.

Next.js allows all of these things with ease.

Styling - CSS Modules (SCSS) & Styled Components

The majority of this site uses CSS modules, since this site is primarily React Server Components, which don't really support CSS-in-JS libraries.

However, some things, e.g. the <Title /> component you see at the top of this page, use Styled Components. This is because I want to pass them props (in this case the title), which isn't supported with CSS modules. The trade off is that these components have to be client components.

Hosting - Vercel

Being a Next.js site, this is a pretty standard choice.

Other useful tools & libraries