DEV Community

Cover image for From Zero to AI: How I Built an Interactive Portfolio with Google Antigravity & Gemini (Zero Investment Challenge)
Keerthana
Keerthana

Posted on

From Zero to AI: How I Built an Interactive Portfolio with Google Antigravity & Gemini (Zero Investment Challenge)

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

🚀 About Me

I'm a 3rd-year B.Tech AI/ML student grinding through college while simultaneously learning full-stack development, AI integration, and entrepreneurship—all with zero investment. This portfolio isn't just a resume; it's proof that financial constraints don't limit innovation. Building real-world AI projects while juggling coursework has taught me that the best tool isn't always the most expensive one—it's the one you actually use.

🎯 The Challenge: Build with Nothing, Deliver Everything

When I saw the Google AI portfolio challenge, I had one constraint: ₹0 investment. No credit cards for Cloud services, no paid software subscriptions. Just free tools and relentless creativity.

Result? An interactive, AI-powered portfolio deployed to the web with zero spend.

đź’Ž Live Portfolio

👉 https://portfolio-lake-ten-46.vercel.app

Click around. Try the AI Playground—it's live, it's powered by Google Gemini, and it actually responds to your questions in real-time. That's not a screenshot; that's a working AI assistant built into my portfolio.


🛠️ How I Built It: The Complete Stack

Tech Stack (100% Free)

Component Tool Why?
Frontend React + Vite Lightning-fast builds, industry standard
AI Engine Google Gemini API (Free Tier) Cutting-edge LLM without the bill
Prototyping Google Antigravity Game-changer (more on this below)
Hosting Vercel Automatic deployments, zero cost
Design Custom CSS Full control, no framework bloat
Version Control GitHub Essential for any serious dev

🎨 The Secret Weapon: Google Antigravity

This is where the magic happened.

Google Antigravity is a free, AI-assisted web app builder that I discovered while exploring Google's AI ecosystem. Instead of staring at a blank canvas wondering where to start, I:

  1. Prototyped rapidly in Antigravity—described my portfolio concept and let AI generate layout suggestions
  2. Iterated instantly—changed colors, reorganized sections, tested different designs without coding
  3. Exported clean code—got actual React/HTML that I could refine further
  4. Learned while building—Antigravity's code showed me best practices I could adapt

The wow factor? What would normally take a junior dev 2-3 days of CSS tweaking and layout trial-and-error took me hours. I went from idea → deployed prototype in a single day. That's the Antigravity advantage.

Shout-out to the Google Antigravity team—this tool deserves way more hype in the dev community.


🔥 What I'm Most Proud Of

1. Live AI Playground Integration

Not a static demo. A real, working AI assistant powered by Google Gemini API. Visitors can:

  • Ask AI questions about my skills, projects, or anything else
  • Get instant, intelligent responses
  • See AI in action without leaving the site

This isn't just impressive; it's functional. It proves I understand API integration, async/await, error handling, and real-time user interactions.

2. Built with Antigravity—A Study in Modern Development

I could've coded this from scratch. Instead, I strategically used Antigravity to validate design decisions and accelerate prototyping. This shows:

  • Pragmatism: Using the right tool for the job
  • Efficiency: Shipping faster without sacrificing quality
  • Adaptability: Learning new platforms and maximizing their potential

3. Zero-Investment, Maximum Impact

Every line of code runs on free services. Every feature works without a credit card. This proves that constraints breed creativity—and that you don't need a VC-funded budget to ship professional work.

4. Professional Design with Personal Flair

Custom gradient backgrounds, smooth animations, responsive mobile design, and a modern aesthetic that doesn't look like every other portfolio. It stands out because it's actually designed, not defaulted.

5. Full Development Workflow

From prototyping → coding → GitHub → automated deployment on Vercel. This is how professional teams ship software. And I did it as a solo student with free tools.


đź’» The Development Process

Day 1: Ideation & Prototyping

  • Explored Google Antigravity and understood its capabilities
  • Prototyped portfolio layout, color schemes, and interaction patterns
  • Generated multiple design variations in hours (not days)

Day 2: Development & Integration

  • Exported Antigravity code and cleaned it up in VS Code
  • Integrated Google Gemini API for the AI Playground feature
  • Built custom components for projects, skills, and contact sections
  • Tested responsiveness across devices

Day 3: Deployment & Optimization

  • Pushed code to GitHub
  • Deployed to Vercel with automatic CI/CD
  • Tested live site and optimized performance
  • Live on the web âś…

🎓 Key Learnings

  1. Google Antigravity is a productivity multiplier for anyone who struggles with design paralysis
  2. Free tier APIs are production-ready—Gemini API is genuinely powerful without paying a rupee
  3. Vercel is criminally underrated—deploy a full React app with zero configuration
  4. Constraints force creativity—the ₹0 budget actually made me more innovative, not less
  5. Shipping > Perfection—a live portfolio beats a perfect draft any day

🚀 What's Next?

  • Add more Gemini API features (code review assistant, AI-powered resume generator)
  • Expand projects section with live demos
  • Monetize insights through technical blogging on Dev.to, Hashnode, and Medium
  • Potentially build this as a template for other students

🙏 Special Thanks

  • Google Antigravity for making UI/UX accessible to developers who aren't designers
  • Google Gemini API for providing world-class AI without a paywall
  • The DEV community for inspiration and pushing me to build better

📱 Try It Out

Live Portfolio →

Seriously. Click the AI Playground button. Ask it something. That's my work running in your browser right now.


Questions? Suggestions? Hit me up in the comments—I'm here to help other students build without breaking the bank. 💪


Tags:

#googleai #gemini #portfolio #webdev #react #antigravity #zero-budget #ai #learning #buildinginpublic

Top comments (0)