This website: a desk you can poke at

The site is kellyupp.com. The guide to making your own is [the analog desk guide]. [Add the link once the repo is public.]

The problem

My first version of this site worked, but it was boring. After going back to it a few times, I kept thinking I could have built it with any templated website builder. It had a clear message and no personality, and I’m a person who puts a rotary phone on a shelf.

I wanted something that said what I’m like before anyone read a word: a product leader who likes physical things, in a world that’s mostly screens. So I rebuilt it as a desk of real objects, where each object opens a page.

What I built

Object	What it does
Four polaroids	Experience. Each flips over to show my role and a highlight of the company. The full resume is on plain paper, with my contact details left off on purpose.
A crate of records	Projects. Drag or swipe to flip through, one record per project.
Five post-it notes	Work with me. One per way of working together, with every detail, and links to the case studies behind each.
A purple notebook	About. It opens like a real notebook, and you turn the pages by clicking them.
A rack of magazines	Substack. The covers come from my Substack automatically, so a new post shows up without me touching the site.
A globe	A map with the places I’ve lived, worked and traveled, as pins you can zoom to.
A rotary phone	Contact. The message form is the phone’s message pad.
A blank record sleeve	Side B. Nothing’s pressed yet.
A disco ball, a to-do list and a plant	Decoration. Only the ball moves.

There are also three ways to look at it: the desk itself, a spin view where the objects ride a slowly turning ring, and an index view, a plain list of every page for anyone who just wants to find something.

Decisions

Real photos only. I tried drawn versions of the objects early on and rejected them. They looked fake next to the real ones. Every object is a photograph cut out on a transparent background, with a soft shadow.

White page, one accent. The page is white and the only added colour is a cobalt blue (#0047AB) for buttons and hover states. Everything else gets its colour from the photos. Type is DM Mono for everything, with a handwriting font only on notes and labels, so it doesn’t turn playful.

Two audiences, one site. Recruiters and people who might hire me want different things. I considered separate landing pages and chose a “Hiring? Start here” button and an index view instead. Adding more pages would have made the site harder to read.

No prices, and no invented anything. There are no prices on the site. Anything I don’t know yet, like the stories behind the map pins, stays in visible [brackets] until I write it.

Phone is a different layout. Below a certain width the scattered desk turns into two columns, hover labels disappear (phones can’t hover), and the About notebook shows one page at a time. Not everything has to move on a phone.

How I worked with the AI

I built this with Claude Code. The most useful rule I set was this: show me options, wait for my pick, then build. Early on I called a prototype “fine” and the AI built a lot from it, in fonts and objects I didn’t want. I stopped it and changed how we worked: it proposes, I choose, it builds one step, shows me what changed, and says what it hasn’t checked.

What I decided myself: the look, the objects, the accent colour, the fonts, and what to cut. What I handed off: the code, the layout maths, and the repetitive checks. The AI is quick at the second kind and not good at the first.

What broke

• A redirect made every photo disappear on the live site. It matched my photo folder as well as the page I meant. I fixed it the same day, and now I load a page with photos on the real address after any redirect change.
• I merged too early. I accidentally merged a change before I’d approved it, and had to fix the live site.
• A “Copied” message that wasn’t true. My layout tool told me it had copied my layout when it hadn’t. It now only says that when the browser confirms it.
• Videos with a halo. The disco ball and globe are videos, and a faint box showed around them until I cleaned the background to pure white.
• A light effect I removed. I added a moving light across the page for the disco ball. It looked bad, so I took it out.
• Text that didn’t fit. Notebook text spilled one word onto an extra page, and the home-page name collided with objects until I reworked the layout.

What I don’t know

I haven’t tested video play on tap, or Safari’s quirks, on a real phone. The map’s cards still say “[Add a line or a photo about X.]”. I haven’t set up analytics, so I can’t tell you whether recruiters or clients behave differently on this site than on the last one. I also don’t know yet whether the playful version helps or hurts when someone is deciding whether to hire me.