Blog

How I built this site

At Input I've worked across the whole lifecycle with founders, from branding, to product design & marketing sites, to building and launching products. My own site was a chance to take what I'd learned and apply it to something entirely mine.

The identity

Before designing anything, I filled out a brand survey. I wanted to know what the portfolio should say before I made a single decision about how it looked. I pulled my 6-month career reflections and some past work to help shape it, and what came out was fairly simple: range across the product lifecycle, judgment under real constraints, a bias toward evidence.

My background already tells the technical side of that story. What it doesn't tell is the part I care about just as much: understanding people, working well with a team, and being creative.

I did some research by looking at other people's portfolios for inspiration, but I wanted this site to feel like me. I didn't want to use stock images or have a stark black & white website, but I did want to introduce some colour and personality.

The look

I like to craft in my spare time, and it turned out that's what I was drawn to in other people's sites too, an illustrative style, and artists like Matisse. So I leaned warm and a little handmade, and kept the site itself clean underneath. I drew some shapes, photographed them, and turned them into vectors.

The wobble is real.

The shapes drawn in marker on paper

Throwing some shapes

Then the small stuff, which is my favourite part of design: the micro-interactions, the moments of joy. I built a design system to keep things consistent, then simplified it when it got too complicated. I rewrote copy. I added details that made the whole thing feel finished, and a bit more fun.

Design system

Button press
Card hover

The build

I mostly treated this like a normal project where I owned the product and vision, and orchestrated the team to deliver. Claude did most of the engineering heavy lifting, with a lot of back and forth as I reviewed what it built, changed direction, and caught the things that weren't working. ChatGPT helped me work through ideas and refine copy. And I had each of them review the other's work.

The tools were different, but the process was pretty familiar: scope it, make something, use it, test it, and iterate.

An early, generic version of the site
First draft, didn't feel like me
The current site
Where we got to

What was new was everything around the edges. I figured out how to use more of GitHub rather than just reviewing PRs, deployed the site through Vercel, connected a domain, and set up an email address that routes into my regular inbox. AI took on some of the less visible parts too, adding analytics, clean URLs, SEO and metadata, and a contact button that doesn't expose my email address to scrapers.

I make things in my spare time. This one just happened to be a website.