skillpod/frontend-starter-skill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9ca5a33ebd41056bea96290f133f6eff5c5ee82e
frontend-starter-skill/TODO.md
abearxiong 7a99b69887 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.
2026-01-20 22:54:40 +08:00

3.7 KiB
Raw Blame History

个人展示网站开发任务清单 (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 中英文字体配置
Reference in New Issue View Git Blame Copy Permalink