「07-简历页面」
链接：https://pan.quark.cn/s/b1bfbd2ad5d0
独立简历网页
这是一个完全独立的、离线的HTML简历页面，所有资源都本地化。
📁 文件结构
standalone-resume/ ├── index.html # 主页面 ├── assets/ │ ├── css/ │ │ └── style.css # 样式文件 │ ├── js/ │ │ └── script.js # JavaScript文件 │ ├── icons/ # 本地图标（15个SVG） │ │ ├── mdi-arrow-left.svg │ │ ├── mdi-download.svg │ │ ├── mdi-account-circle.svg │ │ ├── mdi-email.svg │ │ ├── mdi-account-circle-outline.svg │ │ ├── mdi-briefcase-outline.svg │ │ ├── mdi-rocket-launch-outline.svg │ │ ├── mdi-tools.svg │ │ ├── mdi-trophy-outline.svg │ │ ├── mdi-medal.svg │ │ ├── mdi-school.svg │ │ ├── mdi-certificate.svg │ │ ├── mdi-star.svg │ │ ├── mdi-school-outline.svg │ │ └── mdi-graduation-cap.svg │ └── 简历(2).pdf # PDF简历 └── README.md # 说明文档🚀 使用方法
方法1：直接打开
直接用浏览器打开
index.html文件即可查看简历。方法2：本地服务器（推荐）
使用Python启动本地服务器：
cd standalone-resume python -m http.server 8000方法3：部署到静态网站托管
可以部署到：
GitHub Pages
Vercel
Netlify
Cloudflare Pages
或任何支持静态网站的托管服务
✨ 特点
完全独立 - 所有资源本地化，无需网络连接
离线可用 - 可以在没有互联网的环境下使用
响应式设计 - 完美适配手机、平板、电脑
自动主题 - 支持亮色/暗色主题（跟随系统）
优雅动画 - 技能进度条加载动画
本地图标 - 15个SVG图标，加载速度快
一键下载 - 可以直接下载PDF简历
📝 自定义内容
修改个人信息
编辑
index.html中的以下部分：
个人信息区域（第23-42行）
联系方式（第36-40行）
修改工作经历
编辑
index.html中的work-item部分（第68-103行）修改项目经验
编辑
index.html中的project-item部分（第111-145行）修改技能
编辑
index.html中的skill-section部分（第161-220行）修改荣誉奖项
编辑
index.html中的honor-item部分（第234-267行）修改样式
编辑
assets/css/style.css文件可以自定义：
颜色主题
字体大小
间距布局
动画效果
更换PDF简历
将新的PDF文件放到
assets/目录，并重命名为智攀简历(2).pdf或者在assets/js/script.js中修改pdfUrl变量。🎨 主题颜色
可以在
assets/css/style.css的:root部分修改颜色：
:root { --background: #d0e8ff; /* 背景色 */ --theme-color: #ffb3b3; /* 主题色 */ --text-color: #000; /* 文字颜色 */ --card-background: #ffffff7d; /* 卡片背景 */ --card-border-color: #fff; /* 卡片边框 */ }📱 响应式断点
移动端: < 768px
平板端: 768px - 1024px
桌面端: > 1024px
🔧 浏览器兼容性
Chrome (推荐)
Firefox
Safari
Edge
及其他现代浏览器
📄 导出为PDF
使用浏览器的打印功能（Ctrl+P 或 Cmd+P）可以将简历导出为PDF。
🌐 在线部署示例
GitHub Pages
创建仓库
上传
standalone-resume文件夹内容在仓库设置中启用 GitHub Pages
选择根目录作为源
Vercel
cd standalone-resume vercelNetlify
拖放
standalone-resume文件夹到 Netlify 部署页面📧 联系方式
邮箱: zpanjob@163.com
备用邮箱: 296711867@qq.com
祝你求职顺利！ 🎉
🎨 简历页面优化完成
✅ 更新内容
1. 全新配色方案
亮色主题
背景 : 紫色渐变
#667eea → #764ba2主题色 :
#667eea(优雅紫)次要色 :
#764ba2(深紫)文字 :
#2d3748(深灰)次要文字 :
#718096(中灰)卡片 : 半透明白色
rgba(255, 255, 255, 0.95)阴影: 更柔和的投影效果
暗色主题
背景 : 深色渐变
#1a202c → #2d3748主题色 :
#9f7aea(亮紫)次要色 :
#805ad5(紫)文字 :
#e2e8f0(浅灰)次要文字 :
#a0aec0(中灰)卡片 : 深色半透明
rgba(45, 55, 72, 0.95)2. 网页转PDF功能
新增按钮
现在有两个下载按钮：
下载PDF - 下载原始PDF文件
网页转PDF - 将当前网页生成为PDF
使用方法
点击"网页转PDF"按钮：
自动将整个简历页面截图
生成高清PDF文件
自动分页（A4格式）
文件名：
智攀_个人简历.pdf特点
✅ 高清导出（2倍缩放）
✅ 自动分页
✅ 保留当前主题样式
✅ 加载进度提示
✅ 成功/失败通知
3. 视觉优化
头像区域
使用新的渐变色
添加阴影效果
更立体的视觉效果
姓名标题
渐变文字效果
加粗字体
更醒目
技能进度条
使用新渐变色
添加阴影
更平滑的动画
卡片效果
半透明背景
更柔和的边框
优化悬停效果
🎨 配色对比
旧配色
背景色：
#d0e8ff(浅蓝)主题色：
#ffb3b3(粉色)绿色点缀：
#4CAF50新配色
背景：紫色渐变
#667eea → #764ba2主题色：
#667eea(优雅紫)整体更协调、现代、专业
📝 技术细节
网页转PDF实现
使用了以下库（CDN）：
html2canvas@1.4.1- 网页截图
jspdf@2.5.1- PDF生成配色系统
使用CSS变量，便于主题切换：
:root { --background: linear-gradient(...); --theme-color: #667eea; --theme-secondary: #764ba2; --text-color: #2d3748; --text-secondary: #718096; --accent-gradient: linear-gradient(...); }🚀 使用建议
浏览器推荐
Chrome（最佳兼容性）
Edge
Firefox
PDF生成建议
优先使用"下载PDF"按钮下载原始PDF
"网页转PDF"适合：
需要特定样式时
原始PDF不可用时
需要包含网页特效时
打印建议
使用浏览器的打印功能（Ctrl+P）：
选择"保存为PDF"
可以更好地控制分页
适合需要特定格式时
🔧 自定义配色
如果想修改颜色，编辑
assets/css/style.css的:root部分：
:root { --theme-color: #your-color; /* 主色 */ --theme-secondary: #your-color; /* 次要色 */ --background: linear-gradient(...); /* 背景 */ }📱 响应式支持
新配色在所有设备上都能完美显示：
📱 手机（< 768px）
📱 平板（768px - 1024px）
💻 电脑（> 1024px）
🌟 优化效果
视觉提升
✅ 更现代的渐变配色
✅ 更专业的视觉效果
✅ 更好的可读性
✅ 更柔和的过渡效果
功能增强
✅ 新增网页转PDF功能
✅ 加载进度提示
✅ 操作反馈通知
✅ 更好的用户体验
现在刷新页面即可看到全新的配色和PDF生成功能！ 🎉
这是一个设计现代、功能完备的独立个人简历网页项目。它采用纯前端技术栈（HTML、CSS、JavaScript）构建，所有资源均本地化，确保完全离线可用与快速加载。项目提供亮色与暗色双主题切换，并内置"网页转PDF"功能，便于一键导出并打印为传统简历格式。页面布局完全响应式，能在手机、平板及电脑上完美适配。所有个人信息、经历、技能模块均易于在代码中直接修改定制。此项目适合用于个人求职展示、作品集关联或作为静态网站部署的起点，兼具美观性、实用性与隐私性。