DEV Community

Cover image for Svetlina’s Quest: A Gamified Portfolio
Svet
Svet

Posted on

Svetlina’s Quest: A Gamified Portfolio

New Year, New You Portfolio Challenge Submission

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

I’m Svetlina, a lifelong curious engineer and AI enthusiast. My portfolio reflects my journey as a problem-solver, builder, and global thinker — from my early days studying mathematics and computer science, through building software for financial institutions, to exploring AI safety and adversarial prompt engineering.

Rather than a traditional static portfolio, I wanted to turn my professional journey into a game, where each achievement, skill, and milestone is an interactive experience. This gamified approach reflects both my love for technology and my playful approach to storytelling.

Portfolio

I’ve deployed my portfolio as an interactive, scrollable game world. You navigate through five distinct “worlds”, each representing a stage of my career and personal development. Milestones appear as collectible nodes, with hover and click animations that reveal achievements, certifications, and skills.

🌍 The Five Worlds of My Gamified Portfolio are:

🌱 Origins & Foundations

My early years in Bulgaria, where curiosity, mathematics, and computer science laid the groundwork for everything that followed.

⚙️ Engineering Excellence
Telerik & Early Career
The phase where theory met practice — deep software engineering, performance optimization, mentoring, and real-world impact.

🌐 Global Financial Systems
Vizor & Central Banks
Building and leading delivery of complex regulatory systems for central banks across the Bahamas, UK, and Canada.

🚀 Innovation & Leadership
Optum iLab
Driving innovation, agile transformation, and leadership in high-impact enterprise environments.

🧠 AI Red Team & Hackathons
AI Safety
Pushing boundaries in adversarial AI, prompt engineering, and global hackathons — with a strong focus on responsible AI and system resilience.

You can explore it live here (works both on desktop and mobile):

How I Built It

This project blends React, Framer Motion, and TailwindCSS for a smooth, animated, interactive UI. Key elements include:

Gamified Timeline: Each “world” represents a phase of my career. Milestones are clickable and reveal details dynamically.

Animated Character: A fully animated avatar moves through the world, responding to keyboard controls.

Responsive Design: Built to scale from mobile to desktop with flexible layouts.

Fallbacks and Accessibility: Images gracefully degrade with online fallbacks for reliability.

Tech Stack: React, TypeScript, TailwindCSS, Framer Motion, Lucide-React icons.

Google AI Integration: I leveraged AI-assisted prompt generation to implement the application in very little time.
This approach allowed me to combine storytelling, interactivity, and technical skill into a single immersive portfolio experience.

This entire portfolio was built using Google AI Studio and strategic prompting. I leveraged Gemini's capabilities to architect the React component structure, implement the Framer Motion animation sequences, and design the interactive game mechanics that bring the gamified experience to life. Through iterative prompting, I generated the TailwindCSS styling system, crafted dynamic milestone content, and engineered the keyboard navigation logic that enables seamless world traversal. Google AI Studio's rapid iteration capability allowed me to move from concept to fully functional deployment in minimal time, demonstrating how powerful modern AI assistance is for accelerating development without compromising on creativity or technical depth. The entire tech stack—React, TypeScript, Framer Motion, TailwindCSS, and Lucide-React—was synthesized and refined through Google AI Studio prompting, proving that AI-first development can produce polished, production-ready applications.

What I'm Most Proud Of

Gamification of a portfolio: Turning a traditional resume into an interactive adventure is both creative and technically challenging.

Animated and responsive design: Smooth character animation, world transitions, and dynamic milestone reveals.

AI-enhanced storytelling: Using AI tools to generate milestone content and skills descriptions allowed me to focus on design while ensuring clarity and engagement.

Technical achievements: Handling large scrollable “worlds”, dynamic animations, and interactive state management in React while keeping performance smooth.

Immersive experience: Every element — color-coded worlds, glowing achievements, skill bars — is designed to make exploration fun and informative.

I’m excited to share a portfolio that demonstrates both my technical abilities and my creative approach to showcasing them.

Top comments (0)