From Idea to Prototype in Minutes: Building My Portfolio with Antigravity

Source: Dev.to

Introduction

This portfolio was created for the New Year, New You Portfolio Challenge presented by Google AI. I’m Ntombizakhona Mabaso, a Cloud Engineer and Web Developer based in Johannesburg, South Africa. My goal was to showcase my tech journey, certifications, content creation, and an AI‑powered digital twin that can answer questions about my work 24/7.

Tech Stack

• Frontend: Next.js 14 with TypeScript and CSS Modules
• AI Integration: Google Gemini AI (via @google/generative-ai SDK)
• Icons: Lucide React for consistent iconography
• Deployment: Google Cloud Run with Cloud Build CI/CD
• Version Control: GitHub with automated deployments

Project Overview

The portfolio brings together my certifications (Google Cloud Professional Architect, AWS certifications, Microsoft AI Fundamentals), articles on Medium and Dev.to, and the Cloud Glossary Podcast on Spotify. A key feature is an AI chat widget that acts as a digital twin of me, answering queries such as “What certifications does Ntombizakhona have?” or “Tell me about your cloud experience.”

Development Journey

1. Starting from an Idea

I began by outlining the core sections I wanted to include:

• Hero section with animated typing effects
• Skills section with animated progress bars
• Certifications showcase
• “Blogs & Articles” section linking to external content
• Light/Dark theme toggle for accessibility
• Floating particle animations for a premium feel

2. Designing the Experience

Using Antigravity, Google’s AI coding assistant, I iterated on UI components, animations, and responsive layouts. The design emphasizes a rose‑gradient color scheme, smooth transitions, and a modern, premium aesthetic.

3. Building the AI Digital Twin

• Tool: Google Gemini
• Approach: Crafted a system prompt that captures my personality, skills, and communication style.
• Result: Visitors can interact with a chat widget that provides accurate, personalized answers about my work, certifications, projects, and blog posts.

4. Feminizing the Design

Adjusted color palettes, typography, and micro‑interactions to create a more inclusive and approachable visual language.

5. Deploying to Cloud Run

1. Dockerfile – multi‑stage build optimizing the Next.js application.
2. cloudbuild.yaml – defines the CI/CD pipeline for Cloud Build.
3. GitHub Integration – pushes to the main branch automatically trigger builds and deployments.

# Dockerfile (multi‑stage)
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/package*.json ./
RUN npm ci --only=production
EXPOSE 3000
CMD ["npm", "start"]

# cloudbuild.yaml
steps:
  - name: 'gcr.io/cloud-builders/docker'
    args: ['build', '-t', 'gcr.io/$PROJECT_ID/portfolio:$SHORT_SHA', '.']
  - name: 'gcr.io/cloud-builders/docker'
    args: ['push', 'gcr.io/$PROJECT_ID/portfolio:$SHORT_SHA']
  - name: 'gcr.io/cloud-builders/gcloud'
    args:
      - 'run'
      - 'deploy'
      - 'portfolio'
      - '--image'
      - 'gcr.io/$PROJECT_ID/portfolio:$SHORT_SHA'
      - '--region'
      - 'us-central1'
      - '--platform'
      - 'managed'
      - '--allow-unauthenticated'
images:
  - 'gcr.io/$PROJECT_ID/portfolio:$SHORT_SHA'

Key Services

• Google Gemini API: Powers the AI Digital Twin chat feature.
• Google Cloud Run: Hosts the containerized Next.js application.
• Google Cloud Build: Automates the CI/CD pipeline.
• Antigravity: The AI coding assistant that helped build everything from concept to prototype.

Reflections

The chat widget is more than a gimmick; it provides genuine value by sharing knowledge about my certifications, projects, and personality even when I’m unavailable. Building this portfolio with Antigravity reduced weeks of work to just a few AI‑assisted sessions—writing components, debugging, configuring Docker, and setting up CI/CD were all accelerated.

The final site combines premium visuals (rose‑gradient scheme, floating particles, smooth animations) with a robust, production‑grade infrastructure that automatically deploys on every Git push. This demonstrates the professional standards I practice as a Cloud Engineer.

Takeaway: AI coding assistants aren’t replacing developers; they’re supercharging us. Antigravity felt like a tireless senior engineer partner, and I’m excited to continue building collaborative, AI‑enhanced applications.