Tim Shephard

How this site was madeOctober 2026

How this site was made.

I directed it. Claude Code wrote the code and the first drafts. The copy was rewritten from my own emails and notes, and every line was checked against a facts file before it shipped.

01How it got here

Fifteen rounds, thirteen prototypes, three directions

Before this site there were fifteen rounds of prototypes, October 2–11: thirteen named directions, a 3D world you scrolled through, and a film built in Blender. None of them shipped. The scroll cameras janked on my phone, the effects got ahead of the work, and they took longer than a website should.

What survived were the small moments that come out of real work: robots next to Ecrion, paint next to the KAB rebrand, lanterns next to Beirut. Then Claude Code built three directions to one brief, and I picked the Workbench.

  • The ONE, The Index direction's home page, first screen, October 2026
    ONE, The Index Editorial. Oversized type and an index you read like a magazine.
  • The TWO, Feature Presentation direction's home page, first screen, October 2026
    TWO, Feature Presentation Cinematic. Full-bleed frames and chapters, like a film.
  • The THREE, The Workbench direction's home page, first screen, October 2026
    THREE, The Workbench The career as real objects on a bench you pick up. This one.

02What I did

Direction and decisions

  • Wrote the brief: the site has to win work, for a local business owner and for a recruiter.
  • Wrote the rules: a facts file for every claim, and who gets credit for what.
  • Called every round, and picked this direction from three.
  • Ruled on every figure. The Giphy figure is 4.6M+ because I ruled that only the illustrated GIFs count.

03What AI did

Claude Code (Anthropic's Claude)

  • Built the prototypes and this site.
  • Wrote first drafts, each marked in the source until it was rewritten.
  • Went through my email, drives and old sites to inventory the work and find who did what.
  • Ran the checks on every page: speed, accessibility, and the facts.

04What people did

The work was made with people

  • Grey (pro bono): agency on KAB's national PSA.
  • Alex Savchuk: design on the KAB rebrand.
  • A student illustrator: the rebrand's line art, under my direction.
  • Phil Jones: design on the Pali Mountain brochures, which I directed and edited.
  • My team at DHS S&T, across video, interactive media and graphic design.

05Tools

Tools

  • Astro, built to plain HTML. Every page works with JavaScript off.
  • The bench is plain TypeScript: Canvas 2D for the paint, lanterns and fireflies, a small physics loop for the robots, CSS for the paper and posters.
  • Design tokens in the W3C format, built with Terrazzo. Fonts: Red Hat Display and JetBrains Mono, self-hosted.
  • Playwright, Lighthouse and axe to check every page; ffmpeg for the images.

06Kept and thrown away

What I kept, and what I threw away

Kept

  • Real work only: the posters, the robots, the report screens, the drawings from Beirut.
  • Small moments next to the work they come from, never in the way of it.
  • The facts file. The build fails if a page gets my PSA role wrong (I was Creative Director on it) or uses a figure I haven't cleared.
  • Plain pages that load fast and read with JavaScript off.

Thrown away

  • The 3D world and the scroll camera.
  • The film as the home page.
  • Counters and "edition" numbers that weren't true.
  • Copy that sounded like an ad for AI.

One real edit is on the home bench: pick up the ISCS memo (08) to see an AI draft line and the line that shipped. Go to the memo

07Also built

Other things I've built