用 Cursor 实现 Vide Coding 理念打造你自己的沉浸式个人网页 - 集粒子动画、代码雨、打字机效果、BGM于一体的创意展示
Vide Coding - 让人人都能打造属于自己的个性化网站！
通过 Cursor AI 编程工具，任何人都可以使用 Vide Coding 理念创造属于自己的沉浸式个人网页：
🎯 个性化定制：完全可定制的代码结构，展示你独特的个人信息
🏆 能力展示：通过代码形式生动展现你的专业技能和核心优势
📂 作品集呈现：可点击跳转的成就列表，完美展示你的项目和作品
🎨 视觉体验：粒子动画+代码雨+打字机效果，让个人介绍变成艺术品
技术流程：高级启动页面（粒子动画+分层动效）→ 4:6黄金比例布局 → 持续滚动代码展示 → 文字框逐行滚动 → 背景代码雨效果，从视觉冲击到永不停歇的动态编程体验。
Vide Coding 让每个人都能用代码讲述自己的故事，打造专属的数字名片！
- 🎵 高级启动页面：粒子动画+分层动效+旋转Logo，用户主动触发确保BGM完美播放
- ⌨️ 持续滚动代码：左侧代码打字机效果，完成后无限循环动态内容
- 📝 逐字滚动框：右侧更大文字框内每行逐字显示的打字效果
- 🌊 背景代码雨：右侧背景的 Matrix 风格代码雨
- 📐 4:6黄金布局：左侧40%代码面板+右侧60%内容面板，优化视觉比例
- 👆 手势引导：脉冲动画的手势图标引导用户点击
- 🎯 渐进式体验：从启动页到简介再到完整介绍页面的三层设计
- 💬 智能弹窗：即刻和邮件联系的优雅弹窗交互
- 🎵 完美BGM：用户主动触发，确保全程音乐沉浸体验
- ⚡ 优化节奏：1.1倍播放速度，更流畅的演示节奏
- 动态粒子背景：80个粒子的微妙连线动画，营造科技感氛围
- 旋转光环Logo：音符图标配合旋转光环和发光效果
- 分层文字动画：标题和描述文字依次滑入，层次感十足
- 高级播放按钮：悬浮发光效果 + 点击波纹动画 + 3D变换
- 渐进式显示：所有元素按时序优雅出现，0.5s间隔
- 个性化问候："欢迎来到 Kin 的世界，很高兴认识你"
- 科技标识："Powered by AI & Creativity" 底部标识
- 4:6黄金比例：左侧代码面板40vw，右侧内容面板60vw，减少黑屏区域
- 逐字符输入：模拟真实编程场景的打字效果
- 语法高亮：JavaScript 代码的专业配色方案
- 持续滚动：主代码完成后，动态显示系统日志和状态信息，永不停止
- 循环动画：16行动态代码无限循环，保持代码面板活跃
- 智能清理：保持最多25行代码，自动删除旧内容防止内存累积
- 分层显示：动态代码带有微光动画和不同颜色，区分主要代码
- 个人档案代码：用代码结构展示个人信息
- 大尺寸文字框：500x160px 的透明毛玻璃文字框
- 逐字打字效果：每行文字逐字符显示，配有打字光标
- 双行滚动：新内容从下方滑入，旧内容自动淡化
- Matrix 背景：不间断的绿色代码雨瀑布
- 手势引导：👆 脉冲动画引导点击"我的介绍及作品集"
- 智能播放：页面加载时立即尝试自动播放BGM
- 多事件触发：click、keydown、touchstart、mousemove 等事件备用触发
- 状态显示：右下角实时显示音频播放状态（🔇/🔊）
- 手动控制：点击音频控制按钮手动播放/暂停BGM
- 浏览器兼容：支持自动播放的直接播放，不支持的提供手动选项
- 滑入式设计：从底部平滑滑入的全屏页面
- 标签化展示：AI热衷者、内容创作者、Cursor官方认证大使并排显示
- 专业领域扩展：新增"社区负责人"领域
- 可点击成就：主要成就项目支持点击跳转看作品，括号提示文字与标题同等大小和明显度
- 手势引导动画：简洁的白色圆圈脉冲+涟漪扩散效果，引导用户点击成就项目，点击后自动渐隐消失
- 智能弹窗：即刻弹窗显示账号名"北国桑麻"和介绍，邮件联系采用弹窗形式
- 最新链接：全球最短一小时黑客松链接更新至微信文章：查看详情
- 友情链接：添加Cursor Insider和Marvin的友情链接，支持hover动画和光效扫过效果
// 初始化 Kin 个人档案
const kin = {
name: "Kin",
location: "深圳 · 潮汕人",
personality: "INTJ",
role: "Cursor Ambassador",
passion: "内容创作 & AI工具",
skills: [
"AI工具应用",
"出海全球化",
"IP内容创作",
"社区建设"
],
achievements: {
videoAccount: "10万粉操盘手",
meetup: "5城 Cursor Meetup 350+人/场",
hackathon: "全球最短1小时",
training: "OPPO等企业讲师"
},
pets: ["🐱", "🐱"],
motto: "一起在AI时代疯狂进化！"
};- 温暖问候：你好，我是 Kin 😜
- 性格特质：INTJ 性格的内容创作者
- 地理位置：深圳工作的潮汕人
- 专业领域：AI、出海全球化、IP 内容创作
- 核心身份：我是 Cursor 官方认证大使（去掉"最骄傲"表述）
- 精彩成就：从视频账号到企业培训（去掉"曾经"表述）
- 生活情趣：两只可爱猫咪的铲屎官
- 标签化头部：三个核心身份标签并排展示
- 专业领域：AI 工具与技术、出海全球化、IP 内容创作、Cursor 中文社区联合发起人
- 可点击成就：
- 10万粉中视频账号操盘手 → B站链接
- 5城 Cursor Meetup 组织者 & Cursor 中文社区联合发起人 → 微信文章
- 全球最短一小时黑客松组织者 → 创新理念阐述
- 企业 AI 培训讲师 → 培训服务介绍
- 弹窗联系：即刻和邮件的专业弹窗交互
- 友情链接：Cursor Insider 和 Marvin 的链接卡片，支持光效扫过动画
- 高级启动：页面加载显示粒子动画背景+旋转Logo+分层文字的启动页面
- 沉浸启动：点击"开始体验"按钮后BGM立即开始，平滑转入主页面
- 代码编译：左侧逐行显示个人档案代码，配合BGM氛围
- 逐字滚动：右侧文字框逐字符展示个人介绍
- 背景代码雨：Matrix 风格的视觉氛围
- 手势引导：👆 动画提示点击按钮
- 音频控制：右下角音频控制按钮，播放/暂停BGM
- 进入完整介绍：点击"我的介绍及作品集"查看详细信息，配有点击音效
- 弹窗交互：点击即刻/邮件弹出专业对话框，有愉悦的点击音效
- 返回主界面：点击返回按钮回到演示页面
- 完美音乐：BGM全程播放，无需担心自动播放限制
- Cursor AI 编程：使用 Cursor 的 AI 辅助功能快速开发
- 智能代码补全：Cursor 的自动补全和代码建议
- AI 代码生成：通过 Cursor 的 AI 助手快速实现复杂功能
- Vide Coding 实践：将编程过程可视化，体现 Vide Coding 理念
- 打字机算法：逐字符显示的真实打字效果
- 文字逐字显示：每行文字的逐字符打字动画
- Canvas 动画：高性能的 Matrix 代码雨
- HTML5 Audio：BGM播放和控制系统
- 弹窗系统：优雅的模态对话框交互
- 响应式设计：完美适配桌面和移动设备
- 层次化布局：代码、文字框、背景的三层设计
- 专业配色：VS Code 风格的语法高亮
- 透明效果：文字框的毛玻璃背景
- 脉冲动画：手势图标的引导动效
- 标签化设计：并排展示的身份标签
- 逐字输入体验：真实的打字机交互感受
- 手势引导：直观的点击提示动画
- 智能弹窗：点击即刻/邮件的弹窗交互
- 点击跳转：成就项目的直接链接访问
- 键盘支持：ESC 键关闭弹窗，点击外部关闭
- 初始化：显示"正在编译代码..."
- 逐行打字：const kin = { ... }
- 语法高亮：注释、关键字、字符串区分
- 完成状态：显示"编译完成 ✓"
- BGM开始：动画开始后0.5秒自动播放背景音乐
- 逐字显示：每行文字逐字符打出，配合BGM节奏
- 双行轮换：新行从下方出现，旧行淡化
- 背景代码雨：持续的 Matrix 效果
- 打字光标：每行末尾的闪烁光标效果
- 手势引导：👆 脉冲动画提示点击
- 页面滑入：从底部平滑进入
- 标签展示：三个核心身份并排显示
- 专业领域：四个专业方向的详细介绍
- 成就展示：可点击跳转的成就列表
- 弹窗联系：即刻和邮件的弹窗交互
- 编程美学：用代码结构展示个人信息
- 真实体验：模拟实际编程场景的打字效果配合音效
- 专业感：VS Code 风格的界面设计
- BGM集成：HTML5 Audio API 播放定制背景音乐
- 音效搭配：Web Audio API 生成的点击音效配合BGM
- 多层视觉：代码、文字、背景的立体效果
- 科技氛围：Matrix 代码雨的未来感
- 优雅交互：流畅的动画和过渡效果
- 引导设计：直观的手势动画提示
- 渐进式设计：从简介到详细的层次展示
- 直观操作：自然的交互流程
- 完整闭环：从展示到联系的完整用户路径
- 智能交互：弹窗、键盘支持等现代交互方式
- 精准表述：去掉"最骄傲"等主观色彩，更加专业
- 整合信息：5城 Cursor Meetup 与社区联合发起人合并展示
- 理念阐述：黑客松项目体现 video coding 生活方式理念
- 标签化身份：三个核心身份的并排展示更加清晰
这不仅是一个个人网页，更是一场技术与艺术完美融合的视觉盛宴，完美诠释了 Kin 作为 Cursor Ambassador 的编程美学和技术素养！
- ⌨️ 逐字打字效果：文字框内每行文字逐字符显示
- 📏 文字框扩大：从 400x120px 升级到 500x160px
- 👆 手势引导动画：脉冲动画的点击提示
- 🏷️ 标签化展示：三个核心身份标签并排显示
- 💬 智能弹窗系统：即刻和邮件的优雅弹窗交互
- 🔗 可点击成就：主要成就支持直接跳转链接
- 🎯 文案精优化：去掉"曾经"、"组织"改"发起"等时态优化
- 🏢 专业领域优化：明确为"Cursor 中文社区联合发起人"
- ⚡ 理念升级：黑客松项目体现 video coding 生活方式
- 🎵 强化BGM系统：页面加载时立即尝试播放，多事件触发
- 🎛️ 音频控制按钮：右下角音频状态显示和手动控制
- 🔊 智能播放策略：自动播放+用户交互备用方案
- 🚀 速度优化：1.1倍播放速度，更流畅的演示节奏
- 📱 交互增强：键盘支持、点击外部关闭等现代交互
- 下载 Cursor：访问 cursor.sh 下载 AI 编程工具
- 克隆项目到 Cursor：
git clone https://github.com/KinGao294/kin.git
cd kin
cursor . # 用 Cursor 打开项目# 克隆项目
git clone https://github.com/KinGao294/kin.git
cd kin
# 使用本地服务器运行（推荐）
python -m http.server 8000
# 或者
npx serve .
# 访问 http://localhost:8000使用 Cursor 的 AI 助手功能，您可以：
- 🤖 询问代码实现原理
- 🎨 修改动画效果和样式
- 🎵 调整音频和交互功能
- 📱 优化响应式设计
GitHub Pages 部署地址：https://kingao294.github.io/kin
本项目已配置 GitHub Actions 自动部署。每次推送到 main 分支时都会自动更新网站。
本项目基于 MIT 许可证 开源。
欢迎所有形式的贡献！请查看 贡献指南 了解详情。
感谢所有为这个项目贡献的开发者！
如果这个项目对您有帮助，请点个 ⭐ 支持一下！
- GitHub: @KinGao294
- 邮件: gaokin294@gmail.com
- 即刻: @北国桑麻
如果您喜欢这个项目，请给个 ⭐ 支持一下！ 🚀✨