From 13a6fea3ca7239b9412f844e577d671f144aa1fe Mon Sep 17 00:00:00 2001
From: Kai Chen <kaichen0728@gmail.com>
Date: Mon, 29 Jun 2026 02:19:11 -0700
Subject: [PATCH 1/2] style: tighten spacing and polish misc links

Apply a consistent, slightly denser spacing rhythm across home/about/projects/misc while keeping readability. Sync About experience with LinkedIn and refine social/help tooltip and resource link labels for better mobile UX.

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Claude <noreply@anthropic.com>
---
 app/about/page.tsx                            | 19 ++-----
 app/components/home-social-links.tsx          |  2 +
 .../oxford-dul/course-project-link.tsx        |  6 +-
 app/components/pinned-project-link.tsx        |  4 +-
 app/globals.css                               | 35 +++++++++++-
 app/misc/page.tsx                             | 56 +++++++++++++++++--
 app/page.tsx                                  |  4 +-
 app/projects/page.tsx                         |  2 +-
 8 files changed, 97 insertions(+), 31 deletions(-)

diff --git a/app/about/page.tsx b/app/about/page.tsx
index 26da60b..51145a7 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -29,7 +29,7 @@ export default function About() {
 
       {/* Personality / side */}
       <div className="fade-up" style={{ animationDelay: "30ms" }}>
-        <div style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 17, lineHeight: 1.9 }} className="text-zinc-400 dark:text-zinc-600 mt-3">
+        <div style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 17, lineHeight: 1.75 }} className="text-zinc-400 dark:text-zinc-600 mt-3">
           <p>I study Maths for my bachelor&apos;s degree and I&apos;m always awed by the beauty of it (as the motivation to learn it through so much hard work)! I love the outline of analysis proofs and I&apos;m especially obsessed with algebra structures.</p>
           <p>I also learn some computer science and data science, and I find myself better at them than Maths lol. I&apos;m drawn to the problem solving, ideas behind product design, and the empathy I feel when I&apos;m building something for humans.</p>
           <p className="mt-1">I really love tinkering stuff. I dream of building something that can help people / make people happy with a fantastic user experience! I also dream of building a tool that could change people&apos;s lives for the better.</p>
@@ -86,7 +86,7 @@ export default function About() {
                     {years}
                   </span>
                   <p
-                    style={{ fontFamily: "'Nunito'", fontWeight: 600, fontSize: 17, lineHeight: 1.7 }}
+                    style={{ fontFamily: "'Nunito'", fontWeight: 600, fontSize: 17, lineHeight: 1.6 }}
                     className="text-zinc-800 dark:text-zinc-200"
                   >
                     {institution}
@@ -161,17 +161,6 @@ export default function About() {
             <div className="mag-label">Experience</div>
             <div className="flex flex-col">
               {[
-                {
-                  org: "Constellation Institute",
-                  meta: "Berkeley, CA",
-                  roles: [
-                    {
-                      years: "Apr 2026 – Present",
-                      role: "Research Assistant",
-                      detail: "RA with an Astra fellow on a compute governance project.",
-                    },
-                  ],
-                },
                 {
                   org: "Southern University of Science and Technology",
                   meta: "Shenzhen",
@@ -269,7 +258,7 @@ export default function About() {
                         </span>
                         {roleItem.detail ? (
                           <p
-                            style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 15, lineHeight: 1.55 }}
+                            style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 15, lineHeight: 1.5 }}
                             className="text-zinc-500 dark:text-zinc-500 mt-1.5"
                           >
                             {roleItem.detail}
@@ -346,7 +335,7 @@ export default function About() {
                         </span>
                         {roleItem.detail ? (
                           <p
-                            style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 15, lineHeight: 1.55 }}
+                            style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 15, lineHeight: 1.5 }}
                             className="text-zinc-500 dark:text-zinc-500 mt-1.5"
                           >
                             {roleItem.detail}
diff --git a/app/components/home-social-links.tsx b/app/components/home-social-links.tsx
index c8c7c2a..206deb2 100644
--- a/app/components/home-social-links.tsx
+++ b/app/components/home-social-links.tsx
@@ -105,7 +105,9 @@ export default function HomeSocialLinks() {
       <HoverTip
         tip="For private or sensitive messages, please reach out via Signal."
         placement="top"
+        align="end"
         tapToToggle
+        tipClassName="home-help-tip"
       >
         <button
           type="button"
diff --git a/app/components/oxford-dul/course-project-link.tsx b/app/components/oxford-dul/course-project-link.tsx
index 3c8d9c3..d035d16 100644
--- a/app/components/oxford-dul/course-project-link.tsx
+++ b/app/components/oxford-dul/course-project-link.tsx
@@ -74,7 +74,7 @@ export default function CourseProjectLink({ entry, variant = "list" }: CoursePro
         ) : null}
 
         <p
-          style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 13, lineHeight: 1.7 }}
+          style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 13, lineHeight: 1.6 }}
           className="text-zinc-500 dark:text-zinc-500 mb-3 pl-4"
         >
           {summary}
@@ -103,7 +103,7 @@ export default function CourseProjectLink({ entry, variant = "list" }: CoursePro
   }
 
   const listClassName =
-    "group block py-3 -mx-2 px-2 rounded-sm hover:bg-zinc-50 dark:hover:bg-zinc-800/60 transition-all duration-150 no-underline";
+    "group block py-2 -mx-2 px-2 rounded-sm hover:bg-zinc-50 dark:hover:bg-zinc-800/60 transition-all duration-150 no-underline";
 
   const listContent = (
     <>
@@ -120,7 +120,7 @@ export default function CourseProjectLink({ entry, variant = "list" }: CoursePro
         </p>
       ) : null}
       <p
-        style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 12, lineHeight: 1.6 }}
+        style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 12, lineHeight: 1.5 }}
         className="text-zinc-400 dark:text-zinc-500 mt-0.5 pl-4"
       >
         {summary}
diff --git a/app/components/pinned-project-link.tsx b/app/components/pinned-project-link.tsx
index 3e1b0ae..23a6bf9 100644
--- a/app/components/pinned-project-link.tsx
+++ b/app/components/pinned-project-link.tsx
@@ -43,7 +43,7 @@ export default function PinnedProjectLink({
 
         {desc ? (
           <p
-            style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 13, lineHeight: 1.7 }}
+            style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 13, lineHeight: 1.6 }}
             className="text-zinc-500 dark:text-zinc-500 mb-3 pl-4"
           >
             {desc}
@@ -73,7 +73,7 @@ export default function PinnedProjectLink({
       href={href}
       target="_blank"
       rel="noopener noreferrer"
-      className="group block py-3 -mx-2 px-2 rounded-sm hover:bg-zinc-50 dark:hover:bg-zinc-800/60 transition-all duration-150 no-underline"
+      className="group block py-2 -mx-2 px-2 rounded-sm hover:bg-zinc-50 dark:hover:bg-zinc-800/60 transition-all duration-150 no-underline"
       style={{ textDecoration: "none" }}
     >
       <div className="flex items-center justify-between gap-3">
diff --git a/app/globals.css b/app/globals.css
index c878c2a..d0b7865 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -85,7 +85,7 @@ body {
   border-right: 2px solid var(--color-border-secondary);
   box-shadow: 5px 5px 0px 0px var(--color-border-tertiary);
   border-radius: var(--mag-card-radius);
-  padding: 1.5rem;
+  padding: 1.3rem;
   overflow: hidden;
   transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
 }
@@ -114,7 +114,7 @@ body {
   border-right: 2px solid var(--color-border-secondary);
   box-shadow: 3px 3px 0 0 var(--color-border-tertiary);
   border-radius: var(--mag-card-radius);
-  padding: 1.25rem;
+  padding: 1.1rem;
   overflow: hidden;
   transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
 }
@@ -294,6 +294,37 @@ button.mag-chip:disabled {
   background: #2a221c;
 }
 
+/* Help tooltip: keep box to left/top and anchor arrow on bottom-right */
+.home-help-tip {
+  position: relative;
+  display: inline-block;
+}
+.home-help-tip::before,
+.home-help-tip::after {
+  content: "";
+  position: absolute;
+  right: 0.2rem;
+  width: 0;
+  height: 0;
+}
+.home-help-tip::before {
+  bottom: -7px;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-top: 7px solid var(--color-border-secondary);
+}
+.home-help-tip::after {
+  bottom: -5px;
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid #ffffff;
+}
+.dark .home-help-tip::after {
+  border-top-color: #252019;
+}
+
 .mag-chip-md {
   font-size: 14px;
   padding: 0.25rem 0.625rem;
diff --git a/app/misc/page.tsx b/app/misc/page.tsx
index 4d8312e..52138a9 100644
--- a/app/misc/page.tsx
+++ b/app/misc/page.tsx
@@ -3,7 +3,7 @@ import { HoverLinkArrow, HoverLinkDestinationHint } from "../components/hover-li
 
 export const metadata: Metadata = {
   title: "Misc — Kai T. Chen",
-  description: "Curated lists: watching, tools and creators I love, remembrance.",
+  description: "Curated lists: watching, tools and creators I love, remembrance, resources.",
 };
 
 const LIST_LINK_TITLE_STYLE = {
@@ -102,6 +102,21 @@ function formatAttentionDate(isoDate: string): string {
   });
 }
 
+const RESOURCES = [
+  { name: "Anthropic Academy", href: "https://www.anthropic.com/learn" },
+  {
+    name: "Apple Developer Learn",
+    href: "https://developer.apple.com/learn/",
+    hintLabel: "Apple Developer",
+  },
+  { name: "BlueDot Impact", href: "https://bluedot.org/" },
+  { name: "csdiy.wiki", href: "https://csdiy.wiki/en/", hintLabel: "csdiy" },
+  { name: "Mapbox", href: "https://www.mapbox.com/" },
+  { name: "Redis University Academy", href: "https://university.redis.io/academy", hintLabel: "Redis" },
+  { name: "TinyURL", href: "https://tinyurl.com/" },
+  { name: "Using Git", href: "https://cs61bl.org/resources/using-git/", hintLabel: "cs61bl" },
+];
+
 const REMEMBRANCE = [
   {
     name: "Armenian genocide",
@@ -117,7 +132,7 @@ const REMEMBRANCE = [
 
 export default function Misc() {
   return (
-    <div className="max-w-[1180px] mx-auto px-4 md:px-12 py-16 space-y-8">
+    <div className="max-w-[1180px] mx-auto px-4 md:px-12 py-16 space-y-6">
 
       {/* Header */}
       <div className="fade-up" style={{ animationDelay: "0ms" }}>
@@ -146,7 +161,7 @@ export default function Misc() {
                 href={href}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="group block py-3 -mx-2 px-2 rounded-sm hover:bg-zinc-50 dark:hover:bg-zinc-800/60 transition-all duration-150 no-underline"
+                className="group block py-2 -mx-2 px-2 rounded-sm hover:bg-zinc-50 dark:hover:bg-zinc-800/60 transition-all duration-150 no-underline"
                 style={{ textDecoration: "none" }}
               >
                 <div className="flex items-center justify-between gap-3">
@@ -178,7 +193,7 @@ export default function Misc() {
                 href={href}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="group block py-3 -mx-2 px-2 rounded-sm hover:bg-zinc-50 dark:hover:bg-zinc-800/60 transition-all duration-150 no-underline"
+                className="group block py-2 -mx-2 px-2 rounded-sm hover:bg-zinc-50 dark:hover:bg-zinc-800/60 transition-all duration-150 no-underline"
                 style={{ textDecoration: "none" }}
               >
                 <div className="flex items-center justify-between gap-3">
@@ -203,7 +218,7 @@ export default function Misc() {
       <div className="fade-up" style={{ animationDelay: "90ms" }}>
         <div className="mag-card">
           <div className="mag-label">Things I Love</div>
-          <div className="space-y-5">
+          <div className="space-y-4">
             {THING_GROUPS.filter(({ rows }) => rows.some((row) => row.length > 0)).map(
               ({ category, rows }) => (
                 <div key={category} className="mag-card-inset">
@@ -215,7 +230,7 @@ export default function Misc() {
                         href={href}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="group block py-3 -mx-2 px-2 rounded-sm hover:bg-zinc-50 dark:hover:bg-zinc-800/60 transition-all duration-150 no-underline"
+                        className="group block py-2 -mx-2 px-2 rounded-sm hover:bg-zinc-50 dark:hover:bg-zinc-800/60 transition-all duration-150 no-underline"
                         style={{ textDecoration: "none" }}
                       >
                         <div className="flex items-center justify-between gap-3">
@@ -237,6 +252,35 @@ export default function Misc() {
         </div>
       </div>
 
+      {/* Resources — full width */}
+      <div className="fade-up" style={{ animationDelay: "120ms" }}>
+        <div className="mag-card">
+          <div className="mag-label">Resources</div>
+          <div>
+            {RESOURCES.map(({ name, href, hintLabel }) => (
+              <a
+                key={href}
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="group block py-2 -mx-2 px-2 rounded-sm hover:bg-zinc-50 dark:hover:bg-zinc-800/60 transition-all duration-150 no-underline"
+                style={{ textDecoration: "none" }}
+              >
+                <div className="flex items-center justify-between gap-3">
+                  <div className="flex items-center gap-2 min-w-0">
+                    <HoverLinkArrow />
+                    <p style={LIST_LINK_TITLE_STYLE} className={LIST_LINK_TITLE_CLASS}>
+                      {name}
+                    </p>
+                  </div>
+                  <HoverLinkDestinationHint href={href} label={hintLabel} />
+                </div>
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+
     </div>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
index 3b99051..2d8ae0b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -74,14 +74,14 @@ export default async function Home() {
             >
               Kai Thomas Chen
             </h1>
-            <div style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 15, letterSpacing: "0.03em", lineHeight: 1.9 }} className="mt-2">
+            <div style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 15, letterSpacing: "0.03em", lineHeight: 1.75 }} className="mt-2">
               <p className="text-zinc-500 dark:text-zinc-500">Visiting @ UC Berkeley 2026</p>
               <p className="text-zinc-500 dark:text-zinc-500">Maths @ SUSTech ’27</p>
             </div>
           </div>
 
           {/* Introductions */}
-          <div style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 17, lineHeight: 1.9 }} className="text-zinc-700 dark:text-zinc-300">
+          <div style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 17, lineHeight: 1.75 }} className="text-zinc-700 dark:text-zinc-300">
             <p className="inline-flex items-center flex-wrap gap-y-1">
               <span
                 className="text-[26px] md:text-[28px] tracking-tight text-zinc-700 dark:text-zinc-300 leading-none"
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
index dbad387..028b755 100644
--- a/app/projects/page.tsx
+++ b/app/projects/page.tsx
@@ -29,7 +29,7 @@ export default async function Projects() {
           Projects
         </h1>
         <p
-          style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 17, lineHeight: 1.8 }}
+          style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 17, lineHeight: 1.7 }}
           className="text-zinc-400 dark:text-zinc-600 mt-3"
         >
           Coursework and things I&apos;ve built, maintained, or archived with love.

From 4ddd1039b95b9fd6ac3be1a47e468e56ca5f73d1 Mon Sep 17 00:00:00 2001
From: Kai Chen <kaichen0728@gmail.com>
Date: Mon, 29 Jun 2026 02:20:01 -0700
Subject: [PATCH 2/2] feat: show full email address in social hover

Make the homepage email icon tooltip display the full address as "Email: kaichen.dev.37@gmail.com" while keeping other social tooltips unchanged.

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Claude <noreply@anthropic.com>
---
 app/components/home-social-links.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/components/home-social-links.tsx b/app/components/home-social-links.tsx
index 206deb2..83bd1a4 100644
--- a/app/components/home-social-links.tsx
+++ b/app/components/home-social-links.tsx
@@ -8,6 +8,7 @@ type SocialBrand = "email" | "signal" | "github" | "linkedin" | "spotify";
 const SOCIAL_LINKS: Array<{
   href: string;
   label: string;
+  tip?: string;
   ariaLabel: string;
   brand: SocialBrand;
   external?: boolean;
@@ -16,6 +17,7 @@ const SOCIAL_LINKS: Array<{
   {
     href: "mailto:kaichen.dev.37@gmail.com",
     label: "Email",
+    tip: "Email: kaichen.dev.37@gmail.com",
     ariaLabel: "Email",
     brand: "email",
     icon: (
@@ -82,8 +84,8 @@ export default function HomeSocialLinks() {
 
   return (
     <div className="flex items-center justify-center gap-5 md:h-full">
-      {SOCIAL_LINKS.map(({ href, label, ariaLabel, brand, external, icon }) => (
-        <HoverTip key={label} tip={label} placement="top">
+      {SOCIAL_LINKS.map(({ href, label, tip, ariaLabel, brand, external, icon }) => (
+        <HoverTip key={label} tip={tip ?? label} placement="top">
           {external ? (
             <a
               href={href}