返回主站
About · 关于本站
Xiang 个人网站
一个展示个人作品、技能和经历的现代网站，采用深色主题设计，包含丰富的动画效果
v1.8.6
最后更新：2026年7月20日
🎨 视觉设计
深色主题
精心调配的暗色方案，长时间浏览不疲劳，配合动态渐变点缀
银河星空背景
Canvas 实时渲染的星云、流星动画，性能优化，移动端自动降级
毛玻璃导航
Win11 风格圆角胶囊导航栏，backdrop-filter 实现模糊透明效果
自定义光标
点 + 扩散环 + 跟随环三重光标系统，悬停交互增强
滚动渐显动画
IntersectionObserver 驱动的元素入场动画，高性能无抖动
响应式适配
从 420px 到 2K+ 全尺寸适配，移动端菜单、触控优化
技术栈
HTML5
CSS3
JavaScript ES6+
Canvas API
IntersectionObserver
Google Fonts (Inter)
项目结构
xiang/
├── index.html # 主页
├── README.md # 项目说明文档
├── sw.js # Service Worker 离线缓存
├── AI Coding 参考文档.md # AI 协作参考文档
├── css/
│ ├── styles.css # 主样式表（含所有组件样式）
│ ├── about-page.css # 关于页面专用样式
│ ├── cubes.css # 立方体动画样式
│ ├── project-page.css # 项目详情页专用样式
│ └── sub-page.css # 二级页面通用样式
├── js/
│ ├── main.js # 主交互逻辑（加载动画、导航、滚动渐显、光标、评价轮播、技能弹窗）
│ ├── galaxy.js # 首页银河系星云背景动画
│ ├── now-stars.js # 当前状态区域星空背景
│ ├── skills-smoke.js # 技能区域黑金粒子光标效果
│ ├── cam-info.js # 摄影作品悬停显示设备信息
│ ├── sub-page.js # 二级页面通用逻辑（滚动渐显、光标、进度条）
│ ├── project-galaxy.js # 二级页面银河系星空背景
│ ├── antigravity.js # 评价板块反重力粒子环效果
│ ├── ascii-text.js # 联系区域 ASCII 文字效果
│ ├── click-spark.js # 点击火花效果
│ ├── decrypted-text.js # 标题文字解密动画效果
│ └── cubes.js # 立方体动画逻辑
├── page2/
│ ├── about.html # 关于页面
│ ├── lab2.html # 实验室项目页
│ └── project-details.html # 项目详情汇总页
└── images/
├── head-icon.webp # 网站图标
├── icon/ # 技能图标
├── photo/ # 摄影作品图片
└── project/ # 项目展示图片
└── detail/ # 项目详情图片
更新日志
v1.8.6
当前版本- 新增移动端访问提示遮罩，小屏设备仅显示「请在 PC 端打开页面」
- 修复 click-spark.js 空 rAF 循环导致的 CPU 空转：sparks 清空时自动停止，点击时重启
- 修复 cubes.js 无 dispose 函数导致的 rAF/timer 泄漏：新增销毁函数，统一移除事件监听
- 优化 Service Worker 缓存策略：HTML 导航请求改为 network-first，避免页面更新滞后；离线回退优先匹配请求 URL 自身缓存
- 修复 styles.css 中 .sub-stat-num 颜色重复定义冲突，ACC 与 F1 项目页统计数字颜色改为作用域选择器
- 修复 main.js setInterval 轮询 loader 无超时上限：增加 10 秒超时降级，避免 loader 异常时永久轮询
- 修复 lab2.html GSAP 加载轮询无上限：增加 10 秒最大重试次数与超时降级提示
- 统一全站版本号至 v1.8.6（页脚、Service Worker、版本标签、更新日志）
- 统一项目卡片倾斜角度：第二行卡片默认 rotateY(12deg) 改为与第一行一致的 rotateY(-12deg)
v1.8.5
- 修复二级界面 ai.html 断链（重定向至 lab2.html），修复 Service Worker 预缓存缺口
- 评价卡片切换改为交叉淡入淡出，始终仅显示当前 2 张卡片，另外 2 张淡入淡出
- 全站版本号升级至 v1.8.5，同步 README 与 AI Coding 参考文档
- 对抗式审查全量回归与断链扫描
v1.8.4
- 修复评价卡片切换时毛玻璃透明瑕疵，卡片全程保持毛玻璃常显
- Antigravity 光标跟随动画横向扩展，覆盖评价段落左右全宽
- 对抗式安全加固：CDN 资源补充 SRI 完整性校验、Service Worker 缓存策略修复、外链 rel 属性统一
- 网站信息页文件树对齐实际磁盘结构
v1.8.3
- 修复二级界面段落滚动位置问题（切换段落默认从顶部开始）
- 删除无关文件，清理失效引用
- 项目二级界面图片增加卡片悬停放大效果
- 增加很多多多多的动画效果
v1.8.2
- 优化内容排版
- 代码优化
- 网站信息页面备案信息移至页面底部
- 为全部代码文件添加/优化中文注释
v1.8.0
- 新增网站信息页面：展示项目信息与更新日志
- 导航栏新增网站信息入口：一键访问项目详情
- 优化项目二级界面信息
v1.7.5
- 图片文件夹分类：重新组织图片文件结构
- images/photo/ 存放摄影作品，images/project/ 存放项目图片
- 智能设备识别：摄影作品悬停显示不同 emoji（📱 手机 / 📷 相机 / 🎞️ 胶片）
- 路径优化：更新所有图片引用路径
- 代码清理：优化文件结构和命名
v1.7.4
- 修复星空背景显示问题
- 优化光标效果性能
- 更新项目数据文件
- 清理项目文件结构
v1.7.3
- 修复二级界面黑屏问题
- 评价卡片间隙优化
- 评价卡片切换动画加速
v1.7.2
- 新增 AI 评价轮播效果
- 优化项目卡片交互
- 修复响应式布局问题
v1.7.1
- 新增银河系星空背景
- 优化自定义光标效果
- 新增技能烟雾效果
v1.7.0
- Hero 区域替换为 Canvas 星空背景
- 导航栏升级为 Win11 风格毛玻璃效果
- 项目卡片新增兄弟卡片阴影联动
- 评价卡片改为轮播模式
许可说明
本项目为个人作品展示网站，所有内容和设计均为原创。