Odyssey: An Island Journey

Inspiration

Traditional resumes are effective, but they often feel static and forgettable. We wanted to experiment with a different idea: what if a resume could be explored like a game?

That idea inspired Odyssey, a 2.5D pixel-art interactive experience where users can move through a virtual world and discover information through exploration and interaction. Instead of simply scrolling through sections such as skills, projects, and personal information, the user becomes part of the experience.

The project was inspired by the visual language of classic pixel-art RPGs and the growing possibilities of WebGL in the browser.

What We Built

Odyssey is an interactive 2.5D environment built with Three.js.

The player controls a character and explores a pixel-art world. Different locations represent different parts of the experience. Approaching an interactive area can trigger dialogue and reveal information.

The experience includes:

🕹️ Character movement using keyboard controls
🌍 A 2.5D pixel-art environment
💬 Interactive dialogue and contextual information
🌗 Dynamic day/night switching
📱 Responsive and mobile-oriented controls
⚙️ 3D collision detection
🌐 Multilingual interface support
🎬 Smooth camera and interface animations

Rather than treating the browser as just a place to display information, we used it as the platform for an interactive world.

How We Built It

The core of the project is Three.js, which handles the 3D scene, camera, lighting, models, animation, and rendering.

We used Vite as the development and build environment and TailwindCSS/SASS for the interface and pixel-style visual elements.

For the interactive experience, we implemented:

Three.js Octree and Capsule collision systems
GSAP for smooth animations and camera transitions
typed.js for typewriter-style dialogue
Responsive controls for different screen sizes
A modular game-loop architecture for managing the world, character, camera, resources, and interactions
Playwright for end-to-end browser testing

The project also uses 3D models, textures, and generated visual assets to create the world.

What We Learned

One of the biggest lessons was that creating a 3D experience in the browser is much more than simply rendering a model.

We learned how different systems—rendering, physics, animation, interaction, UI, asset loading, and responsive design—need to work together to create an experience that feels coherent.

We also learned how important performance and user experience are for WebGL applications. A visually impressive scene is not enough if controls feel difficult or the experience does not work well across different devices.

Building the interaction system also changed the way we think about presenting information. Information can be more engaging when users discover it naturally through interaction rather than receiving everything at once.

Challenges We Faced

One of our main challenges was combining a 3D environment with conventional web UI.

We had to make sure that dialogue, controls, instructions, and other interface elements remained readable while the 3D world was constantly changing.

Another challenge was implementing reliable collision detection and character movement. The character needed to move naturally through the environment while avoiding walls, objects, and unintended areas.

We also had to consider mobile devices, where keyboard controls are not available. This required a different approach to interaction and responsive interface design.

Finally, balancing visual quality with browser performance was an ongoing challenge. Large 3D assets, animations, textures, and effects all have an impact on loading and rendering performance.

Why It Matters

Odyssey explores a simple question:

Why should digital information always be presented as a document?

By turning a traditionally static experience into an interactive world, we wanted to demonstrate how technologies such as WebGL and Three.js can make websites feel more like experiences than pages.

The project is both a creative experiment and a demonstration of what is possible when game design and web development meet.

What's Next

There is plenty of room to expand Odyssey.

Future versions could introduce more collectible elements, achievements, NPC interactions, puzzles, richer animations, and deeper exploration mechanics.

Our goal is to continue pushing the idea of an interactive web experience where users don't simply read information—they discover it.