How I Made This Website

The story behind building my personal website

Overview

I've wanted to build a website for a long time, but I never had the time or the motivation to actually begin. Eventually, I decided to make one for myself.

I started by searching for a template I could use as a foundation, and I found a clean, simple design called Nim. It fit my style and felt like a solid starting point.

Once I had the template, I followed its installation guide and began putting the site together. In the default setup, all the data is static. It's stored in a file named data.ts, organized in an array-like structure. Content such as blog posts and projects lives directly in the app router, with each route containing its own .mdx file.

This worked well enough, but I wanted something more dynamic. I turned to Supabase for storing data, taking inspiration from several of my friends' websites. Along the way, I learned about something called prefetching during builds. The idea is to fetch data at build time so it's ready the moment a user loads the site.

This approach works great on sites like daf2a.com, where the content is stored outside the project. Prefetching makes sense there because the content needs to be fetched anyway. But in my case, the .mdx files already live inside the project, so fetching them again during the build felt unnecessary.

Still, I ended up implementing a similar workflow. Each build syncs my .mdx frontmatter data to Supabase. This means I don't need a separate CMS—I just edit the .mdx files, including their frontmatter, and everything stays in sync.

Workflow

The workflow whenever I update content looks like this:

  1. Create or edit an .mdx file.
  2. Push the site, which triggers a sync to Supabase.
  3. The updated content becomes available.

Resources

Here are a few of the resources I used while building the site: