As a passionate web developer with a love for playful interfaces, I wanted my portfolio to feel like more than just another website. I didn't want a static scrolling page with a grid of projects and a contact button. I wanted to build an experience — something that would immediately communicate my personality, creativity, and technical skill the moment someone landed on it. That vision led me to create a fully interactive retro game-inspired portfolio, blending the nostalgia of pixel art adventures with the performance and reliability of modern web tooling.
Instead of passively reading about my skills, visitors can explore a virtual world, interact with elements, trigger dialogues, and discover my work as if they were uncovering secrets in a game. Every scene, every click, and every animation is designed to reflect how I think about crafting user experiences: fun, fast, and memorable.
The Tech Stack
Vite
At the heart of this project is Vite, the ultra-fast development tool that makes building modern frontends feel almost frictionless. Its instant server startup, native ES module support, and blazing-hot HMR made it perfect for rapid iteration as I designed and tested gameplay mechanics in real time. Unlike older bundlers, Vite doesn't make me wait — I can experiment, tweak, and ship faster.
Beyond speed, Vite's flexible configuration allowed me to structure my code cleanly. I organized the portfolio like a real game project: separating assets, scripts, and game states while still benefiting from optimized production builds that load in a flash.
Kaboom.js
To actually bring the game world to life, I turned to Kaboom.js, a delightful lightweight game engine designed specifically for 2D experiences. Kaboom's simple API let me create scenes, animations, collisions, and interactions without wrestling with low-level rendering details.
The magic of Kaboom.js is its developer experience. Within minutes, I had a character walking across the screen. Within days, I had a dynamic world where visitors could move around, talk to NPCs (non-player characters), and unlock content. It felt less like coding a website and more like designing a game.
Firebase Hosting
For deployment, I wanted something equally smooth. Firebase Hosting checked all the boxes: global CDN, SSL by default, zero-downtime deploys, and painless previews. Its tight integration with CI/CD pipelines makes pushing updates a breeze. I can experiment locally, test changes in a preview channel, and then ship to production without worrying about server maintenance or scaling.
The Challenges
Integrating Kaboom.js with Vite
Kaboom.js was originally built with standalone HTML and JavaScript in mind, so integrating it cleanly with Vite's module system wasn't as straightforward as dropping in a script tag. I had to tweak the build configuration, handle asset paths carefully, and ensure that hot module replacement didn't break the game state mid-development.
Once I solved those integration quirks, though, the workflow became seamless. Vite's live reloading and Kaboom's simplicity created an incredibly fast feedback loop that made building new features almost addictive.
Handling Dialogue and Player Interaction
One of the most satisfying parts of the project was building the interaction layer. I wanted movement and dialogue to feel responsive and polished, even though this isn't a "real" video game. I created a custom input system that reads mouse clicks and keyboard input, moving the character toward the clicked location with smooth directional animation swaps.
For dialogue, I designed a lightweight system that types text letter by letter, displays character names, and gives players a clear way to advance or close conversations. This small touch gives the portfolio a game-like pacing that keeps visitors engaged rather than just scrolling past text.
Optimizing Performance
Since this isn't just a static landing page, performance mattered. I had to make sure animations, sprite rendering, and event handling ran smoothly across browsers and devices. I optimized image assets, carefully loaded only what was needed per scene, and took advantage of Vite's bundling to keep everything lean.
Conclusion
Shipping this retro game-inspired portfolio was one of the most rewarding builds I've ever done. It pushed me to think differently — not just about code, but about storytelling, interaction, and how to make my work stand out in a sea of templates and frameworks.
By combining the speed of Vite, the playfulness of Kaboom.js, and the reliability of Firebase Hosting, I created a space that feels alive. Visitors don't just read about my skills; they experience them. And that, I believe, is the future of how developers can present their craft: interactive, personal, and unforgettable.
This project taught me to embrace experimentation, solve unconventional problems, and bridge the gap between games and websites. I'm already planning new features — secret areas, Easter eggs, and dynamic content — to keep pushing this idea further. After all, the web doesn't have to be static. It can be a playground.