Everyone can vibe code. But design is iterative, not a one-shot process. The magic is being able to refine faster than ever, in a real environment. This is every version of this site, start to finish.
v3.5.12026-10-28
Feels Native on a Phone
Platform fixes so the site behaves like an app on a phone: no stuck hovers, no tap flash, carousels that don't pull the page back.
•Hover styles only apply where a pointer can hover (Tailwind hoverOnlyWhenSupported), so a tap no longer leaves a button or card stuck in its hover state
•No grey flash over tapped controls, no double-tap wait, and a long press no longer selects a button's label
•Swiping past the end of a homepage carousel no longer drags the browser into going back
•The browser bar matches the page (theme-color), and the lightbox sizes to the visible screen (dvh)
Built with:Claude Code
v3.5.02026-10-28
Homepage Carousels and Typeset Articles
The homepage sections become simple ¾ carousels with no tabs, results read as a sentence, and essays and case studies are set with shadcn/typeset in a centred column.
•Homepage: every section is a row of ¾-width cards inside the page column, the next one peeking; arrows beside the section title; no tabs and no dots
•The card in focus plays its clip; the others are blurred and hold a still until they slide to the front
•Each card keeps one button, on its title row and right-aligned, so only the card in focus shows one
•Impact reads as one sentence (numbers in ink, the rest grey) on the homepage and under a case study's title
•Everything below the hero sits on the logo's left edge; the hero and the colleague quotes stay centred
•Essays and case studies: shadcn/typeset styles the words in a centred column, with pictures and clips wider than it
•Case study hero reels sit straight on the study's colour (no dotted panel), and each clip says what it shows first, the way Cursor's feature reels do
•Sections no longer fade in as you scroll; captions are centred
•Parked (dev only, see /parked): a binary decode text effect and a 3D curved carousel with sliders
Built with:Claude Code
v3.4.02026-10-27
Recording Studio in the Repo
Case study clips are made and edited from this repo with the html-recording package, and the recorder download includes Recording Studio.
•html-recording is a devDependency: npm run replays opens Recording Studio on public/replays, and npm run replays:record runs a clip script
•Clip scripts live in scripts/replays/ (starting with the RFP study), so they no longer disappear with the workspace that made them
•The html-recording download now includes Recording Studio, zooms that follow the mouse, and the npm package
Built with:Claude Code
v3.3.42026-10-26
Impact Cards in One Row
On desktop the homepage impact cards sit side by side in one row instead of wrapping onto a second line.
•The cards take the full width of the section; only the title and summary keep the reading width, which was pushing the third card onto its own line
•From laptop width up the cards never wrap
Built with:Claude Code
v3.3.32026-10-22
Phone Header, Impact Cards and a Silent Wallbounce
The header fits on a phone, the homepage drops its impact cards there, and the live Wallbounce plays without sound everywhere.
•On phones the header shows GC instead of the full name, which was wrapping onto two lines beside the menu; the links sit a little closer
•The impact cards under each homepage piece are desktop-only; on a phone the case study has them
•Wallbounce on the homepage is silent at every size: the game's audio is held suspended, so the keys pressed for it no longer start its music
Built with:Claude Code
v3.3.22026-10-22
Swipe Through the Homepage on Phones
Phones swap the tab row and arrows for a row of heroes you swipe sideways.
•On phones the tab row under each section heading is gone; there wasn't room for it
•The heroes sit in a sideways-scrolling row that snaps piece to piece, the next one showing at the edge; the words above and the dots below follow the swipe
•Tapping a dot scrolls the row to that piece; desktop keeps the tabs, arrows and detail cards
The carousel window's colour now meets its border, and phones get each piece's hero without the detail cards.
•Fixed a white sliver between the carousel window's hairline border and the clip inside it: only the slides either side are clipped now, the one showing stays flush
•On phones the homepage shows each piece's hero frame alone; the detail cards underneath are desktop-only
Built with:Claude Code
v3.3.02026-10-22
Case Study Pages in the New Look
The case study template, restyled to match the homepage, ready for the studies to come back on. Essays share the new type.
•A case study opens left-aligned: what it is, the title, the summary, then what it made possible as cards (the homepage's impact), then its hero on the study's own colour
•Pictures and clips sit on a flat mat in the study's colour (a quiet grey on essays) in a soft-shadowed window, instead of the orange watercolour
•Words read in a 680px column from the left edge; pictures, clips and live pieces take the full width
•Before and now side by side: the old way in a quiet card, the new way on the study's colour
•Larger headings and body type, left captions, stat cards like the homepage's
Built with:Claude Code
v3.2.02026-10-22
Wallbounce, Live, and Impact as Scale
Wallbounce on the homepage is the game itself, running: its new menu stepping through itself, and its three tools up close. The Enterprise AI pieces show what AI made possible in scale and depth.
•The site's build of Wallbounce updated to the latest game (new Lock-on menu, versus, horde, speedrun board)
•Hero: the live game on its menu, pressing down and up through Solo, Multiplayer, Learn, Palette and Options
•Details, each the live game zoomed in: a TAS run with its path traced, the tuning sliders beside play, and the frame strip on the timing examples
•Live sites on the homepage can be laid out at a set size and zoomed into a region, and can press keys in turn on this site's own pages
•Winning a tender: 1 designer where it took 3 to 5 plus engineers; days, not weeks, for a feature; one prototype in English and in Polish
•The agent-built website: 10 versions in a day from one tagline; 2 of 5 then 5 of 7 got the offer across two rounds of tests
Built with:Claude Code
v3.1.02026-10-21
Shader Wall, Live: the Real Shader in Its Replays
Shader Wall's clips draw the app's own Paper shaders live, from the settings the recording shows, instead of a few soft stills a second. Plus a CV in the new look, a tab icon, and the carousel dots under the whole group.
•Shader Wall replays: each wallpaper and preview runs the real shader (Paper's, as the app uses), reading the selected preset, its sliders and its colours from the replayed page, so it is sharp and moves smoothly
•Its registry (content/shaderwall-registry.json) is Shader Wall's own list of 24 shaders, taken from shaderwall.com
•The recorded stills are gone from the recordings: about 220 KB each instead of 2 to 2.7 MB
•Shader Wall's hero is now its replay (the whole desktop clicking through presets) instead of the live site in a frame
•CV in the new look: name and summary, the PDF, a timeline with every highlight, education and skills side by side, kind words as quotes
•A tab icon: a G in the site's amber, in Geist, plus a home-screen icon
•The carousel dots sit under the piece and its details, since they move all of them
Built with:Claude Code
v3.0.22026-10-21
Homepage Polish: Whole Apps, a Readable Funnel, Fewer Pieces
Dispatch's details show the whole app with even margins, SEEK's funnel is redrawn to read at card size, and the homepage drops what isn't ready.
•Dispatch details (Grokbot, covers, collections): the whole window and its Kindle, even margins, straight on the card's colour. The site's page is hidden, so only the named windows show
•Window shadows sized to fit the margin (the site's 90px shadow was cut off square at the crop), and no more hairline from the next slide at a card's edge
•SEEK funnel redrawn for the card: big type, solid SEEK pink for the three leaks, what was wrong beside each
•Creative tools: full width, one at a time, Balatro first then Wallbounce
•Testing on live models (Configurator) hidden on the live site until it's ready
Built with:Claude Code
v3.0.12026-10-21
Homepage Polish: Smooth Clips, Apps on Their Own
The product clips stop flickering when a button is pressed, Dispatch and Thesis sit on a plain mat without their sites' black page, and the AI section is tightened up.
•No more flicker on clicks: an app that redraws itself made fresh elements for its artwork, which painted blank until the image loaded. Every picture a recording uses is now loaded (the way a CSS mask asks for it) before the clip plays
•Dispatch and Thesis: just the app (and Dispatch's Kindle) on a soft mat of their colour, in place of the shader and the black page around them
•AI section: Settings removed; tabs say what each piece is (Winning a tender, Testing on live models, An agent-built website)
•The website's phone still re-captured on the site's own Enterprise AI blue, on a blue mat
•New detail: name the next client and the app re-skins, from Nike to Qantas, cropped close from the site's replay
Built with:Claude Code
v3.0.02026-10-20
Launch: the New Site, Case Studies to Follow
The redesign goes live with Home, About, Essays, CV and Contact. The showcase is the homepage; the case study pages wait on the dev server until they're ready, and nothing on the live site links to them.
•The showcase design is the default homepage. The live site ignores flags saved in the browser, so everyone sees the same page
•Case study, product and small-study pages (and the /projects index) are a real 404 on the live site; the eight essays stay open
•The homepage keeps every piece and its impact; "Read case study" links go, and Wallbounce and Balatro link to their essays as "Read the essay"
•Essays page in the new look: big heading, a line on what they're about, one roomy row per essay, the site footer
•Essay pages lose the boxed panels, read in a column, and end with "More essays" instead of the placeholder project grid
•Contact page in the new look: "Say hello", the email up front, the form beside three short notes, the site footer
•The job dialog on About drops its "coming soon" picture placeholders and inline case studies; chat cards for a hidden case study no longer link to a 404
•Production deploys are back on (vercel.json removed)
Built with:Claude Code
v2.2.02026-10-20
Showcase Homepage: a Piece Big, Three Details Under It
A new homepage design behind ?design=showcase, built from the Paper frame: each section shows one piece at a time, as big as the column, with three details of how it works underneath. The arrows move the piece and its details on together.
•Products: Shader Wall, Dispatch and Thesis bare (no frame, they're busy enough), each with three details in its own colour
•Shader Wall's details are recordings of the app on shaderwall.com: dragging sliders, Claude adding an intensity slider over MCP, and clicking through presets. Its WebGL is caught as frames laid over the canvas
•Dispatch and Thesis details are crops of their app replays: the article list, one click to send, the Kindle; a claim and its bet, the scores, the draft
•The case studies and past work sit in a frame of their own colour; what they did (taken from each case study) sits under the description as small bordered cards, then the links
•Creative tools run as a ¾ track that bleeds off the window, with the details "Up close" underneath
•Colleagues' words centred on the page, read from the left: Winnie, then Ahmed, then Richard
•The arrows sit either side of the piece, halfway down it, with quiet dots underneath for where you are
•Click any piece or detail to see it big in a dialog; arrow keys step through the rest of that piece
•The carousel stays put when you move on: the piece slides through its frame like a track, its words and details slide with it, its colour fades across, and the next piece is already playing when it arrives
•A fuller footer: name and a line, then X (@garethchainey), LinkedIn, Email and Changelog, then the small print
•Interaction of Color joins Creative tools (dev only, like the series)
•Fix: Shader Wall's dock had a second, wider pane behind it. Live sites now draw at their own size instead of being shrunk
•Fix: a recording shown twice on one page (a piece and a crop of it) rebuilt itself twice, one copy under the other
•Fix: a one-clip reel (Best Practice, SEEK) played once and stopped on its last frame until clicked; it now goes round again
•An About page in the menu: the About, a timeline of where I've worked (click one for the full story) and the product thinkers, in the new look with no panels
•Dispatch's app sits on a moving shader
•New details recorded from the Dispatch and Thesis sites: Grokbot, a collection's drawn covers and collections that fill daily or by theme; connecting Amplitude, PostHog and Linear, and an agent drafting an assumption test
•SEEK's details: the funnel from the case study, an A/B of the first course card against the better one, and the fly-out
•New copy for the RFP and Configurator case studies
•Tabs under each section heading name its pieces (Shader Wall, Dispatch, Thesis…), so the arrows read as moving to another piece, not more of the same one
•SEEK's funnel and A/B and Best Practice's dialogs stand straight on their card's colour, with no grey window round them
Built with:Claude CodePaper
v2.1.02026-10-20
Pieces of the products: a component wall
A wall of small components from the Enterprise AI apps, stacked like a component library. Not on the live site. Click one to see it working in the app it came from.
•24 components from Daisy Assess, Configurator, workspace settings and AI Document Review, rebuilt with each app's real labels, data and design tokens (Geist, zinc greys, grey card footers)
•Cards are dealt into columns by height; ghost columns peek in at the edges and the wall fades out at the bottom until Show all
•Hovering a card dims every card from the other apps, so each app's pieces stand out together
•Clicking opens a dialog with the piece working in its app: the recording of that feature, or the live Add document prototype, with links to the app's other pieces and its case study
•At /kit on the dev server and Vercel preview builds only (KIT_LIVE); production returns 404
Built with:Claude Code
v2.0.02026-10-20
One Opinionated Homepage
The homepage is the hero, then the work one piece after another with colleagues' words between them. Essays get their own page, and the menu is Home, Essays, CV, Contact. Day mode and amber only: no theme menu.
•No switch under the hero any more; the page as written is at ?view=page
•Kind words between the pieces as you scroll: each quote whole, word for word, its best phrases marked in amber as it comes into view
•An Essays page: the plain list, one per row, from the old homepage
•The menu is Home, Essays, CV, Contact, the current page in full colour; Changelog moves to the homepage footer
•The work runs full width in three sections: Products I've made (Shader Wall, Dispatch, Thesis), How AI has changed how I design, then Creative tools (Wallbounce, Balatro)
•The AI section opens with a sizzle reel of the case studies, captions on
•A product's name is its title
•No coloured project labels or section numbers; case studies keep a plain label
•Dispatch and Thesis show their apps open, in dark mode and centred: new replays of the app on each landing page, a few things done in it
•The Enterprise AI site shows its phone section, "On their phone before the meeting ends", as a still
•The new Wallbounce menu plays live
•Day mode and amber only: the theme menu, dark mode, other colours and the CRT effects are gone, and their CSS with them
•Dev only: a Panels switch (Cmd+K, or ?panels=off) to try the homepage without the ruled column and hairlines; there the quotes sit in outlined cards
•Dev only: a design audit page (/audit) that counts the fonts, sizes, colours and corners in use, beside a simpler set
•Geist instead of Inter, everywhere
•The homepage is the Paper frame "website": no panel lines, three sections (Products, How AI has changed how I design, Creative tools), each piece a title, a line, its links and the piece; the earlier list is at ?design=list
•The chat is a popup in the corner, like Intercom, on every page, instead of a sidebar that takes space
•Two more homepages to try, from the Paper frames: ?design=vertical (every clip down the page) and ?design=horizontal, a screen per section, each section one carousel whose title, line and links follow the slide, in three fits: ?fit=full (the piece alone on the page, as big as the screen allows), ?fit=bleed (the piece in a 32px soft amber frame, the next one at the edge) and ?fit=cards (three framed to a screen). Never a full band of colour. Both have Past work, a colleague's words between sections and somewhere to go next
•Dev only: the design review as a page (/review), and an HTML recording that walks through it
•Design v2 to compare (Cmd+K, or ?v=2): six type sizes, two weights, Geist for numbers, one grey, three corners, and working see-through backgrounds
•Fixed: the header's tint never rendered (a Tailwind opacity on a var() colour)
•Fixed: the live Shader Wall page scrolled the homepage down as it loaded
•Fixed: a still in a reel started zoomed in and shrank to fit
Built with:Claude Code
v1.54.02026-10-19
Interaction of Color, chapters I and IV
A new dev-only section rebuilds the exercises in Josef Albers' Interaction of Color, starting with visual memory and the relativity of colour.
•/color lists the chapters; /color/recollection is Chapter I
•Visitors make the red in their head, pick Coca-Cola red from memory out of 160 reds, then remake a colour they saw for two seconds
•The page measures each miss in OKLab and names each colour from about 30 everyday names, Albers' count
•The real Coca-Cola sign, redrawn as SVG in the red measured from coca-cola.com (#f40000), next to the two other reds the site uses
•Upstash Redis (/api/color/reds) keeps every answer anonymously, so each visitor sees how far apart everyone else's reds are
•/color/relativity is Chapter IV: the same small colour on two grounds, with presets for light, hue and both, and a strip that joins the two to prove they match
•A matching test where you set the right rectangle to look like the left, then see how far the ground moved your eye
•Visitors make their own study, switch it to the tile pattern Albers warns against, and add it to a shared exhibition (/api/color/studies)
•The chapters link up as a series: chapter numerals under the title, and previous and next links at the bottom of each one
•Shared Redis client moved to src/lib/redis.ts
Built with:Claude Code
v1.53.22026-10-18
HTML Recording Skill Moves to GChainey/skills
The html-recording skill has its own repo, so the install command reads npx skills add GChainey/skills.
•Install command and source link on /replay-vs-video point at github.com/GChainey/skills
•skills/ and the skill:pack script removed from this repo; the zip is built with scripts/pack.sh in GChainey/skills
Built with:Claude Code
v1.53.12026-10-18
HTML Recording Skill: MIT Licence
The downloadable html-recording skill is MIT licensed, so people can reuse and adapt it.
•LICENSE in skills/html-recording and in the zip
•"MIT licensed" next to the source link on /replay-vs-video
Built with:Claude Code
v1.53.02026-10-18
Record Your Own: the HTML Recording Skill
The recorder behind every clip on the site is now an agent skill, downloadable from the HTML-not-video essay.
•Skill source in skills/html-recording: recorder, player web component, exporter, screenshot check
•"Record your own" section on /replay-vs-video with a zip download and the skills CLI command
•npm run skill:pack rebuilds public/downloads/html-recording.zip from the source
Built with:Claude Code
v1.52.22026-10-17
Visuals Back to Dev Only
The homepage Page / Visuals switch is dev only again until the Visuals list hangs together.
•The switch only shows on the local dev server, like the gallery
Built with:Claude Code
v1.52.12026-10-17
Visuals on the Homepage
The Page / Visuals switch under the homepage hero is live: Visuals shows the work one piece at a time, each playing.
•The homepage switch is no longer dev only
•The /gallery page and its header link stay local for now
Built with:Claude Code
v1.52.02026-10-17
A CRT Over the Whole Page
The theme menu has an Effects section: Off, Glass or Scanlines, a sheet of CRT glass over the whole site, ported from Wallbounce and the Balatro sizing table. Clicks and text selection pass straight through it.
•Effects, under Accent Color: Off, Glass (fine scanlines and a vignette) or Scanlines (darker lines, a lighter vignette)
•One fixed overlay over everything, menus and dialogs included, with pointer-events: none
•Remembered like mode and accent, and set before the first paint so it never flashes
•CSS overlays only: Wallbounce's Tube and Arcade bow the picture through WebGL, and warping a page would break clicks and selection
Built with:Claude Code
v1.51.02026-10-17
Visuals, One Piece at a Time, and Every Recording as HTML
The Visuals tab (dev only for now) shows the work one piece after another: title, a line, the impact, then the piece playing as a replay. The website study and the configurator are now recorded as HTML, the chat waits to be opened, and the hero loses its button.
•Visuals: 19 pieces in order, Shader Wall first, each a replay, video or live site with a title, one line and its impact
•Two layouts to compare: full width (the piece across the column) or side by side; the last one picked sticks
•Open any piece as big as the window allows, with arrows to step through the rest
•The same view on the homepage Visuals tab and the gallery page
•Website study: the hero, the first prototype (21 September) and the round 1 page are replays, not video; the hero has no browser bar
•Configurator: six clips re-recorded from the prototype after its new brand picker ("Whose brand is it in?")
•The showcase and sizzle reels use the website replay instead of the video
•The chat starts closed on the homepage, case studies, CV, How I Work and Thinkers, so pages read wider
•No "Read how" button in the homepage hero
Built with:Claude Code
v1.50.02026-10-17
Five Ways to Show the Work, and a Sizzle Reel (parked)
Five homepage variants that show the products and AI case studies playing straight away, each with a way to read the features and thinking without leaving the page, plus a sizzle reel of all the work at 30, 60 and 90 seconds. All parked to compare at /showcase; the live homepage is unchanged.
•Autoplay: the carousel runs itself, each reel handing over to the next, and the read slides over the stage
•Coverflow: all six pieces on one draggable track, neighbours waiting either side, filter by products or case studies
•Scroll story: full width, each piece a chapter with its features and thinking, beside a stage that stays put and plays the one you are reading
•Billboard: a dark full-width stage washed in each piece's colour, headlines landing word by word, a rail of what's next, and a full read sheet
•The wall: everything playing at once in a bento grid between marquees; click a tile and it grows into the whole piece
•Dispatch and Thesis recorded from their live sites as replays; Shader Wall plays live, since its shader is a canvas
•Sizzle reel at /reel: 30, 60 and 90 second cuts, each clip timed so the reel lands on length
•A showcase reel engine (beside the case studies' reel) that plays video, live sites and stills, fills the stage, runs dark, and waits for each scene to load; RFP scenes come from the case study's own reel
•Launchpad at /showcase to watch every variant and reel; or Cmd+K (Homepage work), or ?home=scrolly and so on
•Fixed see-through panels: Tailwind opacity modifiers do nothing on the theme's CSS-variable colours
Built with:Claude Code
v1.49.02026-10-17
Show, Not List: Homepage Carousels (parked)
A way to show the products and the three AI case studies as one large preview that plays, with the others a click or swipe away, instead of rows of tiles. Parked behind the homepage flag; the live homepage is unchanged.
•Products carousel, Shader Wall first: each product's live site fills the stage, a click from the real thing
•How design has changed with AI: the RFP sizzle reel, the website reel, and a new Configurator reel cut from its replays
•Previews fill a fixed 16:10 stage edge to edge, with no backdrop or browser bar, and cross-fade in place so nothing below moves
•Tabs under each carousel name every slide; arrows, arrow keys and swipe move between them
•Only the slide on screen is mounted, so one reel, clip or site runs at a time
•Parked: Homepage work in the flag drawer (Cmd+K), or ?home=carousel
Built with:Claude Code
v1.48.12026-10-17
Opportunity sizing, but Balatro: no browser bar
The game clips have their own stage, so they sit in the window without the browser bar.
•A window frame for clips: the window on the backdrop, without the browser bar
•The six clips in the essay use it, and the hero reel drops its bar too
Built with:Claude Code
v1.48.02026-10-17
Published: Screen recordings as HTML, not video
The HTML-vs-video comparison is published as an essay, listed with the others, with a link preview for sharing.
•An essay entry (html-not-video) that opens the full-width comparison page, so it shows under Essays and in the feed
•Title, description and a large link-preview card (the scrubber at 4x on the letter, and 158x)
•No longer parked
Built with:Claude Code
v1.47.12026-10-17
Screen recordings as HTML, not video
The comparison page is retitled and says HTML rather than replay, and the letter example is re-recorded with the sidebar collapsed.
•Title: "Screen recordings as HTML, not video"; the labels, sizes and copy say HTML
•The letter example uses the recording with Daisy's sidebar collapsed, and its video is rendered again from it
Built with:Claude Code
v1.47.02026-10-16
Replay vs video: big by default, sizes up front, examples on scroll
The comparison opens on one large window at a time, where the difference shows most, leads with the file sizes, and lays the four examples down the page.
•One at a time is the default view, sized to fill the screen; scrubber and side by side are still there
•Each example leads with how many times smaller the replay is, and the two sizes as bars to the same scale
•Video or replay, and its size, in the window's title bar instead of over the app
•The examples follow each other down the page, and each loads only as it scrolls near
Built with:Claude Code
v1.46.02026-10-16
Replay vs video: three views, four examples
The replay-vs-video comparison gets a scrubber, a one-at-a-time view with full screen, and three more examples, one running the reel's camera over both.
•Scrubber: one frame, video left of a draggable divider and replay right (arrow keys move it too)
•Side by side, or one at a time, large or full screen, flipping between video and replay
•Examples: a letter, zoom and highlight (the RFI camera move over both), AI chat, and a busy Configurator screen; each video rendered from its replay
•The video is the clock and the replay follows it; pause freezes both on the same frame, and changing view keeps the place
Built with:Claude Code
v1.45.02026-10-16
Replay vs video, side by side
A page comparing the same screen recording as a replay and as video, for a post about why the site's recordings are replays.
•The determination letter clip both ways: the video is rendered from the replay frame by frame at 2x and encoded the way the site encoded its videos, so it is the same take and a good encode
•Zoom to 2x, 4x or 8x at the spot under the cursor, in both at once; pause freezes both on the same frame
•Sizes: the video file, and what the visitor's own browser downloaded for the replay (157x smaller)
•At /replay-vs-video, unlisted, and embeddable in a post as the replay-vs-video component
Built with:Claude Code
v1.44.02026-10-16
Narrated app recordings
The RFP case study's app recordings carry the same narration as the hero reel: a line under each clip that says what is happening, timed to the recording.
•Subtitles on recording replays, following the replay's own clock, under the window so they never cover the app
•All seven RFP recordings narrated, timed to their clicks and screen changes
•Narrated clips hold on their last frame for a beat before they loop, so the last line can be read
•One subtitle component shared by the reel and the case study clips
Built with:Claude Code
v1.43.12026-10-16
Daisy clips with the sidebar collapsed
The full-app Daisy recordings are re-recorded with the sidebar collapsed to its icon rail, instead of cropped away.
•Overview, seed data, chat, RFI and determination clips re-recorded with the collapsed sidebar; the reel's opening scene shows the whole app again
•Field values the replayer used to drop (set after typing) are replayed, so the chat clip's editor keeps up
Built with:Claude Code
v1.43.02026-10-16
Reel camera: zoom to the action, highlight the result
Reel scenes can now move a camera: open on the whole screen, follow the cursor in to where the action is, then cut to the result and highlight it. The RFI scene is the first to use it.
•Camera keyframes on reel scenes: each eases the view to a region of the recording at a set time, inside the same card
•A highlighter swipe over a marked line, in the accent colour, once the camera arrives
•RFI: the whole letter and issue list, then in on the issue being ticked, then the letter centred on the line it adds
Built with:Claude Code
v1.42.02026-10-16
RFP: suggestions and Warsaw in the reel, cleaner app windows
Two new scenes in the RFP hero reel, the full-app clips trimmed to the work, and the windows around clips without a made-up address.
•Reel: suggestions drawn from the application, each applied to the assessment in one click
•Reel: the same product set up for a Warsaw opportunity, in Polish, with Warsaw addresses, plot numbers and the Polish planning law it cites
•Full-app Daisy clips have the sidebar trimmed off, so the work fills the window
•No address bar on clip windows: just the window buttons. Red, amber and green buttons are behind a flag (Cmd+K, "Colour window buttons")
•Feature flags now survive a reload on the dev server (the defaults were being saved over them)
•The before-and-after list no longer has a product manager "for direction"
Built with:Claude Code
v1.41.02026-10-16
RFP hero reel: bigger, plainer, and narrated
The RFP case study's hero reel is redesigned so the product is the hero and it reads without the case study around it: a plain title on the left, the product large on the right, and a subtitle at the bottom that says what is happening.
•Full-bleed across the article column, with no backdrop or frame, so the product shows much larger
•Plain-language titles anyone can follow: "A determination, written from the case" is now "The approval letter, drafted from the assessment"
•A subtitle at the bottom centre narrates each clip, timed to the action, in place of the "Live model" kicker
•The title sits on the left, centred on the product, and the opening clip is cropped past the app's sidebar so the work fills the frame
•Ends on "A designer's judgement, built for real" and the three-person team against vendors with whole teams, in place of "One designer. Claude Code."
•The Rewrite clip now shows the rewritten report: the recording's later editor changes are replayed as input, and each clip holds on its last frame instead of running on
•Fixed a hydration error from the reel's styles, and the reel no longer goes blank with reduced motion
Built with:Claude Code
v1.40.02026-10-16
Essay: Using AI to Build the Tools That Make the Thing
The Wallbounce essay is rewritten around its point: AI makes a custom tool quick to build, so build the tools that make the thing. The game is the example, and each tool says what it is, how it helped, and what it looks like in any app or product.
•New title, a three-line TLDR, and no subtitle on the page (the description stays for cards)
•Sliders: chat and code are poor ways to judge feel, so every movement value became a slider; the same for type, padding, colour or an AI model, and Shader Wall does it for shaders through its MCP
•Frame strip: see what your input is doing, with a half-speed mode, so the timing can be learned like a tutorial; rebuilt in the page in the game's palette and pixel font, playing three real slides
•Players: bots at four skill levels show the game played well before it can be, and agentic user testing is the same idea for products
•Tuning panel as a sharp replay: bounce window and reach dragged, then copy changes
•Text in articles can now carry links
Built with:Claude Code
v1.39.02026-10-15
The Chat Answers in My Own Words
I recorded myself answering interview questions about design, AI and my career. The chat now searches those answers for each question it gets and uses the closest few as background, so it answers with my opinions in its own short words, not a script.
•A list of about 110 interview questions drawn from every case study, essay and product on the site
•The first recording transcribed on-device with Whisper: 14 answers, from who I am to what taste means
•Keyword search (BM25) over the answers picks the one to three that match the visitor's last two messages, and adds only those to the prompt
•Each answer carries extra topic words, so "will AI replace designers?" finds the answer about where designers are heading
•Local dev chat moved to gpt-oss-120b on Groq, after Llama 3.3 70B was retired
Built with:Claude CodeWhisper
v1.38.02026-10-15
Replays Instead of Video
The RFP, EAI settings and Configurator case studies no longer use video. Every recording plays as the real interface, drawn by the page, so it is as sharp as the text around it and its colours are exact. The hero reel is built the same way.
•Prototype recordings captured as rrweb data (the page, its CSS and every change) and replayed in the page, sharp at any size
•Spotlights are crops of the same recordings, zoomed in the browser rather than in pixels
•Rewrite and Ask rebuilt as components that play a real run with a cursor
•The hero sizzle reel is now a live sequence of replays with captions, not a 12 MB video
•Replays load when they come near the screen, pause off screen, and show their last frame for people who prefer less motion
•About 20 MB of RFP video replaced by under 5 MB of replay data
•EAI settings (5 clips) and Configurator (10 clips) converted too, re-recorded from the tested prototype builds and on live models
•The cursor in a replay is drawn above everything, including modal dialogs
Built with:Claude Code
v1.37.02026-10-15
Gallery: One Column, Real Use, Real Phones
The gallery (still on the dev server only) is cut down to the strongest work and laid out as one full-width column. The big pieces now show being used rather than sitting as screenshots, and phone work sits in a phone drawn the way the device draws it.
•One full-width column instead of a bento grid, with titles always shown under each tile
•Featured and Newest sorting in place of the group filters; every item has a date
•The Enterprise AI website plays the builder making an app, re-skinning it for Qantas, then the phone section with its QR code
•EAI Setup plays the installer start to finish, from sign-in to handing off to Claude Code
•Shapeshifter in Enterprise AI cyan, on a phone with a real status bar and home indicator, so the page keeps clear of the screen edges
•Shader Wall shown with the shader running as the desktop wallpaper
•Clips recorded from lossless frames at 2560x1600 and 60fps with the site's colour fix
Built with:Claude Code
v1.36.12026-10-15
Sharper, True-Colour Video
Every clip on the site looked washed out and soft. Browsers on the Mac lift the mid-tones of video, so greys and text read lighter than the screens they came from, and the clips were small and lightly encoded. Video is now graded to land on the original colours, and the RFP clips are recorded at twice the resolution.
•Every video on the site re-encoded with the colour fix: mid-greys and text now match the app, measured within one level in Chrome and Safari
•Higher quality settings for every clip, so text edges stay crisp
•RFP clips re-recorded from lossless frames at 2560x1600 and 60fps, with the app at a 1280 wide layout so the UI reads larger
•RFP spotlights recorded at 3x, since they show the biggest
•RFP clips sit in the site's own browser window instead of one baked into the recording
•The sizzle reel re-rendered from the new clips at 1920x1200
Built with:Claude Code
v1.36.02026-10-15
RFP Case Study: Spotlights and a Sizzle Reel
The RFP study is re-recorded on the redesigned Daisy prototype. Each example now opens on the one interaction that matters, lifted out of the app, then shows where it sits in the product. The page opens on a sizzle reel of those moments.
•A sizzle reel in the hero: the rewrite, the questions, the RFI letter, the case switch and the determination, each captioned, ending on one designer and Claude Code
•Four spotlight clips, each one component cropped out of the running app at full resolution: Rewrite, Ask, the RFI issue list, and the case picker
•The Rewrite and Ask spotlights run on the live model, and Ask answers from the applicant's own statement
•Every in-app clip re-recorded on the new Daisy design language
•A spotlight frame for case study media: the component floats on the backdrop as a card, with no browser window
•A reel hero frame: a sizzle reel with its own stage, in the window without a browser bar
Built with:Claude Code
v1.35.22026-10-15
TLDR Reads the Article
The persona TLDR on case studies was only given the title and one-line description, so the model asked for the article instead of summarising it. It now gets the full text.
•The TLDR prompt includes the case study as plain text: headings, paragraphs, lists, stats, comparisons and tables
•The model is told to use only facts from the article, stay under 150 words, and write without markdown, which showed up as raw asterisks
•The summary is written in the first person, as Gareth, with no title line, and any markdown that slips through is stripped before it shows
Built with:Claude Code
v1.35.12026-10-15
Projects Leaves the Top Nav
The header no longer links to the projects page. The homepage leads with the three case studies, so the nav is CV, Changelog and Contact.
•Removed Projects from the header
•The projects page still works at its URL, and the homepage still links to it
Built with:Claude Code
v1.35.02026-10-14
New Case Study: Making a Marketing Site in 2026
The website case study now tells how the Enterprise AI site was made, from one tagline to ten wild variations to two rounds of message testing. It opens on the winning site, played top to bottom, and shows the brand in its two formats: a PDF for people and a folder for agents, which opens in a Finder window.
•It opens on the winning version: a reel of the whole V2 home page, the EAI builder inside it, played top to bottom
•The same page runs live further down: click in, type an app idea, and it builds
•The first prototype plays in focus: built for Nike, then re-skinned for Apple and CommBank
•A hero reel can now show its address in the browser bar
•A brand book block: the PDF beside the agent kit, and either one opens the kit in a Finder window
•The Finder is an HTML prototype in column view over the real files, with Markdown, YAML, CSS and JSON readable in place, the kit's own specimen pages live, Quick Look on Space, and light and dark
•A grid of screens with names and notes, for the ten variations and the few that were kept. Each one opens in a dialog as the real page, to scroll and use
•The page tested in round 1 plays top to bottom, with a button that opens it to use
•Fixed in the copy of the site: the client's logo in the Gofer demo sat in the middle of its bar instead of on the left
•The two user test rounds side by side in a table, with the one that got worse picked out
•Published: the card on the homepage now opens it
Built with:Claude Code
v1.34.02026-10-13
New Essay: Three Tools Before the Game
Published the first post from the dev log of Wallbounce, a small game about one move from Gears of War, with the game itself running in the page.
•The essay is in the Essays list on the homepage, with the dev log reel at the top on a dotted canvas
•Four places where the game runs live: the tuning sliders, the frame strip, two recorded runs racing, and four recorded players
•Each one runs only while it is near the screen, and takes the keyboard once it is clicked
•Essays and case studies can now hold a table, with one row picked out
•Captions under live demos no longer sit against the next paragraph
Built with:Claude Code
v1.33.02026-10-13
One Frame for Every Picture and Clip
The backdrop and browser window that the RFP and Configurator clips sit in is now on every case study and essay, so pictures and recordings look the same wherever you are on the site.
•Screen recordings sit in a browser window on the backdrop, in the settings, SEEK, Best Practice and Balatro pieces
•Stills and the embedded talk get the window without the browser bar
•Phones and device mock-ups stand on the backdrop with no window around them
•The picture or reel at the top of each page is framed the same way
Built with:Claude Code
v1.32.12026-10-13
Thesis Has a Site and a Waitlist
Thesis now has a marketing site taking a waitlist, so its card in the products section shows the logo and clicks out to it.
•The Thesis card shows its app icon and links to the site, the same as Dispatch and Shader Wall
•Both homepage variants link to it too, marked as a waitlist
•The chat knows the site is live and that early access is by waitlist
Built with:Claude Code
v1.32.02026-10-12
The Configurator Case Study
The Configurator case study was two paragraphs and a clip. It is now the full story: what a prototype on live models let me test that a Figma mock-up could not.
•Retitled "Testing Whether It Works, Not Just How It Looks", on the page and on the homepage card
•Seven questions, each with a clip and a Before and Now: understanding a business, simplifying a process, choosing a model, reading the prompt, structure in place of code, branding from a name, and a phone preview by QR code
•A closing section on where it led: four smart blocks and a classifier that selects from templates
•Nine new clips, recorded from the prototypes running on live models
Built with:Claude Code
v1.31.02026-10-12
New Essay: Opportunity Sizing, but Balatro
Published an essay about a prototype inside Thesis that sizes a product bet like a hand of Balatro: people are chips, dollars are mult, and a growth loop is a joker.
•The essay is in the Essays list on the homepage, with a 20 second reel at the top
•Six clips through it: reading the thesis, playing it, the next best move, writing a test, comparing bets and creating one
•The feed no longer lists case studies that are not written yet
Built with:Claude Code
v1.30.12026-10-12
Case Studies Build as You Read
Case study pages used to animate everything at once when they opened, including the parts far below the screen. Now each block comes in the first time you scroll to it.
•Headings, paragraphs, clips and cards fade up as they are reached, so each card arrives after the paragraph that sets it up
•In a Before and Now block the old way lands first, then the new way answers it
•Visitors who ask for reduced motion get the fades without the movement
Built with:Claude Code
v1.30.02026-10-10
Clips on a Backdrop, and Before / Now as a Diff
The case study clips now sit the way a product site shows them, and the Before and Now comparisons read like a diff.
•Each clip sits on a padded backdrop: soft washes of the accent colour, so it follows the theme
•The site draws a browser window around each clip, with the address in its bar
•Before and Now are one block read top to bottom: what came out in grey with a minus, what went in lit with a plus
•The RFP case study is titled "Utilising AI to Help Sales Win Deals"
Built with:Claude Code
v1.29.22026-10-09
One Frame for Every Clip
The prototype recordings arrived with a browser window and a grey backdrop baked into them, and the page was cropping their top and bottom. The site now crops each one to the app itself and draws its own frame.
•Clips in the RFP and Configurator case studies are cropped to the app, with no browser bar, backdrop or shadow from the recording
•One frame for every clip: rounded corners, a hairline border and a soft shadow, in both themes
•Clips keep their own shape, so the title bar and the bottom of the screen are no longer cut off
•The homepage section is headed "How design has changed with AI"
Built with:Claude Code
v1.29.12026-10-10
Paper Added to How I Work
Paper joins the tools listed on the How I Work page.
•Paper is the fifth tool on How I Work, alongside Conductor, GitHub, SuperWhisper and Vercel
•The tools row now wraps cleanly at narrower widths, with the last tool filling the row
•The chat on that page knows about Paper too
Built with:Claude Code
v1.29.02026-10-08
The New Homepage Is Live, with the RFP Clips
The reworked homepage is switched on, and the RFP case study now leads its examples with recordings of the real prototype.
•Homepage order: hero, products, three case studies under "How design has changed with AI", experience, kind words, product thinkers, then earlier work, essays and small studies
•RFP case study: five clips of the prototype in place (overview, seed data, the council-wording rewrite, a request for information and a determination letter)
•RFP case study: a new section on ProductLite, the mocked-up product in code that became the source of truth for demos and for engineering
•Configurator opens with a clip of the prototype running on real LLM data
•The website case study shows as Coming soon until it is written
•Each testimonial carries its company mark: SpaceX, SEEK or Best Practice
•Thesis has a real synopsis on its card
•Removed the switch that held all of this back, and the published versions it kept alive
Built with:Claude Code
v1.28.02026-10-08
Three Main Projects, and a Quieter Homepage (not live yet)
The homepage now leads with products and three projects framed around what AI made possible, and closes with lists of essays and case studies. The RFP case study is rewritten as before and now, and the hero button leads there. It is merged but switched off in production until the case study clips are in.
•Product cards lose the category and year line, the tags and the status badge, leaving the name, one line and the link
•Homepage order: hero, products, three case studies, experience, kind words, product thinkers, then earlier work, essays and small studies
•Projects becomes "Case studies: how design has changed with AI", three cards: the RFP response, a website built from an HTML brand, and Configurator
•The page closes with three plain lists: Earlier work (SEEK, Best Practice), Essays and Small studies
•A new case study stub for the website built with the Little Plains HTML brand approach, and a new opening line for Configurator
•The RFP case study is now "One RFP, Two Ways to Answer It": five examples, each shown as a Before and Now pair, at about half the length
•A new comparison block for case studies puts two ways of doing the same job side by side
•Each RFP example leads with a clip. Until a clip is switched on its slot only shows on the dev server: a labelled placeholder with a brief for what to film, or the clip itself once the file is in the folder
•One switch, NEW_HOME_LIVE, holds all of it back: with it off, production renders the homepage and case studies exactly as published
•The homepage gallery section is gone. On the dev server a Page / Visuals switch under the hero swaps the whole page for the gallery instead
•The hero "Read how" button goes to the RFP study
Built with:Claude Code
v1.27.02026-10-07
Demos (not live yet)
A single scrolling page of things you can press, as a tighter alternative to the gallery. Each demo is a real prototype in a frame with its controls beside it. Like the gallery, it is switched off in production for now.
•A /demos page with six demos: a brand switcher, the installer state machine, a layout toggle, the Add document timelapse, its self-running tour, and three directions for this homepage
•Buttons build the URL each prototype already understands, so the page never redraws a screen and every state is a link
•Three layouts to compare: a split one with the controls beside each prototype, a document one at /demos/doc that reads like a written page with the options as rows of a table, and a hybrid at /demos/hybrid with the text on the page and the options beside the prototype
•A floating dock follows the scroll and jumps between demos
•Frames only run while they are near the screen, and stay out of the way of the scroll until you click into one
•The scaled prototype frame from the case studies is now a shared component
•A local-only /parked page lists everything that is merged but not on the public site (demos, gallery, homepage variants, playground, feed, flagged experiments), with what switches each one on and what is left to decide
Built with:Claude Code
v1.26.02026-10-07
Case Study: Workspace and App Settings
A new Enterprise AI case study on the logic behind a settings redesign: grouping the parts of the system into features, then making workspace settings and app settings easy to tell apart.
•New case study, Two Levels of Settings Without Getting Lost, linked to Enterprise AI
•Two before recordings from earlier builds: settings as a list of parts, and app settings and workspace settings looking the same
•Three after recordings: the features inside app settings, nested app settings with the colours swapped, and workspace settings as a dialog
•A closing section on what AI made possible: working HTML prototypes with real state and seeded tenancies
Built with:Claude Code
v1.25.02026-10-07
Shader Wall in Products
Added Shader Wall to the products section, and made it and Dispatch click out to their live sites, on the homepage and on both homepage variants. Thesis is marked coming soon.
•Added Shader Wall as a product, with its app icon, linking to shaderwall.com
•Dispatch now clicks out to dispatchmac.com
•Product cards no longer link to a case study, the whole card just opens the product
•Thesis is marked coming soon and doesn’t link anywhere until it’s ready to share
•Dispatch shows its app icon in place of the animated visual
•Products sit three across on the homepage and the projects page
•Brand and Showcase variants: Shader Wall and Dispatch icons added, and both cards link out
Built with:Claude Code
v1.24.12026-10-07
SEEK Case Study: Cards, Funnel and Light Mode
Polish on the SEEK case study: results as cards, a tidier funnel diagram, and screens that no longer sit on black in light mode.
•Results are cards instead of a bulleted list: the number, what it measures, and the goal it was up against
•Funnel diagram: assumption cards use the accent colour, sit beside their stage and keep clear of the border; the style switcher and the entrance animation are gone
•Device screenshots have transparent backgrounds, and phone recordings sit on a panel that follows the theme
•Cropped the laptop frame and black borders out of the desktop recordings
Built with:Claude Code
v1.24.02026-10-07
Gallery (not live yet)
Built a gallery: a dump of real screens, prototypes and sites in a bento grid, where clicking a tile opens the artefact itself in a large dialog. It is merged but switched off in production while I decide what goes in it.
•A /gallery page with group filters, a homepage section and a header link, all local-only for now
•Websites get the large tiles; features and interactions get small ones
•Tiles open a live prototype you can use, a video or an image
•The same gallery is ready for the Brand and Showcase homepage variants, which stay as they are until it goes live
•An edit mode with a Share checkbox on every tile, for choosing what is shown
Built with:Claude Code
v1.23.02026-10-07
SEEK and Best Practice Case Studies
Wrote up two case studies from earlier roles, taken from my portfolio presentation: recovering an underperforming MVP at SEEK, and the two-panel appointment dialog at Best Practice.
•SEEK: rewrote the funnel case study to start at the MVP release, with the three fixes, real screens and the results
•Best Practice: replaced the placeholder with the full appointment booking story, from the original dialog to the two-panel design
•Cropped images out of the presentation slides and pulled 12 screen recordings from them, so the interactions play in the articles
•Brand variant: each case study has its own page in that company's brand, linked from the work track and the career panels
•An article hero can now be a video: the Best Practice piece opens on the final design playing
•Experience dialog shows a case study's hero image when it has one, instead of placeholder art
Built with:Claude Code
v1.22.02026-10-06
New Essay: Agentic User Testing
Published "Agentic user testing" on the site, an essay first posted as an article on X about having an agent set up Lyssna tests and read PostHog results from HTML prototypes.
•Added the essay to Writing & case studies with its cover image and the whole-flow diagram
•Content lists can now be numbered, for steps where the order matters
Built with:Claude Code
v1.21.22026-10-05
Add Document Case Study: Hero Image
Added a hero image to the Add document case study: a rule selected in the dialog, with the part of the driver's license it checks lit up in purple.
•Captured the hero from the live prototype at 2x, with "Holder is 18 or over" selected and date of birth highlighted
Built with:Claude Code
v1.21.12026-10-05
Add Document Case Study: Shorter Ending
Trimmed the end of the Add document case study so it finishes on the timelapse.
•Removed the round-by-round data card, the closing paragraph and the "What I took from it" list
•Removed the now-unused IterationLog component
Built with:Claude Code
v1.21.02026-10-02
Add Document Case Study
New case study on the Add document dialog for AI Document Review, with the live state machine embedded on a canvas and an interactive log of all 27 rounds of feedback.
•Brought the state machine prototype across as static HTML under /case-studies/add-document
•DemoCanvas component: a live prototype on a dotted canvas, scaled to fit, with Explore, Feature demo and State machine tour modes
•IterationTimelapse component: scrub or play through 23 real screenshots of the dialog, one per round of feedback, with the feedback that caused each change
•IterationLog component: every round of feedback as a column of changes, filterable by theme, with the original feedback and what changed
•Drafted the story: the problem, the preview, the state machine and what 27 rounds of tinkering with AI looked like
Built with:Claude Code
v1.20.22026-09-29
Vercel Web Analytics
Added Vercel Web Analytics so pageviews are recorded in production after deploy.
•Installed @vercel/analytics and mounted Analytics in the root layout
Built with:Cursor
v1.20.12026-09-29
AI Chat Fix and Spend Cap
Fixed the production AI chat, which was calling a Claude model ID that does not exist, and added a monthly spend cap plus abuse protection.
•Corrected the production model to claude-haiku-4-5-20251001
•Monthly spend cap (default $10, set via CHAT_MONTHLY_CAP_USD) tracked in Upstash Redis from real token usage; chat pauses with a friendly message once reached
•Per-IP rate limit (20 messages an hour), and caps on history length, message length and system prompt size
•Production now fails closed when the API key or Redis is missing instead of silently falling back to Groq
•Chat UI shows the server’s friendly limit messages instead of a generic error
Built with:Claude Code
v1.20.02026-09-27
Homepage Variants Launch Pad
Added an unlisted /variants launch pad with two alternative homepage directions, built as static HTML prototypes, alongside the current site. The live homepage is unchanged.
•/variants launch pad: A · Original (the current site), B · Brand and C · Showcase
•B · Brand (/variants/brand): full-bleed brand-led layout; career chapters as horizontally scrolling, full-viewport panels in each company’s brand; testimonials carry each colleague’s company branding; Dispatch, Shaders and Thesis product cards with a live, shuffleable shader; day/night mode
•C · Showcase (/variants/showcase): work-first layout built from real prototype screenshots, a featured product stage, case studies and a filterable wall of screens
•Served from public/variants via Next rewrites for clean URLs, with noindex headers and meta tags so they stay out of search
Built with:Claude Code
v1.19.22026-09-25
Experience: Lead Product Designer at Enterprise AI, NYC
Consolidated current experience into a single role: Lead Product Designer at Enterprise AI, now based in New York City.
•Removed the separate ADAPTOVATE role from the CV data, homepage experience timeline and career Lifeline
•Enterprise AI is now Lead Product Designer, May 2025 – Present, based in New York City
•CV location updated to New York City, USA
•Experience dialog and "View" buttons default to Enterprise AI
•Chat context (llmContext) updated so the assistant describes the current role correctly
•Lifeline 2026 milestone now covers the move to New York City and the app-builder prototyping work
Built with:Claude Code
v1.19.12026-09-25
Real GitHub Heatmap
The homepage heatmap was a hand-drawn Jan 2024 – Jun 2025 narrative. It now plots real contributions for the last 24 months, and the headline count no longer double counts private work.
•/api/github now returns daily contributions for the last two years (two aliased one-year contributionsCollection windows) alongside the 12-month total
•Fixed the total double counting: the viewer calendar already includes private contributions, so restrictedContributionsCount is no longer added on top
•Heatmap columns are months and rows are weekdays, with GitHub-style quartile levels. Each column has a hover title with that month’s total
•Range label reads "Oct 2024 → Now" and moves forward automatically each month
•Static fallback replaced with a snapshot of real data, used until the API responds or if it fails
•One shared request for every heatmap on the page; hooks no longer called after early returns
•Full heatmap uses smaller cells under the sm breakpoint so 24 months fit on mobile
Built with:Claude Code
v1.19.02026-08-11
Playground Sandbox & Lifeline Timeline
Added an unlisted /playground route for trialling components before they land on the site, and installed evilrabbit/lifeline as its first specimen — a scrub-along career timeline fed from the CV.
•New /playground route with a specimen switcher, viewport presets (full/1280/768/390) and a bounds outline toggle
•Specimens registered in a single src/app/playground/specimens.tsx file; stage remounts on switch so entry animations replay
•Installed evilrabbit/lifeline from its shadcn registry (npx shadcn add evilrabbit/lifeline/lifeline)
•Career timeline data in src/content/lifeline-career.ts, sourced from src/content/cv.ts
•Hoisted Lifeline keyframes out of the registry’s Tailwind v4 @theme block — this project is on Tailwind 3.4, where that at-rule is dropped along with its contents
•Pointed --lifeline-font at the site’s Inter instead of Geist so the timeline matches surrounding typography
•Set tsconfig target to ES2017; the registry iterates a Map, which fails to typecheck against the previous ES5 default
•Suppressed Lifeline age labels — this is a career axis, not a life, so year-minus-birthYear would read as a wrong age
Built with:Claude Code
v1.18.02026-08-11
Products Section
Added a Products section for things I've built and shipped — each one gets its own case study and can link out to the live product.
•New Products section on the home page and at the top of /projects
•Added Dispatch and Thesis as the first two products, with case studies marked coming soon
•New ProductCard component with animated accent SVG visuals and a Live status badge
•Cards carry two destinations — a stretched link to the case study, plus a separate link out to the live product once a URL is set
•Product case studies show a "Visit <product>" CTA and status in the header
•Split /projects into Products and Writing & case studies via a new kind field on Project
Built with:Claude Code
v1.17.02026-08-11
New Role at ADAPTOVATE
Updated experience across the site for the move to ADAPTOVATE in New York as Lead Product Designer.
•Added ADAPTOVATE (Lead Product Designer, New York, Jun 2026 – Present) as the current role in the CV data
•Closed out the EnterpriseAI period at May 2026 and switched its copy to past tense
•Updated the CV title and location to Lead Product Designer, New York, USA
•Refreshed the LLM context so the chat answers with the current role
•Added ADAPTOVATE to the homepage experience timeline and defaulted the experience dialog to it
•Normalised every role period to abbreviated month + year and aligned the homepage dates with the CV data
Built with:Claude Code
v1.16.12026-03-21
Fix FAB White Rectangle
Fixed the floating chat avatar button showing a white rectangle behind it in light mode.
•Added rounded-full to the FAB button element so the shadow and background clip to a circle
•Applied fix across all pages (home, contact, how-i-work, cv, projects)
Built with:Claude Code
v1.16.02026-02-27
Animated Accent SVG Cards
Gave project card SVGs the same accent colour treatment as the GitHub contributions grid — draw-in animation with varying accent opacities.
•SVG paths now draw in with staggered pathLength animation on scroll
•Each SVG element uses a different accent opacity (0.3–1.0) matching the contribution grid range
•Workflow circles have subtle accent fills that intensify left-to-right
•Sparkle rays animate outward from center with decreasing opacity
Built with:Claude Code
v1.15.02026-02-24
Warmth Mode
Added a warmth toggle to the theme selector that shifts the neutral palette to warmer tones, like f.lux for the website.
•Added warm mode toggle in theme selector dropdown with Flame icon
•Light warm: creamy off-white background and softened text
•Dark warm: warm dark grey background instead of pure black
•Warmth persists via localStorage and applies before hydration to prevent flash
Built with:Claude Code
v1.14.02026-02-20
Animated Signature Component
Added an animated cursive signature that reveals with a writing effect, shown in page footers and the about section.
•Created Signature component with Caveat handwriting font and clip-path reveal animation
•Added signature to footer on home, CV, and How I Work pages
•Added signature below about section on homepage
•Added Caveat Google Font as --font-signature CSS variable
Built with:Claude Code
v1.13.02026-02-17
Case / Visual Tab Toggle on Project Pages
Added a tab group to project pages that lets visitors quickly switch between the full case study and a visual-only gallery of all media.
•Added Case/Visual tab toggle below the project header on pages with media content
•Visual mode shows only images, videos, embeds, and GIFs with section headings for context
•Tab only appears on projects that contain media blocks
•Table of contents hidden in visual mode
Built with:Claude Code
v1.12.02026-02-13
Facehash Avatar Styling & Identity Notification
Circular facehash avatars and a system notification when visitors receive their facehash identity.
•Made Gareth's chat header avatar circular to match facehash style
•Made user chat avatars circular
•Added system notification when a visitor's name is detected, telling them they've been given a facehash identity
•Small facehash preview shown inline with the identity notification
Built with:Claude Code
v1.11.12026-02-13
Remove Thinker Name Hover Effect
Removed misleading hover styling from product thinker names since the cards are not clickable.
•Removed group-hover:text-accent from thinker name heading
•Removed group class from ThinkerCard container
Built with:Claude Code
v1.11.02026-02-13
Live GitHub Contribution Count
Contribution count now syncs live from the GitHub GraphQL API while the heatmap keeps its narrative arc.
•Contribution count fetches live total (public + private) from GitHub API
•Changed label from "commits" to "contributions" to match GitHub terminology
•Removed duplicate CONTRIBUTION_MONTHS from project detail page, uses shared component
Built with:Claude Code
v1.10.42026-02-13
Subtler Chat Bubbles
Chat message backgrounds now use a color-mix approach for a subtler appearance in both light and dark mode.
•Replaced flat bg-border with color-mix(foreground 5%, background) for assistant messages
•Dark mode: barely lifted off the dark surface instead of noticeable grey
•Light mode: near-white instead of wireframe grey
•Applied to welcome message, conversation bubbles, and loading state
Built with:Claude Code
v1.10.32026-02-13
Softer CTA Buttons in Dark Mode
Reduced brightness of primary CTA buttons in dark mode for a less harsh appearance against the dark background.
•Added --accent-cta CSS variable that darkens the accent by 15% in dark mode
•Applied to all primary CTA buttons across homepage, CV, contact, projects, and content dialogs
•Light mode CTA buttons remain unchanged
Built with:Claude Code
v1.10.22026-02-12
Experience Dialog Two-Column Layout & Inline Case Studies
Restructured the experience dialog to a two-column layout with full-height chat, and replaced project card links with inline scrollable case study sections.
•Changed dialog from stacked (header/content/footer) to two-column layout
•Column 1 contains header tabs and scrollable content
•Column 2 (GarethLLM chat) now spans the full height of the dialog
•Moved close button into the chat panel header
•Removed redundant footer navigation since tab group already handles company switching
•Replaced project card grid with inline case study sections per project
•Each case study has title, description, hero image, detail screenshots, and workflow placeholders
•Added View full case study links for each project
•Dialog background slightly lighter than base layer for elevated surface feel
•Added "Work Experience" title to dialog header
•Company tabs now sticky at top of scrollable content
•Removed separator from GarethLLM chat header
Built with:Claude Code
v1.10.12026-02-13
LinkedIn Links on Testimonials
Colleague names in the testimonial carousel now link to their LinkedIn profiles.
•Added LinkedIn URLs to all five testimonial entries
•Testimonial names render as links that open LinkedIn in a new tab
•Hover state uses accent color for consistency with site theme
Built with:Claude Code
v1.10.02026-02-12
Facehash Chat Avatars
Added deterministic facehash avatars to the GarethLLM chat. Gareth gets a consistent avatar, and visitors get their own unique face after telling GarethLLM their name.
•Integrated facehash package for deterministic avatar generation from names
•Gareth avatar (with blinking eyes) shown on all assistant messages and loading state
•GarethLLM welcome message asks visitors for their name
•Name extraction via [[name:X]] tag parsed from LLM responses
•Visitor name persisted in localStorage — returning visitors get greeted by name
•Visitor facehash avatar appears on their messages once name is known
•All existing suggested and follow-up questions preserved
Built with:Claude Code
v1.9.02026-02-12
Experience Dialog Carousel
Clickable company names in the Experience section now open a dialog carousel showing company synopsis, key achievements, and related case study links.
•New ExperienceDialog component with carousel navigation between companies
•Company names in Experience section are now clickable on both homepage and CV page
•View button opens dialog starting at most recent company (EnterpriseAI)
•Arrow keys and tab navigation to browse between companies
•Added placeholder case studies for Daisy Assist, Daisy Assess, SEEK, and Best Practice
•Projects linked to companies via companyId field
Built with:Claude Code
v1.8.42026-02-12
Testimonial Carousel Scroll Indicators
Added dot indicators and arrow navigation to the testimonial carousel for clearer scroll affordance.
•Trademark disclaimer tooltip on Orchestrator with shadcn tooltip
•Computed and displayed 872 commits in last 12 months above contribution graph
•Added GitHub profile outline button next to primary CTA
Built with:Claude Code
v1.6.42026-02-08
Default Dark Mode with No Flash
Changed the default theme to dark mode for a stronger first impression on portfolio visitors, and eliminated the flash of light mode on page load.
•Default theme changed from system to dark mode for new visitors
•Added inline blocking script to set dark class before first paint, preventing white flash
•Server-rendered HTML now includes dark class on html element
•Existing user preferences (light/system) are still respected via localStorage
Built with:Claude Code
v1.6.32026-02-08
Fix chat sidebar scroll bug
Fixed a bug where opening the chat sidebar caused the main page content to scroll down unexpectedly.
•Replaced scrollIntoView() with direct scrollTop manipulation to prevent scroll from bubbling to parent containers
Built with:Claude Code
v1.6.22026-02-08
Subtle Accent Treatment for Selection & Chat FAB
Replaced bright accent backgrounds with a subtle muted treatment using color-mix() for text selection and the floating chat button.
•Added --selection-bg and --selection-text CSS variables using color-mix() for light and dark modes
•Text selection now uses muted accent background with medium-toned accent text
•Floating chat button across all 6 pages uses the same subtle treatment
Built with:Claude Code
v1.6.12026-02-08
Fix Button Gravity When Particle Field Off
Fixed a bug where the magnetic cursor-pull effect on buttons remained active even when the particle field feature flag was disabled.
•Added disabled prop to Magnetic component that resets offset and skips mouse listener
•Linked Magnetic disabled state to the particleField feature flag
Built with:Claude Code
v1.6.02026-02-08
Interactive Venn Diagram Skills Section
Replaced the flat skills list with an interactive 3-circle Venn diagram (Product, Design, Engineering) to showcase cross-disciplinary skills.
•Moved skills section from below header to just above testimonials
•Added interactive SVG Venn diagram with Product, Design, and Engineering circles
•Click any region (single, overlap, or center) to filter skills to that intersection
•Two-column layout: Venn diagram (2/3) with scrollable skill tags (1/3)
•Gradient borders on multi-zone skills using background-clip trick for rounded corners
•Multi-zone title shows each zone name in its own color
•Scroll-to-top on CV page mount to fix navigation issue
Built with:Claude Code
v1.5.02026-02-08
Blog → Changelog
Replaced the blog page with a concise changelog. Moved route from /blog to /changelog, stripped the long-form article, and kept just the version timeline.
•Renamed /blog route to /changelog
•Removed blog article and markdown renderer — page now shows only the version timeline
•Updated header nav and feed links to point to /changelog
Built with:Claude Code
v1.4.02026-02-08
2x2 Bento Projects Grid
Replaced the horizontal auto-scrolling projects carousel with a 2x2 bento grid showcasing 4 curated case studies with SVG illustrations.
•Replaced horizontal carousel with 2x2 bento grid layout (responsive: stacks on mobile)
•Curated 4 featured projects: The Future is Now, Respond to RFP, How I Work, Conjure Your Own Tools
•Added numbered cards (01-04) and "View all" link to /projects
•Removed carousel auto-scroll, dot indicators, and related state management
Built with:Claude Code
v1.3.02026-02-06
Interactive Hero & Scroll Animations
Added an interactive particle constellation canvas to the hero section, magnetic hover effects on CTAs, and converted all below-fold sections to scroll-triggered reveal animations.
•Built canvas-based particle field with organic flow, mouse attraction, spotlight glow, and accent-color-aware rendering
•Particles connect with distance-based lines and pulse with breathing opacity
•Added Magnetic wrapper component for satisfying cursor-follow hover effects on buttons
•Converted About, Projects, Experience, Thinkers, and Testimonials to scroll-triggered `whileInView` animations
•Respects `prefers-reduced-motion` and adapts particle count for mobile devices
Built with:Claude Code
v1.2.02026-02-05
Feed View
Added a new /feed route that aggregates all content types into a filterable, scrollable feed.
•Created /feed page with vertical scrollable feed of all content
•Unified feed items from projects, thinkers, and changelog entries
•Added sticky filter bar with content type and tag filtering
•Created FeedCard component with type-specific rendering
•Extracted CHANGELOG to shared /src/content/changelog.ts
•Added Feed link to Header navigation
Built with:Claude Code
v1.1.02026-02-05
New Essay: You Can Conjure Your Own Tools Now
Added a new article about how AI coding tools change creative practice — building custom tools on demand and preserving design iterations as living artifacts.
•Published essay on creative tooling and the shift from waiting for features to conjuring them
•Explores using feature branches and flags as a design canvas for iteration history
•New project entry accessible from the projects page
Built with:Claude Code
v1.0.02026-02-05
New Essay: The GUI Has to Earn Its Place
Added a new article exploring how chat interfaces are changing expectations for GUIs. Chat API now supports Anthropic for production.
•Published essay on changing expectations for GUIs in the age of chat
•New project entry accessible from the projects page
•Chat API supports Anthropic Haiku 4.5 in production, Groq in dev
Built with:Claude Code
v0.9.02026-02-05
Product Thinkers
Added a new section showcasing product thinkers who have shaped my approach to design and product work.
•Created `/thinkers` page with edge-touching card grid
•Added homepage preview section between Experience and Testimonials
•Features Teresa Torres, Spiek & Moesta, Ryan Singer, and Christopher Alexander
•Created thinkers content data model in `/src/content/thinkers.ts`
•Created reusable `ThinkerCard` component for homepage use
Built with:Claude Code
v0.8.02026-02-05
RFP Case Study
Built out the "Responding to an RFP" case study page with full narrative content and video placeholders for key feature demonstrations.
•Rewrote RFP case study with full narrative: situation, problem, approach, impact, and outcome
•Added TLDR section summarizing the one-person-army story
•Added 5 video placeholder sections for key feature demos (seed data, LLM chat, scale adaptation, rapid iteration, interactive workflows)
•Structured before/after impact comparison (without AI vs with AI)
•Updated project tags, description, and chat context for richer AI sidebar conversations
Built with:Claude Code
v0.7.02026-01-24
Edge-Touching Cards & Feature Flags
Major visual refinement with cleaner card layouts and developer tools for design iteration.
•Implemented edge-touching card style (no gaps, shared borders)
•Added feature flag system with Cmd+K drawer for toggling design options
•Created shared GitHubContributions component for reuse across pages
•Testimonials now show as horizontal carousel (2 visible at a time)
•Projects page matches homepage shell styling with border-x
•Section title borders toggleable via feature flag
•Removed chat input border for cleaner alignment
•Added Experience section with timeline visualization
•Added Testimonials section with colleague quotes
Built with:Claude Code
v0.6.02026-01-24
Theme System Overhaul & System Mode
Complete redesign of theming with accent colors and system preference support.
•Added theme dropdown with System/Day/Night mode options
•System mode automatically follows OS light/dark preference