我的作品集焕然一新

Source: Dev.to

这是对由 Google AI 主办的新年·新你作品集挑战的提交。

关于我

大家好，我是 Rachit Khurana，一名热爱构建互联网上产品的全栈开发者。

目前，我在 Hyathi Technologies 实习，致力于前沿的云解决方案，同时也是 BossAI 的创始人——这是一款帮助用户更智能工作的生产力应用。

我热衷于打造 可扩展的网页应用 并探索新技术。

我的经历涵盖了 React、Next.js 等前端框架，以及 Django、FastAPI 和 Golang 等后端技术。

我的座右铭是 “FAFO”，不断通过实践进行实验和学习。

作品集

作品集链接

我是如何构建它的

（未提供其他细节。）

技术栈

此作品集使用现代、注重性能的技术栈构建：

• 框架：TanStack Start 与 React 19 — 实现极速的服务器端渲染和无缝路由
• 样式：TailwindCSS 4.0 — 实用优先的样式方案
• 动画：Framer Motion + GSAP — 流畅、电影级动画
• 3D 图形：Three.js 与 @react-three/fiber — 交互式 3D 元素
• 平滑滚动：Lenis — 如黄油般顺滑的滚动体验
• 排版：Outfit、Space Grotesk 和 Syne（Google Fonts）
• 部署：Google Cloud Run — 可扩展的容器化托管

完整代码库已开源 — 在 GitHub 上查看！

Source: …

开发过程

我之前使用 Next.js 构建了一个作品集（点击查看），但我想要一次全新的、从零开始的重新设计。我在 Antigravity IDE 中把旧作品集喂给 Gemini 3 Pro，并使用了以下提示：

“这是我的作品集。请彻底改造它。让它看起来现代、独特且极简。尽可能做到与众不同。我不想让它看起来像是随意编码的。它应该像是专业公司设计的那样。可以自由使用任何第三方工具/库。同时请从头开始构建。我现在不想再使用 Next.js。请使用 TanStack Start 重建它。”

从此，一切都通过 迭代提示 完成。我与 Gemini 一起探索了多种美学和设计方向——尝试不同的配色方案、动画风格和布局——最终确定了一个科幻风、全息感的设计，正合我意。

AI 的帮助在以下方面尤为突出：

• 生成复杂的 CSS 动画和过渡效果
• 实现视差效果和流畅的滚动行为
• 调试响应式设计中的棘手边缘案例

整个工作流程极其高效：我描述需求，Gemini 实现，然后我们共同迭代优化，直至完全符合我的设想。

我最自豪的

现代、极简设计

我对这个作品集实现的 现代美学 感到非常自豪。设计融合了：

• 全息元素：受赛博朋克启发的玻璃容器用于个人头像，带有动画边框、扫描线效果和漂浮动画
• 极光背景：细腻的动画渐变背景，增加层次感而不分散注意力
• 玻璃拟态：贯穿全局的磨砂玻璃效果，营造高级感
• 流畅的微动画：每一次交互都有精致的过渡

隐藏彩蛋

在构建这个作品集时，最有趣的部分之一就是在整个网站中添加多个隐藏彩蛋。在 Gemini 的帮助下，我快速实现了若干惊喜，奖励那些探索并与网站互动的好奇访客。

我不会在这里透露全部内容——请访问作品集并自行寻找！有些需要键盘交互，有些需要耐心，还有一些显而易见。祝你玩得开心！