固定导航栏: 智能导航，自动高亮当前区域
GSAP动画系统: 统一的动画管理，替代原有CSS/AOS动画
代码优化: 清理冗余文件和代码，提升性能
技能展示: 分点罗列式专业技能展示，复合能力区域支持滚动
现代项目展示:
- 左侧深色区域：项目标题和正方形图片预览
- 右侧浅色区域：项目分类、职位、时间、公司、项目描述
- 支持图片点击放大查看
- 职责详情弹窗展示
- 简洁现代的卡片设计和悬停动效
平滑滚动: 流畅的页面滚动体验
返回顶部: 便捷的页面导航
打印优化: 支持完美的简历打印

📱 用户体验

快速加载: 优化的资源加载策略
无障碍访问: 良好的键盘导航支持
SEO友好: 完整的搜索引擎优化
多浏览器兼容: 支持主流浏览器

📁 文件结构

个人简历/
├── index-enhanced.html # 主要简历网站 ⭐
├── drone-project.jpg   # 无人机项目设计图
├── particles.min.js    # 粒子背景库
├── gsap-animations.js  # GSAP动画配置文件 ✨
├── README.md          # 说明文档
├── rule.md            # 设计规范
├── 个人简历.md        # 原始简历内容
└── reference/         # 参考项目

📑 页面结构

增强版简历网站包含以下七个主要部分：

主页 - 个人介绍和粒子背景展示
基本资料 - 姓名、联系方式、教育背景、主修课程
专业技能 - 核心能力、复合能力
实习/工作经历 - 无人机结构设计项目经验
其他经历 - 竞赛获奖、专业证书、志愿服务
个人总结 - 综合能力和求职意向
联系方式 - 邮箱、电话、地址、期望职位

🚀 快速开始

方法一：直接打开

# macOS
open index-enhanced.html

# Windows
start index-enhanced.html

# Linux
xdg-open index-enhanced.html

方法二：本地服务器（推荐）

# 使用Python启动本地服务器
python3 -m http.server 8080

# 然后在浏览器中访问
http://localhost:8080/index-enhanced.html

方法三：局域网部署

# 启动局域网可访问的服务器
python3 -m http.server 8080 --bind 0.0.0.0

# 局域网内其他设备访问（替换为您的实际IP）
http://192.168.2.22:8080/index-enhanced.html

方法四：使用Node.js

# 安装http-server
npm install -g http-server

# 启动服务器
http-server -p 8080 -o

🎮 交互功能

网站提供了丰富的交互体验：

📸 图片查看: 点击项目图片可放大查看详细的无人机设计草图
📋 职责详情: 点击"主要职责"区域查看完整的7项工作职责详情
📜 滚动浏览: 复合能力区域支持隐藏滚动条的流畅滚动体验
⌨️ 键盘操作: 支持ESC键关闭弹窗，Home/End键快速导航
🖱️ 悬停效果: 各个区域都有精美的悬停动画和反馈

🎬 GSAP动画系统

项目已集成GSAP动画库，提供专业级动画效果：

📁 动画文件结构

gsap-animations.js    # 主要的GSAP动画配置文件
├── 页面加载动画     # 加载器淡出、导航栏滑入
├── 英雄区域动画     # 头像旋转缩放、文字依次出现
├── 滚动触发动画     # 技能卡片、项目展示、联系信息
├── 悬停交互动画     # 卡片悬停效果增强
├── 弹窗动画增强     # 左滑入、右滑出弹窗效果
└── 工具函数        # 可复用的动画函数

🎯 如何添加自定义GSAP动画

方法1: 直接在 gsap-animations.js 中添加

// 在相应的函数中添加新动画
function initHeroAnimations() {
    // 现有动画...
    
    // 添加你的自定义动画
    gsap.from(".my-element", {
        opacity: 0,
        y: 50,
        duration: 1,
        delay: 2,
        ease: "power2.out"
    });
}

方法2: 创建新的动画函数

// 在gsap-animations.js中添加新函数
function initMyCustomAnimations() {
    gsap.timeline()
        .from(".element1", { opacity: 0, x: -100, duration: 0.8 })
        .from(".element2", { opacity: 0, x: 100, duration: 0.8 }, "-=0.4");
}

// 在initAllAnimations()中调用
function initAllAnimations() {
    // 现有初始化...
    initMyCustomAnimations(); // 添加这行
}

方法3: 使用提供的工具函数

// 使用预定义的工具函数
createTextAnimation(".my-text", {
    y: 30,
    opacity: 0,
    duration: 0.8,
    stagger: 0.1
});

createFadeInAnimation(".my-image", 'left', 100);

🔧 ScrollTrigger滚动动画

gsap.from(".my-section", {
    scrollTrigger: {
        trigger: ".my-section",
        start: "top 80%",
        end: "bottom 20%",
        toggleActions: "play none none reverse",
        // markers: true // 调试时启用
    },
    y: 100,
    opacity: 0,
    duration: 1,
    ease: "power2.out"
});

📱 性能优化建议

使用 will-change: transform CSS属性优化动画元素
避免同时运行过多复杂动画
在移动设备上适当减少动画复杂度
使用 gsap.set() 预设初始状态

🔧 动画冲突解决方案

项目已解决GSAP与原有CSS/AOS动画的冲突问题：

已移除的冲突动画:

AOS (Animate On Scroll) 库及其CSS
原有的CSS关键帧动画 (slideInDown, slideInUp, fadeInUp)
页面加载时的CSS动画

安全机制:

多层元素可见性保护机制
动画初始化失败时的回退方案
立即执行的紧急可见性修复
ScrollTrigger不可用时的兼容处理
导航栏强制显示保护（CSS + JS双重保障）

调试模式:

// 在浏览器控制台中启用ScrollTrigger标记来调试动画
ScrollTrigger.batch(".your-elements", {
    markers: true // 显示触发点标记
});

🧹 代码清理

项目已完成全面的代码清理和优化：

已移除的冗余文件:

index.html - 原始版本，已被index-enhanced.html替代
app.js - 粒子配置已内联到HTML中
config.js - 未使用的配置文件

已清理的冗余代码:

重复的CSS规则（合并了两个.navbar规则）
被注释掉的CSS动画代码和@keyframes
整合了三个重复的可见性修复函数
移除了过时的注释和调试代码

优化效果:

减少文件数量，简化项目结构
提升代码可维护性
减少冗余CSS，优化加载性能
统一动画管理系统

⚙️ 自定义配置

修改个人信息

编辑 config.js 文件中的配置项：

const resumeConfig = {
    personal: {
        name: "您的姓名",
        position: "您的职位",
        email: "your.email@example.com",
        phone: "您的电话",
        location: "您的地址",
        description: "个人简介..."
    },
    // ... 其他配置项
};

自定义主题颜色

theme: {
    primary: "#667eea",      // 主色调
    secondary: "#764ba2",    // 次要色
    accent: "#f093fb",       // 强调色
    dark: "#2c3e50",         // 深色
    light: "#ecf0f1"         // 浅色
}

添加技能项目

skills: {
    core: {
        title: "核心技能",
        icon: "fas fa-star",
        items: {
            "技能名称": 85,  // 技能名称: 掌握程度(0-100)
            "另一个技能": 90
        }
    }
}

🎯 版本对比

特性	原版	增强版
基础功能	✅	✅
响应式设计	✅	✅
加载动画	❌	✅
固定导航	❌	✅
滚动动画	❌	✅
粒子背景	❌	✅
技能展示	简单	详细分点+滚动
项目展示	基础卡片	现代化左右布局
交互弹窗	❌	✅
图片放大	❌	✅
配置化数据	❌	✅
SEO优化	基础	完整
打印优化	基础	完整

🛠️ 技术栈

HTML5: 语义化标签、模态框、响应式图片
CSS3: Flexbox、Grid、渐变、动画、毛玻璃效果
JavaScript: ES6+、DOM操作、事件处理、模态框交互
Bootstrap 5: 响应式框架、网格系统
AOS: 滚动动画库
particles.js: 粒子背景动画
GSAP: 专业动画库 + ScrollTrigger插件
Font Awesome: 图标库

📱 响应式断点

桌面端: > 992px
平板端: 768px ~ 992px
移动端: < 768px

🌐 浏览器支持

Chrome/Edge (推荐)
Firefox
Safari
IE 11+ (基础支持)

📝 使用建议

个人定制: 根据config.js修改个人信息
颜色调整: 可以修改CSS变量来更换主题色
内容优化: 根据实际情况调整简历内容
图片添加: 可以替换头像和项目图片
SEO优化: 修改title、description等元信息

🔧 常见问题

Q: 如何修改头像？

A: 目前使用的是Font Awesome图标，可以在config.js中修改avatar字段，或者直接替换HTML中的图标为图片。

Q: 如何添加更多项目经历？

A: 在config.js的projects数组中添加新的项目对象。

Q: 如何部署到网络？

A: 将所有文件上传到Web服务器或使用GitHub Pages等静态托管服务。

📄 许可证

此项目仅供个人简历使用，请根据需要自由修改和使用。

🙏 致谢

参考项目: happysnaker/Resume
设计灵感来源于现代网页设计趋势
感谢开源社区提供的优秀库和工具

祝您求职顺利！ 🎉

README.md Unescape Escape

个人简历网站 - 增强版

✨ 主要特性

🎨 视觉设计

🚀 功能特性