Building a Cyberpunk Portfolio with React, Cloud Run, and Gemini AI

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

Introduction: Breaking the Mold

Hi, I'm Jeff. I'm a 3rd Year BSIT Student, Student Body President, and a freelance developer known as the "Vibe Coder."

I exist in the chaotic intersection of grinding out freelance deadlines and building "self-hosted" solutions at 3 AM. When it came time to build my portfolio, I refused to use a sterile, corporate template. I wanted to express the struggle and joy of coding through a Retro-Futuristic / Cyberpunk lens—a love letter to the 8-bit era, rebuilt with the tech of 2025.

The result is a containerized application running on Google Cloud Run, powered by a custom Gemini AI integration.

The Portfolio

JeffDev Studio | Vibecoder Developer

Portfolio of Jeff Martinez - Specializing in High-Performance Web Applications, React Architecture, and 8-bit aesthetic designs.

gcp.jeffdev.studio

(Note: If the embed above doesn't load, check out the live site at gcp.jeffdev.studio)

🔗 Quick Links:

• Live Site: gcp.jeffdev.studio
• Source Code: GitHub Repository

---

1. The Vision: Design with a Soul

I didn't write a single line of code until I had defined the "vibe." I spent hours in Figma mapping out an experience that felt like stepping into a futuristic arcade cabinet.

• The Palette: Electric cyan, neon green, and deep space purples.
• The Aesthetic: Pixelated fonts, glowing terminals, and nostalgic scanlines.

The Goal: Make it feel like a game, not a resume.

To ensure quality, I established strict design rules:

1. Retro-Futurism Only: Every component must pass the "vibe check."
2. Enhance, Don't Distract: Animations serve the content, they don't bury it.
3. Inclusive Design: Accessibility is non-negotiable.

2. The "Antigravity" Workflow

Building this solo meant I needed a force multiplier. I used my "Antigravity" workflow: treating AI not as autocomplete, but as a Senior Pair Programmer.

I didn't just prompt "make a website." I fed the AI my design rules and "laws of physics" for the UI. It helped me scaffold the architecture and solve complex CSS specificity wars for the CRT monitor effects.

The Tech Stack

• Frontend: React 19 + Vite (for speed).
• Animation: GSAP + ScrollTrigger (for buttery-smooth reveals).
• Backend: Firebase Firestore (Real-time data) + Auth.
• Hosting: Google Cloud Run (Dockerized).

---

3. The Crown Jewel: Gemini-Powered Intelligent Editor

I hate staring at blank Markdown files. I wanted a smart writing partner built directly into my portfolio's admin panel.

The Architecture:
User Chat → Intent Detection (Regex) → Gemini 2.5 Flash API → Diff Preview

Intent Detection & Diff Previews

Using regex pattern matching and Gemini's natural language understanding, the system distinguishes between:

• Conversational Questions: ("Is this clear?") → Returns a chat reply.
• Edit Requests: ("Fix the grammar") → Returns a structured code block.

When an edit is requested, I don't just apply it blindly. The system generates a Green/Red Diff Preview, allowing me to granularly accept or reject changes.

Why Gemini 2.5 Flash? It's fast, incredibly affordable, and its large context window allows it to remember the entire history of the post I'm writing.

---

4. Deploying on Google Cloud Run

To enter the "New Year, New You" challenge, I graduated from static hosting to Google Cloud Run.

The Docker Journey

I built a multi-stage Dockerfile:

1. Build Stage: Compiles the Vite app.
2. Production Stage: Copies assets into a minimal Node.js image (140MB) running a lightweight Express server.

⚠️ The Environment Variable Gotcha

I encountered a critical bug: my Firebase keys were undefined in the production build despite being passed as Docker arguments.

The Fix: Vite doesn't bake environment variables into the client bundle unless explicitly told to. I had to use the define option in vite.config.js:

javascript
// vite.config.js
define: {
  'import.meta.env.VITE_FIREBASE_API_KEY': JSON.stringify(env.VITE_FIREBASE_API_KEY),
}
Now, my pipeline is fully automated via GitHub Actions. Every push to main builds the container and deploys to Cloud Run in under 4 minutes.

5. Performance Meets Aesthetics
A site with neon glows and scanlines shouldn't be slow.

Lighthouse Scores: 98/100 Performance, 100/100 Accessibility.

First Contentful Paint: ~0.8s.

Accessibility: Full keyboard navigation and support for prefers-reduced-motion.

Final Thoughts
This project taught me that the best way to learn is to build for yourself without compromises. The intersection of retro aesthetics and modern cloud infrastructure might seem odd, but that's the point. We need more personality in our portfolios.

Go build something that makes you smile every time you look at it.

Created for the Google AI Dev.to Challenge.