数字媒体艺术 × AI Agent 开发者的个人主页
这是我的个人作品集网站，用于展示我在数字媒体艺术与 AI 开发方向的学习成果与技能。
网站风格定位：深色科技感 + 创意艺术气质，适合展示 AI 创意开发者的个人品牌。
在线预览： 本地打开 index.html 即可运行，无需服务器。
| 类型 | 技术 |
|---|---|
| 结构 | HTML5 语义化标签 |
| 样式 | 纯 CSS3（变量系统 / Flexbox / Grid / 响应式） |
| 交互 | 原生 JavaScript（无框架依赖） |
| 字体 | Space Grotesk · Noto Sans SC · JetBrains Mono |
| 动画 | CSS Keyframes + IntersectionObserver + Canvas |
| 背景 | Canvas 粒子系统 + CSS 网格背景 |
零依赖，零构建工具，打开即用。
- 科技感背景 — CSS 网格线 + 动态粒子网络
- 自定义光标 — 双圆圈设计，带 lerp 缓动跟随
- 页面加载动画 — Logo 进场 + 进度条
- 磁吸按钮 — 鼠标靠近时产生吸引效果
- 3D 卡片倾斜 — 鼠标悬浮时卡片跟随倾斜
- 技能条计数器 — 进度条与数字同步增长
- 阅读进度条 — 导航栏底部实时显示滚动进度
- 打字机效果 — 循环展示多个身份标签
- 滚动动画 — 元素进入视口时渐入出现
- 手机端适配 — 响应式布局 + 全屏汉堡菜单
my-portfolio/
├── index.html # 页面结构与内容
├── style.css # 样式、动画、响应式布局
├── script.js # 交互逻辑与动画控制
└── README.md # 项目说明
本项目从设计到代码，全程借助 AI 辅助开发：
- 工具 — Claude Code + OpenClaw
- 协作方式 — 用自然语言描述需求，AI 生成并逐步优化代码
- 迭代流程 — 先跑通最简版本 → 逐步升级视觉和交互
这个项目本身就是"AI × 创意开发"理念的实践成果。
- 掌握现代前端开发（HTML / CSS / JavaScript）
- 学会使用 AI 工具提升开发效率
- 独立开发并部署个人网站
- 探索 AI Agent 工作流自动化
- 将艺术设计背景与技术能力结合
- 逐步成为能独立交付 AI 项目的开发者
# 方法一：直接双击
打开 index.html（用浏览器）
# 方法二：本地服务器（推荐，避免字体跨域问题）
npx serve .
# 或
python -m http.server 8080- 正在学习前端的设计专业学生
- 想搭建个人主页的 AI 爱好者
- 探索 AI 辅助开发工作流的创作者
- 对"设计感"有要求的开发者
- 邮件 — a1270362744@outlook.com
- GitHub — Colin-labs
- 微信 — （待补充）
Built with ❤️ & AI · 2026
数字媒体艺术 × AI Agent 开发者