我如何在 Antigravity 上使用 Claude Opus 4.5 构建我的 8 位作品集

Source: Dev.to

设想：赛博朋克与怀旧的相遇

我长期对老派电子游戏的美学以及赛博朋克小说中充满霓虹的视觉效果着迷，这自然引导了我的创作构想。在重新打造作品集时，我的目标是营造一种数字体验，让人仿佛走进未来的街机厅——充满像素化字体、发光终端和怀旧扫描线的空间。

挑战在于让它不仅仅是噱头。作品集必须首先具备功能性：它需要展示真实的作品，保持可访问性，并真正帮助我与潜在的合作伙伴和雇主建立联系。8‑bit 的美学必须提升体验，而不是妨碍它。

从设计开始，而非代码

在写下任何代码之前，我先在 Figma 中规划了整个体验。我坚信直接跳进代码会导致后期无休止的重构。拥有可视化的参考让我能够在实现压力之外做出设计决策。

设计过程帮助我确定了配色方案——在深色背景上使用电光青、霓虹绿、日落橙和深空紫。我划分了各个板块：

• Hero – 以像素化的方式展示我的名字
• About – 以故事驱动的个人简介
• Skills – 动画进度条
• Projects – 以终端窗口的形式展示项目
• Contact – 类命令行的表单

认识 Claude：我的 AI 配对程序员

事情变得有趣起来。我一直在尝试 AI 编码助手，但我使用 Claude Opus 4.5——通过一个名为 Antigravity 的代理式编码平台——的体验与之前的任何尝试都不同。

我没有把 AI 当作花哨的自动补全工具，而是把它视为真正的合作伙伴。我描述了想要构建的内容，分享了我的设计文件，然后看着 Claude 帮我搭建整个 React 项目的结构。它建议了组件架构，帮助设置 GSAP 动画，甚至捕捉到了我可能会忽视的可访问性问题。

魔力不仅在于代码生成——更在于来回的交互。当有什么地方看起来不对时，我可以用普通的英文描述问题。当我想为我的标语添加打字动画等功能时，Claude 不仅仅是写代码；它还解释了实现思路，并提出了我之前没有考虑到的替代方案。

用动画让它活起来

静态作品集显得没有活力，尤其是想要营造复古游戏氛围的作品集。我大量使用 GSAP 和 ScrollTrigger 来创造令人愉悦的瞬间：

• 具有戏剧性呈现的英雄区
• 随着滚动而填充的技能条
• 以错位时序浮现的项目卡片

我最喜欢的细节之一是爱好区的全息投影仪。将鼠标悬停在某个爱好类别上，CRT 显示器会闪烁并呈现该兴趣的详细信息。此类小交互将作品集从静态简历转变为人们真正想要探索的体验。

技术栈

我有意保持技术栈的简洁。花哨的框架固然很棒，但对于个人作品集，我希望使用的技术能够在多年后仍然易于维护和更新。React 和 CSS 不会轻易过时。

过程中的经验

1. AI 辅助开发在被视为合作而非委派时最为出色。 我仍然做出了所有设计决策并亲自编写了大量代码，但拥有一个智能助手来交流想法加速了整个过程。
2. 约束孕育创造力。 8 位主题本可能是限制，但它实际上让决策更容易。每个组件都必须通过“这是否感觉复古‑未来主义？”的测试，从而防止功能蔓延并保持设计的一致性。
3. 即使在花哨的美学中，可访问性仍然重要。 作品集兼容屏幕阅读器，尊重减少动画的偏好，并在霓虹浓重的设计中仍保持适当的颜色对比度。

构建这个作品集是怀旧、现代工具和 AI 合作的令人满意的融合——证明了开发的未来既可以受复古启发，也可以走在前沿。

# Write all the neon. Good design is inclusive design.

接下来

作品集永远不会真正完成——它会随你一起演变。我已经在计划添加博客板块，以进行更深入的技术写作，集成一些实时项目演示，并根据反馈继续完善动画效果。

如果你正考虑打造自己的作品集，我的建议很简单：玩得开心。这是唯一一个可以让你完全做自己的网页。让它与众不同、充满个人色彩，成为你愿意分享的骄傲之作。如果你已经准备好 AI 助手来协助，别害怕依赖它。开发的未来是协作的——即使你的协作者是大型语言模型。

请查看我的个人作品集 https://portfolio.jeffdev.studio/ 以获取更多关于我的信息和博客文章。