-
-
+
+
+ Engineering · Design · Intelligence +
-计算机科学的工程实践和一些个人思考。 + -## 联系方式 +--- -- GitHub：[@minorcell](https://github.com/minorcell) -- 邮箱：minorcell6789@gmail.com -- 技术讨论：文章评论区 +## 📖 关于项目 -## License +CellStack 是一个基于 Next.js 构建的现代化技术博客与个人作品集网站，专注于分享计算机科学的工程实践和个人思考。 -MIT +**核心理念：** 追求速度、可维护性和出色的用户体验。 + +### ✨ 特性 + +- 📝 **技术博客** - 深度技术文章，涵盖前端、后端、DevOps、AI 等领域 +- 📚 **主题学习** - 系统化的技术主题教程（如 Bun 等） +- 🎨 **现代设计** - 采用 Framer Motion 动画和精美的 UI 设计 +- 🔍 **全文搜索** - 基于 Pagefind 的快速搜索功能 +- 💬 **评论系统** - 集成 Giscus 实现 GitHub Discussions 评论 +- 🌙 **响应式设计** - 完美适配各种设备尺寸 +- 🎮 **3D 效果** - 使用 React Three Fiber 和 R3F 实现交互式 3D 效果 +- 📊 **GitHub 热力图** - 展示编码活动的可视化统计 + +## 🛠️ 技术栈 + +### 核心框架 + +- **Next.js 16** - React 框架，支持静态导出 +- **React 19** - 最新版本的 React +- **TypeScript** - 类型安全的 JavaScript + +### UI 与样式 + +- **Tailwind CSS 4** - 实用优先的 CSS 框架 +- **Framer Motion** - 流畅的动画库 +- **Lucide React** - 现代化图标库 + +### 内容管理 + +- **MDX** - 支持 JSX 的 Markdown +- **Gray Matter** - 解析前置元数据 +- **Remark GFM** - GitHub 风格的 Markdown +- **Rehype Highlight** - 代码高亮 + +### 3D 图形 + +- **Three.js** - 3D 图形库 +- **React Three Fiber** - React 的 Three.js 渲染器 +- **@react-three/drei** - R3F 实用工具集 + +### 其他功能 + +- **Pagefind** - 静态网站搜索 +- **Giscus** - 基于 GitHub Discussions 的评论系统 +- **Mermaid** - 图表和流程图支持 + +## 🚀 快速开始 + +### 环境要求 + +- Node.js 18+ 或更高版本 +- pnpm（推荐）/ npm / yarn + +### 安装依赖 + +```bash +# 使用 pnpm（推荐） +pnpm install + +# 或使用 npm +npm install +``` + +### 开发 + +启动本地开发服务器： + +```bash +pnpm dev +# 或 +npm run dev +``` + +访问 [http://localhost:3000](http://localhost:3000) 查看网站。 + +### 构建 + +构建生产版本： + +```bash +pnpm build +# 或 +npm run build +``` + +构建完成后，静态文件将输出到 `out/` 目录。 + +### 本地预览 + +预览构建后的网站： + +```bash +pnpm start +# 或 +npm start +``` + +### 代码格式化 + +```bash +# 检查代码格式 +pnpm format:check + +# 自动格式化代码 +pnpm format +``` + +### 代码检查 + +```bash +pnpm lint +``` + +## 📁 项目结构 + +``` +cellstack/ +├── content/ # 内容文件 +│ ├── blog/ # 博客文章（按年份组织） +│ └── topics/ # 主题教程 +├── public/ # 静态资源 +├── src/ +│ ├── app/ # Next.js App Router 页面 +│ │ ├── blog/ # 博客页面 +│ │ ├── topics/ # 主题页面 +│ │ ├── me/ # 个人介绍页面 +│ │ └── search/ # 搜索页面 +│ ├── components/ # React 组件 +│ ├── lib/ # 工具函数和配置 +│ └── types/ # TypeScript 类型定义 +├── next.config.ts # Next.js 配置 +├── tailwind.config.ts # Tailwind CSS 配置 +└── tsconfig.json # TypeScript 配置 +``` + +## 📝 内容编写 + +### 博客文章 + +在 `content/blog/YYYY/` 目录下创建 Markdown 文件： + +```markdown +--- +date: 2025-01-01 +title: 文章标题 +description: 文章描述 +author: mcell +tags: + - 标签1 + - 标签2 +keywords: + - 关键词1 + - 关键词2 +--- + +文章内容... +``` + +### 主题教程 + +在 `content/topics/主题名称/` 目录下创建 Markdown 文件。 + +## 🤝 参与贡献 + +欢迎提交 Issue 和 Pull Request！ + +1. Fork 本仓库 +2. 创建你的特性分支 (`git checkout -b feature/AmazingFeature`) +3. 提交你的改动 (`git commit -m 'Add some AmazingFeature'`) +4. 推送到分支 (`git push origin feature/AmazingFeature`) +5. 开启一个 Pull Request + +## 📬 联系方式 + +- **GitHub**: [@minorcell](https://github.com/minorcell) +- **邮箱**: minorcell6789@gmail.com +- **掘金**: [minorcell](https://juejin.cn/user/2280829967146779) +- **技术讨论**: 文章评论区 + +## 📄 License + +本项目采用 [MIT](./LICENSE) 许可证。 + +--- + ++ 使用 ❤️ 和 ☕ 构建 +
diff --git a/README_en.md b/README_en.md index 92cd289..5a7145f 100644 --- a/README_en.md +++ b/README_en.md @@ -1,19 +1,209 @@ # CellStack - Engineer's Technical Notes -
-
+
+
+ Engineering · Design · Intelligence +
-Engineering practices in computer science and some personal thoughts. ++ 🌐 Live Site · + 中文 +
-## Contact +--- -- GitHub: [@minorcell](https://github.com/minorcell) -- Email: minorcell6789@gmail.com -- Technical discussions: Comment sections of posts +## 📖 About -## License +CellStack is a modern tech blog and personal portfolio built with Next.js, focusing on sharing engineering practices in computer science and personal insights. -MIT \ No newline at end of file +**Core Philosophy:** Pursuing speed, maintainability, and excellent user experience. + +### ✨ Features + +- 📝 **Tech Blog** - In-depth technical articles covering frontend, backend, DevOps, AI, and more +- 📚 **Topic Tutorials** - Systematic technical tutorials (e.g., Bun, etc.) +- 🎨 **Modern Design** - Featuring Framer Motion animations and beautiful UI design +- 🔍 **Full-Text Search** - Fast search powered by Pagefind +- 💬 **Comment System** - GitHub Discussions integration via Giscus +- 🌙 **Responsive Design** - Perfect adaptation for all device sizes +- 🎮 **3D Effects** - Interactive 3D effects using React Three Fiber and R3F +- 📊 **GitHub Heatmap** - Visual statistics of coding activity + +## 🛠️ Tech Stack + +### Core Frameworks + +- **Next.js 16** - React framework with static export support +- **React 19** - Latest version of React +- **TypeScript** - Type-safe JavaScript + +### UI & Styling + +- **Tailwind CSS 4** - Utility-first CSS framework +- **Framer Motion** - Smooth animation library +- **Lucide React** - Modern icon library + +### Content Management + +- **MDX** - Markdown with JSX support +- **Gray Matter** - Front matter parser +- **Remark GFM** - GitHub Flavored Markdown +- **Rehype Highlight** - Code syntax highlighting + +### 3D Graphics + +- **Three.js** - 3D graphics library +- **React Three Fiber** - React renderer for Three.js +- **@react-three/drei** - R3F utility collection + +### Other Features + +- **Pagefind** - Static site search +- **Giscus** - Comment system based on GitHub Discussions +- **Mermaid** - Diagram and flowchart support + +## 🚀 Quick Start + +### Prerequisites + +- Node.js 18+ or higher +- pnpm (recommended) / npm / yarn + +### Install Dependencies + +```bash +# Using pnpm (recommended) +pnpm install + +# Or using npm +npm install +``` + +### Development + +Start the local development server: + +```bash +pnpm dev +# or +npm run dev +``` + +Visit [http://localhost:3000](http://localhost:3000) to view the site. + +### Build + +Build for production: + +```bash +pnpm build +# or +npm run build +``` + +After building, static files will be output to the `out/` directory. + +### Preview + +Preview the built site locally: + +```bash +pnpm start +# or +npm start +``` + +### Code Formatting + +```bash +# Check code formatting +pnpm format:check + +# Auto-format code +pnpm format +``` + +### Linting + +```bash +pnpm lint +``` + +## 📁 Project Structure + +``` +cellstack/ +├── content/ # Content files +│ ├── blog/ # Blog posts (organized by year) +│ └── topics/ # Topic tutorials +├── public/ # Static assets +├── src/ +│ ├── app/ # Next.js App Router pages +│ │ ├── blog/ # Blog pages +│ │ ├── topics/ # Topic pages +│ │ ├── me/ # About me page +│ │ └── search/ # Search page +│ ├── components/ # React components +│ ├── lib/ # Utility functions and configs +│ └── types/ # TypeScript type definitions +├── next.config.ts # Next.js configuration +├── tailwind.config.ts # Tailwind CSS configuration +└── tsconfig.json # TypeScript configuration +``` + +## 📝 Writing Content + +### Blog Posts + +Create Markdown files in the `content/blog/YYYY/` directory: + +```markdown +--- +date: 2025-01-01 +title: Post Title +description: Post description +author: mcell +tags: + - Tag1 + - Tag2 +keywords: + - Keyword1 + - Keyword2 +--- + +Post content... +``` + +### Topic Tutorials + +Create Markdown files in the `content/topics/topic-name/` directory. + +## 🤝 Contributing + +Issues and Pull Requests are welcome! + +1. Fork this repository +2. Create your feature branch (`git checkout -b feature/AmazingFeature`) +3. Commit your changes (`git commit -m 'Add some AmazingFeature'`) +4. Push to the branch (`git push origin feature/AmazingFeature`) +5. Open a Pull Request + +## 📬 Contact + +- **GitHub**: [@minorcell](https://github.com/minorcell) +- **Email**: minorcell6789@gmail.com +- **Juejin**: [minorcell](https://juejin.cn/user/2280829967146779) +- **Tech Discussions**: Comment sections of posts + +## 📄 License + +This project is licensed under the [MIT](./LICENSE) License. + +--- + ++ Built with ❤️ and ☕ +