Inspiration
We wanted to reimagine the traditional portfolio by making it interactive and memorable. Inspired by classic RPGs like Pokémon, we aimed to blend nostalgia, playfulness, and professional storytelling.
What it does
FolioDex is a portfolio presented as a 2D exploration game. Users control a character, explore a town, interact with NPCs, and unlock portfolio projects, which are then viewable in a dedicated FolioDex interface.
How we built it
We combined Vue 3 for the UI and overlays with Phaser 3 for the game engine. Game assets and maps were created with Tiled and managed in JSON. Communication between Vue and Phaser is handled via custom events and global methods.
Challenges we ran into
Synchronizing state between the Vue UI and Phaser game world was tricky, especially for unlocking projects and handling overlays. Ensuring accessibility and smooth keyboard navigation also required careful design. Finding and creating game assets is also extremely time consuming.
Accomplishments that we're proud of
We’re proud of creating a seamless blend between a game and a portfolio, making the experience both fun and informative. The unlockable project system and in-game help/contact overlays add polish and usability.
What we learned
We learned how to bridge two very different frameworks (Vue and Phaser), manage game state with UI state, and design for both playability and clarity in a professional context.
What's next for Soon Yan's Portfolio
We plan to add more interactive elements, richer NPC stories, and possibly mini-games. We also want to improve mobile support and add analytics to see how users engage with the portfolio.
Log in or sign up for Devpost to join the conversation.