An AI-powered self-introduction portfolio homepage.
mocabolka.world.with.cody/
├── index.html # 主页 - 导航中心
├── css/
│ ├── base.css # 基础样式（变量、重置、背景、光标）
│ └── components.css # 通用组件样式（导航、弹窗、Dock、卡片）
├── js/
│ ├── bg-init.js # 背景预初始化（防闪烁）
│ └── core.js # 核心引擎（背景、光标、粒子、Dock）
├── res/ # 静态资源（图片、SVG、PDF）
├── fr/
│ ├── index.html # 作品集跳转页（含倒计时）
│ └── resume/ # 个人简历（PDF 内嵌阅览）
├── works/
│ ├── 1/ # 作品展示 1 - HTML&CSS / AI Coding
│ ├── 2/ # 作品展示 2 - 微信公众号推文
│ └── 3/ # 作品展示 3 - 幻灯片设计
└── timeline/ # 游戏经历
- 悬浮导航节点：5 个毛玻璃节点分布在页面上，鼠标移动时产生视差浮动效果，支持陀螺仪感应
- "关于我"弹窗：展示头像、简介，可跳转至简历页
- 个人博客入口：带提示弹窗，说明博客已停更，用户确认后前往
- 外部链接保护：所有外部链接（小红书、酷安、GitHub）点击后弹出确认弹窗
- 视频号二维码：点击 Dock 中视频号图标弹出微信扫码引导
- 底部 Dock 栏：社交媒体快捷入口，可展开/收起
- 5 秒倒计时自动跳转至飞书文档，用户可提前选择「留在作品集」或「立即前往」
- 继承主页的背景和视觉风格
- 玻璃卡片容器内嵌 PDF 预览（iframe）
- 鼠标悬停卡片产生视差位移
- PDF 区域内自动隐藏自定义光标
- PDF 加载检测：加载中显示旋转占位动画，加载完成后自动隐藏
- 飞书文档引导：若 PDF 超时未加载（移动端 3s / 桌面端 10s），弹出引导浮窗引导用户前往飞书文档在线阅读完整简历
- 移动端专属提示文案，明确告知移动浏览器内嵌 PDF 兼容性问题
- 3D 倾斜卡片包裹 iframe，鼠标移动产生旋转+阴影联动
- 底部按钮随鼠标浮动
- "跳转至文本产出成果"按钮带离开确认弹窗
- 3 张竖版卡片并列展示，鼠标悬停产生 3D 旋转效果
- 点击任意卡片弹出确认弹窗，显示文章标题后跳转至对应微信文章
- 移动端自动切换为单张轮播模式
- 横向滚动画廊（scroll-snap），左右箭头按钮控制滑动
- 鼠标悬停卡片上浮+标签淡入效果
- 移动端点击切换激活卡片
- 16 张玻璃卡片按游戏类型分类排列（沙盒探索 / 换装搭配 / 二次元 / 赛车竞速 / 模拟经营 / 派对游戏 / 音乐舞蹈 / 角色扮演 / 射击 / 休闲益智）
- 包含 Steam 8年用户、Epic Games 4年用户等平台资历概述
- 游戏时长数据标注（如 Minecraft 2000h、BanG Dream 600+h 等）
- 卡片悬停位移动画
| 特性 | 描述 |
|---|---|
| 设计风格 | 暗色玻璃拟态（Glassmorphism），以 #9ac8e2 蓝为主色调 |
| 字体 | OPPO Sans 4.0（系统字体回退至 sans-serif） |
| 布局策略 | 全屏沉浸式，固定定位 + 绝对定位混合，无传统滚动 |
| 动画效果 | 技术实现 | 应用页面 |
|---|---|---|
| 闪黑过渡 | JS 拦截导航 → 黑屏遮罩 → 渐消后跳转 | 所有页面间导航 |
| 自定义光标 | 双元素（dot + ring），ring 带延迟跟随 | 所有桌面端页面 |
| 光标悬浮膨胀 | .hovered 类触发大小/阴影变化 |
所有交互元素 |
| 粒子背景系统 | Canvas 2D，鼠标吸引+排斥+点击爆破 | 所有页面 |
| 节点浮动视差 | 鼠标/陀螺仪驱动 translate | 主页 |
| 3D 卡片旋转 | perspective + rotateX/Y 随鼠标倾斜 |
works/1, works/2, resume |
| 按钮浮动 | 补间动画（lerp 平滑逼近） | works/1, works/2, works/3 |
| 弹窗弹性动画 | cubic-bezier(0.19, 1, 0.22, 1) 弹性缓动 |
所有弹窗 |
| Dock 展开动画 | cubic-bezier(0.175, 0.885, 0.32, 1.275) 回弹 |
主页, fr/index |
| 背景模糊过渡 | .blurred 类触发 filter: blur() |
弹窗打开时的背景 |
| 黑屏渐消 | 首次访问黑屏遮罩 → 0.8s 后渐消 | 所有页面（仅首次） |
| 背景切换过渡 | background-image 0.8s ease-in-out |
所有页面 |
| 卡片悬停位移 | transform: translateX(6px) |
timeline |
| 画廊滚动吸附 | CSS scroll-snap-type: x mandatory |
works/3 |
| 倒计时跳转 | JS setInterval 倒计时 | fr/index |
| PDF 加载超时引导 | 超时检测 + 移动端/桌面端差异化策略 | fr/resume |
- 跨页面背景同步：通过
sessionStorage保存背景索引，用户切换背景后所有子页面同步继承 - 跨页面光标位置继承：页面跳转前保存光标坐标到
sessionStorage，下一页恢复光标位置，视觉连贯 - 中英文自动间距：集成 pangu.js，自动在中英文/数字间添加空格
- 外部链接安全确认：所有离开站点的链接均弹出二次确认，防止误操作
- "关于我"弹窗与 Dock 联动：打开"关于我"弹窗时底部 Link Me 栏自动展开，关闭弹窗时自动收起，点击弹窗内部不误关闭 Dock
- 移动端适配：768px 断点下隐藏自定义光标、调整节点布局、切换为触摸友好的交互模式
- 陀螺仪支持：支持设备方向感应作为视差输入（降级为鼠标）
- 性能优化：使用
will-change、requestAnimationFrame、粒子数量根据屏幕面积动态计算
- 纯 HTML/CSS/JS（无框架依赖）
- pangu.js（中英文间距处理）
- 闪黑过渡（JS 驱动跨页面导航动画）
重构后的共用代码位于根目录：
css/base.css— 所有页面共用的基础样式（CSS 变量、重置、背景层、光标、加载动画、响应式）css/components.css— 通用组件样式（背景切换器、顶部导航、模态弹窗、底部 Dock、玻璃卡片容器、导航按钮、模糊效果）js/bg-init.js— 背景预初始化脚本（在 DOM 渲染前执行，防止背景闪烁）js/core.js— 核心引擎（mocabolka全局对象，包含背景同步、光标系统、粒子系统、闪黑过渡、Dock 交互）
各子页面通过相对路径引用这些文件，页面特有样式和逻辑保留在各页面内联 <style> 和 <script> 中。