Odyssey

Inspiration

In a sea of standard PDF resumes and templated portfolios, we wanted to build something that truly stands out and captures attention. We were inspired by classic 2.5D pixel-art RPG games and wondered: what if a recruiter or client could "play" your portfolio? We wanted to transform the mundane task of reading a resume into an engaging, interactive adventure where discovering projects and skills feels like unlocking secrets in a video game.

What it does

Island Odyssey (Game And Ship) is an interactive 2.5D pixel-style resume and portfolio website. Instead of scrolling through text, users control a pixel character on a floating 3D island using standard game controls (WASD & Space).

As users explore, they can interact with different zones:

1. The Workbench (Skills): Discover the developer's tech stack and 3D graphics knowledge.
2. The Weapon Area (Projects): Uncover real-world project experience.
3. The Rest Area (About Me): Read background history and personal lore via typewriter-style dynamic dialogues.

The world also features a fully functional Day/Night cycle, interactive NPCs (like Spartans and Horses), and epic visual assets like a majestic ship and a fiery phoenix.

How we built it

We architected the game using a Singleton-based Modular Game Loop Pattern to keep performance high and the codebase clean.

1. 3D Rendering: The core engine is built on Three.js, managing the rendering pipeline, camera systems (OrbitControls), and custom GLSL shaders for the ocean and lava effects.
2. Physics & Collision: We implemented three/addons/math/Octree (Octree) and Capsule geometries to handle robust collision detection, ensuring the player doesn't walk through walls or fall off the island.
3. UI & Animations: We used Tailwind CSS for responsive overlaid interfaces and GSAP for buttery-smooth camera transitions.
4. Interactivity: Dialogue interactions are handled by Typed.js, triggering whenever the player's 3D bounding box intersects with an event point.
5. Optimization: We used Vite as our bundler for ultra-fast HMR and optimized the build for mobile touch devices.

Challenges we ran into

Handling physics and collision detection on the web without dropping frame rates was incredibly tricky. Mapping a 3D Capsule onto a complex Octree geometry required precise math and extensive debugging. Additionally, ensuring that the 2.5D pixel textures looked crisp (without blurry anti-aliasing) required tweaking the TextureLoader settings to use NearestFilter rendering. Lastly, making an immersive 3D experience perfectly responsive for touch-based mobile devices required several iterations of our UI overlay.

Accomplishments that we're proud of

1. Achieving a buttery-smooth 60 FPS experience even with dynamic lighting, custom shaders, and physics running simultaneously on the browser.
2. Successfully implementing the Day/Night toggle that seamlessly transitions ambient lights, directional shadows, and the skybox texture.
3. Building a completely custom, modular i18n (internationalization) system that effortlessly switches between English and Chinese dialogue on the fly.

What we learned

We vastly deepened our understanding of WebGL performance optimization. We learned how to bake lighting into textures to save real-time rendering costs, how to implement Octrees for spatial partitioning, and how to write custom GLSL shaders to bring environments like oceans and lava to life.

What's next for Island Odyssey

We plan to add multiplayer support using WebSockets/WebRTC so multiple users can explore the island simultaneously. We also want to integrate an AI-powered NPC chatbot that recruiters can "talk" to in order to ask questions about the resume in real-time!

Built With

• css3
• html5
• javascript
• playwright
• tailwindcss
• three.js
• vite
• webgl