# 个人作品展示网站

一个现代简洁的个人作品展示单页面网站，面向潜在雇主和客户展示个人技能和项目经验。

## 项目概述

这是一个响应式个人作品展示网站，采用深色主题设计，包含以下主要模块：
- 导航栏
- 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  
**负责人**: 李建华 (前端开发工程师)