🌐 个人网站

这是我的个人网站项目，展示我的技能、项目和联系方式。网站采用现代化的响应式设计，支持多种设备访问。

✨ 特性

• 🎨 现代化的响应式设计
• 📱 移动端友好
• ⚡ 快速加载
• 🌙 暗色主题支持
• 🎭 平滑动画效果
• 📊 交互式统计展示
• 🔗 社交媒体链接

🛠️ 技术栈

• 前端: HTML5, CSS3, JavaScript (ES6+)
• 样式: CSS Grid, Flexbox, CSS动画
• 图标: Font Awesome
• 部署: GitHub Pages
• CI/CD: GitHub Actions

📁 项目结构

personal-website/
├── index.html          # 主页面
├── styles.css          # 样式文件
├── script.js           # JavaScript功能
├── README.md           # 项目说明
├── .github/
│   └── workflows/
│       └── deploy.yml  # GitHub Actions部署配置
└── assets/             # 静态资源（如需要）

🚀 快速开始

本地开发

1. 克隆仓库

git clone https://github.com/chord233/personal-website.git
cd personal-website

2. 使用本地服务器运行

# 使用Python
python -m http.server 8000

# 或使用Node.js
npx serve .

# 或使用Live Server扩展（VS Code）

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

GitHub Pages部署

1. Fork或克隆此仓库到你的GitHub账户
2. 在仓库设置中启用GitHub Pages
3. 选择 "GitHub Actions" 作为部署源
4. 推送代码到main分支，自动部署将开始

🎨 自定义

修改个人信息

在 index.html 中更新以下内容：

• 个人姓名和标题
• 技能和专业领域
• 项目信息
• 联系方式

修改样式

在 styles.css 中自定义：

• 颜色主题
• 字体样式
• 布局和间距
• 动画效果

添加功能

在 script.js 中添加：

• 新的交互效果
• 数据获取功能
• 第三方服务集成

📱 响应式设计

网站支持以下设备：

• 🖥️ 桌面端 (1200px+)
• 💻 笔记本 (768px - 1199px)
• 📱 平板 (481px - 767px)
• 📱 手机 (≤480px)

🌟 主要功能

导航

• 固定顶部导航栏
• 平滑滚动到各个部分
• 移动端汉堡菜单

主页

• 渐变背景
• 打字机动画效果
• 行动按钮

关于我

• 个人介绍
• 统计数据动画
• 技能展示

项目展示

• 项目卡片
• 悬停效果
• 技术标签

联系方式

• 社交媒体链接
• 邮箱联系
• 响应式布局

🔧 配置选项

GitHub Actions

部署配置在 .github/workflows/deploy.yml 中，支持：

• 自动部署到GitHub Pages
• 分支保护
• 构建状态检查

性能优化

• CSS和JavaScript压缩
• 图片优化
• 懒加载
• 缓存策略

📈 SEO优化

• 语义化HTML结构
• Meta标签优化
• Open Graph标签
• 结构化数据

🤝 贡献

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

📄 许可证

MIT License - 详见 LICENSE 文件

📞 联系我

• 📧 Email: [email protected]
• 🐙 GitHub: @chord233
• 💼 LinkedIn: chord233
• 🐦 Twitter: @chord233

---

⭐ 如果这个项目对你有帮助，请给它一个星标！