几乎未来感的作品集
发布: (2026年2月1日 GMT+8 03:19)
3 min read
原文: Dev.to
Source: Dev.to
概览
此提交是 Google AI 主办的“新年，新你”作品集挑战。我是一名开发者，热衷于打造沉浸式网页体验，将前沿技术与精美设计相结合。
在线地址：
核心技术
- React – 基于组件的 UI 架构
- Vite – 超快的构建工具，具备优化的代码分块
- Three.js (
@react-three/fiber+@react-three/drei) – 沉浸式 3D 图形 - i18next – 国际化（葡/英语言支持）
- GSAP – 动画库
部署
- Google Cloud Run – 使用 Docker 的容器化部署
- Google Cloud Build – CI/CD 流水线
- Nginx – 生产级 Web 服务器，优化 MIME 类型
视觉与性能亮点
- 赛博朋克美学 – 霓虹配色、网格背景、HUD 元素
- GPU 加速动画 – 所有动画均使用
transform和opacity - 响应式设计 – 移动优先，流体排版
- 可访问性 – 语义化 HTML、ARIA 标签、正确的标题层级
初始构建
- 从基础的 React + Vite 项目开始。
- 实现了一个包含 Three.js 3D 场景的 Hero 区块（Synthwave 网格、霓虹太阳）。
- 添加了懒加载的章节：关于、技能、项目、联系。
工具与优化流程
虽然我没有直接使用 Google AI 工具生成代码，但我利用了以下 Google 服务：
- Google Cloud Run – 无服务器部署平台
- Google Cloud Build – 自动化构建与部署
- Google Antigravity – 开发平台，将 IDE 演进为以代理为核心的时代
迭代优化过程以数据驱动，使用 PageSpeed Insights 识别并消除性能瓶颈。
性能指标
| 指标 | 数值 | 备注 |
|---|---|---|
| FCP（首次内容绘制） | ~1.5 s | 比基线快约 60 % |
| TBT（总阻塞时间） | 极低（从 15,350 ms 降至） | |
| 强制回流 | 消除 29 ms | 通过移除 Framer Motion 实现 |
| 打包体积 | 324 KB gzipped（关键 JS） | |
| Three.js 优化 | frameloop="demand"、dpr={[1, 1.5]}、antialias: false、Intersection Observer 暂停 | |
| 记忆化组件 | HUDElement 与 DecorativeLine 包裹在 React.memo() 中 |
引言
“追求知识” — ET Bilu