This is a submission for the Built with Google Gemini: Writing Challenge
What I Built with Google Gemini
Portfolios are supposed to showcase who you are as an engineer. Yet, somewhere along the line, we all started building the exact same thing: a clean header, a bouncy CSS grid of project cards, and a massive "Contact Me" button. I realized that the best part of discovering an engineer's work isn't just reading it, it's the act of discovery itself.
So, I decided to plunge my entire CV into pitch darkness.
I built the Interactive Torch Portfolio. It is an experimental, mobile-first single-page application (SPA) where the screen is completely black. The only way to read my bio, my skills, or see my projects is by physically dragging a virtual, flickering "torch" around the screen to carve a hole of light into the darkness.
I chose not to use React, Next.js, or any massive libraries. I wanted to build this purely with HTML, CSS, and vanilla DOM manipulation. But I knew that calculating the physics of a moving torch and handling complex HTML5 Canvas blend modes would be a massive headache.
That's where Google Gemini stepped in, not just as an autocomplete tool, but as my mathematical pair programmer.
Demo
If you want to experience the thrill of exploring the portfolio yourself, you don't even need to leave this page. You can try the live Google Cloud Run deployment right here:
The entire codebase is containerized using a lightweight nginx:alpine image and deployed seamlessly to Cloud Run.
- URL: https://depapp-torch-726779073670.asia-southeast2.run.app
- GitHub Repository: https://github.com/depapp/senter
What I Learned
Building this pushed my boundaries on how creative front-end web development can be when you strip away the frameworks and return to first principles.
1. Advanced Canvas Blend Modes (Technical Depth)
I leveled up my understanding of the HTML5 <canvas> API, specifically working with globalCompositeOperation. I needed to render total darkness, but physically "cut out" a transparent hole where the mouse moved. Gemini helped me implement this precise logic without destroying the browser's framerate:
// Fill the screen with darkness
ctx.fillStyle = '#050505';
ctx.globalCompositeOperation = 'source-over';
ctx.fillRect(0, 0, width, height);
// "Cut out" the darkness using the glowing gradient
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = gradient; // radial gradient for soft edges
ctx.beginPath();
ctx.arc(startX, startY, maxRadius, 0, Math.PI * 2);
ctx.fill();
Mastering how to stack destination-out for the flashlight beam and screen/lighter for the ambient fire glow on top of a single <canvas> element was incredibly rewarding.
2. Translating Physical Mechanics
A standard custom cursor feels weightless. I wanted my torch to feel heavy. Working with Gemini taught me how to articulate visual physics into actionable engineering prompts. I explained the physical logic of "make the torch tilt like a heavy pendulum based on mouse movement speed," and Gemini translated my abstract thought directly into the Math.cos and Math.sin rotation matrices required to make the SVG torch swing realistically on its pivot.
3. The Power of Vanilla Performance
By relying purely on requestAnimationFrame and a Canvas context instead of virtual DOM diffing, the application loads instantaneously and maintains a buttery-smooth 60 FPS even while rendering hundreds of animated, math-driven fire particles.
Google Gemini Feedback
What worked beautifully:
Gemini's ability to retain context over a long architectural discussion is unmatched. The project didn't start as a medieval torch, it started as a modern flashlight. When I decided to pivot the art direction, I simply asked Gemini to "change the flashlight element to a sputtering wooden torch, but keep the noise overlay and the physics we discussed earlier." It flawlessly generated the new SVG coordinates while respecting the existing z-index layers. Its translation of physical concepts (friction, gravity, pendulum swings) into JavaScript mathematics saved me hours of staring blankly at MDN documentation.
Where I ran into friction:
There were moments where I had to specifically prompt Gemini to optimize for mobile touch events. Initially, the torch effect worked beautifully on a desktop mouse, but standard mousemove events don't map perfectly to touchmove and touchstart on mobile devices without causing erratic scrolling. While Gemini eventually provided the correct code (adding { passive: true }), I had to be the one to explicitly recognize and request the mobile-first structural adjustments. It also occasionally required a nudge to prefer vanilla CSS Flexbox solutions over immediately reaching for JavaScript viewport calculations when styling the grid layout for the hidden content.
Ultimately, Gemini wasn't just a code generator; it was a sounding board for design concepts and a mathematical assistant that brought a very ambitious, pitch-black idea to life.
Top comments (0)