Design systemVisual design2025
CODA Transport 2.0
Bringing Coda’s new brand into a shared design system for the Publisher Portal and internal tools.
Turning my client's portfolio into a tiny interactive world.
An exploration in storytelling, animation, and web development — exploring how a portfolio could feel less like a collection of pages and more like a place you can wander through.
- My role
- Designer, Developer, Co-art director
- Project type
- Long-term
- Collaborators
- Copywriter, Co-art director
- Date & place
- 2023 Q2–2026+ (multi-year system evolution)
About Project
What if a portfolio felt more like a game than a portfolio?
A personal, long-running passion project: turning a client's static portfolio into something you could actually explore and play, one pixel-art scene at a time.
Deep dive
From Portfolio Page to Playable World
The goal was to move beyond a conventional portfolio and turn the site into something more expressive and memorable.
Together, we shaped a visual world that combines pixel-inspired art direction, animation, and interaction — while still keeping the work itself easy to explore.
Retrospectives
1. Design the technical architecture earlier
I should have planned the animation system, page transitions, and overall site architecture before jumping into execution. Framer's rendering model and platform limitations introduced constraints I didn't fully anticipate, which meant a lot of the final behavior required workarounds.
2. Understand the animation stack before building
I went into the project without fully knowing the best way to approach complex frontend animation. That made some interactions much harder to build than they needed to be. Next time, I'd prototype the animation approach early and choose the right technical pattern before committing to the full experience.
3. Help the CMS anticipate the future
A CMS shouldn't only support what the client needs today. I should have spent more time imagining how the site could grow — what new templates, content types, and structures might become useful later — and helped the client see those possibilities before they became constraints.
