粉紅色兩層小屋、薄荷綠大門與前院,白天同一棟小屋的夜景,窗內亮著燈

LITTLE HOUSE DIARY · INDEPENDENT CREATOR PORTFOLIO · 2026

WORK № 01

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
DATE
JUL 2026
CONTEXT
Personal project · 3-day design & build · Direct collaboration with the creator and owner
ROLE
Product definition · Information architecture · Interaction design · Visual direction · Frontend development · CMS integration
STACK
Next.js · Sanity · Vercel

THE 45-SECOND READ

PROBLEM

The creator wanted an intimate digital home for video, writing, visual art and photography—not another portfolio grid. It still had to be easy to navigate and maintain without a developer.

DECISION

Turn the content taxonomy into nine rooms, then pair spatial navigation with a whole-house map, room-to-room movement and deep links.

PRODUCT

A bilingual portfolio with owner-managed publishing in Sanity and optional day/night states, ambient sound, small interactions and a kitchen mini-game.

STATUS

Live on Vercel and maintained by the owner.

Rooms are the information architecture

Four content types became four destinations: video in the living room, writing in the bedroom, photography in the back garden, and visual art in the attic studio. The remaining rooms support movement and discovery rather than another category. The floor plan is both the content taxonomy and the site map.

VIDEO
LIVING ROOM
WRITING
BEDROOM
PHOTOGRAPHY
BACK GARDEN
VISUAL ART
ATTIC STUDIO
HOUSE MAP — EVERY CATEGORY IS A DOOR. LIT ROOMS HOLD WORK; DIM ROOMS ARE FREE TO EXPLORE.

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.

From category to room

  1. 01Sanity category

    The owner selects Video, Writing, Photography or Visual Art.

  2. 02Next.js content query

    The front end requests content assigned to that category.

  3. 03Corresponding room

    The published piece appears in its assigned room without developer action.

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

Navigation happens from inside the house

The portfolio is experienced from a viewpoint inside each room. Visitors move by clicking doorways, stairs and objects, so crossing the house—not choosing from a conventional menu—is the primary navigation. The room-to-room sequence makes the site feel like a place to enter and explore rather than a set of pages.

ROOM-TO-ROOM MOVEMENT — A VISITOR ENTERS FROM THE FRONT YARD, CROSSES THE HALL, AND CONTINUES INTO THE LIVING ROOM.

A home visitors could stay in, not just scroll through

The creator wanted the intimacy of early personal blogs: a digital home that felt inhabited and rewarded curiosity. Day/night states, ambient sound, small object reactions and the kitchen game are optional layers of that idea. The game turns the kitchen into an activity rather than only a container for content; visitors can always return directly to the room.

Sandwich Stack 開始畫面:肉類加 10 分、蔬菜加 5 分,接到兩個非食物物件會結束遊戲,接到吐司完成一局;可開始遊戲或返回廚房
三明治疊疊樂進行中:目前 50 分、尚未失誤,接到肉類時顯示加 10 分;可暫停或返回廚房
三明治疊疊樂結算畫面:160 分、23 層配料、最佳 160 分;可再玩一次或返回廚房
SANDWICH STACK — START / MID-PLAY / RESULT.