May 23, 2025

How My Website Works

I built this site to be two things at once: a personal playground where I can experiment with new technologies, and a centralized hub to share projects, writing, and ideas. It’s meant to grow with me—part portfolio, part lab.

In this post, I’ll walk you through how it works under the hood: the stack, structure, features I’m proud of, and some things I’m planning next. If you want to poke around the code yourself, it’s fully open source on GitHub.

The Stack: Modern, Minimal, and Mostly Type-Safe

The core stack is built for speed—both for visitors and for me as a developer.

Next.js 16 (App Router) – Server components, layouts, routing—all handled cleanly.
Tailwind CSS v4 – Utility-first styling that lets me move fast without touching a stylesheet.
Shadcn UI + Radix – Prebuilt components with accessibility by default.
Markdown Content Layer – Posts live as .md files with YAML frontmatter. No CMS, no database—just files I can edit in any text editor.
Motion – Just enough motion to make things feel alive.
tRPC – End-to-end typesafe APIs connecting the frontend to a PostgreSQL database via Drizzle ORM.
Drizzle ORM – Lightweight, type-safe database layer for PostgreSQL.
Biome – Fast linting and formatting, replacing ESLint and Prettier in one tool.
Bun – Used as the package manager and runtime. Fast installs, fast scripts.

It’s a stack that stays out of my way, but gives me everything I need when I want to build something new.

🗂️ Structure: Everything in Its Right Place

Here’s how the project is organized:

1content/
2└── posts/            # Markdown blog posts with YAML frontmatter
3
4src/
5├── app/              # Next.js App Router structure
6├── components/       # Reusable UI blocks
7├── hooks/            # Custom React hooks
8├── lib/              # Helpers, utils, content layer
9├── styles/           # Tailwind config and base styles
10├── trpc/             # Backend logic (tRPC)
11└── server/           # Server-only functions
12

It’s simple, predictable, and scalable. I can find what I need instantly, and adding new pages or features takes minutes, not hours.

Performance That Feels Intentional

The site feels fast because it is fast. Thanks to Next.js’s prefetching, content is loaded before you even click:

1<Link href="/projects" prefetch>
2  Projects
3</Link>

It’s one of those default features that makes a big difference. Transitions feel snappy, and it gives the whole site a sense of polish.

Theme Switching Done Right

I care about dark mode—so I made it work properly.

The site follows your system preference by default, but you can toggle between light and dark manually. It’s powered by next-themes and Tailwind’s dark: classes:

1const { setTheme } = useTheme();
2
3<Button onClick={() => setTheme("dark")}>🌙</Button>
4<Button onClick={() => setTheme("light")}>☀️</Button>
5

It’s lightweight and instant. No flash of white on page load. No weird layout shifts. Just smooth, reliable theming.

Navigation That Feels Premium

Navigation matters, especially when you want visitors to explore.

The site uses Shadcn UI components throughout, but the sidebar is what gives it that “app-like” feel. It’s collapsible, responsive, and always accessible—whether you’re on mobile or desktop.

Hotkeys: Because I Like Feeling Fast

I added keyboard shortcuts using react-hotkeys-hook. Want to jump to Writing? Hit w. Go home? h.

1useHotkeys("g", () => router.push("/"));
2useHotkeys("g", () => router.push("/writing"));
3

Blog System: Markdown Content Layer

I originally used Sanity CMS for blog content, but migrated to a file-based Markdown system. Posts are plain .md files with YAML frontmatter—no external service, no API calls, no database. Just files I can edit in any text editor and commit alongside my code.

Here's what a post looks like:

1---
2title: "How My Website Works"
3publishedAt: 2025-05-23
4isFeatured: false
5excerpt: "A look under the hood..."
6categories: ["technology"]
7---
8
9Your markdown content goes here.

A small content layer in src/lib/content/ handles parsing with gray-matter and exposes a query API for fetching, filtering, and paginating posts:

1const post = await getPost("how-my-website-works");
2const recent = await getPosts(0, 5);
3const featured = await getFeaturedPosts(3);

Posts are rendered using react-markdown with GitHub Flavored Markdown support, syntax highlighting via react-syntax-highlighter, and custom component overrides for headings, code blocks, images (using Next.js Image), and more.

The result is a system that's dead simple to work with. I write Markdown, commit it, and it's live. No CMS dashboard, no build plugins—just the filesystem.

What’s Next?

Right now, the site is mostly static content—but I want to make it a little more interactive.

One idea I’m exploring: embedding a small language model that can help visitors explore content. Think: “What kind of projects have you built with React?” or “Where can I see your backend work?” I’d like to experiment with pulling context from my posts and résumé to make those interactions useful (and a bit fun).

Deployment

I’m hosting the site on Vercel. One push to main and it’s live. Deploy previews make it easy to test changes before shipping, and performance is great out of the box.

🧑‍💻 Source Code

This entire site is open source. You can check out the code on GitHub:

👉 github.com/ThisIsJustUs/website

If you’re building something similar, feel free to steal ideas—or contribute.

Writing