像无限手套一样打造我的作品集

Source: Dev.to

这是一篇提交作品，参加由 Google AI 主办的 新年新你作品集挑战（New Year, New You Portfolio Challenge Presented by Google AI）

关于我

嗨！我是 Zacky，一名全栈开发者，热衷于构建能够解决真实世界“人们问题”的应用。

我在整个技术栈上工作，将想法变为现实，主要使用 JavaScript、Node.js、PHP、PostgreSQL 和 MySQL。最近，我也在深入探索 Rust 的世界。

我的开发理念是创建帮助他人的工具。例如，我创建并维护了 RLI，这是一套优雅的加载指示器的开源 React 组件库，在 NPM 上的人气日益增长。

我构建此作品集的目的不仅是展示我的项目，更是展示我将技术“如何做”与创意、交互式设计相结合的能力。

作品集

(如果上面的嵌入无法显示，你可以在此查看实时站点： zacky.dev )

构建过程

技术栈与工具

• 框架： Remix.js（全栈 React 框架）
• 值得关注的库： Three.js、Material UI
• 语言： TypeScript
• 部署平台： Google Cloud Run
• 代码编辑器： Antigravity

设计决策

• 混合架构： Remix 在提供流畅的 SPA 体验的同时，能够在服务器端安全地处理敏感凭证和业务逻辑。
• 性能： 为页面实现了懒加载，使首次加载瞬间完成，仅在需要时才获取资源。
• 可访问性与用户体验： 暗色和亮色模式让用户自行选择观看偏好；界面现代直观，避免杂乱。
• SEO： 服务器端渲染（SSR）使网站能够提供预渲染页面，提升 SEO 排名。

AI 助手

在整个开发过程中，我使用了 Google Gemini 3.0 和 Antigravity 代码编辑器。Gemini 像个人导师一样，先解释“为什么”，再讲解“怎么做”，帮助我拆解复杂逻辑。

我最自豪的地方

1. 成功的 GCP 部署

将作品集部署到 Google Cloud Run 是一次重要的成就。部署过程顺畅，文档帮助我一步步完成所有操作。

2. 3D 交互体验

我使用 Three.js 和手写着色器创建了自定义的 3D 交互页面。Gemini 3.0 在弥合我对 JavaScript 的了解与着色器编程所需的复杂数学之间起到了关键作用，最终呈现出流畅、互动的视觉效果，完美展示了作品集。

3. 完全响应式设计

得益于 CSS 媒体查询和 JavaScript 的组合，网站在所有设备上都能无缝运行，确保用户在任何环境下都有一致的体验。

4. 解决问题（RLI 库）

我很自豪能够在站点上直接展示我的开源作品。展示 RLI（React Loading Indicators）表明我在构建其他开发者依赖的解决方案，而看到它在 NPM 上获得关注也激励我继续发布开源代码。

感谢阅读至此。非常期待您的想法和反馈。