Interactive experiences · Independent build
A little world with a reason to explore.
An optional, playable route through my portfolio, with five story locations and a fishing pond in its own clearing.
- My role
- Independent project · experience design and implementation
- Context
- Personal portfolio · browser-based 3D
Five stories, a quiet pond, and a little room to wander.
The challenge
Make a portfolio enjoyable to explore while keeping projects, expertise, and service rates directly accessible. The same world needs to work with a keyboard or touch controls, without making the game a requirement for reading the content.
My contribution
- Built a spherical world with walking and overview cameras, story destinations, and a separate fishing activity.
- Added an animated explorer with emotes, jumping, and a mobile joystick that runs when pushed beyond its outer ring.
- Implemented landmark collision boundaries and navigation that walks around obstacles to reachable arrival points.
- Connected a completed fishing interaction to a dismissible invitation to view the existing service rate card.
Key decisions
01
Keep the classic portfolio one click away.
The world lives on its own route and loads its 3D scene on demand. Visitors can return to the regular portfolio, read destination stories directly, or open the rate card without playing.
02
Build controls around the device.
Keyboard movement and touch input feed the same movement system. On mobile, a joystick sits at the bottom right, while a compact destination menu keeps navigation out of the main view.
03
Give interaction a clear sequence.
Fishing starts by walking to the far-side dock and turning toward the water. The first completed cast gets a nibble; the second catches a fish and opens the service invitation. Interrupted casts do not advance that sequence.
What changed
The working experience combines story discovery, animated character interactions, and a clear route from exploration to services. Mobile interaction checks, collision and navigation checks, and production build checks support the implementation.
The next iteration will focus on profiling lower-powered devices and understanding which parts of the experience visitors choose to explore.
Tools & foundations
- Next.js
- React
- TypeScript
- Three.js
- Skeletal animation
- Pointer controls