feat: monochrome redesign, instant navigation, and content refresh by kaiiiichen · Pull Request #97 · kaiiiichen/kaichen.dev

kaiiiichen · 2026-07-10T03:31:23Z

Summary

Theme — pure black / gray / white

Warm palette removed site-wide: pure white light background, pure black dark background, gray-scale surfaces, borders, and accents (cards, chips, nav, TOC, contribution heatmap, OG images, map markers)
Hover states are crisp pure black (light) / pure white (dark); social icon hovers drop brand colors; row hover backgrounds rebalanced for the pure-white cards
Favicon: white rounded square with "KTC" in Nunito SemiBold, outlined as vector paths (apple-icon derives from it)
Theme toggle swaps colors in one clean repaint (transition suppression during the switch)

Speed — no entry animations

All page entry animations removed (fade-up, subpage enter, veil, nav color transitions); content is fully visible ~20ms after navigation, zero running animations post-route-change
HoverTip race fixed: a fast mouse sweep can no longer strand a tooltip on screen (pending open rAF is cancelled on hide)
All subpages share the same container rhythm (py-16 + space-y-8)

Content

About: synced with LinkedIn (SUSPsych under Volunteering, year-only dates, Oct 2023 TA start); coursework hover panels (two-column, no scrolling, mobile-safe) with linked courses — Berkeley sp26 sites, Oxford DUL → /projects/oxford-dul-2025; Focus card links 61BL/188 to course sites; intro line removed
Projects: hand-maintained project list in app/lib/personal-projects.ts (order: kaichen.dev, SudoSodoku, SUSTech-Kai-Notes, buttercut, WatchTower-AI) with live star counts via GitHub REST; SudoSodoku moved to its org repo; GitHub Activity heatmap removed; subtitle removed
Misc: sections reordered (Things I Love, Resources, Watching, Remembrance); six new entries (AI 2027, four learning resources, John DeNero + playlist); alphabetical-order rule enforced everywhere and stated as a bottom footnote
Home: Signal contact + "?" help icon removed; "Kai T. Chen" replaces "Kai Thomas Chen" everywhere (h1, TOC, JSON-LD, footer, docs)
Course notes card points at the full Notion page URL

Docs

README (EN + ZH), CLAUDE.md, and AGENTS.md updated to match (project list, removed heatmap, name, GitHub integration wording).

Test plan

npm run lint / npm run typecheck / npm run test (23) / npm run build — green on every commit
Browser-verified: light/dark themes, hover states (44-sweep tooltip race stress test), coursework panels (desktop + mobile), instant navigation, unified spacing, all six routes render with no warm colors / old name
Final consistency pass: no stale references, dead CSS removed

🤖 Generated with Claude Code

- Move SUSTech Psychology Society (President, External Vice President) from Experience to Volunteering, matching LinkedIn's section layout - Correct SUSTech Teaching Assistant start date to Oct 2023 Co-authored-by: Claude <noreply@anthropic.com>

vercel · 2026-07-10T03:31:24Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
kaichen.dev	Ready	Preview, Comment	Jul 10, 2026 5:39am

Co-authored-by: Claude <noreply@anthropic.com>

Mirror LinkedIn coursework lists for SUSTech (16 maths courses) and UC Berkeley (COMPSCI 61A, DATA C100). Co-authored-by: Claude <noreply@anthropic.com>

Replace the inline dot-joined coursework text with a "coursework" MagChip that reveals the course list in a HoverTip panel (scrollable when long). Adds a "start" alignment option to HoverTip so the panel stays anchored to the left-positioned chip. Co-authored-by: Claude <noreply@anthropic.com>

- Drop the max-height/scroll on the coursework panel; long lists flow into two columns on sm+ so all courses stay visible on screen - Add CS108/CS109/CS201/CS217 to the SUSTech coursework (20 total) - Use year-only date ranges for Education and Volunteering entries to match the LinkedIn profile display Co-authored-by: Claude <noreply@anthropic.com>

…ntro - Size the coursework panel to its longest line (w-max + nowrap rows, auto-width columns) so no course name ever wraps - Rename Focus item to COMPSCI 61BL: Data Structures and Programming Methodology; link both Focus courses to their course sites with the standard hover-link pattern (leading arrow + "Course site" hint) - Condense the About intro to a single sentence - When hovering a nested mag-card-inset, the outer mag-card keeps its lift but no longer shows the accent color change Co-authored-by: Claude <noreply@anthropic.com>

…rk columns - Replace the warm palette site-wide with a neutral one: beige page background -> off-white #FAFAFA, warm-brown dark surfaces -> charcoal (#18181B / #1F1F23 / #26262B / #2E2E33), amber accents -> gray scale (static accents zinc-500/zinc-400, interactive hovers zinc-950/zinc-50) - Social icon hovers and the GitHub contribution heatmap also move to the black/gray/white scale; OG images and map markers match - Theme toggle now swaps colors in a single repaint: a theme-switching class suppresses transitions until the new theme has painted - Coursework panel is two columns on mobile too, capped to the viewport width (wraps below sm, nowrap auto columns on larger screens) Co-authored-by: Claude <noreply@anthropic.com>

Off-white #FAFAFA becomes pure white #ffffff (light background, OG images, dark-mode hover text) and near-black #18181B becomes pure black #000000 (dark background, light-mode hover text, heatmap max level); zinc-950/zinc-50 utility classes swap to black/white. Co-authored-by: Claude <noreply@anthropic.com>

Hover states drop the zinc-500/zinc-400 grays: card and chip hover borders, nav active pill, help icon, TOC active entry, hover-link arrows/hints, and track-row rings are now pure black in light mode and pure white in dark mode; hover background tints lightened to #fafafa. Co-authored-by: Claude <noreply@anthropic.com>

Tighten route entry animations: subpage enter 0.65s+50ms delay -> 0.25s with no delay (and a smaller 8px rise), entry veil 0.85s -> 0.3s, section fade-up 0.4s -> 0.22s, and stagger delays halved (max 220ms -> 110ms). Content is now fully visible ~250ms after navigation. Co-authored-by: Claude <noreply@anthropic.com>

- Drop the one-line About intro and the Projects subtitle - Remove fade-up / subpage-enter / veil animations entirely; pages now render fully visible on navigation (~20ms to content). The .fade-up class stays in markup as a structural anchor for page-toc. Co-authored-by: Claude <noreply@anthropic.com>

- The alphabetical-sorting note moves from the Misc header to a small italic footnote at the bottom of the page - Remove the GitHub Activity heatmap from /projects along with the now-unused GitHubActivity component; the contributions API route and lib stay for standalone use; docs updated Co-authored-by: Claude <noreply@anthropic.com>

Replace the GitHub pinned-repos GraphQL fetch with a static PERSONAL_PROJECTS list in app/lib/personal-projects.ts — edit the list by hand to add/remove/reorder projects. Star counts (and archived flags) remain live via the GitHub REST API with revalidate=120. github-pinned.ts is deleted; GITHUB_PROFILE_LOGIN moves to the new lib for the contributions route; docs updated. Co-authored-by: Claude <noreply@anthropic.com>

hover:bg-zinc-50 (#fafafa) became invisible against the pure-white card background; bump list-row hover to bg-zinc-100 (light) and zinc-700/40 (dark) across all link rows. Co-authored-by: Claude <noreply@anthropic.com>

Co-authored-by: Claude <noreply@anthropic.com>

Every template subpage (About, Misc, Projects, Oxford portfolio, Music for Life index/detail and their loading skeletons) now uses the same container rhythm: py-16 + space-y-8. Projects drops its per-block mb-12 in favor of the container gap; Oxford pages come down from space-y-10, Misc and Music for Life up from space-y-6. Co-authored-by: Claude <noreply@anthropic.com>

- icon.svg: white rounded square with black "KTC" in the same Cormorant Garamond — beige fill and orange corner removed (apple-icon derives from the same file) - Personal Projects order: kaichen.dev, SudoSodoku, SUSTech-Kai-Notes, buttercut, WatchTower-AI Co-authored-by: Claude <noreply@anthropic.com>

The favicon now uses the site's UI font (Nunito SemiBold) instead of Cormorant Garamond. Glyphs are embedded as outlined paths so rendering never depends on the viewer having the font installed; apple-icon derives from the same SVG. Co-authored-by: Claude <noreply@anthropic.com>

Link and star-count repo both move to SudoSodokuApp/SudoSodoku. Co-authored-by: Claude <noreply@anthropic.com>

The Watching list was sorted newest-first by date; the page footnote promises alphabetical order, so sort by title (dates stay as metadata). Co-authored-by: Claude <noreply@anthropic.com>

Things I Love, Resources, Watching, Remembrance. Co-authored-by: Claude <noreply@anthropic.com>

- Remove the Signal social link and the "?" contact-guidance tooltip from the homepage, along with their now-dead help-icon/home-help-tip CSS - Misc footnote: "Lists" -> "List contents" Co-authored-by: Claude <noreply@anthropic.com>

…a tip show() opens the tip via a 70ms timer followed by a requestAnimationFrame; hide() cleared the timer but not the rAF, so a mouseleave landing between the two re-opened the tooltip after hide and left it stuck on screen. Track the rAF id and cancel it in hide() and on unmount. Co-authored-by: Claude <noreply@anthropic.com>

CourseworkTip accepts courses with an optional href — external sites open in a new tab, internal paths use client navigation, both with a small trailing arrow and black/white hover. - Berkeley: COMPSCI 61A -> inst.eecs.berkeley.edu/~cs61a/sp26, DATA C100 -> ds100.org/sp26 - Oxford: Deep Unsupervised Learning moves from the subtitle into the coursework panel, linking to /projects/oxford-dul-2025 Co-authored-by: Claude <noreply@anthropic.com>

Home h1, TOC section label/id, JSON-LD, avatar alt, footer, and docs. Co-authored-by: Claude <noreply@anthropic.com>

The coursework panel's Deep Unsupervised Learning link now covers the jump to /projects/oxford-dul-2025; drop the redundant chip and the now-unused projectHref/MagChip plumbing on the About page. Co-authored-by: Claude <noreply@anthropic.com>

- Remove dead slide-enter/exit keyframes and the unused --accent vars - README: GitHub integration wording reflects the hand-maintained project list with live star counts (EN + ZH sections) Co-authored-by: Claude <noreply@anthropic.com>

vercel Bot deployed to Preview July 10, 2026 03:32 View deployment

fix: remove BlueDot Impact from Focus card

26153e8

Co-authored-by: Claude <noreply@anthropic.com>

vercel Bot deployed to Preview July 10, 2026 03:34 View deployment

feat: add coursework to Education entries on About page

f421560

Mirror LinkedIn coursework lists for SUSTech (16 maths courses) and UC Berkeley (COMPSCI 61A, DATA C100). Co-authored-by: Claude <noreply@anthropic.com>

vercel Bot deployed to Preview July 10, 2026 03:40 View deployment

vercel Bot deployed to Preview July 10, 2026 03:52 View deployment

vercel Bot deployed to Preview July 10, 2026 03:59 View deployment

vercel Bot deployed to Preview July 10, 2026 04:05 View deployment

vercel Bot deployed to Preview July 10, 2026 04:15 View deployment

vercel Bot deployed to Preview July 10, 2026 04:19 View deployment

vercel Bot deployed to Preview July 10, 2026 04:22 View deployment

vercel Bot deployed to Preview July 10, 2026 04:25 View deployment

kaiiiichen changed the title ~~fix: sync About page with latest LinkedIn profile~~ feat: monochrome theme, instant page loads, and About/LinkedIn sync Jul 10, 2026

vercel Bot deployed to Preview July 10, 2026 04:28 View deployment

vercel Bot deployed to Preview July 10, 2026 04:32 View deployment

kaiiiichen self-assigned this Jul 10, 2026

vercel Bot deployed to Preview July 10, 2026 04:38 View deployment

fix: restore visible row hover background on pure-white cards

0333fc9

hover:bg-zinc-50 (#fafafa) became invisible against the pure-white card background; bump list-row hover to bg-zinc-100 (light) and zinc-700/40 (dark) across all link rows. Co-authored-by: Claude <noreply@anthropic.com>

vercel Bot deployed to Preview July 10, 2026 04:51 View deployment

fix: point course notes card at the full Notion page URL

c1b8d42

Co-authored-by: Claude <noreply@anthropic.com>

vercel Bot deployed to Preview July 10, 2026 04:53 View deployment

vercel Bot deployed to Preview July 10, 2026 04:58 View deployment

vercel Bot deployed to Preview July 10, 2026 05:00 View deployment

vercel Bot deployed to Preview July 10, 2026 05:07 View deployment

fix: point SudoSodoku at its new SudoSodokuApp org repo

7052e1f

Link and star-count repo both move to SudoSodokuApp/SudoSodoku. Co-authored-by: Claude <noreply@anthropic.com>

vercel Bot deployed to Preview July 10, 2026 05:08 View deployment

fix: sort Watching alphabetically per the Misc page rule

0ebfc2e

The Watching list was sorted newest-first by date; the page footnote promises alphabetical order, so sort by title (dates stay as metadata). Co-authored-by: Claude <noreply@anthropic.com>

vercel Bot deployed to Preview July 10, 2026 05:11 View deployment

feat: reorder Misc sections

b62d618

Things I Love, Resources, Watching, Remembrance. Co-authored-by: Claude <noreply@anthropic.com>

vercel Bot deployed to Preview July 10, 2026 05:14 View deployment

vercel Bot deployed to Preview July 10, 2026 05:18 View deployment

vercel Bot deployed to Preview July 10, 2026 05:21 View deployment

vercel Bot deployed to Preview July 10, 2026 05:24 View deployment

feat: use Kai T. Chen everywhere instead of Kai Thomas Chen

dc889f0

Home h1, TOC section label/id, JSON-LD, avatar alt, footer, and docs. Co-authored-by: Claude <noreply@anthropic.com>

vercel Bot deployed to Preview July 10, 2026 05:27 View deployment

vercel Bot deployed to Preview July 10, 2026 05:30 View deployment

chore: final consistency pass

8e627cc

- Remove dead slide-enter/exit keyframes and the unused --accent vars - README: GitHub integration wording reflects the hand-maintained project list with live star counts (EN + ZH sections) Co-authored-by: Claude <noreply@anthropic.com>

kaiiiichen changed the title ~~feat: monochrome theme, instant page loads, and About/LinkedIn sync~~ feat: monochrome redesign, instant navigation, and content refresh Jul 10, 2026

vercel Bot deployed to Preview July 10, 2026 05:39 View deployment

kaiiiichen merged commit 697a0b5 into main Jul 10, 2026
4 checks passed

kaiiiichen deleted the fix/about-linkedin-sync branch July 10, 2026 05:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: monochrome redesign, instant navigation, and content refresh#97

feat: monochrome redesign, instant navigation, and content refresh#97
kaiiiichen merged 30 commits into
mainfrom
fix/about-linkedin-sync

kaiiiichen commented Jul 10, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jul 10, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

kaiiiichen commented Jul 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Theme — pure black / gray / white

Speed — no entry animations

Content

Docs

Test plan

Uh oh!

vercel Bot commented Jul 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

kaiiiichen commented Jul 10, 2026 •

edited

Loading

vercel Bot commented Jul 10, 2026 •

edited

Loading