Building a High-Performance Portfolio with Next.js

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

About Me

I'm a full-stack developer passionate about creating beautiful, performant web experiences. After years of building internal dashboards and enterprise applications, I decided to invest time in crafting a portfolio that genuinely represents my work—not just another template. This project became an exercise in balancing visual polish with technical depth, proving that personal projects are where developers truly grow.

Portfolio

Check out the deployed portfolio here:

https://portfolio-358673208762.us-central1.run.app

How I Built It

Tech Stack

• Framework: Next.js 16 (App Router) with TypeScript
• Animations: Framer Motion + GSAP (ScrollTrigger)
• Styling: Tailwind CSS 4 + Stitch (AI-powered design-to-code)
• Deployment: Google Cloud Run with Cloud Build
• Development: Gemini CLI (vibecoding), Antigravity (agentic IDE)

Design Decisions

Animation Strategy: Rather than over-animating, I used purposeful animations with GSAP's ScrollTrigger to reveal content as users scroll. The floating certification cloud uses staggered Framer Motion animations for a premium feel without being distracting.

Dark Theme with Green: A deliberate choice inspired by terminal interfaces. The #ccff00 accent color creates visual hierarchy and draws the eye to key information.

Leveraging Google AI Tools:

• Stitch transformed my wireframes and design ideas directly into clean UI code. Upload a sketch → get functional React components instantly. This cut design-to-code time by weeks.
• Gemini CLI made making this portfolio possible. I dropped a GEMINI.md file with my coding standards (TypeScript-first, component patterns, naming conventions) and let Gemini CLI handle the boilerplate. It caught inconsistencies I would've missed manually.
• Antigravity sits in the background as my agentic IDE, orchestrating multi-step tasks like "refactor the animation logic" or "add accessibility features to all components" without my constant intervention.

Performance Optimization:

• Prerendered static pages (no unnecessary server requests)
• CSS-in-JS minimized through Tailwind's JIT compilation
• Lazy loading for heavy animations
• Cloud Build + Cloud Run for automatic deployment and scaling

Deployment Process

The hardest part? Getting the Docker build right. The initial Dockerfile attempted to use Next.js standalone mode, but the .next directory is gitignored (rightfully so). Here's what worked:

FROM node:18-alpine AS builder
# ... build steps ...

FROM node:18-alpine AS runner
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/public ./public
COPY package.json ./
CMD ["npm", "start"]

Cloud Build automatically picks up changes from git pushes, rebuilds the container, and deploys to Cloud Run. Total deployment time: ~90 seconds.

What I'm Most Proud Of

1. The Certification Cloud Component

Seven floating badges arranged in a constellation pattern, each with individual bobbing animations and hover effects. It's purely visual but perfectly captures the "accomplished professional" narrative without a boring bullet list.

2. Infinite Company Carousel

Seamlessly loops through 22 years of career history. The animation is GPU-accelerated and pauses on hover—small details that signal polish.

3. Responsive Without Compromise

Works identically from mobile to 4K displays. The hero text scales with clamp(), certifications hide gracefully on small screens, and the layout adapts without feeling cramped.

4. The Build Debugging Journey

Figuring out why Cloud Build was failing taught me about .gcloudignore, container layer optimization, and the importance of clear Dockerfiles. Sometimes the process is more valuable than the product.

Key Learnings

• Animation isn't free: Each GSAP animation adds ~2KB. I spent time profiling to keep the bundle lean.
• Scroll hijacking is tempting but evil: Resist it. Users want predictable scroll behavior.
• TypeScript saves production headaches: Caught undefined refs to components before deployment.
• Docker build context matters: Thoughtful .gcloudignore and .gitignore configuration prevents bloated images.

Integrating Google AI into the Workflow

What surprised me most was how natural it felt to weave Google's AI tools into the development loop:

Stitch proved invaluable at the design phase. Instead of fighting Figma or hiring a designer, I described the aesthetic ("dark theme, bold typography, floating elements") and pasted my wireframe. Stitch generated the initial UI structure in minutes. From there, I refined it, exported React code, and had a functional starting point.

Gemini CLI transformed development velocity. Vibecoding isn't just hype—it's real. I created a GEMINI.md documenting my preferences:

- Use TypeScript with strict mode
- Components in /app/components with .tsx extension  
- Tailwind for styling, no CSS files
- Export as named exports, not default

Then I could ask Gemini CLI to "build the company carousel component" and it would follow my standards automatically. No more code reviews saying "fix the naming conventions."

Antigravity handles the heavy lifting. Need to refactor animations across all components? Tell an Antigravity agent to "make all motion animations use framer-motion consistently" and it plans the work, executes changes across files, validates the output, and iterates until it's right. You're no longer coding—you're directing.

Next Steps

Planning to add:

• Blog section using Stitch-generated layouts + Gemini CLI for post generation from my notes

- Advanced component library leveraging Stitch's design-to-code pipeline

If you're building something similar: try Stitch for your next design, drop a GEMINI.md in your repo, and let Gemini CLI handle the scaffolding. You'll ship faster, and your code will be more consistent.

Built with ❤️ + Next.js + Stitch + Gemini CLI + Antigravity + Google Cloud Run