How this site was built.
No Figma file. No Framer. Locked copy, good taste, and AI in the toolbelt.
The Short Version
This site was designed and built using Claude Code. No Figma file. No Framer. Just locked copy, good taste, and AI as a force multiplier.
The Stack
- +Next.js 16 with App Router and React 19
- +TypeScript
- +Tailwind CSS 4
- +GSAP for scroll-driven animations
- +Claude API powering the “Ask Cam” chatbot
- +Vercel for hosting and deployment
- +PostHog for analytics
The Point
I tell hiring managers I ship production software and that AI is part of the toolbelt. The previous version of this site was on Framer, which is a fine tool, but it made that claim feel slightly hollow. If I'm saying I ship, the site should be proof of that, not a contradiction.
So I rebuilt it. The copy was already locked in Notion. The design direction came from studying Linear, Vercel, Stripe, and Raycast's design systems. Claude Code handled the implementation. The judgment calls, the restraint, and the taste were mine.
AI generates output but not taste. This site is what that looks like in practice.
Typography
Space Grotesk for display and headings. Geist Sans for body. Geist Mono for labels and code. Aggressive negative letter-spacing on display text, inspired by Linear and Vercel. The hierarchy is size and weight, not colour.
Features You Might Not Have Noticed
- +Press \u2318K for a command palette
- +Press ? for keyboard shortcuts
- +The \u201cAsk Cam\u201d chatbot is powered by the Claude API with full career context
- +Dark and light mode with system preference detection
- +Reading progress bar on long-form content
- +Subtle grain texture overlay and ambient background glow
- +Scroll-driven text reveal on the About page
- +G-then-key navigation (try G then H for home)
- +JSON-LD structured data, llms.txt, and proper sitemap for AI and search visibility
- +All animations respect
prefers-reduced-motion