🔥我使用 Antigravity 构建了 Awwwards 风格的作品集🌀

Source: Dev.to

（未提供需要翻译的正文内容。如需翻译，请粘贴完整的文本。）

介绍

这是对 Google AI 主办的 New Year, New You Portfolio Challenge 的提交。

我是 Kiran Naragund，一名全栈开发者、开源贡献者，也是真心热爱在网络上构建事物的人。此作品集展示了我的历程——教育、职业经历、开源工作、项目，以及我在学习和成长为开发者过程中进行的众多实验。

部署

该站点部署在 Google Cloud Run 上。

⚠️ 注意： 为获得最佳体验，请在桌面或笔记本电脑上查看作品集。某些动画和交互专为大屏幕设计。

工具与技术

• React.js with Vite – 快速开发和性能
• Tailwind CSS – 样式和主题
• GSAP and Framer Motion – 动画和页面过渡
• Lenis – 平滑滚动
• Chart.js – 可视化开源活动
• 一些 shadcn/ui 组件

设计过程

我在项目开始时采用实验而非完美设计。网站逐段构建，测试动画、打乱布局、删除元素并重新构建。多次重新设计才形成了当前的状态。

所有内容（经验、教育、认证、技能、开源数据）均通过结构化数据文件进行管理，使网站易于更新和扩展。

Source: …

主题

除了提供浅色和深色模式，我实现了 10 种不同的主题：

• 浅色
• 深色
• 紫色
• 海洋
• 森林
• 日落
• 玫瑰
• 午夜
• 咖啡
• 薄荷

每个主题都会一致地更新颜色、SVG 和 UI 元素。我个人最喜欢的主题是 白色 和 玫瑰。

由于主题众多，静态图片显得不合适，所以我创建了可以根据当前激活的主题动态适配的自定义 SVG，以保持视觉一致性。

动画与交互

• 有些动画在大屏幕上看起来惊艳，但在小屏幕上会显得过于繁复（例如 “What I Do” 部分的 SVG 运动路径）。我会在较小视口上有选择地隐藏元素，以保持体验简洁。
• 我没有使用传统的加载器，而是加入了动画页面过渡，使导航更具趣味性。
• 一个自定义的类似 Google 风格的加载动画以有趣的方式呈现站点。
• 基于路由的页面过渡动画会为每个章节显示不同的提示信息。
• 自定义的动画光标提供更流畅的交互体验。

开源部分

而不是显示默认的 GitHub 贡献图，我构建了一个专门的 Open Source 部分，访客可以浏览：

• 我贡献过的组织
• 我提交的 Pull requests
• 我处理的 Issues
• 随时间的贡献活动

这样可以让我的开源工作透明且易于理解，无需在 GitHub 上四处跳转。

开发工作流程

• Antigravity IDE 被用于大部分开发。
• plan.md 文件持续更新，记录想法、页面结构、动画计划和改进备注。
• 我在 IDE 中切换不同的 AI 模型，用于规划、重构以及探索更好的组件或动画结构。
• Gemini Nano Banana 为项目部分生成了模型图。

这些工具帮助更快迭代并保持流程顺畅。

亮点与自豪时刻

• 学习并使用 GSAP 来实现复杂的 SVG 路径和基于时间轴的动画。
• 创建了一个自定义的 Google 风格加载动画。
• 为不同路由添加页面切换动画，并在每个章节显示独特的提示信息。
• 构建了一个自定义的动画光标。
• 开发了一个完整的主题感知设计系统，包含 10 套统一的主题。
• 使用真实数据和图表展示开源贡献，而不是静态的 GitHub 图形。
• 让站点具有互动性和电影感，同时避免对用户造成负担。

反思

构建这个作品集让我远离舒适区，迫使我尝试以前从未做过的事。这让我学会了耐心：我大量实验，常常弄坏东西，并且了解到细微的细节可以彻底改变产品的感受。

它并不完美，但很真实。它体现了我的思考、构建和学习方式——这正是它对我而言特别之处。

感谢阅读，期待听到你的反馈！ 🙌