一个让你查询而不是滚动的作品集

发布: (2026年1月31日 GMT+8 23:48)
5 min read
原文: Dev.to

Source: Dev.to

介绍

大多数开发者作品集会产生摩擦。在时间紧迫的情况下,审阅者会错过重要细节——并不是因为这些细节不存在,而是因为它们被埋在展示方式里。阅读者被迫去适应作品集,这本末倒置。信息系统应该适应用户,而不是相反。

本项目把作品集视为信息系统,而非传统网页。它是一个 以搜索为首的开发者作品集

  • 没有导航菜单
  • 没有 “关于 / 项目 / 技能” 选项卡
  • 没有固定的叙事供滚动阅读

你不是浏览它,而是 查询 它。

示例查询: “Shivam 构建了哪些项目?”
答案: “仍然(他在黑客马拉松获奖的论坛项目)。”

作品集只检索与问题相关的信息,并以清晰、可靠的答案呈现,立即提供明确的答案。

实时交互演示

如果下面的嵌入未能加载,请在此处查看完整站点:

(embed placeholder)

实现细节

检索增强生成(RAG)系统

  • 作品集 不是聊天机器人
  • 所有内容在事先准备并建立索引。
  • 运行时,系统仅检索相关片段,并仅基于检索到的上下文生成响应。

实际操作中

  1. 用户提出问题。
  2. 系统识别意图(项目、技能、联系方式、背景)。
  3. 使用语义相似度检索相关的作品集内容。
  4. 仅将这些内容发送给模型。
  5. 响应中包含直接引用,指向真实来源。

这使得答案可预测、可检查,并且根植于真实数据。

流程

  • 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。我是一名人工智能与数据科学专业的学生,对软件工程基础和后端系统有浓厚兴趣。我喜欢构建小而完整的系统,并了解它们在真实约束下的表现。我更在乎正确性、清晰度以及让推理过程可见,而不是表面的光鲜。

这个作品集体现了我的思考方式:聚焦问题、减少噪音、精准回答。作品集通常在极度时间压力下被审阅。搜索奖励理解。如果我们可以搜索文档来理解一个系统,那么我们也应该能够搜索一个人的作品来了解他的思考方式。

Back to Blog

相关文章

阅读更多 »

Angular i18n 中缺失的部分

如何在每次应用更改时防止破坏翻译,Angular 的 i18n 故事乍看之下似乎已经完整。你标记字符串,运行 ng extract-i18n,然后……