Shafeen AlamDesigning my portfolio in the open, one interaction at a time
I rebuilt this site the way I'd build a product. Every page, hover and animation went through the same loop: try it live, watch how it feels, then keep it, change it or cut it. This is the record of those decisions, with a focus on the interactions.
01 · Before and after
My old site was a Cargo template. It had one good idea that I wanted to keep: it always showed you where you were.
After
Project thumbnails ran down the left side. Pressing one opened its case study. Scrolling to the end landed you on the next project, and the rail updated to show which one you were on.
The idea stayed, built differently. A jump nav inside the top bar shows where you are in a case study, and a "Next case study" card at the end shows what comes next.
02 · The rules
The old site was a template. I wanted one that behaved the way I work: clear, quick to scan and honest about process. I set three rules and held every effect to them.
03 · Decision log
Eight decisions where the first version didn’t survive. Flip each one between what I tried and what I kept.
A “Jump to” row of pills that looked different on every page.
One sub nav inside the top nav pill, the same on every page.
A pill that said “Ask me anything” sat on the left and covered section labels.
A round avatar on the right, out of the way of the content.
The bubble faded after a few seconds, before anyone could read it.
The bubble stays until the visitor closes it.
A tinted title bar and tab strip that added weight and meant nothing.
The three dots and the status bar stayed, on a plain background.
The cards waited for a scroll to spread out, so many visitors never saw them.
They play once on load, so every visitor sees the full set.
A short connector between sections ended in a dot with nothing to lead to.
A line runs the height of each section and draws as you scroll, ending in a dot.
The first card opened on top of the rows below it.
Now desktop opens it beside the logo, and mobile opens it inline.
A fade-in hid the number while it counted.
The number is visible from the start and counts up.
A pill with a half-filled dot and the words “Dark mode” and “Light mode”.
A sun that folds into a moon. It takes less room and fits inside the nav pill.
04 · Try them
Nine of the interactions from around the site, small enough to try here. Each one uses the same timing as the real one.
05 · What went wrong
Most of what I learned came from things I got wrong.
The habit that came out of it: check every change on desktop and phone, in light and dark, with motion on and off.
06 · Working with AI
I built this with Claude, directing it live. It wrote most of the code. I decided what stayed.
What worked was describing the feeling I wanted, looking at the result, and saying what was wrong in a sentence. It also built what I asked for even when I asked for too much. The tinted editor window is an example: I tried it, disliked it and took it back out.
Motion should answer a question the visitor already has.
