Skip to content
← All Posts

Building My Personal Blog with Next.js 16 and Claude

2026-02-022 min read

I just finished building this blog, and I wanted to share how it came together. The entire process—from initial scaffolding to production deployment—happened in a single session with Claude as my pair programmer.

The Stack

I landed on a modern setup that prioritizes developer experience and performance:

  • Next.js 16 with the App Router and Turbopack
  • TypeScript for type safety
  • Tailwind CSS v4 for styling
  • Bun as the package manager and runtime
  • Markdown for blog posts, processed with unified/remark/rehype

Design Decisions

I wanted a dark, developer-focused aesthetic. The color palette is built around a deep navy background (#0a192f) with gold/amber accents for links and interactive elements. Blog post headers use sky blue to break up the content without overwhelming the page with accent colors.

The typography is Inter, loaded via next/font for optimal performance. I kept the layout typography-first and minimal—no sidebar, no clutter, just content.

Features That Made the Cut

Some features I'm particularly happy with:

Reading experience

  • Syntax-highlighted code blocks with a custom color theme
  • Reading time estimates on each post
  • Next/previous post navigation
  • Copy link button for easy sharing
  • Back to top button on longer posts

Page polish

  • Animated page transitions using Framer Motion
  • Full-viewport hero with a gradient text effect
  • Active nav link indicator
  • Custom 404 page

SEO and discoverability

  • Open Graph and Twitter Card meta tags
  • Auto-generated sitemap and robots.txt
  • RSS feed at /feed.xml

The AI Pair Programming Experience

What surprised me most was how iterative the process was. I'd describe what I wanted, see the result, and immediately ask for adjustments. "Use a less harsh white." "Move the yellow so it's not in the middle of the name." "Try mint instead." Each tweak took seconds.

The back-and-forth felt more like working with a designer than writing code. I could focus on what I wanted rather than how to implement it.

Deployment

Deploying to Vercel was straightforward—one command connected my GitHub repo and set up automatic deployments. Now every push to main goes live automatically.

What's Next

The foundation is solid. Future improvements I'm considering:

  • A projects section to showcase my work
  • Newsletter signup for subscribers
  • Comments via GitHub Discussions
  • Search across posts
  • Auto-generated Open Graph images

For now, I'm happy with where it landed. Sometimes you just need to ship.