使用 AI 构建的马里奥风格开发者站点并部署到 Cloud Run

Source: Dev.to

新年·新自我作品集挑战提交

这是一份针对 Google AI 主办的“新年·新自我作品集挑战” 的提交作品。

关于我

资深软件工程师，拥有超过 7 年的前端开发专精经验。对现代技术栈（包括 TypeScript 与 Angular）有全面的理解。擅长构建用户友好的界面、优化网页应用以及系统升级。通过导师角色和技术面试的积极参与，展现出强大的领导力。致力于为领先的科技公司交付高质量的软件解决方案。希望将我的技能与经验贡献给充满活力且创新的团队。

作品集

（为简洁起见，作品集展示已省略。）

我的构建方式

本项目是一个马里奥风格的交互式作品集，以快速的静态 React 应用形式呈现，拥有趣味十足的“游戏 UI”外观。

技术栈

• React + TypeScript – UI 与应用结构。
• Vite – 本地开发与生产构建。
• Tailwind CSS (CDN) – 实用优先的样式方案。
• Framer Motion – 小交互与页面动画。
• Recharts – “POWER LEVELS” 技能可视化。
• Docker（多阶段）+ Nginx – 将生产构建作为静态 SPA 提供服务。

使用的 AI 工具

• 主要使用 Google AI Studio 构建。
• 使用 GitHub Copilot 进行调试。

部署流程

CI/CD 通过 GitHub Actions 自动化：先对 GCP 进行身份验证，构建并推送容器至 Artifact Registry，随后部署到 Google Cloud Run。

我最自豪的地方

• 借助现代 AI 工具，几乎不费力地完成构建。
• 真正的生产部署路径：容器化的静态托管（Vite 构建 → Nginx）加上一键推送至 Google Cloud Run。