This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI
About Me
Hi, I'm a Software Engineer who builds web applications from database to deployment. With a strong foundation in React and Node.js, I create seamless user experiences backed by robust APIs and efficient data systems. I enjoy solving real problems through code. I built a puzzle portfolio because I wanted to express that engineering is about solving problems, not just writing code.
Portfolio
Live Demo: https://the-debugger-portfolio-899943784474.us-west1.run.app
How I Built It
The concept was simple: The portfolio loads in a "Critical Failure" state. The user (the recruiter) acts as the Lead Engineer and must drag-and-drop the correct technology chips to "patch" the bugs and reveal my projects.
The Tech Stcak
Frontend: Next.js (App Router) for the framework.
Styling: Tailwind CSS. I leaned heavily into a "Cyberpunk/Terminal" aesthetic to sell the "System Failure" vibe.
State Management: Zustand. I needed a robust state machine to handle the sequential leveling system (Intro -> Level 1 -> Level 2 -> Level 3 -> Victory).
Interactivity: react-dnd for the drag-and-drop mechanics.
Powered by Google AI
Gemini API (The AI Assistant): I integrated the Gemini API to act as a "System AI." If a user struggles to fix a bug (e.g., they try to use MongoDB to fix a Real-Time WebSocket error), Gemini analyzes the game state and provides a context-aware hint. It explains why that tech was the wrong choice, effectively teaching the user about my stack while they play.
Google AI Studio: I used Gemini 3 Pro (Preview) in AI Studio to help architect the "Game State" logic. It helped me map out the complex relationships between the error messages and the valid solutions for my specific projects.
Deployment
The entire application is containerized using Docker and deployed to Google Cloud Run. This ensures that the animation-heavy UI runs smoothly and scales automatically.
What I'm Most Proud Of
First and foremost, I am really proud and amazed of how far AI has come. With just a simple prompt, one can achieve a lot of things (the limitation is just your mind).
I'm also proud of the "Narrative Logic" of the game. I didn't just throw random bugs at the user. Each level corresponds to the actual architecture of my projects:
Level 1 (Save-It): You have to fix the Real-Time layer using Ably/Firebase.
Level 2 (Brij): You have to fix the Fullstack Routing using Next.js.
Level 3 (Graso): You have to fix the Asset Tokenization using Sui Move.
It forces the user to understand the architecture of my projects to win. By the time they unlock the final screen, they don't just know what I built—they understand how I built it.
Top comments (0)