✨ feat: redesign root site with a bento layout

[morirun]

动机

首页应先说明这个人是谁、现在在做什么、代表工作是什么，再提供博客和幻灯片入口。原来的平铺列表和编号章节把主线、执行工具和毕业设计放在同一层级。

解决方案

• 根站点改为 bento 网格。首页第一张是个人卡片：头像、六个骨头、zrr1999、当前的预训练工程组，以及学历。愿景句移到 /about，和原有介绍合成一段。
• 代表项目只保留 Spark、Spore、Volvox，并按三个研究方向归类。自我改进系统标成开放方向。
• /about 与 /friends 用同一套单元格、圆角和品牌蓝。关于、友链 和愿景导语用单独加载的 Noto Serif SC 子集。首页不用衬线字体。
• 顶栏把站外的博客、幻灯片和站内的关于、友链分开。RSS 只留在页脚的复制按钮。
• 首页最近文章在构建期通过 @zrr-website/blog-posts 读取 apps/blog/data/blog，与博客共用发布过滤、排序和 /posts/<slug> 路径，不再请求和正则解析线上 RSS。
• 实习经历仍写飞桨基础框架，与现在的预训练工程组分开。

说明

没有接入 #79 的项目登记表，也没有挂尚未部署的 Lab / Docs。共享字体地址和 CSP 未改。根应用没有 Sharp，头像继续用 hosting 上的远程地址。组件样式放在 @layer components。

后续工作

• Lab / Docs 上线后，再把首页项目链接切到登记表推导的地址。

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	zrr-website-root	c7f1c24	Commit Preview URL Branch Preview URL	Oct 09 2026, 09:06 AM

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	zrr-website-slides	c7f1c24	Commit Preview URL Branch Preview URL	Oct 09 2026, 09:04 AM

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	zrr-website-blog	c7f1c24	Commit Preview URL Branch Preview URL	Oct 09 2026, 09:05 AM

[gitar-bot]

Code Review ✅ Approved 3 closed / 3 findings

🟡 Medium risk · Moving homepage listings to a shared build-time blog parser changes post filtering and URLs; parsing or path mismatches could omit or mislink published articles.

Redesigns the root site as a bento grid with a personal profile card, three grouped featured projects, and homepage posts read from the blog sources at build time instead of parsing the live RSS feed. Resolved the .text-link font-size override on mono links, the both fill-mode conflict that cancelled bento cell hover and press transforms, and the live-content test that would break on the next post. No open issues remain.

✅ 3 closed

✅ Bug: .text-link font-size overrides the text-xs utility on mono links

📄 apps/root/src/pages/index.astro:357-365 📄 apps/root/src/pages/index.astro:184 📄 apps/root/src/pages/index.astro:247 📄 apps/root/src/pages/index.astro:304 📄 apps/root/src/pages/index.astro:322
The app uses Tailwind v4 (@import "tailwindcss" in global.css), which puts utilities inside @layer utilities. Astro's scoped <style> rules are unlayered, and unlayered rules beat layered ones regardless of specificity. So .text-link { font-size: 0.875rem } wins over text-xs wherever both are used: 更多代码, 所有文章, 互换友链, and the footer GitHub link, which also picks up its text-xs from the footer. Those small mono links render at 14px instead of 12px, and the footer GitHub link no longer matches the RssCopy text next to it. To fix, remove font-size from .text-link and add text-sm in the markup where you want it, or wrap the component rules in @layer components.

✅ Bug: both fill mode on the entry animation cancels the cell hover and press transforms

📄 apps/root/src/styles/global.css:184-185 📄 apps/root/src/styles/global.css:220-233
.bento-cell runs animation: rise 700ms … both. The forwards half of both keeps the last keyframe's transform: translateY(0) after the animation ends. Animated values take priority over normal author declarations in the cascade, so a.bento-cell:hover { transform: translateY(-2px) } and a.bento-cell:active { transform: … scale(0.99) } never apply. Linked cells (Spore, Spark, Volvox, research, friends) get only the background change, with no lift or press feedback. Use backwards fill mode: it still hides each cell during its stagger delay, and it stops applying transform once the animation finishes.

✅ Quality: Test pins live blog content and will break on the next post

📄 apps/root/src/lib/recentPosts.test.ts:206-220
lists the repository's published posts without the draft reads the real apps/blog/data/blog and expects rational-decomposition and rust-parsers-landscape to be the two newest posts, with the first one dated 2026-09-07. now is fixed at 2026-10-08, so any post with a pub/mod date between 2026-09-07 and 2026-10-08 will push those two down and fail the root app's test suite, even though nothing is wrong with the code. It is October 2026 now, so a new post is likely to land in that window. A sturdier check: keep the real-repo test, but only assert that it returns posts, that every href matches /posts/<slug> with no _topic segment, and that the draft Typst title is absent. Leave the ordering checks to the temp-dir fixtures.

Review coverage

📋 Rules No rules evaluated

🧪 Functional validation Not enabled · Set up

Options

Auto-apply is off → Gitar will not commit updates to this branch.
Display: compact → Counting what did not apply, without listing it.

Comment with these commands to change the behavior for this request:

Auto-apply	Compact
gitar auto-apply:on	gitar display:verbose

---

Important

Your trial ends in 4 days — upgrade now to keep code review, CI analysis, auto-apply, custom automations, and more.

_{Was this helpful? React with 👍 / 👎 | Gitar}