新站开工：Astro 起步记

这个站今天正式开工了。写一篇记录一下技术选型，也给以后翻旧账留个底。

选型

个人产品展示站的需求：产品橱窗、博客、关于、联系，外加一些 playful 的小交互。这个需求组合下几乎没有悬念：

• Astro：静态输出、零客户端 JS、content collections 管内容
• Tailwind CSS v4：CSS-first 配置，设计 token 就是几个 CSS 变量
• 无框架：交互全部用 CSS 过渡 + 少量原生 JS，不需要 React

结构

src/
├── content/
│   ├── work/    # 产品：一个 Markdown 文件一个产品
│   └── blog/    # 博客：同上
├── components/  # ProductCard、PostRow、ThemeToggle……
├── layouts/     # BaseLayout：SEO、字体、主题脚本
└── site.config.ts  # 全站文案的唯一出处

设计 token

全站视觉由 5 个颜色变量控制：--paper（底色）、--ink（正文）、--ink-soft（次要）、--signal（强调色）、--line（边框）。换主题就是换这五行。

接下来要做的：把每个产品卡片的 hover 交互打磨一下，再试试毛玻璃导航栏。