Initial commit: 12个专业个人简历作品集项目
This commit is contained in:
KQL
357
个人简历_机械智能制造/README.md
Normal file
357
个人简历_机械智能制造/README.md
Normal file
@@ -0,0 +1,357 @@
|
||||
# 个人简历网站 - 增强版
|
||||
|
||||
这是一个现代化的响应式个人简历网站，融合了优秀的设计理念和用户体验。
|
||||
|
||||
## ✨ 主要特性
|
||||
|
||||
### 🎨 视觉设计
|
||||
- **现代化界面**: 采用渐变背景和卡片式布局
|
||||
- **响应式设计**: 完美适配桌面端、平板和移动端
|
||||
- **流畅动画**: 滚动动画和交互效果
|
||||
- **优雅配色**: 专业的渐变色彩搭配
|
||||
|
||||
### 🚀 功能特性
|
||||
- **固定导航栏**: 智能导航，自动高亮当前区域
|
||||
- **GSAP动画系统**: 统一的动画管理，替代原有CSS/AOS动画
|
||||
- **代码优化**: 清理冗余文件和代码，提升性能
|
||||
- **技能展示**: 分点罗列式专业技能展示，复合能力区域支持滚动
|
||||
- **现代项目展示**:
|
||||
- 左侧深色区域：项目标题和正方形图片预览
|
||||
- 右侧浅色区域：项目分类、职位、时间、公司、项目描述
|
||||
- 支持图片点击放大查看
|
||||
- 职责详情弹窗展示
|
||||
- 简洁现代的卡片设计和悬停动效
|
||||
- **平滑滚动**: 流畅的页面滚动体验
|
||||
- **返回顶部**: 便捷的页面导航
|
||||
- **打印优化**: 支持完美的简历打印
|
||||
|
||||
### 📱 用户体验
|
||||
- **快速加载**: 优化的资源加载策略
|
||||
- **无障碍访问**: 良好的键盘导航支持
|
||||
- **SEO友好**: 完整的搜索引擎优化
|
||||
- **多浏览器兼容**: 支持主流浏览器
|
||||
|
||||
## 📁 文件结构
|
||||
|
||||
```
|
||||
个人简历/
|
||||
├── index-enhanced.html # 主要简历网站 ⭐
|
||||
├── drone-project.jpg # 无人机项目设计图
|
||||
├── particles.min.js # 粒子背景库
|
||||
├── gsap-animations.js # GSAP动画配置文件 ✨
|
||||
├── README.md # 说明文档
|
||||
├── rule.md # 设计规范
|
||||
├── 个人简历.md # 原始简历内容
|
||||
└── reference/ # 参考项目
|
||||
```
|
||||
|
||||
## 📑 页面结构
|
||||
|
||||
增强版简历网站包含以下七个主要部分：
|
||||
|
||||
1. **主页** - 个人介绍和粒子背景展示
|
||||
2. **基本资料** - 姓名、联系方式、教育背景、主修课程
|
||||
3. **专业技能** - 核心能力、复合能力
|
||||
4. **实习/工作经历** - 无人机结构设计项目经验
|
||||
5. **其他经历** - 竞赛获奖、专业证书、志愿服务
|
||||
6. **个人总结** - 综合能力和求职意向
|
||||
7. **联系方式** - 邮箱、电话、地址、期望职位
|
||||
|
||||
## 🚀 快速开始
|
||||
|
||||
### 方法一：直接打开
|
||||
```bash
|
||||
# macOS
|
||||
open index-enhanced.html
|
||||
|
||||
# Windows
|
||||
start index-enhanced.html
|
||||
|
||||
# Linux
|
||||
xdg-open index-enhanced.html
|
||||
```
|
||||
|
||||
### 方法二：本地服务器（推荐）
|
||||
```bash
|
||||
# 使用Python启动本地服务器
|
||||
python3 -m http.server 8080
|
||||
|
||||
# 然后在浏览器中访问
|
||||
http://localhost:8080/index-enhanced.html
|
||||
```
|
||||
|
||||
### 方法三：局域网部署
|
||||
```bash
|
||||
# 启动局域网可访问的服务器
|
||||
python3 -m http.server 8080 --bind 0.0.0.0
|
||||
|
||||
# 局域网内其他设备访问（替换为您的实际IP）
|
||||
http://192.168.2.22:8080/index-enhanced.html
|
||||
```
|
||||
|
||||
### 方法四：使用Node.js
|
||||
```bash
|
||||
# 安装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` 中添加**
|
||||
```javascript
|
||||
// 在相应的函数中添加新动画
|
||||
function initHeroAnimations() {
|
||||
// 现有动画...
|
||||
|
||||
// 添加你的自定义动画
|
||||
gsap.from(".my-element", {
|
||||
opacity: 0,
|
||||
y: 50,
|
||||
duration: 1,
|
||||
delay: 2,
|
||||
ease: "power2.out"
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
**方法2: 创建新的动画函数**
|
||||
```javascript
|
||||
// 在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: 使用提供的工具函数**
|
||||
```javascript
|
||||
// 使用预定义的工具函数
|
||||
createTextAnimation(".my-text", {
|
||||
y: 30,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.1
|
||||
});
|
||||
|
||||
createFadeInAnimation(".my-image", 'left', 100);
|
||||
```
|
||||
|
||||
### 🔧 ScrollTrigger滚动动画
|
||||
```javascript
|
||||
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双重保障）
|
||||
|
||||
**调试模式**:
|
||||
```javascript
|
||||
// 在浏览器控制台中启用ScrollTrigger标记来调试动画
|
||||
ScrollTrigger.batch(".your-elements", {
|
||||
markers: true // 显示触发点标记
|
||||
});
|
||||
```
|
||||
|
||||
### 🧹 代码清理
|
||||
项目已完成全面的代码清理和优化：
|
||||
|
||||
**已移除的冗余文件**:
|
||||
- `index.html` - 原始版本，已被index-enhanced.html替代
|
||||
- `app.js` - 粒子配置已内联到HTML中
|
||||
- `config.js` - 未使用的配置文件
|
||||
|
||||
**已清理的冗余代码**:
|
||||
- 重复的CSS规则（合并了两个.navbar规则）
|
||||
- 被注释掉的CSS动画代码和@keyframes
|
||||
- 整合了三个重复的可见性修复函数
|
||||
- 移除了过时的注释和调试代码
|
||||
|
||||
**优化效果**:
|
||||
- 减少文件数量，简化项目结构
|
||||
- 提升代码可维护性
|
||||
- 减少冗余CSS，优化加载性能
|
||||
- 统一动画管理系统
|
||||
|
||||
## ⚙️ 自定义配置
|
||||
|
||||
### 修改个人信息
|
||||
编辑 `config.js` 文件中的配置项：
|
||||
|
||||
```javascript
|
||||
const resumeConfig = {
|
||||
personal: {
|
||||
name: "您的姓名",
|
||||
position: "您的职位",
|
||||
email: "your.email@example.com",
|
||||
phone: "您的电话",
|
||||
location: "您的地址",
|
||||
description: "个人简介..."
|
||||
},
|
||||
// ... 其他配置项
|
||||
};
|
||||
```
|
||||
|
||||
### 自定义主题颜色
|
||||
```javascript
|
||||
theme: {
|
||||
primary: "#667eea", // 主色调
|
||||
secondary: "#764ba2", // 次要色
|
||||
accent: "#f093fb", // 强调色
|
||||
dark: "#2c3e50", // 深色
|
||||
light: "#ecf0f1" // 浅色
|
||||
}
|
||||
```
|
||||
|
||||
### 添加技能项目
|
||||
```javascript
|
||||
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+ (基础支持)
|
||||
|
||||
## 📝 使用建议
|
||||
|
||||
1. **个人定制**: 根据config.js修改个人信息
|
||||
2. **颜色调整**: 可以修改CSS变量来更换主题色
|
||||
3. **内容优化**: 根据实际情况调整简历内容
|
||||
4. **图片添加**: 可以替换头像和项目图片
|
||||
5. **SEO优化**: 修改title、description等元信息
|
||||
|
||||
## 🔧 常见问题
|
||||
|
||||
### Q: 如何修改头像？
|
||||
A: 目前使用的是Font Awesome图标，可以在config.js中修改avatar字段，或者直接替换HTML中的图标为图片。
|
||||
|
||||
### Q: 如何添加更多项目经历？
|
||||
A: 在config.js的projects数组中添加新的项目对象。
|
||||
|
||||
### Q: 如何部署到网络？
|
||||
A: 将所有文件上传到Web服务器或使用GitHub Pages等静态托管服务。
|
||||
|
||||
## 📄 许可证
|
||||
|
||||
此项目仅供个人简历使用，请根据需要自由修改和使用。
|
||||
|
||||
## 🙏 致谢
|
||||
|
||||
- 参考项目: [happysnaker/Resume](https://github.com/happysnaker/Resume)
|
||||
- 设计灵感来源于现代网页设计趋势
|
||||
- 感谢开源社区提供的优秀库和工具
|
||||
|
||||
---
|
||||
|
||||
**祝您求职顺利！** 🎉
|
||||
Reference in New Issue
Block a user