213 lines
4.7 KiB
Markdown
213 lines
4.7 KiB
Markdown
|
# 个人作品展示网站
|
|||
|
|
|
|||
|
|
一个现代简洁的个人作品展示单页面网站，面向潜在雇主和客户展示个人技能和项目经验。
|
|||
|
|
|
|||
|
|
## 项目概述
|
|||
|
|
|
|||
|
|
这是一个响应式个人作品展示网站，采用深色主题设计，包含以下主要模块：
|
|||
|
|
- 导航栏
|
|||
|
|
- Hero展示区
|
|||
|
|
- 关于我
|
|||
|
|
- 技能展示
|
|||
|
|
- 项目案例
|
|||
|
|
- 联系方式
|
|||
|
|
- 页脚
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
- **HTML5**: 语义化标签，WAI-ARIA属性
|
|||
|
|
- **CSS3**: Flexbox/Grid布局，CSS变量，媒体查询
|
|||
|
|
- **JavaScript**: 原生ES6+，模块化组织
|
|||
|
|
- **图标**: Font Awesome 6.4.0
|
|||
|
|
- **字体**: Google Fonts (Montserrat, Open Sans)
|
|||
|
|
|
|||
|
|
## 设计规范
|
|||
|
|
|
|||
|
|
### 色彩方案
|
|||
|
|
- 主色: `#1a1a2e` (深蓝黑)
|
|||
|
|
- 辅色: `#16213e` (深蓝)
|
|||
|
|
- 强调色: `#0f3460` (中蓝), `#e94560` (珊瑚红)
|
|||
|
|
- 文字色: `#ffffff` (白), `#b8b8b8` (浅灰)
|
|||
|
|
|
|||
|
|
### 字体
|
|||
|
|
- 标题: 'Montserrat', sans-serif
|
|||
|
|
- 正文: 'Open Sans', sans-serif
|
|||
|
|
|
|||
|
|
### 响应式断点
|
|||
|
|
- 移动端: `< 768px`
|
|||
|
|
- 平板端: `768px - 1024px`
|
|||
|
|
- 桌面端: `> 1024px`
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
portfolio-website/
|
|||
|
|
├── index.html # 主页面
|
|||
|
|
├── css/
|
|||
|
|
│ ├── variables.css # CSS变量定义
|
|||
|
|
│ ├── style.css # 主样式
|
|||
|
|
│ └── responsive.css # 响应式样式
|
|||
|
|
├── js/
|
|||
|
|
│ └── main.js # 主JavaScript逻辑
|
|||
|
|
├── images/
|
|||
|
|
│ └── projects/ # 项目图片
|
|||
|
|
├── assets/
|
|||
|
|
│ ├── fonts/ # 本地字体
|
|||
|
|
│ └── icons/ # 图标资源
|
|||
|
|
└── README.md # 项目说明
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 功能特性
|
|||
|
|
|
|||
|
|
### 1. 导航功能
|
|||
|
|
- 固定定位导航栏
|
|||
|
|
- 移动端汉堡菜单
|
|||
|
|
- 滚动时高亮当前章节
|
|||
|
|
- 平滑滚动到对应模块
|
|||
|
|
|
|||
|
|
### 2. 响应式设计
|
|||
|
|
- 移动端优先设计
|
|||
|
|
- 适配各种屏幕尺寸
|
|||
|
|
- 打印样式优化
|
|||
|
|
- 高对比度模式支持
|
|||
|
|
|
|||
|
|
### 3. 交互功能
|
|||
|
|
- 技能进度条动画
|
|||
|
|
- 项目卡片悬停效果
|
|||
|
|
- 联系表单验证
|
|||
|
|
- 返回顶部按钮
|
|||
|
|
|
|||
|
|
### 4. 可访问性
|
|||
|
|
- WCAG 2.1 AA标准
|
|||
|
|
- 键盘导航支持
|
|||
|
|
- 屏幕阅读器兼容
|
|||
|
|
- 适当的ARIA标签
|
|||
|
|
|
|||
|
|
### 5. 性能优化
|
|||
|
|
- 图片懒加载（预留）
|
|||
|
|
- CSS和JS文件压缩
|
|||
|
|
- 字体和图标优化
|
|||
|
|
- 浏览器缓存策略
|
|||
|
|
|
|||
|
|
## 浏览器兼容性
|
|||
|
|
|
|||
|
|
- ✅ Chrome (最新2个版本)
|
|||
|
|
- ✅ Firefox (最新2个版本)
|
|||
|
|
- ✅ Safari (最新2个版本)
|
|||
|
|
- ✅ Edge (最新2个版本)
|
|||
|
|
- ⚠️ IE 11 (渐进增强)
|
|||
|
|
|
|||
|
|
## 性能目标
|
|||
|
|
|
|||
|
|
- 首次内容绘制: < 1.5秒
|
|||
|
|
- 最大内容绘制: < 2.5秒
|
|||
|
|
- 累计布局偏移: < 0.1
|
|||
|
|
- Lighthouse评分: > 90
|
|||
|
|
|
|||
|
|
## 开发规范
|
|||
|
|
|
|||
|
|
### 代码风格
|
|||
|
|
- 使用Prettier进行代码格式化
|
|||
|
|
- CSS类名使用BEM命名约定
|
|||
|
|
- JavaScript使用ES6+语法
|
|||
|
|
- 关键函数和复杂逻辑必须有注释
|
|||
|
|
|
|||
|
|
### Git提交
|
|||
|
|
- 使用语义化提交消息
|
|||
|
|
- 提交前进行代码检查
|
|||
|
|
- 保持提交历史清晰
|
|||
|
|
|
|||
|
|
## 部署指南
|
|||
|
|
|
|||
|
|
### 本地开发
|
|||
|
|
1. 克隆项目到本地
|
|||
|
|
2. 使用任何HTTP服务器启动项目
|
|||
|
|
```bash
|
|||
|
|
# 使用Python
|
|||
|
|
python -m http.server 8000
|
|||
|
|
|
|||
|
|
# 或使用Node.js
|
|||
|
|
npx serve .
|
|||
|
|
```
|
|||
|
|
3. 在浏览器中访问 `http://localhost:8000`
|
|||
|
|
|
|||
|
|
### 生产部署
|
|||
|
|
1. 压缩CSS和JavaScript文件
|
|||
|
|
2. 优化图片资源
|
|||
|
|
3. 配置适当的HTTP缓存头
|
|||
|
|
4. 启用Gzip压缩
|
|||
|
|
5. 部署到静态网站托管服务（如GitHub Pages, Netlify, Vercel等）
|
|||
|
|
|
|||
|
|
## 内容更新指南
|
|||
|
|
|
|||
|
|
### 更新个人信息
|
|||
|
|
1. 修改 `index.html` 中的相关内容
|
|||
|
|
2. 更新联系信息、技能、项目等
|
|||
|
|
3. 如需更换头像，将图片放入 `images/` 目录并更新HTML
|
|||
|
|
|
|||
|
|
### 添加新项目
|
|||
|
|
1. 在 `index.html` 的 `projects` 部分添加新的项目卡片
|
|||
|
|
2. 将项目图片放入 `images/projects/` 目录
|
|||
|
|
3. 更新项目描述和技术栈
|
|||
|
|
|
|||
|
|
### 修改样式
|
|||
|
|
1. 主要样式在 `css/style.css`
|
|||
|
|
2. 响应式样式在 `css/responsive.css`
|
|||
|
|
3. 颜色和字体变量在 `css/variables.css`
|
|||
|
|
|
|||
|
|
## 测试计划
|
|||
|
|
|
|||
|
|
### 功能测试
|
|||
|
|
- [ ] 导航功能测试
|
|||
|
|
- [ ] 表单验证测试
|
|||
|
|
- [ ] 响应式布局测试
|
|||
|
|
- [ ] 交互功能测试
|
|||
|
|
|
|||
|
|
### 兼容性测试
|
|||
|
|
- [ ] 多浏览器测试
|
|||
|
|
- [ ] 多设备测试
|
|||
|
|
- [ ] 不同分辨率测试
|
|||
|
|
|
|||
|
|
### 性能测试
|
|||
|
|
- [ ] 页面加载速度测试
|
|||
|
|
- [ ] Lighthouse评分
|
|||
|
|
- [ ] 核心Web指标测试
|
|||
|
|
|
|||
|
|
### 可访问性测试
|
|||
|
|
- [ ] 屏幕阅读器测试
|
|||
|
|
- [ ] 键盘导航测试
|
|||
|
|
- [ ] 颜色对比度测试
|
|||
|
|
|
|||
|
|
## 维护文档
|
|||
|
|
|
|||
|
|
### 定期检查
|
|||
|
|
- 每月检查一次链接有效性
|
|||
|
|
- 每季度更新一次项目内容
|
|||
|
|
- 每年审查一次技术栈
|
|||
|
|
|
|||
|
|
### 安全更新
|
|||
|
|
- 定期更新第三方库
|
|||
|
|
- 监控安全漏洞
|
|||
|
|
- 及时应用安全补丁
|
|||
|
|
|
|||
|
|
### 性能监控
|
|||
|
|
- 使用Google Analytics跟踪访问
|
|||
|
|
- 监控页面加载性能
|
|||
|
|
- 收集用户反馈
|
|||
|
|
|
|||
|
|
## 许可证
|
|||
|
|
|
|||
|
|
本项目仅供个人展示使用，保留所有权利。
|
|||
|
|
|
|||
|
|
## 联系方式
|
|||
|
|
|
|||
|
|
如有问题或建议，请联系：
|
|||
|
|
- 邮箱: lijianhua@company.com
|
|||
|
|
- 电话: 138-0003-0003
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**文档版本**: v1.0
|
|||
|
|
**创建时间**: 2026-03-31
|
|||
|
|
**最后更新**: 2026-03-31
|
|||
|
|
**负责人**: 李建华 (前端开发工程师)
|