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
|
||
**负责人**: 李建华 (前端开发工程师) |