The Jungle Protocol：将我的职业旅程转化为自适应的探索
Source: Dev.to
这是针对由 Google AI 主办的新年，新你作品集挑战赛的提交
关于我
我叫 Hrishikesh Dalal，是 Sardar Patel Institute of Technology (SPIT)，孟买 的计算机工程专业学生。我不只是写代码；我在打造体验。目前，我正在开发一个 Jumanji 主题的游戏化作品集，把普通简历变成一次冒险。
- 专注方向： 全栈开发（Next.js，React）和开发者工具。
- 开源贡献： 已在 npm 上发布
envalyze和env‑fault，并为 Drupal 与 MDN Web Docs 贡献代码。 - 业余兴趣： 通过 VerdictAI 等项目探索 AI 与法律的交叉点。
我撰写关于系统设计、开源以及软件开发现实的文章。
投资组合
链接：
我是如何构建的
我的技术栈
| 层 | 技术 |
|---|---|
| 前端 | Next.js & Tailwind CSS |
| 动画 | GSAP（电影感） |
| 3D 元素 | Three.js（交互式地球仪与英雄图案） |
| AI | Gemini API（为 NPC 风格聊天机器人提供动力） |
过程：从混乱到清晰
构建作品集是一种陷阱。你想展示所有内容，但如果不小心，就会变成臃肿的乱七八糟。
1. 亲和图阶段
我被 UI/UX 课程中的想法淹没：完整的 3D 世界、终端、隐藏的彩蛋、以业务为中心的项目统计，以及《勇闯荒野》主题的游戏。我使用 Affinity Mapping（亲和图）把每个“酷”点子都倾倒到板上，然后毫不留情地进行分类。
2. “现实检查”
关键问题： 有人来这里的原因是什么？
招聘经理很忙。有些技术娴熟，有些则不然。有些可能想玩游戏；而其他人只想在 30 秒内快速浏览简历。
决定： 必须拥有一个 “简洁清晰” 的着陆页，并设有明确的 号召性用语 (CTA)。 “惊艳”因素应当是对信息的增强，而不是掩盖信息。
Source: …
设计拆解：逐节说明
Hero（前 5 秒）
我把 Hero 当作电影开场来处理。一个带有电影感过渡的预加载器将你带入交互式点阵图，立刻抓住注意力。
Impact（大数字 & 开源）
我没有仅仅说“我构建工具”，而是用大胆的排版展示我的 npm stats——让 envalyze 和 env‑fault 的真实影响不可回避。我还用 Hacktoberfest 徽章和项目管理员身份突显我的开源历程。
经验时间线
一个由滚动触发的时间线，配合 GSAP 微交互。悬停某条目时会出现细微的移动——足够让它有活力，却不至于分散注意力。
终端（为极客准备）
一个功能完整的终端，展示我的项目。你可以更换主题、运行 echo，或观看动画。
- 专业提示： 试着输入
sudo。已警告。 - 无障碍切换： 如果你不喜欢终端，可以切换回标准网格——没有人会被落下。
“丛林”体验
最难完善的部分。我的第一个版本只是游戏集合；朋友们说，“它很碎片化。我看不到你在里面。”
我回到绘图板，将其改造成叙事式体验，加入：
- 序章 & 结尾： 为任务赋予目的。
- 第 2 关（跳跃者）： 当你玩耍时，角色会旁白我的技术栈和经验旅程。
- 隐藏作弊码： 因为没有它们，游戏算什么？
用 AI 赋予生命
- 主聊天机器人： 回答各种查询；提供示例问题以改进其响应。
- 游戏聊天机器人： 充当 NPC，在冒险过程中保持角色设定。
架构
下面的示意图展示了游戏聊天机器人如何集成以处理上下文感知的查询，确保它了解您在游戏中的位置以及我作为开发者的身份。
用户交互层
- 用户发送消息 – 交互从用户在界面中输入开始。
- 前端应用 (Next.js) – 核心 UI 使用 React 构建，包含 React Markdown 渲染器，因此 AI 响应（通常包含代码片段或格式化文本）能够整洁、专业地显示。
安全与流量管理
后端 API 网关与安全层 – 为了避免在前端直接调用 Gemini API（这会暴露你的 API 密钥），应用程序调用安全的后端网关。该层负责身份验证并保护你的凭证。
负载均衡器 – 为防止单个服务器负载过重，负载均衡器位于中间。它分析传入请求并将其高效地路由到多个活动实例。
处理核心
- Chat Model Instances – 系统使用多个并行实例（Instance 1、2 和 3）来处理请求。
- Least‑Used Routing – 负载均衡器将请求路由到 Instance 1，因为它当前是“使用最少”的实例，从而确保最佳性能和低延迟。
- Google’s Gemini API – 这些实例充当通往 Google 基础设施的桥梁。它们将已处理的用户提示发送至 Gemini API，并接收返回的原始 AI 生成结果。
响应循环
- 转发响应 – 一旦聊天实例从 Google 接收到数据，它会通过安全的后端将该响应转发回去。
- 最终显示 – 消息被发送回 Next JS 应用，在那里以 Markdown 渲染，完成循环并显示在用户屏幕上。
彩蛋
我在开始时有一个小游戏，用户可以按“?”按钮来简单地玩它。
“保持饥渴，保持愚蠢。”
我的作品集以这句话结尾，因为它概括了我的工程理念。无论是深入钻研 Drupal 源代码，还是从零构建终端，我总是在寻找下一个看似略微不可能实现的项目。
Source: …
我最自豪的作品
如果你是开发者，你一定懂这种感觉：你把 10 % 的时间花在用户能看到的功能上，却把 90 % 的时间花在让你感觉自己像巫师的“过度工程”系统上。以下是我在这个作品集中反复打磨的支柱。
1. 终端（因为真正的开发者使用 CLI）
- 体验： 一个可工作的 CLI，你可以在其中浏览项目、切换主题或触发动画。
- “Sudo”陷阱： 为喜欢四处探索的人隐藏彩蛋——试着输入
sudo。 - 混合 UI： 招聘人员并不总是想敲命令，所以我构建了一个“安全网”切换按钮，能够瞬间将终端切换为标准项目网格。
2. 带有“业务优先”逻辑的项目
- 超越代码： 点击进入项目后，不仅展示技术栈，还展示 业务视角、影响 与 数据。
- “为什么”因素： 我解释了架构选择背后的理由，让非技术利益相关者也能理解我创造的价值，而不仅仅是我写的代码。
- 深度剖析： 每个项目页面都会引导观众从痛点到可扩展解决方案的完整旅程。
3. 《勇闯荒野》游戏引擎
- 叙事： 完整的序章和尾声让它更像一次真实的任务，而不是随意的小游戏。
- 职业跳板： 在第 2 关，角色会在你游戏的同时叙述我的技术栈和职业历程。
- 招聘者模式： 招聘者可以上传职位描述，游戏会根据该角色的需求自动突出相应信息。
4. 聊天机器人架构
(如有需要，可在此处添加其他图表或图片。)
所有图片均托管在 Dev.to 的 CDN 上，并直接链接以实现最佳加载速度。
I’m most proud of what’s happening **under the hood** here. I built a production‑ready pipeline for the Gemini‑powered chatbot.
### The Load Balancer
My system uses three different chat‑model instances. I implemented a load balancer that routes traffic to the **least‑used** instance to keep things snappy, no matter the traffic.
### Security & Scalability
I kept the logic on the backend. The React frontend talks to a secure API Gateway, which handles the Gemini API calls to keep my keys safe.
### The NPC Persona
I used the **Gemini API** to give the bot a specific “In‑game NPC” persona—it knows it’s in the Jungle, but it also knows my GitHub stats.