first commit

README.md

@@ -0,0 +1,150 @@
+# turingflow-blog-001
+
+个人作品集/博客网站模板，适用于设计师、开发者、自由职业者展示作品和服务。
+
+## 技术栈
+
+- React 19 + Vite 7
+- Tailwind CSS 4
+- React Router DOM 7
+- Lucide React (图标库)
+
+## 快速开始
+
+```bash
+pnpm install
+pnpm run dev
+```
+
+## 目录结构
+
+```text
+src/
+├── App.jsx              # 应用入口，包含路由配置
+├── main.jsx             # React 挂载点
+├── index.css            # 全局样式 (Tailwind)
+├── components/          # 可复用组件
+│   ├── NavBar.jsx       # 导航栏
+│   ├── Footer.jsx       # 页脚
+│   ├── Button.jsx       # 按钮组件
+│   ├── AboutCard.jsx    # 关于卡片
+│   ├── ProjectCards.jsx # 项目卡片列表
+│   ├── Testimonials.jsx # 客户评价
+│   ├── Faq.jsx          # 常见问题
+│   └── ...              # 其他组件
+├── pages/               # 页面组件
+│   ├── Home.jsx         # 首页
+│   ├── About.jsx        # 关于页面
+│   ├── Services.jsx     # 服务页面
+│   ├── Portfolio.jsx    # 作品集列表
+│   ├── ProductDetail.jsx# 作品详情
+│   ├── Blog.jsx         # 博客列表
+│   ├── BlogDetail.jsx   # 博客详情
+│   └── Contact.jsx      # 联系页面
+├── data/                # 静态数据 (JSON)
+│   ├── menu.json        # 导航菜单配置
+│   ├── projects.json    # 作品集数据
+│   ├── blog.json        # 博客文章数据
+│   ├── testimonials.json# 客户评价数据
+│   ├── brands.json      # 合作品牌数据
+│   ├── certifications.json # 资质认证数据
+│   ├── faq.json         # 常见问题数据
+│   └── work.json        # 工作经历数据
+└── lib/                 # 工具库
+    └── Head.jsx         # 页面头部管理
+```
+
+## 路由配置
+
+| 路径 | 页面 | 说明 |
+|------|------|------|
+| `/` | Home | 首页 |
+| `/about` | About | 关于我 |
+| `/services` | Services | 服务介绍 |
+| `/portfolio` | Portfolio | 作品集列表 |
+| `/portfolio/:slug` | ProductDetail | 作品详情 |
+| `/blog` | Blog | 博客列表 |
+| `/blog/:slug` | BlogDetail | 博客详情 |
+| `/contact` | Contact | 联系方式 |
+
+## 数据结构
+
+### 导航菜单 (data/menu.json)
+
+```json
+[
+  { "label": "首页", "path": "/" },
+  { "label": "关于", "path": "/about" },
+  { "label": "服务", "path": "/services" }
+]
+```
+
+### 项目数据 (data/projects.json)
+
+```json
+[
+  {
+    "id": 1,
+    "slug": "project-name",
+    "title": "项目标题",
+    "description": "项目描述",
+    "image": "/images/project.jpg",
+    "category": "Web Design",
+    "tags": ["React", "Tailwind"]
+  }
+]
+```
+
+### 博客数据 (data/blog.json)
+
+```json
+[
+  {
+    "id": 1,
+    "slug": "article-slug",
+    "title": "文章标题",
+    "excerpt": "文章摘要",
+    "content": "文章正文内容...",
+    "image": "/images/blog.jpg",
+    "date": "2024-01-15",
+    "author": "作者名",
+    "tags": ["设计", "开发"]
+  }
+]
+```
+
+## 常见修改任务
+
+### 修改网站信息
+
+1. 编辑 `index.html` 中的 `<title>` 和 meta 标签
+2. 修改 `src/components/NavBar.jsx` 中的 Logo 和网站名称
+3. 修改 `src/components/Footer.jsx` 中的版权信息
+
+### 修改导航菜单
+
+编辑 `src/data/menu.json`，添加或删除菜单项
+
+### 添加新页面
+
+1. 在 `src/pages/` 创建新页面组件
+2. 在 `src/App.jsx` 的 Routes 中添加路由
+
+### 修改样式主题
+
+编辑 `src/index.css` 中的 CSS 变量或 Tailwind 配置
+
+### 添加作品/博客
+
+编辑 `src/data/projects.json` 或 `src/data/blog.json`
+
+## 布局说明
+
+- `PageShell` 组件统一控制页面最大宽度 (`max-w-7xl`)
+- 响应式断点：`lg:px-10` (大屏增加内边距)
+- 所有页面共享 NavBar 和 Footer
+
+## 图片资源
+
+- 存放在 `public/` 目录
+- 引用路径：`/images/xxx.jpg`