示例项目 — 个人空间 my-life

这是什么

my-life 是一个用 Astro 构建的极简个人门户。

设计哲学：

少即是多 —— 没有花哨的动画，没有冗余的 UI 元素
内容优先 —— 简历、项目、博客都由 MDX 文件驱动，写一篇博客 = 新建一个文件
零默认 JS —— 整个站点客户端 JS 只有几 KB（仅暗色切换按钮）

技术选型

类别	选择	理由
框架	Astro 6	内容驱动型站点的最佳实践
样式	Tailwind CSS v4	设计 token 化、CSS-first 配置
内容	MDX	Markdown + 组件混排，灵活且类型安全
字体	Fraunces + Inter	衬线标题 + 无衬线正文，极简风标配

实现亮点

1. Content Collections（文件即数据库）

// src/content.config.ts
const projects = defineCollection({
  loader: glob({ pattern: '**/*.mdx', base: './src/content/projects' }),
  schema: z.object({
    title: z.string(),
    description: z.string().max(160),
    pubDate: z.coerce.date(),
    // ...
  }),
});

写一篇博客 = 在 src/content/blog/ 下新建一个 .mdx 文件，零数据库、零运维。

2. 暗色模式零 FOUC

<script is:inline>
  (function () {
    var stored = localStorage.getItem('theme');
    var prefersDark = matchMedia('(prefers-color-scheme: dark)').matches;
    document.documentElement.setAttribute('data-theme',
      stored || (prefersDark ? 'dark' : 'light'));
  })();
</script>

内联脚本在 <head> 同步执行，避免页面闪烁。

3. 设计 Token 集中管理

所有颜色、字体、间距定义在 src/styles/global.css 的 @theme 块。

@theme {
  --color-bg: #fafaf9;
  --color-fg: #1c1917;
  --color-accent: #dc2626;
  /* ... */
}

想换主色调？改一行。

下一步

添加更多示例项目
接入评论系统（Giscus）
部署到 .life 域名

这是占位内容，你可以直接编辑 src/content/projects/_example-project.mdx 来修改。