← All posts

July 5, 2026

How I built this website with Claude Code

claude-codeaibuilding-in-publicnextjs
Homepage of saadsalman.org, built with Claude Code

This entire website — the pages you're clicking through, the illustrations, the CMS this post was published from, even the favicon in your browser tab — was built through a conversation with Claude Code, Anthropic's AI coding agent. I didn't write the code. I described what I wanted, reviewed what came back, and steered. Here's how it went.

1. Start with a vibe, not a spec

My first message was one line: "keep a clean white look, take inspiration from Apple and how Claude designs." No wireframes, no tickets. Claude scaffolded a Next.js and Tailwind project, pulled my details from my resume PDF, and had a working site — hero, experience, resume download, analytics hooks — running in a live browser preview within minutes.

The finished homepage: gradient wordmark, hand-drawn payment illustrations, and explore tiles

2. Borrow taste, then make it yours

I shared a portfolio site I liked and said "go creative." Claude drew an entire illustration language from scratch — hand-written SVGs of payment cards, tap-to-pay phones, currency coins, and funnels, each with flat color blocks offset behind ink outlines. That language now runs through everything: the hero, the section tiles, the case-study artwork, the S-coin favicon in your tab, and even my LinkedIn banner.

3. Restructure without fear

The first draft was one long page, and honestly, it was boring. So we split it: a minimal home, then About, Experience, Blog, and Case Studies as their own pages. Copy got trimmed, gradients came in, my photo got a cleaner background and an animated frame. Big refactors are cheap when your pair programmer holds the whole codebase in its head — and checks every change in a real browser, on desktop and mobile widths, before calling it done.

The About page: photo with an offset-color frame and floating sparkles from the site's illustration language

4. Give the site a brain

For publishing, Claude created a Sanity project on my account through its management API, defined schemas for blog posts and case studies, and embedded the editing studio directly into the site at /studio. Content goes live within a minute of hitting Publish — no redeploys, no code changes. The post you're reading right now shipped through that exact pipeline.

5. Ship it like you mean it

Every change was committed to GitHub and auto-deployed by Vercel. When I pointed my Namecheap domain at the project, Claude attached it, told me exactly which DNS records to add, watched the records propagate, and set up the www redirect and SSL. Google Analytics counts visits, project clicks, and resume downloads; Vercel Speed Insights watches how fast the site feels for real visitors.

The ecosystem: Claude Code at the center, orchestrating Next.js, Sanity CMS, GitHub, Vercel, Namecheap DNS, and Google Analytics 4

What I'd tell you if you're trying this

  • Talk in outcomes, not implementations. "How do we track clicks and downloads," plus a reference link, beats any detailed spec I could have written.
  • Ask for proof. Every change was verified in a live browser preview — screenshots at desktop and mobile widths — before I ever looked at it.
  • Iterate out loud. "The intro is too long and boring" and "we need to support rapid publishing of articles and case studies" are both perfectly good code reviews.
  • Keep one design language. When the site, favicon, banner, and blog art share a visual system, everything reads as intentional.

Total build: a few conversations spread across two days. Lines of code I wrote myself: zero. If you've been putting off building your personal site, the excuse pool just got a lot shallower.

Share this post

Get new posts by email

Occasional writing on payments, fintech, and building products. No spam, unsubscribe anytime.