DEV Community: Jeff Martinez

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

Jeff Martinez — Mon, 02 Feb 2026 06:59:31 +0000

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:

Retro-Futurism Only: Every component must pass the "vibe check."
Enhance, Don't Distract: Animations serve the content, they don't bury it.
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:

Build Stage: Compiles the Vite app.
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.

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

Jeff Martinez — Mon, 02 Feb 2026 06:47:32 +0000

Liquid syntax error: Unknown tag 'cloud_run'

How I Built My 8-Bit Portfolio with Claude Opus 4.5 on Antigravity

Jeff Martinez — Sat, 17 Jan 2026 22:13:00 +0000

Building a developer portfolio in 2025 feels different than it did just a year ago. The tools have evolved, AI has become a legitimate coding partner, and the line between "designing" and "developing" has blurred in the most exciting ways. This is the story of how I built my retro-futuristic portfolio—and how an AI assistant named Claude became my most reliable pair programmer.

The Vision: Cyberpunk Meets Nostalgia

My long-standing fascination with the aesthetic of old-school video games and the neon-soaked visuals of cyberpunk fiction naturally guided my vision. When rebuilding my portfolio, I aimed to create a digital experience that felt like stepping into a futuristic arcade—a place brimming with pixelated fonts, glowing terminals, and nostalgic scanlines. The challenge was to seamlessly blend all that retro charm into a modern React application.

The challenge was making it more than just a gimmick. A portfolio needs to be functional first. It needs to showcase real work, be accessible, and actually help me connect with potential collaborators and employers. The 8-bit aesthetic had to enhance the experience, not get in the way of it.

Starting with Design, Not Code

Before writing a single line of code, I spent time in Figma mapping out the experience. I'm a firm believer that jumping straight into code leads to endless refactoring later. Having a visual reference meant I could make design decisions without the pressure of implementation looming over me.

The design process helped me establish the color palette—electric cyan, neon green, sunset orange, and deep space purples against dark backgrounds. I mapped out the sections: a dramatic hero with my name in pixelated glory, an about section that tells my story, a skills showcase with animated progress bars, projects displayed as terminal windows, and a contact form styled like a command-line interface.

Enter Claude: My AI Pair Programmer

Here's where things got interesting. I'd been experimenting with AI coding assistants, but my experience with Claude Opus 4.5—specifically through an agentic coding platform called Antigravity—was different from anything I'd tried before.

Instead of treating the AI as a fancy autocomplete, I approached it as a true collaborator. I described what I wanted to build, shared my design files, and watched as Claude helped me scaffold the entire React project structure. It suggested component architecture, helped me set up GSAP animations, and even caught accessibility issues I would have missed.

The magic wasn't just in code generation—it was in the back-and-forth. When something didn't look right, I could describe the problem in plain English. When I wanted to add a feature like a typing animation for my tagline, Claude didn't just write the code; it explained the approach and suggested alternatives I hadn't considered.

Bringing It to Life with Animation

A static portfolio feels lifeless, especially one going for a retro-gaming vibe. I leaned heavily on GSAP and ScrollTrigger to create those moments of delight—the hero section with its dramatic reveal, skill bars that fill as you scroll past, project cards that float in with staggered timing.

One of my favorite touches is the holographic projector in the hobbies section. Hover over a hobby category and watch the CRT monitor flicker to life with details about that interest. Small interactions like this transform a portfolio from a static resume into an experience people actually want to explore.

The Technical Stack

For those curious about what powers this site: it's built with React and Vite for fast development and builds. Styling is vanilla CSS with CSS variables for the theme system. Animations are handled by GSAP with ScrollTrigger for scroll-based effects. The backend uses Firebase for the contact form and any dynamic content. Everything is deployed on Vercel with automatic previews for every push.

I intentionally kept the stack simple. Fancy frameworks are great, but for a personal portfolio, I wanted technology that would be easy to maintain and update years from now. React and CSS aren't going anywhere.

Lessons from the Process

Building this portfolio taught me a few things worth sharing. First, AI-assisted development is genuinely powerful when you treat it as collaboration rather than delegation. I still made every design decision and wrote plenty of code myself, but having an intelligent assistant to bounce ideas off accelerated the whole process.

Second, constraints breed creativity. The 8-bit theme could have been limiting, but it actually made decisions easier. Every component had to pass the "does this feel retro-futuristic?" test. That focus prevented feature creep and kept the design cohesive.

Third, accessibility still matters, even with a gimmicky aesthetic. The portfolio works with screen readers, respects reduced-motion preferences, and maintains proper color contrast despite all the neon. Good design is inclusive design.

What's Next

A portfolio is never truly finished—it evolves as you do. I'm already planning to add a blog section for deeper technical writing, integrate some live project demos, and continue refining the animations based on feedback.

If you're thinking about building your own portfolio, my advice is simple: have fun with it. This is the one website where you get to be completely yourself. Make it weird, make it personal, make it something you're proud to share. And if you've got an AI assistant ready to help, don't be afraid to lean on it. The future of development is collaborative—even when your collaborator is a large language model.

Please check out my personal portfolio https://portfolio.jeffdev.studio/ for more info about me and blog posts