Case 07CREATIVE DEVELOPMENT
Interactive Portfolio
The site you're on. It opens on a game master's camera feed of an escape room, hands you a UV flashlight to find the proof written on the wall, then gets out of the way so the work is easy to read.
- Role
- Full-Stack Engineer & Designer
- Timeline
- 2026 – Present
- Status
- Shipped
- 6
- Results hidden on the wall
- 0
- React re-renders while the light moves
- 2
- Themes, following your system setting
You're looking at it.
01 Why a room
A portfolio has a few seconds to make an impression, but it still has to answer the boring questions quickly. I wanted an opening people remember that never stands between a recruiter and the facts.
02 One frame of light
How the flashlight works.
Pointer
A pointer move, or an animation frame of the automatic sweep on touch screens.
CSS variables
The position is written straight to custom properties, skipping React entirely.
Mask
A radial mask-image reveals the UV ink layer under the light.
Discovery
A distance check marks a clue as found, the only moment React re-renders.
03 Behind the wall
Playful up front, practical underneath.
A room you can search
The hero borrows from the escape rooms behind much of my work: a CAM 01 feed and a floor plan with six real results written in UV ink. Find them all and the room clears. Every result is also listed for screen readers and in the case files, so nobody has to play to learn what I built.
Practical by default
Next.js 16 statically generates every page. Design tokens drive matching light and dark themes with no flash on load, and with reduced motion turned on, the lights simply stay on.
04 Built with
- Next.js 16
- React 19
- TypeScript
- Motion
- CSS masks