打造流式极简作品集

Source: Dev.to

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

关于我

我是一名 AI 培训师（AIT），拥有绩效管理、销售和教育背景。为本次挑战，我开发了一个基于 “三原则”（突出 3 项作品）的 极简作品集。我想展示专注的思维方式如何消除噪音，摆脱过度复杂化，走向极简主义，使每一次过渡都流畅，界面几乎无重量感。

作品集

(为简洁起见，作品集展示已省略)

我的构建过程 🐳

为了实现低延迟，我专注于运行时精度，使得在首次交付资产后，交互保持流畅，界面感觉轻盈。

• Google AI Studio & Flash UI: 使用 Google AI Studio 中的 Gemini 搭建初始 UI 组件并生成自定义动画逻辑。核心卡片模板取自 Flash UI 项目，提取 CSS 与 JavaScript 用于自定义的 bento‑style 画廊。
• 组件原型化: 在 CodePen 中对 Flash UI 组件进行隔离与精炼，随后完成集成。
• Nano Banana Pro 🍌: 重新生成项目封面图像，将静态预览转化为符合作品集单色美学的电影场景。
• Google Cloud Run ☁️: 通过 Docker 构建并使用 Knative 服务定义的 “Scale‑to‑Zero” 策略部署，实现严格的资源限制，以获得高性能、成本中性的足迹。
• 无服务器通信: 使用 Google Apps Script 作为中间件 API 构建自定义联系系统。消息直接写入 Google Sheets 并触发邮件通知，提供无数据库的消息解决方案。

性能优化

• GSAP 滚动驱动逻辑: 使用 GSAP 实现滚动同步的过渡，将动画进度直接关联到滚动偏移，实现触感式、用户驱动的 UI 动作。
• 直接 DOM 操作: 通过 useRef 与原生事件监听器跟踪鼠标坐标，绕过 Virtual DOM，以保持稳定的 60 FPS。
• 懒加载视频: 仅在卡片进入激活或悬停状态时初始化 HLS 流。
• 资源约束: 将构建优化至低于 256 MB 内存占用，以保持在 Google Cloud 永久免费层范围内。

我最自豪的部分 ༄

“单色到动感”策略

通过单色界面降低认知噪音，生成元素虽在但不分散注意力。画廊项目在悬停/聚焦时从静态灰度转为电影动感，依据光标接近度切换 CSS 滤镜。

Mux 视频集成

将所有循环视频托管至 Mux，实现自适应码率流媒体。无论网络速度如何，都能保持 “动感” 阶段的流畅，并将高码率处理转移至客户端 GPU，实现零延迟播放。

Tablet‑First 方法

组件响应焦点与激活状态，在平板上提供 “轻触即显” 行为，模拟桌面上的悬停效果。

结论：编排过渡 ⛏

这次重构体现了我向更有意图的构建方式转变——通过极简视角提炼复杂性。关键不在于工具能做什么，而在于我们如何呈现它们。