My Portfolio is Alive: Built with React, Cloud Run, and Gemini 3.0

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

About Me

Hi, I'm a Full Stack Developer with a passion for Cloud Architecture and Applied AI. For 2026, my goal wasn't just to update my CSS; I wanted to transform my portfolio from a static digital business card into an intelligent agent that actively helps me get hired.

I believe the future of web development is "Agentic"—where applications don't just display data but perform tasks. This portfolio is my proof of concept for that future, marking my transition from standard frontend development to building AI-First Cloud Applications.

Portfolio

Note: If the embed above doesn't load immediately, please click here to view the live app. Be sure to try the Recruiter Mode button in the bottom right corner!)

How I Built It

I architected this application as a production-grade microservice, moving away from simple static hosting to a containerized environment on Google Cloud.

1. The AI Engine (Gemini 3.0)

I integrated Google's Gemini 3 Pro Preview model directly into the React frontend using the @google/generative-ai SDK.

• Recruiter Match: When a user pastes a Job Description, I send a structured prompt to Gemini containing my portfolio data and the JD. The AI analyzes the fit and returns a formatted report explaining why I am the right candidate.
• The PDF Generator: I implemented a feature where Gemini generates a persuasive, custom cover letter in real-time, which is then compiled into a PDF using jsPDF for the recruiter to download.

2. The Infrastructure (Cloud Run)

Instead of a basic static site, I built a custom Docker container:

• Stage 1: Node.js builds the React artifacts.
• Stage 2: Nginx (Alpine) serves the static files. I configured Nginx with gzip compression and aggressive caching headers to ensure a perfect Lighthouse performance score.
• Deployment: I used Google Cloud Build to automate the container creation and deployed it to Google Cloud Run as a serverless service.

3. The Design

To reflect the AI nature of the site, I built a "Living Neural Network" background using tsparticles. The nodes connect dynamically as you move your mouse, visualizing the concept of "connecting the dots" between my skills and the job requirements. I used Framer Motion for "Liquid UI" transitions, ensuring the AI analysis results spring onto the screen organically.

Tools Used:

• Google AI Studio: For prompt engineering and model selection (gemini-3-pro-preview).
• Google Cloud Run: For hosting the containerized application.
• VS Code AI Agents: I utilized AI agents to scaffold the initial components and Nginx configurations.

What I'm Most Proud Of

I am most proud of the Instant Cover Letter Generator.

Most portfolios leave the hard work to the recruiter. My portfolio does the work for them. By combining Generative AI with client-side file manipulation, I turned a standard "Contact Me" interaction into a tangible productivity tool. It demonstrates that I don't just know how to use an API—I know how to solve real user problems with it.

I'm also proud of the "Safe Mode" Nginx configuration I developed. Getting React Router to work correctly with Docker/Nginx on Cloud Run (handling 404s on refresh) was a challenge but architecting a solid conf.d injection strategy makes the app incredibly robust.

---

Powered by Google Gemini & Cloud Run