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.
4.2 KiB
4.2 KiB
个人展示网站功能拆分文档
概述
本文档梳理建立个人展示网站或者作品集的具体功能需求，按章节进行拆分和记录。
第一章：首页 (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
- 其他平台
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 字体与排版
- 中文字体配置
- 英文字体配置
- 多语言混排优化
总结
本文档涵盖了建立个人展示网站的所有核心功能模块。后续可根据实际需求进行调整和扩展。