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.
281 lines
4.2 KiB
Markdown
281 lines
4.2 KiB
Markdown
# 个人展示网站功能拆分文档
|
||
|
||
## 概述
|
||
本文档梳理建立个人展示网站或者作品集的具体功能需求，按章节进行拆分和记录。
|
||
|
||
---
|
||
|
||
## 第一章：首页 (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 文章详情
|
||
- 文章正文
|
||
- 目录导航
|
||
- 代码高亮
|
||
- 相关文章推荐
|
||
|
||
### 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 桌面端 (Desktop)
|
||
- 1920px+
|
||
- 1440px
|
||
- 1280px
|
||
|
||
### 9.2 平板端 (Tablet)
|
||
- 1024px
|
||
- 768px
|
||
|
||
### 9.3 移动端 (Mobile)
|
||
- 480px
|
||
- 375px
|
||
|
||
---
|
||
|
||
## 第十章：交互效果
|
||
|
||
### 10.1 页面过渡
|
||
- 加载动画
|
||
- 页面切换效果
|
||
|
||
### 10.2 悬停效果
|
||
- 按钮悬停
|
||
- 卡片悬停
|
||
- 图片缩放
|
||
|
||
### 10.3 滚动效果
|
||
- 滚动触发动画
|
||
- 视差效果
|
||
- 固定导航
|
||
|
||
---
|
||
|
||
## 第十一章：SEO与性能
|
||
|
||
### 11.1 SEO优化
|
||
- Meta标签
|
||
- Open Graph
|
||
- Sitemap
|
||
- Robots.txt
|
||
|
||
### 11.2 性能优化
|
||
- 图片懒加载
|
||
- 代码分割
|
||
- 缓存策略
|
||
|
||
---
|
||
|
||
## 第十二章：无障碍访问
|
||
|
||
### 12.1 键盘导航
|
||
- Tab键导航
|
||
- 快捷键支持
|
||
|
||
### 12.2 屏幕阅读器
|
||
- ARIA标签
|
||
- 替代文本
|
||
|
||
---
|
||
|
||
## 第十三章：主题与定制
|
||
|
||
### 13.1 亮色主题
|
||
- 配色方案
|
||
- 字体选择
|
||
|
||
### 13.2 暗色主题
|
||
- 配色方案
|
||
- 字体选择
|
||
|
||
### 13.3 主题切换
|
||
- 自动切换
|
||
- 手动切换
|
||
|
||
---
|
||
|
||
## 第十四章：双语支持 (Bilingual Support)
|
||
|
||
### 14.1 语言切换
|
||
- 语言切换按钮/开关
|
||
- 语言状态持久化（保存用户选择）
|
||
- 当前语言指示器
|
||
|
||
### 14.2 国际化架构
|
||
- 国际化配置文件（JSON/YAML）
|
||
- 文本内容管理
|
||
- 日期/时间格式化
|
||
- 数字格式化
|
||
- 复数形式处理
|
||
|
||
### 14.3 翻译内容
|
||
- 静态文本翻译
|
||
- 动态内容翻译
|
||
- SEO翻译（meta、og:title、og:description）
|
||
- 图片ALT文本翻译
|
||
|
||
### 14.4 路由配置
|
||
- 语言前缀URL（如 /en/, /zh/）
|
||
- 默认语言设置
|
||
- 语言切换时URL更新
|
||
|
||
### 14.5 语言检测
|
||
- 浏览器语言偏好检测
|
||
- 首次访问自动跳转
|
||
- 手动覆盖选项
|
||
|
||
### 14.6 内容管理
|
||
- CMS多语言支持
|
||
- 文章/博客双语版本管理
|
||
- 项目描述双语支持
|
||
|
||
### 14.7 字体与排版
|
||
- 中文字体配置
|
||
- 英文字体配置
|
||
- 多语言混排优化
|
||
|
||
---
|
||
|
||
## 总结
|
||
|
||
本文档涵盖了建立个人展示网站的所有核心功能模块。后续可根据实际需求进行调整和扩展。
|