我的新2026作品集：由 Google Cloud 与 AI 驱动

Source: Dev.to

提交作品至Google AI 主办的“新年，新你”作品集挑战赛

关于我

嗨，我是一名充满热情的全栈开发者，热衷于探索设计与工程的交叉点。2026 年，我想表达自己作为创作者的演变——超越静态页面，构建沉浸式、交互式的网页体验。

我创建此作品集的目标是打造一个充满活力的“数字之家”。我想展示的不仅是我构建了什么，更是我对性能、美学和用户体验的思考方式。

投资组合

(该投资组合本身在挑战描述中提供的链接中实时展示。)

我是如何构建它的

这个作品集是一个现代化的网络应用，旨在实现高速、交互性和可扩展性。

技术栈

• 框架：Next.js 15（App Router）
• 语言：TypeScript
• 样式：Tailwind CSS 与自定义 CSS
• 动画：GSAP（GreenSock）用于复杂时间线，Framer Motion 用于 UI 交互
• 3D 元素：React Three Fiber（R3F）集成
• 部署：Docker 化并托管在 Google Cloud Run

设计决策

我专注于为主导航采用“Bento Box”网格布局，灵感来源于现代 UI 趋势。它让用户以模块化的方式探索我工作的不同方面（博客、项目、经验）。

颜色调色板使用深沉、丰富的背景并搭配霓虹色点缀，以营造高端、科技感。尽可能避免使用标准库组件，构建了诸如“Floating Dock”导航等自定义 UI 元素，以确保独特的身份识别。

Source: …

Google Cloud 与 AI 集成

将 Google Cloud Run 部署到生产环境相当简便。我使用多阶段 Dockerfile 对应用进行容器化，以保持镜像轻量（利用 Next.js 的 standalone 模式）。

• 容器化：基于 node:20-alpine 构建了高度优化的 Docker 镜像。

  # syntax=docker/dockerfile:1
  FROM node:20-alpine AS builder
  WORKDIR /app
  COPY package*.json ./
  RUN npm ci
  COPY . .
  RUN npm run build && npm prune --production
  
  FROM node:20-alpine AS runner
  WORKDIR /app
  COPY --from=builder /app/.next/standalone ./
  COPY --from=builder /app/.next/static ./static
  EXPOSE 8080
  CMD ["node", "server.js"]

• 部署：将镜像推送至 Google Artifact Registry，并使用单条命令将其部署到 Cloud Run。

• AI 辅助：通过 Antigravity 调用 Google 的 Gemini 模型，生成复杂的 GSAP 动画逻辑，并在迁移至 Next.js 15 时调试严格的 TypeScript 错误。

我最自豪的作品

🚀 星际飞船游戏

一个完整可玩的飞船射击游戏直接嵌入在作品集中。它是一次状态管理和 Canvas 性能优化的挑战，即使在移动设备上也能流畅运行在 60 FPS。

⚛️ 技术重力（基于物理的栈）

不使用静态图标列表，我构建了一个交互式的“技术重力”盒子。

• 工作原理：使用 Matter.js 创建一个 2D 物理世界，每个技术图标都是一个物理实体。
• 交互性：用户可以抓取、拖动并抛掷这些图标。
• 动态效果：碰撞事件会通过 GSAP 触发 SVG 闪电和发光效果，营造出技术之间的能量与联系感。IntersectionObserver 在组件离开视口时暂停物理引擎，以节省电量。

🌳 3D 有机滚动背景

背景随用户滚动讲述成长的故事。

• 程序化生成：递归算法实时生成 3D 树结构。
• 自定义投影：轻量级的 3D‑to‑2D 透视投影函数将生成的点映射到 SVG 画布上，避免使用笨重的 3D 库。
• 滚动动画：利用 GSAP ScrollTrigger，分支在滚动时“生长”并自行绘制。路径使用二次贝塞尔曲线实现有机、流畅的线条，且通过深度排序（画家算法）正确地根据 Z 深度层叠分支。

此项目为 New Year, New You Portfolio Challenge 所构建。