为什么我的 Portfolio 拥有超能力和反派画廊

Source: Dev.to

Introduction

此提交是 Google AI 主办的“新年，新你”作品集挑战。我想要一个既能展示技术能力，又不显得过于严肃的作品集，于是选择了漫画书主题。

Tech Stack

• React 19 与 TypeScript，确保类型安全。
• Vite，提供快速、极简的构建配置。
• Tailwind CSS，使用自定义的漫画配色方案和经典效果（旋转文字、粗边框）。
• Recharts，用于技能水平可视化。
• Docker（多阶段构建）和 Google Cloud Run，用于部署。

Content Generation with Google AI

我使用 Google AI Studio 和 Gemini 来头脑风暴章节名称并完善项目描述，保持漫画风格的同时保持真实性。

Comic‑Book Theme

我将通用标题改为漫画风格的名称：

• Superpowers → 技能
• Missions → 项目
• Villain Gallery → 我解决的问题（例如系统宕机、失控的 AWS 费用）

每条目说明问题、解决方案以及产生的影响。悬停时会显示 “KAPOW!” 与 “ZAP!” 文本，标题也会像漫画面板一样旋转。

Interactive Features

• Konami Code 彩蛋。
• Click‑combo system，快速点击时触发视觉效果。
• 背景中漂浮的粒子，营造细微的动感。

所有交互均考虑可访问性：语义化 HTML、ARIA 标签以及完整的响应式布局（已在移动端测试）。

Deployment Details

• 多阶段 Docker 构建：Node 编译应用后，Nginx 提供静态文件。
• 最终镜像大小约 50 MB。
• Cloud Run 负责自动扩容、HTTPS 以及挑战所需的标签。
• 部署仅需几分钟即可完成。

Results & Impact

• 9 项云认证以及一系列项目（无服务器游戏、混沌工程实验）。
• 主要成果：
  • 某项目的停机时间降低了 95 %。
  • 另一个项目的云成本削减了 35 %。

Performance

• Lighthouse 各项得分均在 90 分以上。
• 经过优化的 Docker 镜像和 Cloud Run 自动扩容，能够平稳应对流量峰值。

Conclusion

该作品集既展示了技术深度，也体现了个人风格，旨在留下“技术扎实且平易近人”的深刻印象。

Live Site

https://comic-portfolio-610288702971.us-central1.run.app

Source Code

GitHub Repository

Professional Profile

LinkedIn