孙悟空个人主页 🐒

一个现代化、响应式的孙悟空个人主页网站，展示了齐天大圣的生平、神通法术和取经历程。

🌟 特性

• 响应式设计 - 完美适配桌面端、平板和移动设备
• 现代化UI - 采用渐变色彩和流畅动画效果
• 交互体验 - 平滑滚动、动画效果和表单验证
• 无障碍访问 - 支持键盘导航和屏幕阅读器
• 性能优化 - 轻量级代码，快速加载

📁 项目结构

CV-project/
├── index.html          # 主页面文件
├── styles.css          # 样式文件
├── script.js           # JavaScript交互文件
└── README.md           # 项目说明文档

🎨 页面内容

主要板块

1. 首页横幅 - 展示孙悟空的基本信息和头衔
2. 关于我 - 详细介绍出生背景、基本信息和成就统计
3. 神通法术 - 展示七十二变、筋斗云、火眼金睛等能力
4. 取经之路 - 时间线形式展示从花果山称王到成佛的历程
5. 联系方式 - 提供联系信息和留言表单

技术特色

• CSS Grid & Flexbox - 现代布局技术
• CSS动画 - 流畅的过渡效果和关键帧动画
• Intersection Observer - 滚动触发动画
• 响应式设计 - 移动优先的设计理念
• 无障碍支持 - ARIA标签和键盘导航

🚀 快速开始

本地运行

1. 克隆或下载项目文件
2. 在项目目录中打开终端
3. 启动本地服务器：

# 使用Python 3
python3 -m http.server 8000

# 或使用Node.js (需要安装http-server)
npx http-server -p 8000

# 或使用PHP
php -S localhost:8000

4. 在浏览器中访问 http://localhost:8000

部署到GitHub Pages

1. 创建GitHub仓库
2. 上传所有项目文件
3. 在仓库设置中启用GitHub Pages
4. 选择主分支作为源
5. 访问生成的GitHub Pages URL

📱 响应式断点

• 桌面端: > 768px
• 平板端: 481px - 768px
• 移动端: ≤ 480px

🎯 浏览器支持

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

🛠️ 自定义指南

修改颜色主题

在 styles.css 中修改CSS变量：

:root {
    --primary-color: #d4af37;    /* 金色主题 */
    --secondary-color: #667eea;   /* 蓝紫色 */
    --accent-color: #764ba2;      /* 深紫色 */
}

添加新的神通法术

在 index.html 的 .abilities-grid 中添加新的 .ability-card：

<div class="ability-card">
    <div class="ability-icon">
        <i class="fas fa-bolt"></i>
    </div>
    <h3>新神通</h3>
    <p>神通描述...</p>
</div>

修改时间线事件

在 .timeline 容器中添加或修改 .timeline-item：

<div class="timeline-item">
    <div class="timeline-marker"></div>
    <div class="timeline-content">
        <h3>事件标题</h3>
        <p>事件描述...</p>
    </div>
</div>

📊 性能优化

• 使用了Web字体的 display=swap 策略
• CSS和JavaScript文件已压缩
• 图标使用Font Awesome CDN
• 实现了懒加载和交叉观察器

🔧 开发工具

推荐使用以下工具进行开发：

• 代码编辑器: VS Code, Sublime Text
• 浏览器开发工具: Chrome DevTools
• 版本控制: Git
• 部署平台: GitHub Pages, Netlify, Vercel

📄 许可证

本项目基于MIT许可证开源。

🤝 贡献

欢迎提交Issue和Pull Request来改进这个项目！

贡献指南

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启Pull Request

📞 联系方式

如有问题或建议，请通过以下方式联系：

• 项目Issues: GitHub Issues
• 邮箱: your-email@example.com

---

"若要成佛，先要成人；若要成人，先要成己。" - 孙悟空

🌟 感谢使用孙悟空个人主页模板！ 🌟