超越简易展示：可访问的 AI 驱动作品集

Source: Dev.to

关于我

嗨！我是 Safvan，一名全栈开发者，我相信 炫酷 不应该等同于 不可访问。在为本次挑战寻找灵感时，我看到许多令人惊叹的 3D 世界和游戏化的作品集。它们固然精彩，但我想走一条不同的路线。

我构建了一个将高级美学与严格的网页标准相结合的作品集——目标是 100/100 的 Lighthouse 分数、完整的键盘可访问性以及流畅的移动优先体验。我还集成了 Google 的 Gemini AI，打造了一个真正有帮助的助手，让访客能够自然地浏览我的作品。

作品集

尝试一下：

查看源码：

我的实现方式

我充分利用了现代 Web 生态系统的全部力量，由 Google 的 Antigravity 环境 orchestrated。Antigravity 充当我的技术联合创始人，使用 Gemini 3 Pro 和 Claude Opus 4.5 等高级模型处理整个架构过程——从选择最佳技术栈到编写可直接投产的 Cloud Run 部署脚本。

技术栈

• 核心： Astro – 静态内容 + SSR 用于 API
• 样式： Tailwind CSS v4 – 实用优先的高级玻璃拟态设计
• 部署： Google Cloud Run（通过 Docker 容器化）
• AI： 通过 Node.js 适配器调用 Google Gemini API

AI 实现

我不想要一个普通的聊天机器人。我构建了一个 上下文感知 AI 导览。

意图引擎

AI 分析用户查询（例如 “展示你的 React 项目”），并确定性地将用户导航到相关章节，同时高亮显示具体的技术栈。它会执行，而不仅仅是聊天。

语音交互

完整实现了基于 Web Speech API 的语音输入，支持免手操作的导航。（在 Chrome、Edge 和 Safari 中受支持）

安全性

提示工程确保 AI 永远不会“幻觉”我没有的经验。它严格遵循作品集中提供的结构化数据。

想了解提示细节？ 请查看 Notion 上的文档：View Prompts on Notion

我最自豪的地方

1. 可访问性与标准（“隐形”工作）

• 语义化 HTML： 正确的标题层级和地标。
• 键盘导航： 整个站点，包括 AI 助手，均可完整聚焦管理。
• 减少动画： 动画遵循用户偏好，通过 prefers-reduced-motion 媒体查询实现。
• SEO： 使用站点地图、OpenGraph 标签和结构化数据进行优化。

2. “新年，新你” AI 体验

2026 年的顶级作品集应当是交互式的，而非仅仅是静态页面。我的 Gemini 集成让作品集变成一次对话：

上下文感知问答

用户： “你有 Vue.js 的经验吗？”
作品集： “是的，Muhammed Safvan 有 Vue.js 的经验。他目前在 Armino Technologies 使用 Vue.js 和 TailwindCSS 构建复杂的 UI 组件。”

智能导航与操作

用户： “我该如何联系他？”
作品集：

📧 safvanmanikulath@gmail.com
📍 Kozhikode, India
✅ Available for work

Taking you to Contact in 2s... [Cancel]

这个项目展现了作为开发者的“新我”：构建美观且对 所有人 都可用的作品，且由下一代 AI 工具驱动。