Colophon

How I put this portfolio together

I designed this portfolio and built it myself.

It shows how I approach complex problems. Every case study follows the same arc: the challenge, how I tackled it, the impact it had and what I learned. It’s the same structure I use on real projects.

Building it is part of the point. Designing in Figma and shipping in code is the design engineering I write about on the How I work page.

  1. Design and development

    • Designed in Figma, then designed again in the browser
    • Built with Next.js 16 (App Router), React 19 and TypeScript 5.9 in strict mode
    • Styled with CSS custom properties as design tokens, with Tailwind CSS 4
    • Built with AI pair-programming (Claude Code) as part of my design engineering practice
    • Deployed on Vercel

  2. Typography

    • Manrope for body text and labels, chosen for how readable it stays at small sizes
    • Thunder for headings and the wordmark, a condensed display face with presence
    • Inter only inside the NBF design-system case study, matching the client’s files
    • All self-hosted through next/font with font-display: swap: no requests to Google, and no layout jump while fonts load

  3. Design system

    Colour, type and spacing run on one set of semantic tokens (background, foreground, soft text, muted text, surface, accent) defined once as CSS custom properties. Light and dark modes both have full token coverage, so the whole palette changes by swapping a few root values. Every text and background pair is checked against WCAG AA contrast in both themes.

  4. Animation

    • GSAP with ScrollTrigger for the scroll reveals on About and the case studies
    • A scroll-driven stacked-card deck for Selected Work, written by hand
    • three.js for the waving dot field behind the homepage, loaded only on desktop and only after the page is ready
    • CSS keyframes for the logo marquee, the rotating role under my name and page transitions
    • Everything settles down when your system asks for reduced motion

  5. AI chat

    • Powered by Mistral Small through the Mistral API
    • Answers questions about my work from the same project data the pages use
    • Runs through a server route, so the API key never reaches the browser

  6. Performance and accessibility

    • Images served through next/image as AVIF or WebP, sized for each screen
    • Case studies are pre-rendered at build time, one URL each
    • Skip link, landmarks and a visible keyboard focus ring
    • Tap targets of at least 24px on phones
    • Privacy-friendly Vercel Web Analytics, only after cookie consent

  7. Architecture

    • Pages: Home, case studies (one per project), About, How I work, Contact, Colophon and a site map
    • Two API routes: the AI chat and a GitHub activity endpoint
    • All project content lives in one typed data file, so the site and the AI chat read from the same source of truth