feat(personal): paper pop-up HOME with diegetic interactions (v2+v3 redesign)

Full rebuild of personal.html in two passes (Linlin-reviewed between them):

v2 — paper pop-up book diorama: the room rises from an open book on a parchment
desk. MeshToon 3-step shading + EdgesGeometry ink lines + hand-cut jitter = the
homepage's manuscript language in 3D. Personal content only (desk->Apps and
shelf->Publications removed everywhere, incl. fallback cards).

v3 — the paper HOME, per Linlin's 5 points:
1. indoor dollhouse cutaway (plank floor, walls + wainscot, curtained window,
   rug/sofa/table/lamp/plant/cat) with a hinged door opening onto a pocket trail
   world on the left page (future-expansion area)
2. humanized proportions (mountains became small outdoor scenery)
3. multi-part detailed objects (suitcase latches/wheels/stickers, sideboard
   drawers/knobs/feet, player plinth/platter/label/tonearm + vinyl crate,
   teapot spout/handle/lid, framed photo wall + washi tape)
4. diegetic game-like interactions replace the right sidebar: wall map with the
   story written on it + popping pins; door swings open; vinyl + label spin with
   floating notes + sleeve text; the album opens propped, corner-tab page flips,
   photo click -> lightbox. aria-live #story keeps it accessible.
5. full-screen aspect-adaptive HOME view (desktop + portrait)

Verified: 4 modes + direct mode-switch + flip fwd/back + ESC chain; 0 console
errors at 1440x980 and 390x844. Docs: docs/strategy/personal-room-v2-2026-06-11/
(research, plan, round notes, v2 snapshot, screenshots). UPDATES 2026-06-11 V1 +
backfilled 2026-06-08 V1-V3; PLAN H3.M5.G2 added (T3/T4 open: teaser re-shoot,
navbar re-link, real photos).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: jajupmochi

docs/PLAN.md

@@ -455,6 +455,12 @@ writing demonstrate technical communication ability beyond the homepage scroll.
 - `[✓]` H3.M5.G1.T3 — (2026-06-03) Built `personal.html` over the 10 lenses (`round-notes.md`; screenshots round-5/7/8). Orbit + 6 clickable hotspots → parchment panels + album lightbox; a11y Explore menu; reduced-motion; no-WebGL fallback. 0 console errors.
 - `[✓]` H3.M5.G1.T4 — (2026-06-03) Wired homepage navbar **Personal** → `personal.html` (both index files), replacing the coming-soon toast. Photos/copy are placeholders for Linlin to personalize.
 
+#### G2 — Paper pop-up home redesign (v2 + v3) `[✓]`
+- `[✓]` H3.M5.G2.T1 — (2026-06-11) v2: rebuilt the room as a **paper pop-up book diorama** (Linlin: v1 ugly + style-mismatched; personal content only). MeshToon + EdgesGeometry ink lines, parchment palette, 4 personal corners, pop-up entrance. `docs/strategy/personal-room-v2-2026-06-11/`.
+- `[✓]` H3.M5.G2.T2 — (2026-06-11) v3 per Linlin's 5-point review: indoor **paper home** (dollhouse cutaway; hinged door to a pocket trail world = future-expansion area), sane proportions, multi-part detailed objects, **diegetic interactions** (wall map / door swings open / vinyl spins + notes / album opens + page-flip + lightbox — right sidebar removed), aspect-adaptive full-screen HOME view. Verified: all modes + ESC chain, 0 console errors desktop + mobile.
+- `[ ]` H3.M5.G2.T3 — Post-ship: re-shoot `res/portfolio/img/personal-room.png` (homepage teaser still shows the v1 room) and decide when navbar **Personal** links `personal.html` directly again (currently the coming-soon teaser).
+- `[ ]` H3.M5.G2.T4 — Replace canvas postcard placeholders with Linlin's real photos (`photoTex`/`photoURL` call sites); optionally expand the outdoor world beyond the door.
+
 ---
 
 ## H4 — Documentation & AI-Collaboration Infrastructure

docs/UPDATES.md

@@ -8,6 +8,12 @@
 
 ## Master TOC
 
+- [2026-06-11](#2026-06-11)
+    - [V1 — Personal page rebuilt: paper pop-up HOME with diegetic interactions (v2+v3)](#v1--personal-page-rebuilt-paper-pop-up-home-with-diegetic-interactions-v2v3) — `personal.html` redesigned twice in one arc: v2 turned the generic 3D room into a parchment-true paper pop-up-book diorama (personal content only); v3, after Linlin's 5-point review, made it an indoor paper home (hinged door opening onto a pocket trail world) with game-like in-world interactions — wall-map story, door swing, spinning vinyl + floating notes, a page-flipping photo album — replacing the right sidebar entirely. Full-screen aspect-adaptive initial view.
+- [2026-06-08](#2026-06-08)
+    - [V3 — EN CV updated to the research-scientist build](#v3--en-cv-updated-to-the-research-scientist-build) — `res/cv/CV_Linlin_Jia_en.pdf` replaced (6 pp, 207 KB); same filename so every "my cv" link picks it up.
+    - [V2 — Post-launch review corrections](#v2--post-launch-review-corrections) — apps mode-toggle now highlights the CURRENT view on all three modes (deck page gained the trio); H-index reverted to 6 per Google Scholar; "read my CV" became a "(my cv)" parenthetical in the About headline (×4 locales); footer gained DBLP and was reordered by recruiter/peer priority.
+    - [V1 — apps-gallery.html defaults to the deck; 4 referenced figures committed](#v1--apps-galleryhtml-defaults-to-the-deck-4-referenced-figures-committed) — bare `apps-gallery.html` now redirects to the deck (`?view=` stays on the grid; no loop); 4 publication figures referenced by the live pages were untracked (would 404 on deploy) — committed.
 - [2026-06-05](#2026-06-05)
     - [V3 — Homepage 10-round optimization pass (in-place, per-round, verified)](#v3--homepage-10-round-optimization-pass-in-place-per-round-verified) — a deep 10-round audit+optimize sweep of the live homepage for the launch: hero gains a "read my CV ↗" recruiter path + "130+ citations" credibility line; anchor-jump occlusion fixed (`scroll-padding-top`); pub-title legibility; on-brand maroon focus ring; H-index 6→7 (verified); mobile CV-link tap target; 2 Google-Fonts requests merged to 1 (drop unused ZCOOL XiaoWei); Clarity analytics un-blocked (CSP). Audit confirmed hierarchy / contrast (18:1) / spacing / motion-a11y / credibility surfaces already sound. Plan + per-round notes under `docs/strategy/homepage-redesign-2026-06-05/`.
     - [V2 — Launch prep (cont.): blog mobile TOC, exact postcard replication, Howler mobile size, zh postcard overflow, footer links](#v2--launch-prep-cont-blog-mobile-toc-exact-postcard-replication-howler-mobile-size-zh-postcard-overflow-footer-links) — collapsed blog TOC on mobile now hugs its label (compact tab, not a 200px bar); the parchment welcome postcard is re-pinned to its exact pre-parchment computed values (drifted §7 rewritten); the idle 尖叫信 envelope scales down on phones (140px→92px); the zh postcard clamps to the viewport + scrolls instead of overflowing; footer gains Twitter/X · ResearchGate · ORCID on both index files.
@@ -73,6 +79,72 @@
 - [2023-10-24](#2023-10-24) — new paper + CV update.
 - [2023-09-27](#2023-09-27) — new papers + CV update.
 
+# 2026-06-11
+
+## V1 — Personal page rebuilt: paper pop-up HOME with diegetic interactions (v2+v3)
+
+Linlin: the v1 3D room was ugly, style-mismatched, and carried professional content. Two
+redesign passes in one arc (full docs: `docs/strategy/personal-room-v2-2026-06-11/` —
+research, plan, round notes, v2 snapshot, screenshots):
+
+- **v2 — paper pop-up book.** The room became a diorama rising from an open book on a
+  parchment desk: MeshToon 3-step shading + `EdgesGeometry` ink-line edges + hand-cut
+  jitter (the homepage's manuscript language in 3D); content reduced to personal corners
+  only (travel / hiking / dancing / photos; desk→Apps and shelf→Publications removed
+  everywhere, incl. the no-WebGL fallback cards).
+- **v3 — the paper HOME (Linlin's 5-point review).** ① Indoor dollhouse-cutaway home —
+  plank floor, walls + wainscot, curtained window, rug/sofa/coffee-table/lamp/plant/cat —
+  with a **hinged door** opening onto a pocket trail world on the left page (the
+  future-expansion area). ② Proportions humanized (mountains became small *outdoor*
+  scenery). ③ Objects rebuilt multi-part (suitcase latches/wheels/stickers, sideboard
+  drawers/knobs/feet, record player plinth/platter/label/tonearm + vinyl crate, teapot
+  spout/handle/lid, framed photo wall with washi tape…). ④ **Diegetic, game-like
+  interactions replace the right sidebar**: Travel → wall map with the story written on
+  it + popping pins; Hiking → the door swings open framing the outside; Dancing → vinyl
+  + label spin, tonearm drops, ♪ notes float; Photos → the album on the table opens
+  (propped cover), corner-tab page flips, click a photo → lightbox. aria-live `#story`
+  keeps text accessible; explore chips / ESC / click-empty-to-return all work.
+  ⑤ Full-screen initial view, camera distance adaptive to aspect (desktop and portrait).
+- Verified: all 4 modes incl. direct mode-switch (exitMode), flip fwd/back, ESC chain;
+  0 console errors/warnings at 1440×980 and 390×844.
+- Known follow-ups (PLAN H3.M5.G2.T3/T4): re-shoot the homepage teaser image (still v1)
+  and re-link navbar Personal when ready; drop in real photos later.
+
+# 2026-06-08
+
+## V3 — EN CV updated to the research-scientist build
+
+- `res/cv/CV_Linlin_Jia_en.pdf` replaced with the new research-scientist version (PDF 1.5,
+  6 pages, 207 KB, title "Linlin Jia – Ph.D."). Same filename → About-headline "my cv"
+  links (en/fr/de) and JSON-LD pick it up with no markup change.
+
+## V2 — Post-launch review corrections
+
+- **Apps mode-toggle highlight.** The Deck/Cards/Detailed pill now highlights the current
+  mode on ALL three views: `?view=` is authoritative on load (was click/localStorage-only),
+  gallery's "Deck" is no longer permanently maroon (ID-scoped rules beat parchment's global
+  link ink), and the deck page gained the same trio with **Deck** active (was missing
+  entirely). Verified across all three modes.
+- **H-index 7 → 6** on both index files + `data/citations.json`, per Google Scholar
+  (the earlier bump to 7 came from a stale json field — wrong).
+- **"read my CV" → "(my cv)"** parenthetical at the end of the About headline, per Linlin;
+  implemented in `about.headline` across all 4 locales (zh links the zh CV); the separate
+  hero link and About CV row removed.
+- **Footer links: +DBLP, reordered** by what interviewers / collaborators / peers check
+  most: Scholar → GitHub → LinkedIn → DBLP → ORCID → ResearchGate → X → Email (both
+  index files; `ai-dblp` icon, pid 152/2558).
+
+## V1 — apps-gallery.html defaults to the deck; 4 referenced figures committed
+
+- **apps-gallery.html → deck by default.** Many external docs link this URL, and the deck
+  is the preferred view: a bare visit now redirects to `apps-deck.html`; `?view=cards` /
+  `?view=detailed` stay on the grid (the deck's "Grid view" link passes `?view=cards`, so
+  no loop). Verified: redirect + grid + 0 console errors.
+- **Deploy-safety fix.** 4 publication figures (`2021_prl_gklearn_accuracy`,
+  `2023_jcc_redox_framework`, `2025_graphink_framework`, `2026_icpr_swissriver_diagram`)
+  were referenced by `js/projects-data.js` + both index files but never git-tracked —
+  fine locally, 404 on the deployed site. Committed.
+
 # 2026-06-05
 
 ## V3 — Homepage 10-round optimization pass (in-place, per-round, verified)

docs/strategy/personal-room-v2-2026-06-11/00-plan.md

@@ -0,0 +1,58 @@
+# Personal 3D Room v2 — Plan
+
+> One-sentence purpose: rebuild `personal.html`'s scene as a paper pop-up-book diorama, personal content only, multi-round verified, NOT committed (per Linlin).
+
+## Master TOC
+
+- [Concept](#concept)
+- [Scene layout](#scene-layout)
+- [Implementation map](#implementation-map)
+- [Rounds & validation](#rounds--validation)
+- [Out of scope](#out-of-scope)
+
+## Concept
+
+**纸艺立体书 (paper pop-up book).** An open hardcover book lies on a parchment desk; out of its two pages rises a tiny hand-cut paper world of Linlin's life outside work. Cream paper + ink-line edges + cinnabar/gilt/qing accents = the homepage's manuscript language in 3D. Orbit is free 360° (it's a diorama you hold). Clicking a corner zooms in and opens the existing parchment side panel.
+
+## Scene layout
+
+Top view (book ≈ 8.6 × 6.2, gutter at x=0):
+
+```
+        z-                       z-
+  [Travel 旅行]            [Hiking 徒步]
+  suitcase + postcards     paper mountains + pines
+  + dashed route 西安→Bern   + flag + backpack
+        (left page)              (right page)
+  [Photos 相册]            [Dancing 跳舞]
+  photo garland on posts   record player + notes
+  + hanging postcards      + dance shoes
+        z+                       z+
+   center gutter: teapot + cup, plant, sleeping cat (decor only)
+```
+
+4 hotspots (was 6): Travel, Hiking, Dancing, Photos. Desk→Apps and Bookshelf→Publications **removed** (scene + panels + fallback cards + explore menu). Panel links to site sections removed; panels are stories + postcard photos only.
+
+## Implementation map
+
+All in `personal.html` (single file, no new deps):
+
+1. **CSS**: body bg `#e7dcc2`; `.hot-label` → washi-tape chip (Patrick Hand, slight rotate, tape gradient); loader copy; ribbon hint "drag to spin the book"; brand "Linlin's little world".
+2. **Meta/fallback**: description; `#nowebgl` cards → 4 personal + tea/cat decor lines, no Apps/Publications links.
+3. **Scene core** (replaces lines ≈194–264): cream bg+fog; free-orbit controls (full azimuth); Hemi+1 soft Dir light; toon gradient map; `pmat()/pbox()/pcyl()/pcone()` helpers with `EdgesGeometry` ink lines + jitter; postcard-style `photoTex` (ink-and-wash canvas).
+4. **Stage**: book cover (maroon) + 2 pages (cream, ruled-lines canvas) + handwritten page annotations; parchment ground + soft contact shadow.
+5. **Corners** (replaces hotspot section ≈266–371): travel / hiking / dancing / photos groups as registry entries with new views + panels; center decor (tea, plant, cat).
+6. **Pop-up entrance**: corner groups scaleY 0.01→1 staggered back-out ease inside the existing rAF loop; skipped under reduced-motion.
+
+## Rounds & validation
+
+- R1 build → screenshot desktop 1440×980 (HOME view) + diagnose vs 4 axes (color / typography / spacing-composition / ornamentation).
+- R2+ iterate: corner detail, label legibility, camera bounds, hover/click, panel content, mobile 390×844 (page chrome reflows; canvas is fullscreen).
+- Each round: 0 console errors; final round: click-through all 4 hotspots + album lightbox + ESC paths + explore menu.
+- Deliverable: final screenshots to Linlin. **No commit** (explicit instruction).
+
+## Out of scope
+
+- Real photos (none in repo; postcard placeholders stay drop-in replaceable).
+- Updating `res/portfolio/img/personal-room.png` (homepage teaser) — re-shoot when this ships (it IS committed/live; changing it is a commit-time decision).
+- i18n of the page (it ships EN-only today, like v1).

docs/strategy/personal-room-v2-2026-06-11/00-research.md

@@ -0,0 +1,52 @@
+# Personal 3D Room v2 — Research
+
+> One-sentence purpose: ground the room redesign in (a) why v1 fails, (b) the techniques and references for a parchment-true paper-craft diorama.
+
+## Master TOC
+
+- [Why v1 fails (diagnosis)](#why-v1-fails-diagnosis)
+- [Design-direction candidates](#design-direction-candidates)
+- [Technique research (web)](#technique-research-web)
+- [Resource-bank check](#resource-bank-check)
+- [Decisions](#decisions)
+
+## Why v1 fails (diagnosis)
+
+Baseline: `r0-baseline.png` (2026-06-11, 1440×980).
+
+1. **Palette mismatch.** Saturated orange floor (`0x9c6b3f`), grey-beige walls, red/yellow rug — a generic "first three.js room". The site is cream parchment + ink + cinnabar/gilt/qing accents.
+2. **Lighting mismatch.** A harsh PointLight hotspot on the wall; murky corners. The site feels like warm flat daylight on paper.
+3. **No shared visual language.** The site is hand-drawn: ink outlines, washi tape, wobbly hand-cut edges, handwritten labels. The room has machine-straight geometry, zero outlines, MeshStandardMaterial realism ambitions at low fidelity (worst of both).
+4. **Content mismatch** (user's explicit point): desk→Apps and bookshelf→Publications are professional surfaces; this page should be only the person — travel, dancing, hiking, photos.
+5. **Room-box framing wastes the medium**: two wall planes + floor reads as an unfinished video-game room, not an object you want to orbit.
+
+## Design-direction candidates
+
+| Direction | Fit to parchment site | Risk |
+|---|---|---|
+| A. Paper pop-up book diorama (room rises from an open book's pages; everything hand-cut paper + ink outlines) | 1:1 — the whole site IS a manuscript/notebook | needs care to avoid clutter |
+| B. Ink-sketch toon room (toon + outline pass, sepia) | high | still "a room", keeps the box framing |
+| C. Generic low-poly cozy room (the freeCodeCamp/Awwwards genre) | low — pretty but belongs to a different site | looks templated, "AI-slop adjacent" |
+
+**Chosen: A**, executed with B's shading techniques. The pop-up book also explains *why* the world is small and orbit-able (a diorama you hold), and gives a natural entrance animation (the pages' world pops up).
+
+## Technique research (web)
+
+Searched 2026-06-11:
+
+- **Toon/cel shading**: `MeshToonMaterial` + a small `DataTexture` gradient map (2–3 steps) is the standard flat-paper look; tutorial: [maya-ndljk basic toon shader](https://www.maya-ndljk.com/blog/threejs-basic-toon-shader), [sbcode MeshToonMaterial](https://sbcode.net/threejs/meshtoonmaterial/).
+- **Outlines**: two standard families — inverted-hull (draw twice, BackSide, scaled) per [Josh Marinacci's cartoon outline](https://medium.com/@joshmarinacci/cartoon-outline-effect-6c4e95545537) / [piousbox](https://piousbox.com/2022/06/cartoon-outline-effect), or pixel post-processing (OutlinePass). For a static-geometry paper diorama the cheapest, crispest is **`EdgesGeometry` + `LineSegments`** (ink lines exactly on the cut edges — literally "drawn"); forum overview: [smooth cartoon style with outlines](https://discourse.threejs.org/t/how-to-create-this-smooth-cartoon-style-with-outlines-in-three-js/60862).
+- **Diorama / room-portfolio genre** (for what to avoid + camera framing): [freeCodeCamp cute room portfolio](https://www.freecodecamp.org/news/create-a-cute-room-portfolio-with-threejs-blender-javascript/), [three.js forum room-portfolio showcases](https://discourse.threejs.org/t/my-personal-portfolio-website-3d-room/63822). These bake lighting in Blender; we stay procedural (no model downloads, CSP stays tight) and get the flat look from toon shading instead.
+
+## Resource-bank check
+
+From the user-level frontend resource bank: **Three.js** (already the engine, r0.160 importmap via jsDelivr — keep); **anime.js** considered for the pop-up entrance but rejected (one more CDN dep for a 1s effect; a 20-line ease in the existing rAF loop does it). No icon/asset needs beyond Font Awesome already loaded.
+
+## Decisions
+
+1. Engine stays three.js r160 module importmap (no new deps, CSP unchanged).
+2. Shading: `MeshToonMaterial` + 3-step gradient map; `EdgesGeometry` ink outlines (threshold ~25°) on every paper piece; per-piece ±1.5° rotation jitter for hand-cut feel.
+3. Lighting: warm HemisphereLight (high) + one soft shadow DirectionalLight. No PointLights.
+4. Stage: an open book (maroon cover, cream pages with ink ruled-lines canvas texture) on a parchment table; world pops from the pages.
+5. Content: ONLY personal — travel / hiking / dancing / photo garland + decorative tea set, plant, cat. Desk/Apps and bookshelf/Publications removed everywhere (scene, panels, fallback cards, explore menu).
+6. Keep: fallback mechanism, CSS2D labels (restyled washi), side panel, lightbox, explore menu, raycast, reduced-motion paths.