docs: refresh README for new design

README.md

@@ -2,6 +2,7 @@
 
 This is a personal blog built with **Next.js 13 (App Router)**, **Contentlayer**, and **Tailwind CSS**.
 Markdown content (posts & pages) lives in a separate repository and is consumed via a git submodule.
+Recent iterations focused on migrating every image to `next/image`, refreshing the typography scale for mixed Chinese/English copy, and layering an elegant scrolling timeline aesthetic onto the home + blog index.
 
 ## Tech Stack
 
@@ -50,37 +51,49 @@ Markdown content (posts & pages) lives in a separate repository and is consumed
 
 - **Home page** (`/`)
   - Centered hero heading: `SITE_NAME 的最新動態` + tagline.
-  - "最新文章" section listing latest posts as cards with thumbnail, date, title, tags, and excerpt.
+  - Timeline-inspired "最新文章" rail: a slim gradient spine with evenly spaced ticks aligned to each article card plus a downward-pointing finial at the bottom.
+  - Posts remain card-based (thumbnail + excerpt) but inherit the new responsive typography scale + weight strategy.
 
 - **Blog index** (`/blog`)
-  - Uses `PostListWithControls`:
+  - Uses `PostListWithControls` with the same vertical timeline rail visually tying the list together.
     - Keyword search filters posts by title, tags, and excerpt with instant feedback.
     - Sort order: new→old or old→new.
     - Pagination using `siteConfig.postsPerPage`.
 
 - **Single post / page** (`/blog/[slug]`, `/pages/[slug]`)
-  - Left: sticky TOC that highlights the current section as you scroll.
-  - Top: published date, large title, colored tags.
-  - Body: `prose` typography with tuned light/dark colors, images, blockquotes, code.
-  - Top bar: reading progress indicator.
-  - Metro-inspired "storyline" rail that shows上一站 / 你在這裡 / 下一站，with glowing capsules linking to adjacent posts.
-  - Bottom: "相關文章" cards suggesting up to three related posts that share overlapping tags.
+  - Left: sticky TOC inherits the responsive typography scale, removes list bullets entirely, and features an improved scroll marker.
+  - Top matter balances date, title, and tags with refined tracking/weights; headings lose decorative underlines for a cleaner academic feel.
+  - Body: tuned `prose` typography, improved Chinese-friendly line height, and blockquotes styled like academic pull quotes.
+  - Top bar: slimmer, softer reading progress indicator.
+  - Adjacent nav: only two inline bars for 上一章 / 下一章—no middle "正在閱讀" card, no thumbnails/tags/dates.
+  - Related section: simplified cards with only titles (no tags/thumbnails) to highlight pure reading flow.
 
 - **Right sidebar** (on large screens)
   - Top hero:
-    - Gravatar avatar (from env) linking to an "about" page.
-    - Row of icon‑only service links (GitHub, Mastodon, LinkedIn).
-    - Short "about me" sentence from env.
-  - Hot tags: top 5 tags in a small tag cloud using the accent palette and neutral dark‑mode backgrounds.
+    - Gravatar avatar (from env) rendered with `next/image` and shared rounded-mask styling.
+    - Row of icon-only service links with manual overrides (HomeLab → server, 開發工作環境 → device, 關於本站 → menu, etc.).
+    - Short "about me" sentence honoring `\n` line breaks and no leading icon for cleaner typography.
+  - Hot tags: top 5 tags sized via the responsive scale and accent glows for consistency.
 
 - **Tags**
   - Each tag chips in lists, post headers, and sidebar link to `/tags/[slug]`.
-  - `/tags` shows all tags and their counts.
+  - `/tags` now uses a masonry-like layout with pill consistency, subtle shadows, and accent outlines so the page no longer feels empty.
 
 - **Misc**
   - Floating "back to top" button on long pages.
 
-## Motion & Interaction Guidelines
+## Typography & Motion Guidelines
+
+### Typography scale & font weights
+
+- **Base scale**: body text uses `clamp(0.94rem, 0.8rem + 0.3vw, 1.125rem)` so Chinese + English copy remains legible from mobile to 4K.
+- **Heading ladder**: modular ratio ≈1.25; weights step down (h1/h2:600, h3:550, h4:500) to avoid overly heavy CJK glyphs.
+- **Navigation/right sidebar**: lock to 500 weight with slight tracking to balance condensed rendering on Windows/Linux; never smaller than 15px.
+- **TOC & util text**: 0.85× body size at 500 weight, ensuring hierarchy without feeling secondary.
+- **Blockquotes**: body text inherits base weight but adds a serif-leaning italic plus accent caption (12–14px) for academic tone.
+- **Font stack**: `Inter var`, `Noto Sans TC`, `PingFang TC`, `Microsoft JhengHei`, `Helvetica Neue`, `system-ui`, `sans-serif` to cover macOS, Windows, Linux, Android, iOS.
+
+### Motion & interaction
 
 - Keep motion subtle and purposeful:
   - Use small translations (±2–4px) and short durations (200–400ms, `ease-out`).
@@ -96,12 +109,14 @@ Markdown content (posts & pages) lives in a separate repository and is consumed
 
 ### Implemented Visual Touches
 
-- Reading progress bar with a soft gradient glow at the top of post pages.
+- Site-wide `next/image` usage (cards, feature media, sidebar avatar, related posts) to boost LCP without layout shifts.
+- Reading progress bar slimmed down with a softer gradient glow.
 - Scroll reveal for post header + article body (`ScrollReveal` component).
-- Hover elevation + gradient accents for post cards, list items, sidebar author card, and tag chips.
-- Smooth theme toggle with icon rotation and global `transition-colors` on the page background.
-- TOC smooth scrolling + short-lived highlight on the target heading.
-- Subtle hover elevation for `blockquote` and `pre` blocks inside `.prose` content.
+- Elegant vertical timeline rail on home/blog pages with aligned milestone ticks.
+- Hover elevation + gradient accents for post cards, sidebar tiles, and tag chips.
+- Smooth theme toggle with icon rotation and global `transition-colors`.
+- TOC smooth scrolling with custom marker + bullet-less list styling.
+- Academic blockquotes featuring accent-side rules and caption text.
 
 ## Prerequisites
 
@@ -227,7 +242,8 @@ Contentlayer is configured in `contentlayer.config.ts` to read from the `content
 
 - At build time, a rehype plugin rewrites these to `/assets/my-image.jpg`.
 - `public/assets` is a symlink to `content/assets`, so Next.js serves them as static files.
-- `feature_image` fields are also mapped from `../assets/...` → `/assets/...` and rendered above the article content.
+- `feature_image` fields are also mapped from `../assets/...` → `/assets/...` and rendered above the article content via `next/image`.
+- All component-level imagery (list thumbnails, related posts, sidebar avatar, about page hero, etc.) now uses `next/image` for responsive sizing, blur placeholders, and better LCP.
 
 ## Updating Content from the Submodule