I rebuilt this site in code so it could show how I work.
My old portfolio lived in Framer. It looked fine, but it couldn't show the part of my job I enjoy most: deciding how something should feel, then building it. So I designed this one and built it with Claude Code. I made the calls and Claude wrote much of the code. These are the calls, and what broke along the way.
- Next.js 16 and React 19
- Pages, routing and the transitions between them
- Tailwind CSS 4
- Styling, with every colour as a token so dark mode is one switch
- Motion
- Springs, gestures and anything that moves
- Resend
- Sends the contact form to my inbox
- Vercel
- Hosting
Springs instead of timings
Most things that move here use springs rather than a fixed duration. A spring carries its speed, so if you change your mind halfway through, it turns around smoothly. A timed animation starts again from a standstill and jerks. Interrupt both dots below and you'll feel it.
Fixed timing
Spring
One thing moves at a time
Every project has a small animated cover. At first they all played at once, which was overwhelming. Now a cover only plays while you hover it, or on a phone, while it sits in the middle of the screen.
Covers kept looping after the mouse left, because a repeating animation doesn't stop when its target changes. Each loop now runs only while it's active, then settles back to where it started.
Dark mode that respects your setting
The site follows your system setting until you press the toggle, then remembers your choice. A one-line script sets the theme before the page paints, so it never flashes the wrong colours. The new theme grows out of the button in a circle, and simply swaps if you've asked for less motion.
The toggle looked broken for anyone whose computer was in dark mode, because the system's dark styles still won. They now apply only when you haven't picked light yourself.
A face that breaks out of the headline
My photo is a cutout on an accent circle. The circle only clips the bottom, so my head can rise over the top when you hover. When it scrolls away, a smaller copy peeks up in the nav, and clicking it takes you back to the top.
The first cutout stopped at my chest, so when my head lifted you could see a hard edge. I recropped it from the full photo so my shoulders run below the circle.
Receipts I chose
Hover “ships the code” in the headline and a terminal shows commits from this site. It started as a live log, generated on every build. The first time I stopped shipping for a while, it would have said “4 months ago” in the one place meant to prove I ship. It's now five real commits I picked, each pointing at something you can find here.
Nothing jumps
Hovering a tool in my stack on the About page used to grow the chip and shove the whole row sideways. The detail now floats above the chip, so nothing else moves.
Smaller details
- If your device asks for less motion, the site tones its animation right down.
- Bots get a hidden field to fill in and are quietly ignored, so you never see a CAPTCHA.
- Press ⌘K (or Ctrl+K) anywhere to jump to any page or project.
The same habits on a bigger build
This site is small. Asian Wedding Society is where these habits get tested properly: over 1,800 commits since March, Claude agents researching and checking venue data, and nearly 2,000 automated tests behind it.
The builder never marks its own work
One agent writes a venue's record from its website, brochures and emails. A different agent audits it, returns a verdict and changes nothing.
Every fact points to a source
A check rejects any venue feature whose quote doesn't appear word for word in the brochure or email it cites.
Written rules weren't enough
Instructions alone let double sends and repeated questions through to venues. Now every email passes a script that checks it before it sends, and only one run can happen at a time.
Accurate before complete
If a venue's details are thin, its page says “Still confirming details” rather than guessing.