使用 Google AI Studio 与 Gemini 构建超现代动画作品集

Source: Dev.to

提交作品至由 Google AI 主办的“新年，新你作品集挑战赛”

我叫 Aniruddha Adak，是一名居住在印度加尔各答的全栈开发者兼 AI 工程师，现就读于 MAKAUT 的计算机科学 B.Tech 第四年。我的技术栈包括 Next.js、React、TypeScript、Python，以及机器学习工具。

投资组合概览

我使用 Google AI Studio 与 Gemini 3 Flash 构建了此作品集，展示了 AI‑assisted 开发。该网站融合了超现代设计、流畅动画、响应式布局和丰富的排版。

设计与特性

超现代设计

• 渐变动画的主视觉区，带视差效果
• 以霓虹蓝、紫和粉红为点缀的暗色主题
• 在各种设备上实现完全响应式

流畅的动画与交互

• 滚动触发的各章节显现动画
• 项目卡片的悬停效果及详情模态框
• 无缝的页面切换和滚动位置指示器
• 动画技能条可视化技术专长

丰富的现代排版

• 大号渐变样式标题，提升冲击感
• 多样的字体大小和粗细，构建视觉层次
• 高对比度正文文本，提升可读性

关键部分

• Hero Section – 动画渐变背景介绍我
• About Me – 成就与经验时间线
• Skills – 带有熟练度的动画技能条
• Projects – 主要作品展示：
  • FolioMotion – 动态作品集模板
  • ContentCraft AI – AI 驱动的内容创作平台
  • MarketPulse AI – 实时金融情报代理
  • SupplyGuard AI – 供应链风险检测系统
  • SkillSphere – 拥有 10+ 应用的生产力平台
• Contact – 用于咨询的动画联系表单

我是如何构建的

技术栈

• Google AI Studio – Gemini 3 Flash 生成了初始应用结构
• React / TypeScript – 基于组件的架构
• Vite – 快速构建工具和开发服务器
• Tailwind CSS – 现代实用优先的样式，带自定义动画
• Gemini Integration – AI 驱动的功能和内容生成

开发流程

1. 向 Google AI Studio 的 Copilot 描述作品集愿景。
2. AI 生成了模块化的 React 组件和样式。
3. 使用自定义动画和交互增强组件。
4. 部署到 GitHub 并连接到 Vercel。
5. 在每次推送到 main 分支时设置自动部署。

我最自豪的成就

• 设计卓越 – 现代渐变设计、流畅动画和丰富排版。
• 性能 – Vite 提供瞬时页面加载和流畅交互。
• AI‑优先开发 – 利用 Google AI Studio 快速启动开发，同时保持完整控制。
• 完整展示 – 项目、时间线和技能共同讲述完整的技术故事。
• 流畅的用户体验 – 每一次滚动、悬停和交互都令人愉悦。

实时部署

• 作品集：
• AI Studio 内部：
• GitHub 仓库：

关键要点

• Google AI Studio 使快速原型设计成为可能。
• 基于 Gemini 的代码生成提供生产就绪的质量。
• 可以在不使用臃肿框架的情况下实现现代网页设计。
• 将 AI 工具与创意愿景相结合可产生卓越成果。

我正在寻找新的机会和合作！欢迎通过 LinkedIn、GitHub 或 Twitter 与我联系。