Back to home
Side project · 2026 Design

A résumé you can zoom

Apple shipped a bracket navigator for the World Cup and I couldn't stop playing with it. This is what happened when I pointed that interaction at my own career: fifteen years of work you can read at three altitudes, built in the open with Claude Code, one numbered version at a time.

3
altitudes: the arc, a comparison, one stop in full
8
numbered versions, from faithful replica to working system
0
frameworks. One HTML file, vanilla JS and SVG
The spark: a scrubber that changes what you see, not just how much

Apple Sports added a bracket view for the 2026 World Cup. The pill-shaped scrubber under the round labels is magical: drag its edges and it widens or narrows, and the content below doesn't just scale, it changes form. Zoomed out you get the whole tournament tree. Zoomed in you get full standings tables with stats. The data never changes; how much of it you see at once does.

Inspiration — Apple Sports, FIFA World Cup 2026 bracket
Apple Sports World Cup bracket view with the resizable scrubber spanning group stage and round of 32

A career has the same shape problem a tournament does. A recruiter gives it thirty seconds and wants the whole arc. A hiring manager wants to compare two or three chapters. An interviewer wants one story in depth. Those are three different documents, and most portfolios only build one of them. A resizable lens could serve all three from the same data.

From replica to system, in eight versions

The first version copied Apple's screen almost exactly: navy gradient, phone frame, my career mapped onto tournament rounds with connector wires between eras. It demoed well and it lied. Careers don't have matchups, so the bracket went and the zoom stayed.

What's left is three altitudes for three audiences. Zoomed out, each era is a headline with a chapter title and a row of colored dots showing the mix of work. Mid-zoom brings in individual wins, tagged by type: research craft, design, ops, leadership, built product. Zoomed to one stop, you get the full story with dates, metrics, and links into the case studies on this site. The band under the scrubber tracks the arc from IC years to player-coach.

Built with Claude Code as one HTML file, versioned like a product across eight numbered snapshots. Designer peers poked at every round; their notes were small (a green selection box instead of black, quieter metric pills, less clutter around the scrubber) and each one shipped as its own version.

Drag the ‹ › edges to zoom · drag the window to move through time · tap a stop to focus it
IC years
Player-coach
Open

Related work