使用 Google AI 构建现代数字花园：我的新年·新你作品集
I’m happy to translate the article for you, but I’ll need the full text you’d like translated. Could you please paste the content (or the portion you want translated) here? I’ll keep the source link, formatting, markdown, and any code blocks exactly as you’ve requested.
👋 关于我
嗨，我是 Emmanuel Uchenna – 软件工程师、技术作家和数字健康倡导者。我热衷于构建赋能人们的技术。
- 技术背景： 5 年以上将代码转化为有意义的人类体验的经验。
- 专长： 使用 React、Next.js 以及现代 Web 生态系统进行干净、可扩展的 UI 开发。
- 写作： 将复杂的技术概念转化为清晰、引人入胜的文章、文档和白皮书。
- 健康关注： 探索软件如何改善患者结果并让健康信息更易获取。
我创建这个作品集的目标既简单又宏大：打造一个快速、可访问的平台，体现我当前的技能和风格。我想要的不仅仅是项目列表——我想展示我的 “高级简约” 哲学，即最有效的数字体验应当不妨碍用户，同时通过细腻的交互和稳健的性能带来愉悦。
注意： 以下嵌入链接指向我部署在 Google Cloud Run 上的作品集。你也可以访问现场站点 at .
🚀 项目概览 (2025)
构建 2025 年的作品集是一个有趣的挑战。我们现在拥有的工具已经有了巨大的进步，所以我大量依赖 Google AI 生态系统 来加速我的工作流程，同时不牺牲质量。结果真的让人惊讶——本可能需要一周时间的苦战，变成了一次灵感迸发的冲刺。
技术栈概述
| 层 | 技术 | 选择原因 |
|---|---|---|
| 核心框架 | Next.js (App Router) | 稳健的服务器端渲染基础；基于文件的路由和 React Server Components 让应用保持快速且对 SEO 友好。 |
| 样式 | Tailwind CSS | 实用优先的方式让我能够强制执行严格的设计系统，处理响应式布局，并无缝采用暗模式。 |
| 数据库 | PostgreSQL | 可靠的关系型数据库，用于动态内容（例如博客文章浏览统计、新闻订阅）。 |
| 部署 | Google Cloud Run | 无服务器、容器化部署，空闲时可缩至零实例，但在文章走红时能够应对流量峰值。 |
Source: …
📦 部署到 Google Cloud Run
其中一个挑战要求是部署到 Cloud Run，结果发现这是整个过程最顺畅的部分之一。我希望拥有一个 可复现、容器化的流水线——而不是“把代码随意扔过去”的做法。
Dockerfile（多阶段构建）
# ---- Build stage ----
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build # Next.js build
# ---- Production stage ----
FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/package*.json ./
RUN npm ci --omit=dev # Install only production deps
EXPOSE 8080
CMD ["node", "server.js"]结果： 最终镜像约 80 MB（已剔除开发依赖）。
CI/CD 工作流
- Gemini CLI 将容器推送到 Google Artifact Registry。
- 自动创建（或更新）一个 Cloud Run 服务。
- 每次向
main分支推送都会触发流水线，构建新容器并更新修订版。
这种 “git‑push‑to‑deploy” 工作流让我有信心频繁发布小的、迭代式更新。
🤖 AI 辅助开发
整个项目都是 AI 增强 的。下面深入介绍我如何使用 Google 的工具。
Antigravity – 我的配对程序员
Antigravity 在整个过程中始终保持参与，消除了在编辑器、浏览器和文档之间不断切换上下文的需求。
| 用例 | Antigravity 的作用 |
|---|---|
| 重构 | 分析了分散的模态文件（ReviewModal、DriverProfileModal 等），并建议使用 framer‑motion 实现统一的 Modal 架构，以获得平滑的进入/退出动画。同时指导我处理属性钻取和 ARIA 可访问性。 |
| 智能调试 | 当出现关于多态属性的 TypeScript 错误时，Antigravity 检查了组件的使用情况，解释了推断失败的原因，并提供了一个满足编译器的精准修复——无需陷入通用的 Stack Overflow 兔子洞。 |
| 主动优化 | 建议在 next/image 组件中添加 sizes 属性，以防止布局偏移（CLS）并提升 LCP 分数。 |
AI Studio – “首席编辑器”
AI Studio 帮助塑造了 创意方向：
- 内容策略与站点结构 的头脑风暴。
- 为文章、项目描述和微交互进行 创意生成。
Gemini CLI – 自动化英雄
对于重复性任务，Gemini CLI 是救星：
- 为新页面和组件生成脚手架代码。
- 加速了“枯燥”部分，使我能够专注于微交互和布局微调。
🎨 “Premium Simplicity” 美学
我采用了 黑白（B&W）美学。通过去除颜色作为主要层级工具，我被迫依赖 间距、排版和对比度 来引导用户的视线。结果呈现出：
- 高级且现代
- 简洁，让文章和项目脱颖而出
- 可访问，使用高对比度提升可读性
🧩 组件驱动架构
该站点围绕 自包含、可复用的组件 构建：
ProjectList→BlogCard→ … 每个组件都位于各自的文件中。- 例如，更新卡片的设计只需一次修改，便会自动在整个站点中传播。
📚 最终思考
利用 Google AI 生态系统 将本可能是一次漫长、手动的构建，转变为一次快速且愉快的冲刺。Next.js、Tailwind、PostgreSQL 与 Google Cloud Run 的组合，在 AI 辅助工具的加持下，使我能够交付一个体现“高端简约”理念的作品集，同时保持快速、易访问且面向未来。
欢迎随意浏览线上站点、查看代码，或在想要聊聊 AI 增强开发时与我联系！
Source: …
排版即界面
有几个项目方面让我特别自豪，因为它们代表了显著的个人和技术成长。
-
“健康”板块
将数字健康加入我的开发者作品集是一次重要的跨步。这是一个专门用于发布健康与福祉主题文章的空间，弥合了我的技术技能与倡导工作之间的鸿沟。长期以来，我把这两个世界分开——我的 GitHub 个人资料展示的是一个人，而我的社区工作则展示的是另一个人。把它们在这里合并，使作品集独具个人特色，并讲述了一个更完整的自我故事。 -
性能与可访问性
获得高 Lighthouse 分数是一个关键里程碑。它证明了在保持现代美感的同时不必牺牲性能。 -
无缝 AI 工作流
这次挑战正好成为我最终发布作品集 v3 的借口。它不仅代表了视觉上的刷新，更是对我自身技能和工作流的“后端”升级。通过采用 Google 的 AI‑first 开发工具，我构建了一个为我 2026 年工作定调的项目。