DEV Community: Nhi Nguyen

I Let an AI Agent Rebuild My Portfolio: Here’s How Antigravity Designs My Best UI App Ever

Nhi Nguyen — Mon, 12 Jan 2026 16:01:44 +0000

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

About Me

Hii, I'm Nhi Nguyen, a CS student and ex-Software Engineer Intern in Toulouse, France. To be honest, I’ve always found traditional portfolios a bit... static, yea that is exactly what my previous portfolio looks like. So, for the Google AI Portfolio Challenge, I wanted to build something that didn't just show my work, I wanted it to show the future of development.

What happens when you combine a Vietnamese girl Software Engineer's love for food and pop music with the power of Gemini and Antigravity? You get a futuristic, MacOS-inspired digital workspace.

Portfolio

Before reading how it works, go play with my computer.
Step into my digital office 🚀: Launch the Futuristic Portfolio
(Don't forget to check out the 'Get To Know Me' section—it's not what you expect!)

How I Built It: The 100% AI-Architected Workflow

This project was a massive leap forward from my previous portfolio. You can see the stark contrast between the old and new here:

💻 The Tech Stack

To build a high-performance, AI-driven application, I chose a modern stack that balances speed with scalability:

Frontend: React + Vite (for lightning-fast HMR)
Styling: Tailwind CSS + Framer Motion (for the MacOS animations)
Backend/Database: Google Firebase & Firestore
Deployment: Google Cloud Run (Containerized for maximum reliability)
AI Orchestration: Gemini 3 Pro (High) via Antigravity AI Agent
Antigrativy had help me to create this project 100%, from the design to the translation of content to backend setup and also the deployment to Google Cloud Run. This shows how powerful this IDE can be, the best IDE I've used so far.

🎨 The Design Journey: From Vision to "Voilà!"

Building this wasn't just about writing code; it was about translating a personality into a digital experience. I treated Gemini as my Creative Director, using the Planning Mode to establish a "North Star" for the project.

My initial prompt was a mix of my identity and my technical goals:

"I want to create my portfolio website in a modern, futuristic design with a mix of small food and pop music influences. I am a Vietnamese girl and a software engineer, and I want it to be as creative as possible. Sections must include: blogs, projects, work experience, and an 'About Me' section."

Gemini didn't just give me a layout; it gave me a strategy. After refining the plan and polishing the initial web app structure, I realized it needed a "Wow" factor.

✨ The Evolution: The "Finder" UI

The idea for the MacOS Finder interface actually came later as a result of a recursive AI workflow. To pull off such a complex UI, I followed a two-step process:

Refinement: I used Gemini to "interview" me, helping to elaborate on the exact technical requirements and folder logic for a MacOS-style interface.
Execution: I fed that ultra-specific, refined prompt into Antigravity’s AI Agent. The result was honestly staggering. Antigravity delivered a pixel-perfect, error-free UI that mimicked the Finder app's logic while maintaining my "futuristic foodie" aesthetic. It was a perfect example of what happens when you stop fighting the tool and start partnering with it.

What I'm Most Proud Of

1. The "Finder" UI Experience

The centerpiece of this project is the 'Get To Know Me' section. I didn't want a boring 'About' page. Instead, I worked with Gemini to prompt an AI agent to build a fully functional MacOS Finder clone.

Interactive Folders: Browse my education and interests like you're looking through my actual laptop.
Aesthetic: A blend of futuristic glassmorphism and pop-culture vibes.
The Logic: Built using Framer Motion for that buttery-smooth 'Apple' feel

2. Leveling Up My DevOps & Cloud Game

Before this challenge, many of these tools felt like "buzzwords." Now, they are part of my toolkit. I am incredibly proud of mastering:

Docker: Containerizing the React application for consistent environments. -Nginx: Learning how to configure a high-performance web server to handle my frontend assets.
Google Cloud Run: Deploying a containerized service to the cloud and managing its lifecycle.
Firebase: Seamlessly integrating a NoSQL backend for project data and blog content.

Try It Out!

Thanks for checking out my portfolio. I had a blast pushing the boundaries of what an AI IDE can do.

👇 Challenge: I’ve hidden a few fun details in the "Interests" folder of my Finder UI. Go explore my laptop and let me know in the comments what you find!

Stop Learning Code the Slow Way. Here's My AI Playbook to Learn 5x Faster

Nhi Nguyen — Thu, 18 Sep 2025 02:49:47 +0000

"I went from knowing zero about Flutter to building a complete Todo app in just 4 days using this method"

This summer, I fundamentally changed how I learn new technology. The old way, endless tutorials, scattered docs is broken. The new way is a systematic partnership with AI.

Huge credit to my mentor for pushing me to build this framework. This isn't about asking an AI to "write code for me." It's about using it as an expert tutor, a Socratic partner, and a code reviewer, available 24/7.

The result? I'm ramping up on complex theories, new tools, and entire frameworks in a fraction of the time.

Here's the 3-part playbook I developed, tailored for different learning scenarios:

My Secret Weapons:

GenAI Chatbot: Gemini Advanced, ChatGPT-4, or Claude 3

(The advanced models are non-negotiable for deep, accurate reasoning)

AI-Native IDE: Cursor (my go-to for in-context learning)

PART 1: Master Theory & Concepts (The "Personal Textbook" Method)

Perfect for: System design, architecture patterns, distributed systems

The Big Idea: Use AI Deep Research mode to generate a personalized book about ANY topic you want to master.

Step 1 (AI Chat Mode): Craft the Perfect Learning Prompt

Instead of a simple question, your first prompt should be a command for the AI to create a comprehensive learning plan for you.

Prompt Structure:

Context: Your goal, current skill level, and what you already know
Task: Instruct the AI to generate a master prompt for a deep research model

Real Example: You're a developer who knows Python, but terms like "Singleton" or "Factory" are just buzzwords to you. You want a structured guide to finally understand design patterns.

Copy-Paste Ready Prompt:

Create a master prompt that will generate a full guide on software design patterns for me. I know Python well but I'm a total beginner with design patterns.

The guide it generates must:
- Group the patterns into categories, since I don't know them
- For each one, explain the problem it solves, its pros, and its cons
- Use Python for all code examples, with heavy comments explaining the class syntax

Step 2 (AI Chat Mode): Polish Your Master Prompt

Iterate with the chatbot. Ask it to simplify jargon or add analogies until the prompt is perfect.

Step 3 (AI Deep Research Mode): Generate Your Custom Learning Bible

Paste the refined master prompt into your AI's deep research mode. Let it generate the full document, then check it against your prompt's requirements.

PART 2: Hands-On Learning (The "Learning by Doing" Methods)

Method A: Add New Tech to Existing Projects

(Perfect for testing, linters, caching, auth libraries)

My Success Story: Used this exact method to master testing and CI for my live project

Step 1 (IDE Agent Mode): Get Your Custom In-Repo Guide

Real Scenario: You want to add testing to your project but have zero testing knowledge.

Copy-Paste Ready Prompt:

I want to learn how to write tests and apply them to my current project. I have never learned about testing. Create a guide-testing.md file to explain details about testing in technical projects in general and in my current project. Add examples to show how to test. What are the best practices for writing tests?

Step 2 (IDE Agent Mode): See It In Action

Follow-up Prompt:

Write a fully commented test file for the createUser function in userService.ts so I can see it in action.

Step 3 (IDE Agent Mode): Practice + Get Reviewed

Now write the tests yourself (this is crucial!) and ask the AI to review them. You MUST write them yourself to truly learn.

Method B: Learn New Framework from Scratch

(Perfect for new languages, frameworks, libraries)

My Success Story: Built a complete Flutter Todo app in just 4 days using this method

Step 1 (AI Chat Mode): Get Your Personalized Curriculum

Real Scenario: You're a React pro but need to learn Svelte for a new project.

Copy-Paste Ready Prompt:

I'm a React developer and I've never used Svelte before. Create a step-by-step curriculum to teach me Svelte by building a Todo app. Explain new Svelte concepts when we need them for the project. As you introduce a concept, please compare it to the React equivalent (e.g., how Svelte handles state vs. useState and Context) so I can connect the dots.

Step 2 (IDE Agent Mode): Build with Your AI Tutor

Create a new project, paste that curriculum into guide.md, then start building:

Your Building Prompt:

Let's get started. Please follow the guide.md we created. Generate the files for the first step of the Todo app, and make sure to add comments explaining any syntax or files that look different from a typical React project.

Step 3 (IDE Agent Mode): The Learning Loop

Read the code → Run it → Break it intentionally → Ask questions when confused

This feedback loop is where the magic happens!

AVOID These Common AI Learning Traps

Trap #1: AI gives you the "happy path" without mentioning problems

The Fix: Always ask: "What are the trade-offs? Give me 2-3 alternatives and when I'd choose each."

Trap #2: Accepting generated code as gospel

The Fix: Treat all code as a suggestion. Run it, test it, break it, then ask AI to review YOUR changes.

Trap #3: Vague, hand-wavy explanations that sound smart but teach nothing

The Fix: Force specificity: "Give me a concrete example. Show me a failing test this would fix."

The Bottom Line

This systematic approach has been a complete game-changer for me. AI is the most powerful learning accelerator we've ever had—if you know how to drive it.

Your turn: How are you using AI in your learning workflow? Drop your best tips below!