en Smith
All work

Hello, Ben Smith

This Site, Built with Claude Code

How I rebuilt this portfolio with Claude Code, an AI-augmented workflow that ran from audit to design system, tests, and deploy.

Role
Creative direction, in collaboration with Claude Code
Client
Hello, Ben Smith
When
2026
Platform
Web (Astro, Svelte)
Lighthouse accessibility, best practices, and SEO
100
Lighthouse performance, mobile (local test)
98–99
JavaScript shipped, gzipped and deferred
≈15 KB
Lines of legacy code removed
−24.8k

The brief

I gave Claude Code a deliberately hard brief: rebuild my portfolio so it would earn a ten from three very different judges. One was a TypeScript, Astro, and Svelte developer. One was a UI and product designer. One was a recruiter.

What we started with

My previous site was a generated React app with an Express and Postgres backend, about ninety dependencies for five sections of content. The first pass was an audit, and it was humbling. The “portrait” was a stock photo of someone else. Several case-study metrics had no source. The contact form saved messages somewhere they were lost. The headline font never actually loaded.

How we worked

I set direction and made the calls. Claude Code did the engineering and much of the design exploration, and it checked its own work at every step.

  • Grounded in facts. Every claim on the site is checked against my resume. Anything that couldn’t be sourced was removed rather than polished.
  • Verified, not asserted. Each change was type-checked, built, screenshotted in light and dark themes on desktop and mobile, and run through automated accessibility tests before I saw it.
  • Critiqued like a jury. Midway through, Claude Code scored the site the way each judge would, including the parts that cost points. The fixes came from that list: motion on the covers, facts beside the headline, and removing the legacy code.
  • I kept the decisions. Deleting the old code, going live, and updating my resume were my calls.

What the checks caught

This is the part I find most useful about working this way. The tests and screenshots caught real bugs before visitors did. A CSS specificity mistake stretched every cover animation to the same 2.2 seconds. Canonical links pointed at URLs that redirect. A longer URL shrank two resume links below the minimum tap size. And my own domain turned out to have no DNS records. Each fix now has a test so it stays fixed.

The stack

Astro 7 with static output and three small Svelte 5 islands, strict TypeScript, and a token-based CSS design system with cascade layers and light/dark themes. Fraunces is instanced to the axes the site uses, and Funnel Sans is self-hosted. Playwright and axe check WCAG 2.2 AA on every page in CI, Dependabot keeps dependencies current, and the site deploys on Vercel.