abearxiong
7a99b69887
- Created pnpm workspace configuration in `pnpm-workspace.yaml`. - Implemented basic app setup in `src/app.ts` using `@kevisual/router`. - Generated documentation files in `src/generated/docs.ts` for showcase CMS templates. - Added inline script to read and compile markdown files into TypeScript constants in `src/inline.ts`. - Set up main application entry point in `src/main.ts` to integrate routing and plugins. - Established routing structure in `src/routes/index.ts` and `src/routes/md.ts` for handling markdown-related tasks. - Implemented a route for initializing web todo tasks with dynamic content generation based on selected template type.
176 lines
3.7 KiB
Markdown
176 lines
3.7 KiB
Markdown
# 个人展示网站开发任务清单 (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 中英文字体配置
|