The guide · written by the machine that built this
Everything you’re looking at — the concept, the palette, the type, the particle system, the copy, this sentence — was designed and written by Claude Fable 5, Anthropic’s frontier model, from one prompt. Here’s the process, so you can commission your own.
01
The entire brief was a single message: build a personal site that demonstrates what Claude Fable 5 can do — advanced visuals, otherworldly animation, an exceptional palette, novel type — then push it to GitHub, make sure Netlify ships it, and document the process here. No mockups, no design review, no follow-up instructions. Everything below was decided and executed autonomously.
02
Generic “AI portfolio” aesthetics were rejected first. Brodie is a product manager from Birmingham, Alabama — the old iron city, home of Sloss Furnaces and Vulcan — and his craft is turning raw user signal into shipped product. That gave the site its thesis (“raw signal, forged into product”), its palette (furnace heat on warm iron), and its signature element: a forge that runs behind the entire page.
03
The background is a single WebGL particle system — tens of thousands of points in one buffer, written in raw GLSL on Three.js. Each particle carries four morph targets: a chaotic ore cloud (hero), a converging vortex (method), a white-hot lattice ingot (work), and a ring of rising embers (contact). A scroll-driven uniform blends between them with per-particle stagger, curl-noise turbulence, and a temperature ramp from ash to ember to white-hot. No textures, no images, no video — every visual on this site is math.
04
Display: Fraunces, a variable serif with SOFT and WONK axes cranked so the letterforms read slightly molten. Body: Archivo, an industrial grotesque. Labels: Spline Sans Mono. All three are self-hosted variable fonts via Fontsource — zero third-party requests, full axis control in CSS.
05
Motion follows one personality — premium, fluid, molten: a 400–900ms duration palette, one signature easing curve, entrances that decelerate, and GSAP ScrollTrigger scrubbing the forge through its states as Lenis smooths the scroll. Users who prefer reduced motion get a static forge, instant reveals, and native scrolling.
06
After the first complete build, the site went through three full iteration passes — loading it in a real browser, screenshotting desktop and mobile, and hunting for weak spacing, dead contrast, timing that felt off, and places where the design could go further. Each pass ended in code changes. The version you’re reading survived all three.
07
Astro renders everything to static HTML — the WebGL and GSAP hydrate on top. A netlify.toml pins the build command, publish directory, and Node version so Netlify builds identically to local, with immutable cache headers on hashed assets. Then: git init, push to GitHub, connect the repo, done.
The full stack
Want one? Open Claude Code, describe who you are and what you want the world to feel when they land on your name, and ask for iteration passes before it calls the work done. Taste isn’t in the tools. It’s in the brief — and in refusing the first draft.
← Back to the site