Surface the journal on the homepage

- New #journal section between Portfolio and Contact with the three
  latest entries and a Read-the-full-Journal CTA
- Scroll spy skips #journal (no matching hash nav item)
- CLAUDE.md: note to keep the homepage list in sync with blog.html

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: chenchaoyi

CLAUDE.md

@@ -83,6 +83,7 @@ Editorial / literary. Warm cream page with deep ink type, a single terracotta ac
    - `Film` → "Movie Reviews"
    - `Game` → "Game Reviews"
 4. External links (WeChat articles) use `target="_blank" rel="noopener"` and the arrow becomes `↗`.
+5. The homepage `#journal` section mirrors the **three most recent** entries of `blog.html` (same `<li>` markup, minus `data-cat`/`data-date`). If the new post lands in the top three, update `index.html` accordingly.
 
 ### Adding a new book to the Portfolio
 Edit the `.portfolio-grid` in `index.html`. Use an `<a class="book">` with a `.cover img`, `.meta` (h3 + `.kind` label), and a `<p>` blurb. Cover image goes in `images/` as a JPG.

index.html

@@ -166,6 +166,31 @@ <h3>Ongoing Books</h3>
             </div>
         </section>
 
+        <!-- JOURNAL -->
+        <section id="journal" class="bleed">
+            <div class="wrap">
+                <div class="sec-head">
+                    <div>
+                        <h2>I also keep a <em>journal</em>.</h2>
+                        <p class="desc">Essays, book &amp; movie reviews, drawings and the occasional poem. Here's what's new:</p>
+                    </div>
+                </div>
+
+                <ul class="post-list">
+                    <li><a class="post-link" href="https://mp.weixin.qq.com/s/HRNHbyNktUCZ4AtcW1BZoA" target="_blank" rel="noopener"><span class="pdate">Jun 1 2026</span><span class="pmeta"><span class="ptitle">📚 A Mind Appears</span><span class="pblurb">A book review of <i><b style="color: #3498db">A World Appears</b></i></span></span><span class="parrow">↗</span></a></li>
+
+                    <li><a class="post-link" href="https://mp.weixin.qq.com/s/n2BJqs67dgX15xpnOwmn9g" target="_blank" rel="noopener"><span class="pdate">Mar 22 2026</span><span class="pmeta"><span class="ptitle">🎬 An Unremarkable School Teacher Who Saved Earth With An Alien</span><span class="pblurb">A movie review of <i><b style="color: #3498db">Project Hail Mary</b></i></span></span><span class="parrow">↗</span></a></li>
+
+                    <li><a class="post-link" href="blogs/some-recent-drawings-post.html"><span class="pdate">Feb 23 2026</span><span class="pmeta"><span class="ptitle">Some Recent Drawings</span><span class="pblurb">Seven drawings from this month — and the poodle behind one of them</span></span><span class="parrow">→</span></a></li>
+                </ul>
+
+                <div class="work-footnote" style="margin-top: 3rem;">
+                    <p>There's plenty more where these came from.</p>
+                    <a href="blog.html" class="btn btn-primary">Read the full Journal <span class="arrow">→</span></a>
+                </div>
+            </div>
+        </section>
+
         <!-- CONTACT -->
         <section id="contact" class="bleed">
             <div class="wrap">
@@ -250,7 +275,7 @@ <h4>Scan WeChat QR Code</h4>
         const setActive = () => {
             const y = window.scrollY + window.innerHeight * 0.3;
             let current = 'top';
-            document.querySelectorAll('section[id]').forEach(s => {
+            document.querySelectorAll('section[id]:not(#journal)').forEach(s => {
                 if (y >= s.offsetTop) current = s.id;
             });
             if (window.scrollY < 200) current = 'top';