从零到 AI：我如何使用 Google Antigravity 与 Gemini 构建交互式作品集（零投资挑战）

Source: Dev.to

这个作品集是为 New Year, New You Portfolio Challenge 在严格的 ₹0 投资 约束下构建的——不使用信用卡，不订阅付费服务，只使用免费工具并发挥大量创意。结果是一个交互式、AI 驱动的网页作品集，完全运行在免费服务上。

在线作品集 →

技术栈（100 % 免费）

Google Antigravity – The Magic Behind the Portfolio

Google Antigravity 是一个免费、AI 辅助的网页应用构建工具。使用它，我能够：

1. 快速原型 – 描述作品集概念，让 AI 提出布局建议。
2. 即时迭代 – 更改颜色、重新组织章节，并在不写代码的情况下测试设计。
3. 导出干净代码 – 获得可直接使用的 React/HTML，随后可以进一步完善。
4. 边学边做 – 生成的代码展示了我可以采纳的最佳实践。

通常需要初级开发者花费 2–3 天进行 CSS 调整和布局反复试验的工作，在几小时内完成，将想法在一天内转化为已部署的原型。

Features

Live AI Playground Integration

• 一个真实可用的 AI 助手，使用 Google Gemini API 提供动力。
• 访客可以就我的技能、项目或其他任何内容提问，并即时获得智能回复。
• 展示了对 API 集成、async/await、错误处理以及实时用户交互的熟练掌握。

Built with Antigravity – A Study in Modern Development

• 利用 Antigravity 验证设计决策并加速原型制作。
• 显示了务实（使用合适的工具）、高效（在不牺牲质量的前提下更快交付）和适应性（学习新平台）的能力。

Zero‑Investment, Maximum Impact

• 每行代码都运行在免费服务上，无需信用卡。
• 突出约束如何激发创造力，以及专业工作并不一定需要 VC 资助的预算。

Professional Design with Personal Flair

• 定制的渐变背景、流畅的动画、响应式移动布局，以及脱颖而出的现代美感，区别于通用模板。

Full Development Workflow

1. Day 1 – Ideation & Prototyping

   • 探索 Google Antigravity 及其功能。
   • 在数小时内生成多个设计变体。

2. Day 2 – Development & Integration

   • 导出 Antigravity 代码并在 VS Code 中进行细化。
   • 为 AI Playground 集成 Gemini API。
   • 构建项目、技能和联系部分的自定义组件。
   • 在各类设备上测试响应性。

3. Day 3 – Deployment & Optimization

   • 将代码库推送至 GitHub。
   • 使用 Vercel 部署并实现自动 CI/CD。
   • 进行现场测试和性能调优。

作品集现已上线并全面运行。

未来计划

• 添加更多 Gemini API 功能（例如，代码审查助手，AI 驱动的简历生成器）。
• 扩展项目部分，提供实时演示。
• 在 Dev.to、Hashnode 和 Medium 上发布技术博客文章，以实现洞见变现。
• 将作品集打包为可供其他学生复用的模板。
• 推广 Google Antigravity，作为面向非设计背景开发者的 UI/UX 可访问性工具。

行动号召

说真的——点击实时站点上的 AI Playground 按钮，向它提问，看看 AI 实时响应。这就是我的作品，直接在你的浏览器中运行。

如果你有问题、建议，或想在不花大钱的情况下合作构建，欢迎留言。

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