WarriorOS：使用 React、Gemini 和 Cloud Run 构建现代终端作品集
Source: Dev.to
这是一篇提交作品，参加由 Google AI 主办的New Year, New You Portfolio Challenge Presented by Google AI
关于我
大家好！我是 Ankush Singh Gandhi，一名软件工程师，也是 “代码战士”。 我专注于全栈开发、系统设计以及构建交互式网页体验。
但我不仅仅是程序员——我还是一名热衷技术写作的终身学习者。过去几年里，我在 Dev.to 上的文章累计 超过 48 000 次浏览，并且曾因在社区讨论中的贡献被 LinkedIn 评为 计算机科学领域的顶尖声音。我非常喜欢阅读系统设计博客和工程案例研究。
我创建这个作品集的目标是打造一个能够体现这种双重身份的地方：一个既展示我的项目 又 充当我创作和消费内容的 “互动中心”。 它将复古终端美学与现代高性能 UI 融合在一起，讲述我的故事。
演进：WarriorOS (v4.0) 与原版
⚠️ NOTE: Work in Progress
此项目目前正处于积极开发中。您看到的是全新 WarriorOS 迭代的实时预览。
该项目是对我原始作品集 warriorwhocodes.com 的完整重新实现。虽然原站点已经很好地满足了我的需求，但我希望突破个人站点的边界——从静态展示转向一个活生生、呼吸般的操作系统。
⚠️ 关键观看体验建议
虽然我已在下方嵌入了站点，我强烈建议在新窗口中打开作品集。复杂的终端快捷键、悬停效果以及沉浸式 UI 最佳的体验方式是直接打开，而不是在 iframe 中观看。
1. 新架构（WarriorOS）
- 状态：积极开发 🚧
- 重点：终端优先导航、AI 集成、“一次性”学习模块。
2. 原始作品集（Legacy）
- 状态：稳定 (v3.0)
- 重点：标准视觉展示。
Warrior Who Codes – Ankush Singh Gandhi
后端与软件开发者，专注于 Python、Django、Flask 以及云系统。同时构建现代 Web 应用和基于 Flutter 的移动应用。
How I Built It
我使用以提供无缝用户体验为核心、并借助 Google AI 工具加速的现代技术栈构建了 WarriorOS（我的作品集）。
Tech Stack
- Frontend: React (Vite)、Tailwind CSS、Framer Motion（用于动画）。
- Deployment: Google Cloud Run（Docker 化的 Nginx 容器）。
- AI Integration: Google Gemini API。
- Development Partner: 使用 Antigravity（Google 的高级代理编码助手）进行构建。
Building with Antigravity & Gemini
这个项目不仅 使用 AI 功能；它是 与 AI 一起构建的。我使用 Antigravity（由 Gemini 驱动）对 WarriorOS 进行配对编程。
- Rapid Prototyping：该代理反复迭代复杂的 “Terminal Button” UI，直至完全符合我的设想——包括像素级的光效。
- Deployment Automation：代理负责使用 Docker 进行容器化以及 Cloud Run 的部署指令，为我节省了数小时的配置时间。
Google Gemini API Integration (The “New You” Feature)
我将 Gemini API 直接集成到站点中，打造了一个 AI 专家与伴侣。这不仅是聊天机器人，而是体现了我对 现代内容写作：AI + 人类共生 的理念的功能。
The Mindset: Evolution of Technical Learning
过去，技术写作是静态的：你写一篇博客，读者阅读后如果卡住了，就必须离开站点去 Google 查答案。我认为内容的未来应当是 交互式且自适应 的。
- Human Role：策划 结构、路线图 和 核心洞见（人类经验）。
- AI Role：Gemini 充当为每位读者量身定制的专家，填补知识空白。
通过将 Gemini 直接嵌入我的 “One‑Shot” 路线图页面，我把静态文档转变为动态学习会话。用户不再仅仅阅读关于 Redis 的内容；他们可以询问 “这个缓存策略如何应用到我的特定电商应用？” 并在不离开作品集的情况下获得即时、上下文感知的答案。
Gemini 集成在哪里？
“单次”库
- 导航到 Library 部分并打开任意 “One‑Shot” 路线图（例如 Redis、系统设计）。
- 屏幕上会漂浮一个 “Expert Mode” 按钮。
- 点击它会打开一个聊天窗口，AI 已预先提示了该特定路线图的完整上下文。它知道你在学习 Redis，并以专门的数据库专家身份进行交互。
全局 AI 助手
- 在整站中，AI 充当我的作品集向导。它可以解释我项目的架构，根据你的兴趣推荐你应该阅读的博客文章，甚至可以根据我的 About Me 部分列出的技能对你进行测验。
主动回忆测验
- 在 Expert 窗口内，你可以切换到 “Quiz Mode.” Gemini 会根据你正在查看的内容生成快速提问，帮助你实时验证理解。
# What I'm Most Proud Of全球终端系统
我不想让终端只是一个假的 GIF。它是一个功能完整的全局导航 CLI。无论你在站点的哪个位置，都可以点击按钮并输入类似以下的命令：
system.archive_access→ 立即跳转到我的库/博客板块。system.profile_bio→ 跳转到关于我的页面。python→ 启动一个模拟的 Python 环境（试试import antigravity！）。
它把整个网站的导航视作文件系统，为高级用户提供了更快捷的浏览方式。
“一次性”学习模块
出于我对内容创作的热情，我构建了交互式路线图页面，涵盖 Redis、Django ORM 和 MySQL 等主题。与其仅仅说“我了解 Redis”，不如通过结构化的速查表和指南展示 我 所掌握的内容，并让 AI 专家随时为访客解释任何概念。
无缝云部署
将应用容器化并在 Google Cloud Run 上运行是一次巨大的成功。网站瞬间加载，默认使用 HTTPS 加密，如果我的博客文章走红，还可以自动扩展。
我很高兴与社区分享 WarriorOS。它代表了我从撰写文章到为工作构建完整操作系统的旅程。
编码愉快！ 🚀