Skip to content
Colophon

How this site was made.

The honest version. Built on Base44, written in React, argued over with Claude Code and covered in paper and tape. Here's everything that went into it.

Recipe: one portfolio

serves: everyone

  • 1 Base44 app
  • React and Vite
  • Tailwind CSS
  • framer-motion (a lot)
  • Lenis, for smooth scrolling
  • Newsreader, Geist and Caveat
  • paper, tape and doodles
  • Claude Code

Method: build, break, fix, repeat.

✂️ hand-made
The stack

What's under the paper

Every library here is doing a real job. No passengers.

  • Base44Base44Hosting, the database and the admin panel I write posts in.
  • ReactEvery page and every component.
  • ViteThe dev server and build tool. Save, reload, done.
  • Tailwind CSSAll the styling, straight in the markup.
  • framer-motionEvery stagger, wobble, drag and drawn line.
  • LenisThe smooth scrolling. It switches off if you ask for less motion.
  • React RouterMoving between pages without a full reload.
  • TanStack QueryFetches content from the database, with bundled copies as a backup.
  • Radix UIAccessible menus and dialogs under the hood.
  • react-markdownTurns blog posts and the legal pages into proper HTML.
  • simple-iconsThe brand logos, like the ones on this page.
  • canvas-confettiThe confetti. Obviously.
The type

Three fonts and a typewriter

All from Google Fonts. Type something and see it in each one.

  • NewsreaderHeadlines and big quotes

    I build apps that look designed.

  • GeistEverything you read and click

    I build apps that look designed.

  • CaveatHandwritten notes like this one

    I build apps that look designed.

  • Geist MonoLabels, code and tiny metadata

    I build apps that look designed.

The colours

Pastels, mostly

Tap a swatch to copy its hex. The lime comes from the background of my portrait. Papaya and azure only ever show up in small doses.

I'm colour blind, so nothing on this site relies on colour alone to make sense. How that works

The pictures

Real screenshots, then scrapbooked

Every case-study screenshot is a real capture of the live app. For the scrapbook versions, I used GPT Image 2 through Higgsfield to add the paper, tape and handwritten notes around them. The UI itself is left exactly as it is.

The Hattle homepage during the 2026 World Cup: a sticker wall around the HATTLE wordmark, the scribble who'd you get?, a Free forever badge and two buttons.
The real capture
Hattle's sticker-wall homepage pinned into a scrapbook page with notes: who'd you get?, never touches the cash, sketched on paper, shipped in 8 hours.
Scrapbooked. UI untouched.

And the only picture of me

This illustrated portrait is the only image of me on the site, and it's used as-is everywhere. No photos.

Made with

The people and tools behind it

  • Built with Claude Code

    Written with Claude Code in my terminal. Yes, I still pay for Codex too. The opinion changelog lives on my uses page.

    What I use

  • Inspired by Craft's scrapbook look

    The paper, tape and pastel style is inspired by Craft. Every scrap, sticker and doodle here is drawn from scratch in code.

    craft.do (opens in a new tab)

  • Synced through GitHub

    The code lives on GitHub and syncs both ways with Base44. Every change has a paper trail.

    My GitHub (opens in a new tab)
Nerd numbers

By the numbers

  • 78

    pages in the sitemap

  • 34

    terms in the glossary

  • 4

    font families

  • 5

    case studies

  • 0

    em dashes. I checked.

Things to try

A few secrets

  • The Konami code

    Type it anywhere on the site.

  • Triple-click the logo

    Top left. Three quick clicks.

  • Drag the stickers

    Most of them come unstuck. Try the one up top.

  • Get lost on purpose

    Type any made-up address. The 404 page has a game.

Like how this looks?

I can make yours look designed.

Tell me about your app. I read every message.

Tell me about itSee the work