我让 AI 代理重建我的投资组合：看看 Antigravity + Gemini 是怎么做到的
Source: Dev.to
这是对New Year, New You Portfolio Challenge Presented by Google AI的提交
关于我
嗨，我是 Nhi Nguyen，一名计算机科学学生，曾在法国图卢兹担任软件工程实习生。传统的作品集在我看来总是有点静态——正是我之前的作品集的样子。为了参加 Google AI 作品集挑战赛，我想打造一个不仅展示我的作品，还暗示开发未来的作品集。
当把一位越南软件工程师对美食和流行音乐的热爱与 Gemini 与 Antigravity 的强大功能相结合，会怎样？你会得到一个未来感十足、受 macOS 启发的数字工作空间。
作品集
踏入我的数字办公室 🚀: Launch the Futuristic Portfolio
(别忘了查看“了解我”部分——它并不像你想的那样！)
Source: …
我是如何构建的：100 % AI 架构的工作流
技术栈
- Frontend（前端）：React + Vite（极速 HMR）
- Styling（样式）：Tailwind CSS + Framer Motion（macOS 风格动画）
- Backend / Database（后端 / 数据库）：Google Firebase 与 Firestore
- Deployment（部署）：Google Cloud Run（容器化以提升可靠性）
- AI Orchestration（AI 编排）：Gemini 3 Pro（High）通过 Antigravity AI Agent
Antigravity 帮助从设计、内容翻译、后端搭建到部署到 Cloud Run 完成整个项目，展示了这套 AI 驱动 IDE 的强大能力。
设计之旅：从构想到 “Voilà!”
构建站点不仅仅是写代码，更是把个人特质转化为数字体验。我把 Gemini 当作我的创意总监，使用 Planning Mode 设定“北极星”。
我的初始提示融合了身份与技术目标：
“我想用现代、未来感的设计来创建我的作品集网站，融合一点小吃和流行音乐的元素。我是越南女孩，也是软件工程师，希望网站尽可能有创意。页面必须包括：博客、项目、工作经历以及‘关于我’板块。”
Gemini 不仅给出了布局，还提供了完整的策略。经过多次细化与结构打磨后，我意识到项目还缺少一个 “惊艳”因素。
演进过程：“Finder” UI
macOS Finder 风格的界面来源于递归的 AI 工作流：
- 细化 – Gemini “采访”我，明确 Finder 风格 UI 的具体技术需求和文件夹逻辑。
- 执行 – 将超细化的提示交给 Antigravity 的 AI Agent，它生成了像素级完美、无错误的 UI，既遵循 Finder 的逻辑，又保留了我的“未来感美食”美学。
我最自豪的
1. “Finder” UI 体验
核心是 “Get To Know Me” 部分，构建为一个功能完整的 macOS Finder 克隆：
- 交互式文件夹 – 像浏览我实际笔记本一样浏览我的教育和兴趣。
- 美学 – 融合未来感的玻璃拟态和流行文化氛围。
- 逻辑 – 使用 Framer Motion 实现如黄油般顺滑、类似 Apple 的动画。
2. 提升我的 DevOps 与云技术水平
在此挑战之前，这些工具很多只是流行词；现在它们已成为我的工具箱核心部分：
- Docker – 为 React 应用容器化，以实现一致的环境。
- Nginx – 为前端资源配置高性能 Web 服务器。
- Google Cloud Run – 部署容器化服务并管理其生命周期。
- Firebase – 集成 NoSQL 后端用于项目数据和博客内容。
试一试！
感谢查看我的作品集——我在突破 AI IDE 能力的边界时玩得很开心。
挑战： 我在 Finder UI 的 “Interests” 文件夹中隐藏了一些有趣的细节。探索我的笔记本电脑，并在评论中告诉我你发现了什么！