how i made this site

My portfolio has lived in a Figma prototype, on Wix and on Framer. This time I built it in code: jazz and paper cutouts for the feel, Variant to explore, and Claude Code as my build partner.

4 min read

teamme, with claude code
roledesigner & art director
tools
  • figma
  • variant
  • claude code
  • react
  • netlify
durationabout 2 weeks, 2026
01

overview

cut
the trio, one frame per beat: 8 beats to every jitter tick

at a glance

4homes for my portfolio: Figma, Wix, Framer, and now code
2weeks from moodboard to launch
3.4sone jitter tick that every animation on the site shares
AAWCAG 2.1 level, checked page by page

How might I make a portfolio that shows how I design now, not how I designed a few years ago?

My old portfolio felt behind the times. Designers are shipping with AI now, and I wanted my own site to prove I could too. So instead of another template, I treated the portfolio like a product: a clear point of view, fast iterations, real testing, and a build I could tune down to the millisecond.

four homes

  1. 01figma prototype
  2. 02wix
  3. 03framer
  4. 04code
02

the jam

I've been listening to a lot of John Coltrane, Chet Baker and Stan Getz. Jazz is a tight structure with room to improvise inside it, and that's how I wanted the site to feel: a strict grid and one shared rhythm, with loose, playful pieces on top.

The look came from cutout stop-motion, like the paper animation in the Ratatouille end credits. Shapes move a few frames at a time instead of gliding, so everything feels handmade. That's why the text on this site jitters on a tick, and why the figure on the home page is cut from paper.

my moodboard in figma

what the moodboard asked for

  • Grungy texture — Halftone and dither effects. They became the paper grain and the halftone spotlight behind the reel.

  • Lowercase type — Every heading and label on the site is lowercase, and sentences stay readable.

  • A choppy hero, like jazz — Stop-motion timing instead of smooth easing: the jitter, the page-turn hand, and this reel all step frame by frame.

03

iterations in variant

I used Variant to prototype a handful of directions quickly, then picked the pieces worth keeping and refined them by hand. Seeing four versions side by side made it obvious what felt like me and what felt generic.

v1: a centered manifesto with colliding shapes
v2: calmer, with sage and the eric le wordmark
v3: the cutout shapes get a stage of their own
v4: jazz takes over the hero

what carried forward

sage accentlowercase headlinesthe eric le wordmarkpaper-cut shapes

what i left behind

The pink starburst, the generic lines about "digital systems", and the placeholder case studies. They looked fine, but they could have been anyone's portfolio. The final hero says something only I would say: sweating the small stuff.

04

building with claude code

I designed and directed; Claude Code wrote most of the code. I know enough HTML, CSS and JavaScript to read what it wrote, catch what felt off, and change things myself. The work was a conversation: I described the feeling I wanted, reviewed what came back, and pushed until it matched.

the loop

  1. 01moodboard
  2. 02variant
  3. 03claude code
  4. 04test
  5. 05refine
  6. 06ship

what i tuned myself

  • Copy — I rewrote the case studies line by line, so they sound like me and get to the point fast.

  • Interactions — What you can drag, what happens when the figure picks up the skis, and which secrets are hidden where.

  • Animation speeds — The jitter tick, the page-turn hand, the split-flap numbers. I slowed and matched them until the whole site moved on one beat.

why code this time

Moving to code meant nothing was off limits: real page links with their own previews, a paper figure you can hand a basketball, and timing down to the millisecond. It also meant I could check accessibility on every page instead of hoping a template got it right.

05

craft & accessibility

A site full of motion still has to work for everyone, and for a recruiter with two minutes. Every detail below had to earn its place.

  • Craft & detail — One shared tick, split-flap numbers, tape that slaps onto images, a figure who waves goodbye, and a few secrets hidden around the site.

  • Accessibility — WCAG 2.1 AA contrast with a two-tone sage, a pause-motion button on every page, reduced-motion support, a skip link and visible focus.

  • Recruiter-ready — Recruiter mode fits the essentials on one screen and can be shared as a link. Every page loads pre-rendered, with its own preview card.

  • Personality — The playset on the home page (skis, piano, decks, a basketball and dumbbells) and the studio soundtrack on the about page are all things I actually do.

06

reflection

Directing AI turned out to be a design skill. The better I got at describing intent, and the faster I noticed when something was off, the better the site got. Taste, judgment and knowing when to take the wheel still made the difference.

next steps

  • Keep jamming — The site is never finished. New projects go into the lab as I make them.

  • Keep testing — Watch more people use the site, especially recruiters, and keep cutting what slows them down.