AI Career Twin Portfolio：交互式投资组合与智能助理

Source: Dev.to

这是为 Google AI 主办的“新年，新你作品集挑战赛” 提交的作品

关于我

我叫 Mansaa Kohli，是 VIT Bhopal University 的三年级 AI/ML 学生，热衷于构建智能医疗解决方案。通过这个作品集，我想做的不仅仅是一份简历——我想打造一种体验，展示我对技术和问题解决的方式。

作品集

在线演示：

尝试 AI 聊天功能，互动了解我的工作！

我的构建过程

技术栈

• 前端： HTML5、CSS3、原生 JavaScript
• 后端： Node.js / Express，用于智能响应
• 设计： 自定义 CSS，采用玻璃拟态和动画
• 部署： Vercel，实现全球可访问性

关键特性

• AI 职业双胞胎： 具备上下文响应的交互式聊天系统
• 现代设计： 玻璃拟态效果与渐变背景
• 响应式布局： 在移动端、平板和桌面端均可良好运行
• 交互元素： 动画技能条、平滑滚动、悬停效果
• 性能优化： 加载快速，依赖最小化

开发流程

1. 设计阶段： 绘制线框图并规划用户体验
2. 实现阶段： 使用语义化 HTML 与现代 CSS 构建组件
3. AI 系统： 创建智能响应逻辑
4. 测试阶段： 跨浏览器与设备测试
5. 部署阶段： 配置云托管并进行优化

我最自豪的地方

• AI 聊天功能： 一个提供关于我工作个性化响应的交互助理。
• 视觉设计实现： 玻璃拟态效果与流畅动画，营造专业、现代的美感。
• 问题解决之旅： 克服部署难题，学习 Vercel 与高级 CSS 动画等新技术。
• 完整解决方案： 从概念到部署，构建了展示端到端开发技能的全栈作品集。
• 学习体验： 用新技术挑战自我，创造出我真正自豪分享的作品。

挑战与解决方案

• 挑战： 在不使用外部 API 的情况下创建引人入胜的 AI 响应
  解决方案： 构建基于知识的模式匹配系统
• 挑战： 跨浏览器的复杂 CSS 动画
  解决方案： 进行大量测试并实现回退方案
• 挑战： 部署流水线的搭建
  解决方案： 探索多个平台并成功完成部署

亲自尝试！

向我的 AI 职业双胞胎提问：

• “你最自豪的项目是什么？”
• “请介绍一下你的技术技能。”
• “你是如何在黑客马拉松中获胜的？”
• “你的职业目标是什么？”
• “请谈谈你的研究工作。”

未来改进

• 集成 Google Gemini API，实现动态响应
• 为聊天添加语音交互界面
• 实现暗/亮主题切换
• 添加项目演示视频

收获的教训

• 用户体验细节极其重要
• 渐进增强确保可靠性
• 早期测试可防止重大问题
• 文档化让维护更轻松