# 个人展示网站开发任务清单 (Astro)

## 技术栈
- **框架**: Astro
- **样式**: Tailwind CSS
- **语言**: TypeScript

---

## 第一章：首页 (Home)

- [ ] 1.1 创建 Hero 区域组件
  - [ ] 大标题（姓名/品牌）
  - [ ] 副标题（职业定位）
  - [ ] 简介文字
  - [ ] CTA 按钮（查看作品、联系我）
  - [ ] 背景视觉元素
- [ ] 1.2 创建快速概览区域
  - [ ] 个人头像组件
  - [ ] 核心技能标签
  - [ ] 社交媒体链接

---

## 第二章：关于我 (About Me)

- [ ] 2.1 创建个人介绍页面
  - [ ] 详细个人简介
  - [ ] 教育背景
  - [ ] 工作经历
  - [ ] 个人故事/理念
- [ ] 2.2 技能展示组件
  - [ ] 技术栈列表
  - [ ] 熟练程度可视化
  - [ ] 工具使用展示
- [ ] 2.3 兴趣爱好区域
  - [ ] 个人爱好展示
  - [ ] 其他技能

---

## 第三章：项目展示 (Portfolio/Projects)

- [ ] 3.1 项目列表页面
  - [ ] 项目卡片组件（缩略图、标题、描述）
  - [ ] 技术栈标签
  - [ ] 链接按钮（详情、演示、源码）
- [ ] 3.2 项目分类功能
  - [ ] 按类型分类
  - [ ] 按技术栈筛选
  - [ ] 按时间排序
- [ ] 3.3 项目详情页
  - [ ] 项目背景
  - [ ] 功能特性
  - [ ] 技术实现
  - [ ] 截图/视频展示
  - [ ] 挑战与解决方案
  - [ ] 项目链接

---

## 第四章：博客/文章 (Blog)

- [ ] 4.1 文章列表页面
  - [ ] 文章卡片组件
  - [ ] 发表日期、阅读时间
  - [ ] 摘要、分类标签
- [ ] 4.2 文章详情页
  - [ ] Markdown 渲染
  - [ ] 目录导航
  - [ ] 代码高亮
  - [ ] 相关文章推荐
- [ ] 4.3 分类系统
  - [ ] 按主题分类
  - [ ] 按技术分类

---

## 第五章：联系信息 (Contact)

- [ ] 5.1 联系表单组件
  - [ ] 姓名、邮箱输入
  - [ ] 主题选择
  - [ ] 消息内容
  - [ ] 提交按钮
- [ ] 5.2 联系信息展示
  - [ ] 邮箱地址
  - [ ] 社交媒体链接
  - [ ] 地理位置
  - [ ] 可用时间

---

## 第六章：导航系统

- [ ] 6.1 主导航组件
  - [ ] 导航栏（首页、关于我、项目、博客、联系）
  - [ ] 移动端汉堡菜单
- [ ] 6.2 辅助导航
  - [ ] 返回顶部按钮
  - [ ] 面包屑导航
  - [ ] 页脚导航

---

## 第七章：页脚 (Footer)

- [ ] 7.1 版权信息
- [ ] 7.2 社交链接（GitHub、LinkedIn、Twitter）
- [ ] 7.3 快速链接（隐私政策、网站地图）

---

## 第八章：通用组件

- [ ] 8.1 按钮组件（主要、次要、图标）
- [ ] 8.2 卡片组件（项目、技能、文章）
- [ ] 8.3 模态框组件（图片预览、视频播放）

---

## 第九章：响应式设计

- [ ] 9.1 桌面端适配（1280px+）
- [ ] 9.2 平板端适配（768px - 1024px）
- [ ] 9.3 移动端适配（375px - 480px）

---

## 第十章：交互效果

- [ ] 10.1 页面过渡动画
- [ ] 10.2 悬停效果（按钮、卡片、图片）
- [ ] 10.3 滚动效果（触发动画、视差、固定导航）

---

## 第十一章：SEO与性能

- [ ] 11.1 SEO 优化
  - [ ] Meta 标签
  - [ ] Open Graph
  - [ ] Sitemap
  - [ ] Robots.txt
- [ ] 11.2 性能优化
  - [ ] 图片懒加载
  - [ ] 代码分割
  - [ ] 缓存策略

---

## 第十二章：无障碍访问

- [ ] 12.1 键盘导航支持
- [ ] 12.2 屏幕阅读器支持（ARIA 标签、替代文本）

---

## 第十三章：主题与定制

- [ ] 13.1 亮色主题配置
- [ ] 13.2 暗色主题配置
- [ ] 13.3 主题切换功能

---

## 第十四章：双语支持

- [ ] 14.1 语言切换组件
- [ ] 14.2 国际化架构（i18n 配置）
- [ ] 14.3 翻译内容管理
- [ ] 14.4 路由配置（/en/, /zh/）
- [ ] 14.5 浏览器语言检测
- [ ] 14.6 内容管理双语支持
- [ ] 14.7 中英文字体配置