Germaine Chin

Work / Side project

Portfolio revamp

Treating my own portfolio as a product: I built several very different versions, tested them against what a recruiter actually needs, and kept cutting until only the useful parts were left.

My role
Product owner: brief, review, content and every final decision
Build partner
Claude, as an AI pair for design and code
Timeline
October to November 2026
Result
The site you're reading: quiet, fast and accessible to WCAG 2.2 AA

The problem

My old site was a Carrd one-pager with hidden sections, Notion links and a lot of things I'd added over time. It said plenty about me but made a visitor work to find the parts that matter. The people I most want to reach, recruiters and hiring managers, usually have a few minutes at most. They need to know who I am, what I've done and how I think, quickly.

How I approached it

  1. Define the user and the job

    The main user is someone deciding whether to talk to me. Their job is to understand my experience and my way of working in a few minutes. Everything else is secondary.

  2. Prototype directions, not pixels

    Instead of polishing one idea, I had three very different versions built: a holographic trading-card deck, a digital garden of linked notes, and a minimal, text-first site. Seeing them side by side made the trade-offs obvious. The playful versions were memorable but slowed people down.

  3. Audit the content

    I went through every item from the old site and decided whether it helped that user. I cut the wishlist, "coming soon" placeholders, a framework that took more explaining than it was worth, and personal details like my phone number. The best work moved into the site itself, so nothing depends on Notion.

  4. Hold it to a quality bar

    Every page is checked against WCAG 2.2 AA. Colours are chosen by contrast, not by eye: body text is 12.5:1 on the lavender background, links are 5.2:1, and the bright violet is kept for rules, focus rings and the large "chaos" letters, where 3:1 is enough. The site also works in dark mode.

  5. Remove motion that doesn't earn its place

    An earlier version had a 3D carousel that spun as you scrolled. It looked impressive and made everyone scroll through it to reach the content. Using Emil Kowalski's design-engineering principles, I kept only motion with a purpose: a pop-up that opens smoothly, buttons that respond when pressed, and one small moment where the word "chaos" settles into line.

What I chose not to do

  • No animations on scroll, no hover effects on every card.
  • No icons, stock images or illustrations.
  • No database or framework where a static page would do.

What this shows about how I work

I start from the user's job. Even on a personal site, the question was what a busy reader needs, not what I could show off.

I compare real options before committing. Building three directions cost little and made the decision easy to defend.

I'm comfortable working with AI. I used it the way I'd work with a team: a clear brief, honest review, and me owning the decisions. That's how I want to build AI products, too.