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.
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