Fqzlrのblog

先定结构：一张卡片，正文流优先#

关于页常见做法是「卡片拼盘」——个人信息一张卡、技能一张卡、时间线一张卡，各管各的。我参考了 MmzMing/my-blog 的起步思路和 Firefly 的卡片风格后，选择了相反的结构：

整页一张 Card，MDX 正文是主角，四个交互组件以 not-prose 区块嵌入正文流。

1
<Card radius="l">
2
  <Markdown>
3
    {renderedMdx}
4
  </Markdown>
5
</Card>

好处是写作体验和普通文章完全一致——想加一段自述就直接写 Markdown，组件只是正文里的「插入物」，顺序、位置随时调整。

组件一：行内人物悬浮卡#

正文里提到某个人时，触发词带主色虚线下划线，悬停浮出带头像的小卡片。实现要点：

• 触发器是 <span tabindex="0" role="tooltip">——键盘可聚焦，hover 和 focus-within 双通道触发；
• 浮层淡入 + 上移 + 小三角指向，纯 CSS 过渡；
• 头像必须用纯 <img> 而非组件——MDX 内嵌组件会被 Markdown 解析器的 <p> 拆散，块级元素会破坏段落结构。

人物卡的紫色板与友链页的站长卡片同源，跨页面身份一致。

组件二：技术栈手风琴#

按分组折叠的技术栈卡片，展开用 grid-template-rows: 0fr → 1fr 过渡（比 max-height 优雅，不需要猜内容高度）：

1
<div data-tech-accordion="open|closed">...</div>

卡片品牌色通过 CSS 变量注入（--tech-color / --tech-color-dark），暗色模式下黑白 logo 自动反色。展开时卡片按 animation-delay: calc(0.12s + var(--i) * 0.045s) 逐张入场——--i 是索引变量，一行 CSS 写出 stagger。

组件三：魔改时间线#

三列 grid："date rail card"——日期在左，中间一条竖轨，卡片在右。

• 轨道竖线 scaleY 生长动画，与节点圆点 stagger 同步；
• 圆点 hover 时脉冲扩散；
• 内容（换主题、加功能、改域名……）维护在内容仓 data/about.ts，与技能/项目页同一套数据契约。

组件四：品牌色社交链接#

2×2 网格，每个链接 hover 时边框和底色转向品牌色。品牌色不写死在组件里，而是由一个映射组件（github / bilibili / qq / email / rss / twitter）驱动 --about-social-brand 变量——加新平台只需加一条映射。

正文末尾：GitHub 卡片#

正文直接用主题的指令语法挂仓库卡片：

1
::github{repo="MmzMing/my-blog"}

致谢对象（起步启蒙的 my-blog、交互参考的 Firefly）以卡片形式放在正文流里，比光秃秃的链接体面。

小结#

关于页的改造原则：内容为主角、组件为插入物。MDX 保证写作自由度，四个组件（人物卡 / 手风琴 / 时间线 / 社交链接）各自独立、样式自包含，数据全部收在内容仓——改内容不用碰主题代码。