New Year, New You Portfolio Challenge by Simpled1
Source: Dev.to
This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI
About Me
I am a Full Stack Engineer passionate about bridging the gap between complex algorithmic logic and human intuition. My goal with the “New Year, New You” challenge was to move beyond static text and predictable grids. I wanted to build a portfolio that demonstrates engineering capability rather than just listing it. I believe code should be experienced—heard, seen, and interacted with—so I designed this application to turn abstract concepts like sorting algorithms and the JavaScript Event Loop into tangible, interactive experiences.
Portfolio
How I Built It
This portfolio is a single‑page application engineered for performance and interactivity.
Tech Stack
- Framework: React 19 & TypeScript (Vite)
- Styling: Tailwind CSS with a custom “Cyber‑Minimalist” aesthetic (Zinc/Slate palette with neon accents)
- Animation: Framer Motion for complex layout transitions and physics‑based interactions
- Audio: Native Web Audio API for real‑time frequency synthesis (sonification of algorithms)
- Deployment: Containerized with Docker and served via Nginx on Google Cloud Run
Google Gemini AI Integration
I wanted the AI to be a context‑aware tutor, not just a chatbot. Using the free Gemini 2.5 Flash API, I integrated it directly into the visualization engines:
- Algorithmic Commentary: In the Sorting Visualizer, Gemini analyzes the current frame of the array (comparing indices, swap logic) and generates witty, sports‑commentator‑style explanations of why a swap is happening.
- Runtime Tutor: In the Event Loop simulation, the AI analyzes the Call Stack, Microtask Queue, and Macrotask Queue to explain priority rules (e.g., why a Promise resolves before a Timeout).
- Semantic Maze Generation: In the Pathfinding section, users can type natural‑language prompts (e.g., “A bunker with 3 rooms” or “A spiral pattern”), and Gemini translates that intent into a 2D JSON grid layout for the pathfinding algorithms to solve.
What I’m Most Proud Of
I am most proud of the Event Loop Visualizer. It is notoriously difficult for new developers to understand how JavaScript handles asynchronous operations (Microtasks vs. Macrotasks). I built a step‑by‑step debugger that visualizes code execution, the Call Stack, and the Web API in real time.
I’m also proud of the Audio Synthesis engine. Instead of using pre‑recorded MP3s, I used the Web Audio API to generate oscillators on the fly. This allows the Sorting Visualizer to “sing”—you can actually hear the difference between the chaotic noise of an unsorted array and the satisfying rising sweep of a sorted one, making the algorithms accessible to more senses.
