Experiments

jhsu.xyz

RoleDesigner & Developer

TeamSolo · Claude

Timeline2 weeks · 2026

Overview

This portfolio documents my work. This site itself is no different. jhsu.xyz was designed and built collaboratively with Claude from the first wireframe to the final commit: ideated in conversation, prototyped in Paper, and shipped as a statically generated Next.js site. The meta-experiment was treating the portfolio itself as a design challenge with the same rigor applied to any product problem — defining constraints, making deliberate decisions, and shipping something coherent. The result is a site that reflects both the work and the process behind it.

Challenges

Designing the Designer's Portfolio

The core tension: a portfolio should show the work without the portfolio itself becoming the loudest thing in the room. Every aesthetic decision — forest green, Geist font, the absence of a hero image, the restraint in animation — had to feel like a considered point of view rather than arbitrary style. The site needed to be opinionated enough to be memorable without overwhelming the case studies it exists to frame.

AI-Native Workflow at Scale

Working with Claude across ideation, architecture, and implementation introduced a new kind of decision-making overhead: when to trust the suggestion, when to push back, and how to maintain design intent when the collaborator is both fast and occasionally wrong. The workflow required active authorship at every step — Claude handled velocity, but direction, taste, and final judgment stayed human.

Approach

Paper-First Prototyping

Every page was wireframed in Paper before a line of code was written. The wireframes weren't decoration — they were the design decisions. Spacing systems, component hierarchy, and content structure were all resolved in the browser canvas, which made implementation faster and more intentional. The style guide was also built in Paper after shipping, working backwards from production to document the tokens and patterns (this also enabled verification of standardized style usage that prompted Claude to identify when one-off styles were misused).

Responsive as a First Principle

The responsive strategy was built around CSS custom properties (--px, --px-case, --py) that cascade across breakpoints, keeping inline styles and responsive layout behavior in sync without a separate CSS-in-JS layer. Utility classes were used only for structural layout changes — flex direction, grid columns — never for spacing, which stayed in tokens. This kept server components throughout without needing client-side breakpoint hooks.

Animation with Restraint

The ScrambledText proximity hover on the hero name was the only animation that made it to production. Multiple candidates were prototyped and cut: a TiltedCard physics effect on work cards (not noticeable enough to justify the dependency), DecryptedText (replaced by the implemented ScrambledText), and scroll-triggered section reveals (deferred). The bar for inclusion was simple: does this add meaning, or just motion? A portfolio should express a point of view — but aesthetic choices that interrupt the experience defeat their own purpose. Animation earns its place by reinforcing the work, not competing with it.

Outcomes

Collaborating with Claude

Collaborating with Claude revealed a new kind of practice — less about prompting and more about maintaining shared context over time. Actions like /save-context became a deliberate habit for checkpointing decisions between sessions. Effective prompting turned out to resemble good briefing: specificity about intent, not just instructions. And the range was broader than expected — Claude functioned as a design partner, code reviewer, content collaborator, and engineer, often within the same session. Knowing when to trust the output and when to push back turned out to be the real skill — and one that transfers to working with any collaborator.

A Workflow Worth Repeating

The process proved that Claude and Paper together function as a genuine design-development workflow: fast enough to keep up with decisions, rigorous enough to produce production-quality output. Claude wasn't a shortcut — it was a collaborator that required as much direction as any human partner would. The gap between idea and shipped artifact closed significantly, and the quality of decisions improved because the iteration loop was tight enough to actually iterate.

Shipped and Live

The portfolio is deployed on Vercel with static generation across all pages — work case studies, experiment detail pages, and the gallery stub — a fully responsive layout from mobile to desktop, and a clean codebase with no dead code. Build time is fast because there's nothing speculative in it.