A portfolio where rooms replace categories

I designed and built a bilingual, CMS-backed portfolio that turns four kinds of work into explorable rooms—and lets a non-technical owner publish without a developer.

↗ WALK IN — LIVE SITE

↓ READ THE CASE

ROLE: Product & Interaction Designer · Frontend Developer
Team: Solo designer & developer · Direct collaboration with the site owner
STACK: Next.js · Sanity · Vercel
STATUS: Live · owner-maintained

THE 45-SECOND READ

CHALLENGE

Build a portfolio that feels like a personal world—without making visitors get lost or sending every update back to a developer. The creator’s work spans video, essays, visual art and photography.

CREATOR’S INTENT

She missed early personal blogs: digital homes that felt inhabited and rewarded exploration. She wanted that intimacy—not another polished grid of projects.

RESPONSE

I organized the portfolio as nine rooms, then paired spatial navigation with a house map, labelled hotspots, back paths and deep links. A CMS lets the owner manage the content directly.

OUTCOME

A live bilingual portfolio the owner maintains herself. Visitors can explore day/night states, ambient sound, interactive objects and a kitchen mini-game, while new work reaches the right room without developer help.

THE PRACTICE / 01

Rooms are the information architecture

No conventional nav bar. The four kinds of work aren’t tabs; they’re rooms. Choosing a room is choosing a category, so the taxonomy and the space are one object. The floor plan is the sitemap.

HOUSE MAP — EVERY CATEGORY IS A DOOR. LIT ROOMS HOLD WORK; DIM ROOMS ARE FREE TO EXPLORE.

THE PRACTICE / 02

The owner updates the site without a developer

New work is added by the owner, not by me. She signs into Sanity, fills a form — title, media, category — and the piece appears in the right room. No code, no rebuild, no deploy on my side. This is how the site runs today.

The design job wasn’t only the illustration — it was making the editing model plain enough that a non-technical owner keeps a bespoke, illustrated site alive on her own.

CMS WORKFLOW — THE OWNER FILLS THE FORM, PUBLISHES, AND THE PIECE APPEARS IN ITS ROOM.

THE PRACTICE / 03

Exploration still needs orientation

Doorways, stairs, labelled hotspots and the house map carry navigation. Day/night states, ambient sound and small reactions make the house feel inhabited.

WAYFINDING — DOORWAYS, STAIRS AND LABELLED HOTSPOTS CARRY NAVIGATION.

THE PRACTICE / 04

A home visitors could stay in, not just scroll through

The creator missed the intimacy of early personal blogs—small personal worlds filled with unexpected interactions. The sandwich game translates that memory into the kitchen: the room becomes an activity, not only a container for content. It is optional to discover and play, so it adds personality without blocking access to the portfolio.

Sandwich Stack start screen showing the instructions and difficulty options in the kitchen. — SANDWICH STACK — START / MID-PLAY / RESULT.

Sandwich Stack in progress, with ingredients piling up and a plus-ten score indicator. — SANDWICH STACK — START / MID-PLAY / RESULT.

READING NOTE / VISIT

Walk through it yourself.

Live site is in Traditional Chinese, with an English version at /en — a real client's portfolio; deep-links open specific rooms.

→ KITCHEN (THE SANDWICH MINI-GAME)

EVIDENCE LEDGER / 05

What this case proves.

— A content taxonomy can ship as navigable space (rooms = categories) without losing addressability (per-room URLs).— A non-technical owner can maintain a bespoke, illustrated site through a CMS, with no developer in the loop.— Illustration and interaction can carry navigation, not only style.

What this page does not yet claim.

— Any traffic, engagement, or conversion outcome; no numbers are published here.— That the room metaphor scales past a small, curated body of work.— That the new English version has been reviewed by native readers — it shipped recently.