This Website.
Built in public. Prompt-led. Fully owned.
A personal brand platform rebuilt from scratch — strategy, SEO, design, and code — using Claude Code and Next.js.
Most personal sites are glorified CVs.
The original site was built with Rocket.new — fast to launch, limited in control. Image filenames were auto-generated timestamps. Page titles didn't include my name. Meta keywords were identical across every page. Testimonial placeholders sat empty. CV links pointed nowhere. It looked fine. It wasn't working.
No name in inner page titles. No schema markup. No topical content. Zero authority signals.
Three empty testimonial slots. Broken CV download. Dead prototype links.
Generic tag-dump skills sections. No editorial voice. No visual distinction.
Strategy before a single line of code.
CLAUDE.md first
A master instruction file written before any code — design system, brand rules, SEO rules, component logic, image naming convention, what NOT to do. Claude Code reads it at session start.
SEO as architecture
Page titles, metadata, schema markup, image filenames, alt text, internal linking — all defined upfront, not bolted on after.
One prompt per page
Each page built in a focused session with a complete, structured prompt. No vague instructions. No context drift.
Assets before build
All photos renamed to descriptive kebab-case filenames. Logos assigned to correct background contexts. CV hosted properly. Everything in /public before Phase 1.
Every tool chosen for a reason.
Next.js 14 (App Router)
Full SEO control: metadata API, sitemap.ts, robots.ts, dynamic OG images, schema markup.
Claude Code
AI-assisted development with persistent project context via CLAUDE.md. One session per page.
Tailwind CSS
Utility-first, no design system overhead, consistent spacing and colour tokens.
Framer Motion
Scroll reveals, magnetic hover, viewport animations — all lazy-loaded so they don't block paint.
Vercel
Zero-config deployment, automatic HTTPS, Core Web Vitals monitoring, domain management.
Resend
Contact form email delivery, simple API, reliable deliverability to Gmail.
How it was built, in order.
Strategy & Audit
Full site audit of the Rocket.new version. SEO gap analysis across all six pages. Metadata rewrite for every page — unique titles, descriptions, keywords. Image asset inventory and naming convention defined. Design system specified: Bebas Neue + Playfair Display italic + DM Mono, #f7f5f0 warm white / #080808 near-black, alternating section rhythm, custom cursor, magnetic hover, scroll reveals.
Foundation — Claude Code Session 1
CLAUDE.md master instruction file created first. Next.js 14 project scaffolded with TypeScript and Tailwind. Three fonts configured via next/font/google. Nav and Footer components built with logo logic (black mark on white sections, white mark on black sections). Custom cursor component (dot + lagging ring, mix-blend-mode multiply). Centralised metadata system in /lib/metadata.ts. PersonSchema JSON-LD added to homepage. Sitemap and robots.txt auto-generated.
Homepage — Claude Code Session 2
Hero split layout with portrait (greyscale filter + scanline overlay), topographic texture background on left column. Auto-scrolling ticker. Entry cards with full black invert on hover. Metrics grid on black background. Capabilities, Labs preview, Mindset strip, CTA band. Framer Motion whileInView reveals on every section. Magnetic hover on all CTA buttons.
Inner Pages — Claude Code Sessions 3–7
Proof, Labs, About, Contact, Insights — each built in a dedicated session with a complete structured prompt. Unique metadata per page. BreadcrumbList schema on all inner pages. MEDDIC article written and published in MDX. Contact form wired to Resend.
SEO & Launch
check-seo command run on every page. Placeholder links replaced: LinkedIn, CV download, prototype links. Copyright year corrected. Deployed to Vercel. Domain pointed. Sitemap submitted to Google Search Console.
Every decision has a reason.
Typography
Bebas Neue for all display headings (architectural, zero-compromise). Playfair Display italic for editorial accent moments. DM Mono for everything else — body, labels, UI. The contrast between typefaces carries the editorial identity.
Colour
#f7f5f0 warm off-white base. #080808 near-black. No gradients. No colour accents. Strict monochrome. Sections alternate white and black — the rhythm creates pace.
Motion
Custom cursor with lagging ring. Magnetic hover on CTAs. Scroll-triggered reveals. Entry card full invert. All Framer Motion imports are lazy — no paint blocking.
Logo logic
AC_White (black mark) in nav on white background. AC_Black (white mark) in footer on black background. The square disappears into the section. Only the mark is visible.
A non-developer built a production-grade site.
This site was built without writing a single line of code manually. Every component, every metadata file, every animation was produced through structured prompting in Claude Code — informed by a pre-written CLAUDE.md, a clear design system, and a sequenced build plan. The result is a Next.js 14 site with full TypeScript, proper SEO architecture, a custom motion system, and a contact form wired to a real email API. If you're a founder, builder, or operator thinking about what AI-assisted development actually looks like in practice — this is one answer.