项目背景
传统的个人网站要么是纯静态的简历展示，要么是功能单一的博客。Stardust Dreams 的设计理念是将个人品牌展示、工具集控台和 AI 智能助理整合在一个统一的数字空间中，通过三层递进的架构实现不同场景的完美适配。
技术架构
三层空间设计
- Layer 1 — 墨与朱: 面向访客的公共展示层，采用宣纸质感的明亮主题，朱砂色点缀。Rauno 风格的克制微交互，给人留下专业而不张扬的印象。
- Layer 2 — 灰色走廊: 登录后的仪表盘，Apple 风格的灰色中性调，作为 Layer 1 和 Layer 3 之间的过渡空间。
- Layer 3 — 琥珀控制台: 交易系统的深色工作区，琥珀色为主色调，专注于数据可视化和系统控制。
技术栈选择
- 框架: Next.js 15 App Router，充分利用 RSC 和流式渲染
- 样式: Tailwind CSS v4 + CSS 变量设计令牌系统
- 动画: Framer Motion，全局 jelly 缓动曲线
- 数据库: PostgreSQL + Prisma ORM
- 认证: Auth.js v5 (NextAuth)
- 状态管理: Zustand (客户端) + TanStack Query (服务端状态)
核心挑战与解决方案
1. 三层主题切换
三个层级有完全不同的视觉风格。通过 CSS 变量 + data-layer 属性选择器实现零 JS 开销的主题切换，每个层级的变量集完全隔离。
2. 字体优化
项目使用 5 款自托管字体 (Instrument Serif, Satoshi, JetBrains Mono, Noto Serif SC, Noto Sans SC)。通过 @fontsource 按需子集化加载，控制总字体体积在 200KB 以下。
3. AI Agent 集成
在展示网站中内嵌真正可用的 AI 对话功能，需要在安全性和功能性之间找到平衡。采用分层权限设计 — 公开 Agent 只能回答预设信息，登录后的 Agent 具备更多能力。
成果数据
- Lighthouse 性能评分目标: > 90
- 首屏加载 (LCP): < 2s
- 累积布局偏移 (CLS): 0
- 三层主题切换: 0ms (纯 CSS 变量)