Building This Blog — Why and How

Why I Built This

I've been doing DevOps and infrastructure work for a while, and I kept solving the same kinds of problems — writing throwaway notes in Notion, losing context after months, and rediscovering things I'd already figured out.

The idea was simple: make the notes public. If I'm writing it down anyway, I might as well put it somewhere searchable, shareable, and mine. No algorithm, no platform risk, no editor telling me what to write.

This blog is my public second brain — posts, TILs, infra experiments, and whatever else I find worth documenting.

The Stack

Next.js 16 (App Router)

The foundation. I wanted full React control, fast static output, and a mature ecosystem. The App Router gives me layouts, server components, and API routes all in one place — no need for a separate backend for things like the newsletter endpoint.

Fumadocs

Fumadocs is a documentation framework built on top of Next.js. It handles MDX processing, content collections, search, and routing out of the box. I'm using it slightly outside its intended use case (blog posts instead of docs), but the ergonomics fit perfectly.

Content lives in content/posts/ as .mdx files with a frontmatter schema enforced by Zod:

schema: frontmatterSchema.extend({
  date: z.string(),
  tags: z.array(z.string()).optional(),
});

Tailwind CSS v4

Styling is all Tailwind. Version 4 dropped the config file in favor of a CSS-first approach — less boilerplate, faster builds.

Radix UI + shadcn/ui

Unstyled, accessible primitives from Radix UI, composed into components following the shadcn/ui pattern. I own the components directly in the repo — no magic dependency pulling in styles I can't control.

GSAP

GSAP for animations. The newsletter widget fades and slides in with a 0.5s delay, and animates out on close. Blog post content uses staggered fade-in on load. Smooth, performant, and doesn't fight with React's rendering.

react-hook-form + Zod v4

Form handling for the newsletter subscription. react-hook-form manages state and submission, Zod v4 validates the schema. I wrote a small custom resolver bridge since @hookform/resolvers doesn't support Zod v4 out of the box yet.

next-themes

Dark/light mode with zero flash on load. Works seamlessly with Tailwind's dark: variant.

Sonner

Toast notifications. Minimal, good-looking, works well with the dark theme.

CI/CD

GitHub Actions handles the pipeline. On every push, it lints and builds the project. Deployments go through Vercel, which picks up the Next.js output natively.