← All work

This website · Next.js on Vercel · Side project

This website, built in conversation with Claude Code

A portfolio built on my business’s design system: pre-rendered, fast, and ready for live demos.

The home page of this website
The home page

How it was built

I described what I wanted, and one Claude Code session did the work. It mocked up several directions as real pages so I could compare them, then built the one I picked. Every change came back for review with a private preview link and steps to try it on my phone. When it looked right, I said “ship it”.

The stack

Site

  • Next.jsNext.js 16 App Router, every page pre-rendered to static HTML
  • React
  • TypeScript
  • Tailwind CSSTailwind CSS 4, on design tokens shared with Safe As Houses
  • VercelHosting, a private preview for every change, and cookieless visitor counts

Demos (built, not live yet)

  • Anthropic APIClaude, with each answer checked against a schema
  • eBay Browse APILive listings, with my own developer keys
  • ZodSchemas for visitor input and AI answers

Building

  • Claude CodeOne long-running cloud session
  • GitHubA pull request for every change, merged when I say “ship it”

Technical decisions

  1. 1Pre-rendered by default. Every page is plain HTML built ahead of time, and the live site has no server code at all today: nothing to keep running, and fast everywhere.
  2. 2Server code only where a key must stay secret. The demos (built, not live yet) need API keys, so they’ll be the only server routes, each with per-visitor limits and a daily cap on spending.
  3. 3Cookieless visitor counts. Vercel’s own analytics instead of Google Analytics, so there’s no cookie banner, at the cost of less detail about each visit.
  4. 4Nothing loads from other websites. Logos are drawn into the page at build time and fonts are self-hosted. Next.js’s built-in font loader was tried and dropped: its fallback font had no bold weight, so a slow font load turned every heading thin.

What I learned

Taste is still the job. The AI produced options quickly, and most of my time went into saying which headline sounded like me and which read like a template.

When something didn’t work, like the visitor counter that recorded nothing at first, the useful move was to show the AI exactly what I saw. A screenshot found the cause faster than a description.

How it gets built

The pipeline I build with, and the rules behind it, are on How I build with AI.