software

从想法到原型只需几分钟：使用 Antigravity 构建我的作品集

发布: (2026年2月2日 GMT+8 15:20)
5 分钟阅读
原文: Dev.to

Source: Dev.to

请提供您希望翻译的具体文本内容，我将为您翻译成简体中文并保留原始的格式、Markdown 语法以及技术术语。谢谢！

介绍

此作品集是为 New Year, New You Portfolio Challenge（新年·新自我作品集挑战）而创建的，我是 Ntombizakhona Mabaso，一名居住在南非约翰内斯堡的云工程师和网页开发者。我的目标是展示我的技术历程、认证、内容创作，以及一个由 AI 驱动的数字孪生体，能够 24/7 全天候回答关于我的工作的问题。

Tech Stack

  • Frontend: Next.js 14 与 TypeScript 和 CSS Modules
  • AI Integration: Google Gemini AI（via @google/generative-ai SDK）
  • Icons: Lucide React 用于一致的图标设计
  • Deployment: Google Cloud Run 与 Cloud Build CI/CD
  • Version Control: GitHub 与自动化部署

项目概述

该作品集汇集了我的认证（Google Cloud Professional Architect、AWS 认证、Microsoft AI Fundamentals）、在 Medium 和 Dev.to 上的文章，以及在 Spotify 上的 Cloud Glossary Podcast。一个关键功能是 AI 聊天小部件，它充当我的数字孪生，能够回答诸如“Ntombizakhona 拥有哪些认证？”或“请介绍一下你的云经验”等问题。

开发历程

1. 从想法开始

我首先列出了想要包含的核心板块：

  • 带有动画打字效果的 Hero 区块
  • 带有动画进度条的 Skills 区块
  • 认证展示区
  • 链接外部内容的 “Blogs & Articles” 区块
  • 为无障碍设计的明暗主题切换
  • 浮动粒子动画，营造高级感

2. 设计体验

使用 Antigravity（Google 的 AI 编码助手），我反复迭代 UI 组件、动画和响应式布局。设计重点是玫瑰渐变配色、流畅过渡以及现代、精品的美感。

3. 构建 AI 数字孪生

  • 工具： Google Gemini
  • 方法： 编写系统提示，捕捉我的个性、技能和沟通风格。
  • 结果： 访客可以通过聊天小部件与我互动，获取关于我的工作、认证、项目和博客文章的精准、个性化答案。

4. 女性化设计

调整配色方案、排版和微交互，以打造更具包容性和亲和力的视觉语言。

5. 部署到 Cloud Run

  1. Dockerfile – 多阶段构建，优化 Next.js 应用。
  2. cloudbuild.yaml – 定义 Cloud Build 的 CI/CD 流水线。
  3. GitHub 集成 – 推送到 main 分支会自动触发构建和部署。
# Dockerfile (multi‑stage)
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

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 --only=production
EXPOSE 3000
CMD ["npm", "start"]
# cloudbuild.yaml
steps:
  - name: 'gcr.io/cloud-builders/docker'
    args: ['build', '-t', 'gcr.io/$PROJECT_ID/portfolio:$SHORT_SHA', '.']
  - name: 'gcr.io/cloud-builders/docker'
    args: ['push', 'gcr.io/$PROJECT_ID/portfolio:$SHORT_SHA']
  - name: 'gcr.io/cloud-builders/gcloud'
    args:
      - 'run'
      - 'deploy'
      - 'portfolio'
      - '--image'
      - 'gcr.io/$PROJECT_ID/portfolio:$SHORT_SHA'
      - '--region'
      - 'us-central1'
      - '--platform'
      - 'managed'
      - '--allow-unauthenticated'
images:
  - 'gcr.io/$PROJECT_ID/portfolio:$SHORT_SHA'

关键服务

  • Google Gemini API: 为 AI 数字孪生聊天功能提供动力。
  • Google Cloud Run: 托管容器化的 Next.js 应用程序。
  • Google Cloud Build: 自动化 CI/CD 流水线。
  • Antigravity: 从概念到原型全程帮助构建的 AI 编码助手。

反思

聊天小部件不仅仅是噱头；它通过分享我的认证、项目和个性信息，即使在我不在时也能提供真实价值。使用 Antigravity 构建这个作品集，将数周的工作压缩到几次 AI 辅助的会话——编写组件、调试、配置 Docker、以及设置 CI/CD 都得到了加速。

最终站点将高级视觉效果（玫瑰渐变配色、漂浮粒子、流畅动画）与稳健的生产级基础设施相结合，能够在每次 Git 推送时自动部署。这展示了我作为云工程师所遵循的专业标准。

要点： AI 编码助手并不是在取代开发者，而是为我们提供强大助力。Antigravity 像是一位不知疲倦的高级工程师伙伴，我对继续构建协作式、AI 增强的应用充满期待。

Back to Blog

相关文章

阅读更多 »