Her work lives in a pink house
A creator who makes video, writing, visual art and photography didn’t want another portfolio grid, so her site is a house you walk through, room by room. I designed and built it in English and Chinese in three days, and she publishes new work in it herself, without a developer.
Role Product, information architecture, interaction design, visual direction, frontend and CMSResult Live, and maintained by the owner
The floor plan is the site map
The house has nine rooms. Her video is in the living room, her writing in the bedroom beside her about page, and her visual art and photography in the attic studio. In the back garden you write her a letter. The other rooms are for wandering: the hall, the landing, the bathroom, and the kitchen with its mini-game.
The floors follow the site’s own room map, and each room opens on the live site.
Each room is the live site’s own illustration; the front yard is the picture at the top of this page.
You walk from room to room
You see each room from inside it, and you move by clicking a doorway, the stairs or an object. Crossing the house is the main way around the site; there is no conventional menu.
A map one tap away
From any room, a map lays out the whole house floor by floor. Rooms that hold work are lit, the rest dimmed but open, and one tap takes you to any of them. Every room also has its own address, so a link can open the house at the right door.
She publishes her own work
She signs in to Sanity, fills in the title, media and category, and the piece appears in the right room. Nothing is coded, rebuilt or deployed on my side; this is how the site runs today.
From category to room
- 01Sanity category
She picks Video, Writing, Photography or Visual Art.
- 02Next.js content query
The front end asks for the content in that category.
- 03Corresponding room
The piece appears in its room.
The feel of an early personal blog
She wanted it to feel like an early personal blog: a home where someone lives, with small things to find. So the house has a day and a night, ambient sound, objects that react and a game in the kitchen, all optional. In Sandwich Stack you catch fillings to build a sandwich, and one button takes you back to the kitchen.
- CONTEXT
- Designed and built for a creator, working with her directly
- STACK
- Next.js · Sanity · Vercel
Walk through it yourself.
These links open the English edition of the site; the second goes straight to the kitchen.