01 jhsu.xyz

Designing a portfolio is a strange brief: the work has to be confident enough to have a point of view, but restrained enough that it doesn't become the loudest thing in the room. Every decision (forest green, Geist, no hero image, the discipline around animation) came from that tension: how do you make something opinionated without it upstaging what it's supposed to showcase?

Every page was wireframed in Paper before a line of code was written. That upfront wireframing is what kept decisions intentional. Spacing systems, component hierarchy, content structure: all resolved in the canvas, so implementation had a clear brief to follow. The style guide came after shipping, working backwards from production to document what had already been applied, which also surfaced a handful of one-off styles that had quietly drifted from the system.

media: /images/portfolio/paper-wireframes.png

An early version of the project-card hover leaned into an aggressive tilt. It was genuinely fun, but watching it the card became the interesting thing, the wrong outcome for a portfolio, so it got tuned down instead of dropped: what ships is a restrained pressure-tilt, the corner under the cursor dipping a few degrees, alive without upstaging the work inside. The same restraint governs everything that moves here, the sand forming the name on the home page and the wipe on the work cards, all of it kept quiet enough to serve the content.

Working with Claude across the whole build (architecture, implementation, content, code review) reinforced something that applies to any collaborator: velocity and direction are different things. Claude was fast; I was responsible for what we were building toward. The skill was briefing, not prompting: specificity about intent, not just instructions.

[home]

you: for the home page i want the background to be the content, sand that forms my name and keeps shifting

claude: Chladni figures fit that exactly: grains migrate to the nodal lines of a standing wave, so the plate 'draws' a shape in sand. I'll simulate a field of grains and cycle the plate through your name and a set of figures.

you: yeah thats the direction

claude: Done. The grains settle into each figure, hold, then the wave changes and they migrate to the next. Your name comes up first on load.

you: the motion looks noisy though, the grains jitter and clump instead of flowing

claude: That's per-frame random jitter. I'll give each grain a persistent heading that turns toward a divergence-free curl field, so they flow like raked sand instead of vibrating in place. It reads as a zen garden.

you: better. bit calmer maybe

claude: Lowered the turn rate to 0.025 so the flow settles more slowly. Grains drift into each figure and dissolve out without clumping now.

[work]

you: the work strip previews are placeholders. i want authored previews like dantase.com, floating app window on a soft ground

claude: I'll build them from your Figma frames with a Remotion compositor. One shared stage: tinted ground, floating window carrying the site's shadow ramp — a looping video for the strip plus two stills.

you: go for it

claude: Rendered. The video walks the request-access flow in crossfades and loops seamlessly; the stills are the expanded details screen and the token modal.

you: the token one feels off. the dimmed backdrop loses the card language

claude: Agreed. I'll lift the modal out as its own floating card on the ground instead of zoom-cropping the screen — same stage at detail scale.

you: much better. thats a wrap for tonight, /save

claude: Committed the preview work and wrote the session entry to the vault — what shipped, the decisions, next steps. Cold-resumable tomorrow.

[fun]

you: the interests row needs icons. mono line style to match the site

claude: Done — hand-drawn line icons for all eight interests, currentColor so they sit in the text register.

you: actually scrap those, i dropped the real logos on the paper artboard. use those

claude: Swapped in. The full-color marks beat forced style-consistency — I'll rest them at grayscale and restore color on hover so the row stays quiet until you reach it.

you: yeah the logo-wall treatment. LG2M