一个让你查询而不是滚动的作品集
Source: Dev.to
介绍
大多数开发者作品集会产生摩擦。在时间紧迫的情况下,审阅者会错过重要细节——并不是因为这些细节不存在,而是因为它们被埋在展示方式里。阅读者被迫去适应作品集,这本末倒置。信息系统应该适应用户,而不是相反。
本项目把作品集视为信息系统,而非传统网页。它是一个 以搜索为首的开发者作品集:
- 没有导航菜单
- 没有 “关于 / 项目 / 技能” 选项卡
- 没有固定的叙事供滚动阅读
你不是浏览它,而是 查询 它。
示例查询: “Shivam 构建了哪些项目?”
答案: “仍然(他在黑客马拉松获奖的论坛项目)。”
作品集只检索与问题相关的信息,并以清晰、可靠的答案呈现,立即提供明确的答案。
实时交互演示
如果下面的嵌入未能加载,请在此处查看完整站点:
(embed placeholder)
实现细节
检索增强生成(RAG)系统
- 作品集 不是聊天机器人。
- 所有内容在事先准备并建立索引。
- 运行时,系统仅检索相关片段,并仅基于检索到的上下文生成响应。
实际操作中:
- 用户提出问题。
- 系统识别意图(项目、技能、联系方式、背景)。
- 使用语义相似度检索相关的作品集内容。
- 仅将这些内容发送给模型。
- 响应中包含直接引用,指向真实来源。
这使得答案可预测、可检查,并且根植于真实数据。
流程
- Gemini 3 Flash → 带引用的结构化响应。
- 生成前检索:AI 从未看到完整作品集,只看到当前查询相关的内容。
- 意图感知过滤:项目类问题优先检索项目数据;联系方式类问题不会拉取无关的背景信息。
- 可检查的答案:每个答案都有具体来源,可让读者核实信息。
- 预计算嵌入:在构建时生成;运行时仅进行检索和生成,保持延迟和成本可预测。
- 优雅的限制处理:演示运行在 Gemini 免费层。如果达到使用上限,系统会透明地回退到仅检索作品集数据,并明确标示行为的变化。
技术栈
| 组件 | 技术 |
|---|---|
| 前端 | Next.js 16, TypeScript, Tailwind CSS |
| AI 模型 | Gemini 3 Flash (Google AI Studio) |
| 嵌入 | text-embedding-004 |
| 搜索 | 自定义余弦相似度检索 |
| 动画 | Framer Motion, Three.js, Unicorn Studio WebGL |
| 部署 | Google Cloud Run |
系统刻意保持轻量。
关于作者
你好,我是 Shivam Gawali。我是一名人工智能与数据科学专业的学生,对软件工程基础和后端系统有浓厚兴趣。我喜欢构建小而完整的系统,并了解它们在真实约束下的表现。我更在乎正确性、清晰度以及让推理过程可见,而不是表面的光鲜。
这个作品集体现了我的思考方式:聚焦问题、减少噪音、精准回答。作品集通常在极度时间压力下被审阅。搜索奖励理解。如果我们可以搜索文档来理解一个系统,那么我们也应该能够搜索一个人的作品来了解他的思考方式。