I learned to build with Claude Code by giving myself the one brief I knew best: design and ship a motion-led portfolio from scratch.
I wanted to understand AI as a tool that could earn a place in my daily work, and I learn fastest by building something real.
I set the brief myself: take design, the thing I do best, and use Claude Code to carry it from blank repo to a portfolio live on my own domain. If AI could help me ship this, I'd trust it with the rest.
Static design, motion & animation, live HTML5 banners and email: the breadth of real client work in one place.
A distinct art direction with motion baked in, so it reads as a craft piece.
Edit every project in the browser, no code, and ship updates to a real domain on a real pipeline.
I stayed in the seat I'm strongest in, art direction and decisions. Claude Code handled the engineering: scaffolding, components, motion wiring, and the deploy plumbing I'd never touched before.
Static-site generation. Ships as plain HTML for speed, with content modelled as JSON per project.
Decap-compatible. Every project editable in the browser at /admin, no code required.
ScrollTrigger + Flip for choreography, Lenis for smooth scroll. Respects reduced-motion.
Push to main builds and deploys to Cloudflare Pages in seconds, with failure alerts.
A near-black stage so the work carries the colour. One acid accent. A "format language" runs throughout: ratio chips, crop-mark corners, a marquee strip, turning the mechanics of design into the brand itself.
Near-black stage · off-white ink #f2f0ea
One acid note, used with restraint
Variable width, expanded caps for display
Labels, ratios & indices
Project tiles autoplay muted video as they enter the viewport, and lazy-load so nothing bloats the page.
GSAP ScrollTrigger + Flip drive transitions; Lenis smooths the whole journey down the page.
Honours prefers-reduced-motion, so motion never blocks anyone.
Hover reveals crop-mark corners; a client-logo grid and marquee anchor the lower page. Every detail came out of a design call I made and Claude Code implemented, including the late fixes for scroll stutter and mobile marquee jank.
The hardest part of any portfolio is keeping it current, so I built it to keep me in control: log in at /admin with GitHub and edit any project, reorder the homepage by drag, or rewrite the hero copy, and it's live in a minute or two.
Brand & campaign stills across galleries, true to ratio and full-bleed.
Video in any aspect, 9:16, 4:5 and 1:1, with section dividers and replay.
Real index.html ads rendered live at true pixel size, with a Replay button.
Email campaigns shown live and as image, the full deliverable range.
An unfamiliar stack and a domain I now deploy to on a single push, built by directing AI rather than fighting code. In eleven days I went from "can AI really help me?" to "I just shipped this."
I had AI audit the running site, then worked the list the same way I built it: direction from me, execution in minutes, a steady pass for weight, motion and clarity.
I re-encoded the imagery to WebP, about 24 MB off the payload, −78% on images. I pulled the motion libraries and fonts in-house too, so type and motion no longer wait on a CDN before the page settles.
The name now pen-traces itself along its real letterform outlines, the accent dot pulsing like a REC light. One crafted first-paint moment, chosen over five stacked effects.
A full-screen mobile menu reaches every section, static tags lost the hover that faked a link, and the case studies moved under one clean hub. A one-tap copy-email gives visitors a way in beyond a bare mailto:.
I designed this. AI made execution cheap, so I spent my time on the design instead of the code.