feat: initialize pnpm workspace and add app structure

- 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.

docs/website-features-breakdown.md

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