个人博客仓库

项目概述

chele.bi 是 Ege Chelebi 的个人博客与作品集站点，采用深色编辑风格设计，集中呈现写作、项目和阅读书单。技术栈基于 Next.js 14（App Router）与 MDX 内容管线，配合 Tailwind CSS 完成样式系统，并使用 Biome 进行代码检查与格式化，部署于 Vercel 平台。

设计亮点

• 深色编辑主题：正文使用 Geist Sans 字体，代码使用 Geist Mono 字体；边框采用发丝级细线，全站统一一条运动曲线。
• MDX 博客：内置左侧目录导航、提示框（callouts）以及每篇文章专属的装饰元素。
• 确定性文章横幅：封面图由标题经 lib/contour.ts 算法生成的轮廓标记生成，无需手动准备封面图。
• 液态玻璃控件：圆形控件具备液态玻璃质感，标签使用磨砂玻璃效果。
• 统一的轮廓标识：站点 Logo 与 Favicon 共用同一套轮廓标识系统。

技术架构

• 框架：Next.js 14（App Router）、React 18、TypeScript
• 内容：MDX 文章与对应路由页面同目录存放，路径为 app/(website)/blog/(post)/[slug]/page.mdx
• 样式：Tailwind CSS，设计令牌（tokens）定义在 app/globals.css 中，专注于深色编辑风格
• 组件分层：
• components/ds/ 存放可复用的设计系统基础组件
• components/blocks/ 存放领域级业务组件

本地运行

bun install
bun dev

环境要求：Node >= 20 以及 Bun。无需配置任何环境变量即可启动。

常用命令

• bun dev：启动开发服务器
• bun run build：生产环境构建
• bun run check：运行 Biome 的 lint 与 format，并自动修复问题

项目结构说明

• app/：Next.js App Router 路由与页面文件
• components/ds/：通用 UI 基础组件
• components/blocks/：博客、作品集等业务区块组件
• components/blocks/ascii/：站点中展示的 ASCII 动态图形（donut、flow、plasma、tunnel），移植自 cobanov/soft-club-ui 项目（MIT 协议），并针对本站设计令牌调整为单色风格
• lib/contour.ts：根据标题生成确定性轮廓标记的算法模块

许可协议

• 代码：MIT 协议
• 博客内容与图片：保留全部权利

详细许可信息见 LICENSE 文件。