From cd5399e1d5aa50c90727cff5578e6ff8613b8d07 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 22 Jul 2026 11:46:26 +0000
Subject: [PATCH] refactor: remove Focus card from About, make Volunteering
 full-width

Drop the Summer 26 course Focus card (and now-unused hover-link-hint
imports) from the About page, leaving Education and Experience as the
two-column pair, and move Volunteering below the grid as a full-width
card.

Co-authored-by: Claude <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UChMBSK9wexBQJvJb44Q4q
---
 app/about/page.tsx | 534 ++++++++++++++++++++-------------------------
 1 file changed, 240 insertions(+), 294 deletions(-)

diff --git a/app/about/page.tsx b/app/about/page.tsx
index d5850aa..748e11a 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -1,5 +1,4 @@
 import type { Metadata } from "next";
-import { HoverLinkArrow, HoverLinkDestinationHint } from "../components/hover-link-hint";
 
 type AboutRole = {
   years: string;
@@ -10,7 +9,7 @@ type AboutRole = {
 export const metadata: Metadata = {
   title: "About — Kai T. Chen",
   description:
-    "Education, current focus, experience, and volunteering — Maths at SUSTech, visiting at UC Berkeley.",
+    "Education, experience, and volunteering — Maths at SUSTech, visiting at UC Berkeley.",
 };
 
 export default function About() {
@@ -27,336 +26,283 @@ export default function About() {
         </h1>
       </div>
 
-      {/* Two-column: Education (left) | Experience + Volunteering (right) */}
+      {/* Two-column: Education (left) | Experience (right) */}
       <div className="grid grid-cols-1 md:grid-cols-2 md:items-stretch gap-6 fade-up" style={{ animationDelay: "60ms" }}>
 
-        {/* Left — Education + Focus */}
-        <div className="flex flex-col gap-6 md:h-full">
-          <div className="mag-card flex flex-col md:flex-1">
-            <div className="mag-label">Education</div>
-            <div className="flex flex-col md:flex-1 md:justify-between">
-              {[
-                {
-                  years: "2023 – 2027",
-                  institution: "Southern University of Science and Technology",
-                  affiliation: "Fields Medal Honors Program in Mathematics",
-                  role: "Bachelor of Science",
-                  subtitle: "Mathematics",
-                  grade: "3.73 / 4.00",
-                },
-                {
-                  years: "2026 – 2026",
-                  institution: "University of California, Berkeley",
-                  affiliation: "UC Berkeley International Study Program",
-                  role: "Visiting Student",
-                  subtitle: "Computer Science",
-                  grade: "4.00 / 4.00",
-                },
-                {
-                  years: "2025 – 2025",
-                  institution: "University of Oxford",
-                  affiliation: "Lady Margaret Hall",
-                  role: "Summer Visiting Student",
-                  subtitle: "Deep Unsupervised Learning",
-                  grade: "First Class (A+)",
-                },
-                {
-                  years: "2020 – 2023",
-                  institution: "Tongzhou Senior High School of Jiangsu Province",
-                  affiliation: "Science Innovation Class",
-                  role: "High School Diploma",
-                  content: "Top 0.42% in Gaokao (1848th in 445k+ in Jiangsu Province)",
-                },
-              ].map(({ years, institution, affiliation, role, subtitle, content, grade }, i) => (
-                <div
-                  key={i}
-                  className="py-4 md:py-3 border-b border-zinc-100 dark:border-zinc-800/60 last:border-0"
+        {/* Left — Education */}
+        <div className="mag-card flex flex-col md:h-full">
+          <div className="mag-label">Education</div>
+          <div className="flex flex-col md:flex-1 md:justify-between">
+            {[
+              {
+                years: "2023 – 2027",
+                institution: "Southern University of Science and Technology",
+                affiliation: "Fields Medal Honors Program in Mathematics",
+                role: "Bachelor of Science",
+                subtitle: "Mathematics",
+                grade: "3.73 / 4.00",
+              },
+              {
+                years: "2026 – 2026",
+                institution: "University of California, Berkeley",
+                affiliation: "UC Berkeley International Study Program",
+                role: "Visiting Student",
+                subtitle: "Computer Science",
+                grade: "4.00 / 4.00",
+              },
+              {
+                years: "2025 – 2025",
+                institution: "University of Oxford",
+                affiliation: "Lady Margaret Hall",
+                role: "Summer Visiting Student",
+                subtitle: "Deep Unsupervised Learning",
+                grade: "First Class (A+)",
+              },
+              {
+                years: "2020 – 2023",
+                institution: "Tongzhou Senior High School of Jiangsu Province",
+                affiliation: "Science Innovation Class",
+                role: "High School Diploma",
+                content: "Top 0.42% in Gaokao (1848th in 445k+ in Jiangsu Province)",
+              },
+            ].map(({ years, institution, affiliation, role, subtitle, content, grade }, i) => (
+              <div
+                key={i}
+                className="py-4 md:py-3 border-b border-zinc-100 dark:border-zinc-800/60 last:border-0"
+              >
+                <span
+                  style={{ fontFamily: "var(--font-nunito)", fontWeight: 400, fontSize: 11, letterSpacing: "0.04em" }}
+                  className="text-zinc-400 dark:text-zinc-600 block mb-2"
                 >
-                  <span
-                    style={{ fontFamily: "var(--font-nunito)", fontWeight: 400, fontSize: 11, letterSpacing: "0.04em" }}
-                    className="text-zinc-400 dark:text-zinc-600 block mb-2"
-                  >
-                    {years}
-                  </span>
+                  {years}
+                </span>
+                <p
+                  style={{ fontFamily: "var(--font-nunito)", fontWeight: 600, fontSize: 17, lineHeight: 1.6 }}
+                  className="text-zinc-800 dark:text-zinc-200"
+                >
+                  {institution}
+                </p>
+                {affiliation ? (
                   <p
-                    style={{ fontFamily: "var(--font-nunito)", fontWeight: 600, fontSize: 17, lineHeight: 1.6 }}
-                    className="text-zinc-800 dark:text-zinc-200"
+                    style={{ fontFamily: "var(--font-nunito)", fontWeight: 600, fontSize: 17, lineHeight: 1.4 }}
+                    className="text-zinc-500 dark:text-zinc-400 mt-0.5"
                   >
-                    {institution}
+                    {affiliation}
                   </p>
-                  {affiliation ? (
-                    <p
-                      style={{ fontFamily: "var(--font-nunito)", fontWeight: 600, fontSize: 17, lineHeight: 1.4 }}
-                      className="text-zinc-500 dark:text-zinc-400 mt-0.5"
-                    >
-                      {affiliation}
-                    </p>
-                  ) : null}
+                ) : null}
+                <p
+                  style={{ fontFamily: "var(--font-nunito)", fontWeight: 600, fontSize: 17, lineHeight: 1.4 }}
+                  className="text-zinc-500 dark:text-zinc-400 mt-1"
+                >
+                  {role}
+                </p>
+                {subtitle ? (
                   <p
                     style={{ fontFamily: "var(--font-nunito)", fontWeight: 600, fontSize: 17, lineHeight: 1.4 }}
-                    className="text-zinc-500 dark:text-zinc-400 mt-1"
+                    className="text-zinc-500 dark:text-zinc-400 mt-0.5"
                   >
-                    {role}
+                    {subtitle}
                   </p>
-                  {subtitle ? (
-                    <p
-                      style={{ fontFamily: "var(--font-nunito)", fontWeight: 600, fontSize: 17, lineHeight: 1.4 }}
-                      className="text-zinc-500 dark:text-zinc-400 mt-0.5"
-                    >
-                      {subtitle}
-                    </p>
-                  ) : null}
-                  {content || grade ? (
-                    <p
-                      style={{ fontFamily: "var(--font-nunito)", fontWeight: 400, fontSize: 16, lineHeight: 1.5 }}
-                      className="text-zinc-500 dark:text-zinc-400 mt-0.5"
-                    >
-                      {[content, grade].filter(Boolean).join(" · ")}
-                    </p>
-                  ) : null}
-                </div>
-              ))}
-            </div>
-          </div>
-
-          <div className="mag-card shrink-0">
-            <div className="mag-label">Focus</div>
-            <div>
-              {[
-                {
-                  term: "Summer 26",
-                  code: "COMPSCI 61BL: Data Structures and Programming Methodology",
-                  href: "https://cs61bl.org/",
-                },
-                {
-                  term: "Summer 26",
-                  code: "COMPSCI 188: Introduction to Artificial Intelligence",
-                  href: "https://inst.eecs.berkeley.edu/~cs188/su26/",
-                },
-              ].map(({ term, code, href }) => (
-                <a
-                  key={code}
-                  href={href}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="group block py-4 -mx-2 px-2 rounded-sm hover:bg-[#e8f0f4] dark:hover:bg-[#243640] transition-all duration-150 no-underline border-b border-zinc-100 dark:border-zinc-800/60 last:border-0"
-                  style={{ textDecoration: "none" }}
-                >
-                  <span
-                    style={{ fontFamily: "var(--font-nunito)", fontWeight: 400, fontSize: 11, letterSpacing: "0.04em" }}
-                    className="text-zinc-400 dark:text-zinc-600 block mb-1"
+                ) : null}
+                {content || grade ? (
+                  <p
+                    style={{ fontFamily: "var(--font-nunito)", fontWeight: 400, fontSize: 16, lineHeight: 1.5 }}
+                    className="text-zinc-500 dark:text-zinc-400 mt-0.5"
                   >
-                    {term}
-                  </span>
-                  <div className="flex items-center justify-between gap-3">
-                    <div className="flex items-center gap-2 min-w-0">
-                      <HoverLinkArrow />
-                      <p
-                        style={{ fontFamily: "var(--font-nunito)", fontWeight: 600, fontSize: 17, lineHeight: 1.4 }}
-                        className="text-zinc-800 dark:text-zinc-200 group-hover:text-black dark:group-hover:text-white transition-colors duration-150"
-                      >
-                        {code}
-                      </p>
-                    </div>
-                    <HoverLinkDestinationHint href={href} label="Course site" />
-                  </div>
-                </a>
-              ))}
-            </div>
+                    {[content, grade].filter(Boolean).join(" · ")}
+                  </p>
+                ) : null}
+              </div>
+            ))}
           </div>
         </div>
 
-        {/* Right — Experience + Volunteering stacked */}
-        <div className="flex flex-col gap-6 md:h-full">
-
-          {/* Experience */}
-          <div className="mag-card flex flex-col md:flex-1">
-            <div className="mag-label">Experience</div>
-            <div className="flex flex-col">
-              {[
-                {
-                  org: "Southern University of Science and Technology",
-                  meta: "Shenzhen",
-                  roles: [
-                    {
-                      years: "Jun 2024 – Jun 2025",
-                      role: "Peer Mentor",
-                      detail: "Peer mentor at Zhicheng College for the Class of 2028.",
-                    },
-                    {
-                      years: "Oct 2023 – Jan 2024",
-                      role: "Teaching Assistant",
-                      detail: "TA for a short-term mindfulness course.",
-                    },
-                  ],
-                },
-                {
-                  org: "Lingnan University",
-                  meta: "Hong Kong SAR",
-                  roles: [
-                    {
-                      years: "Oct 2024 – Jan 2025",
-                      role: "Teaching Assistant",
-                      detail:
-                        "TA for Wellness Ambassador Program (WAP), jointly organized by SUSTech and Lingnan University.",
-                    },
-                  ],
-                },
-              ].map(({ org, meta: orgMeta, roles }, groupIndex) => (
-                <div
-                  key={org}
-                  className="py-4 md:py-3 border-b border-zinc-100 dark:border-zinc-800/60 last:border-0"
+        {/* Right — Experience */}
+        <div className="mag-card flex flex-col md:h-full">
+          <div className="mag-label">Experience</div>
+          <div className="flex flex-col">
+            {[
+              {
+                org: "Southern University of Science and Technology",
+                meta: "Shenzhen",
+                roles: [
+                  {
+                    years: "Jun 2024 – Jun 2025",
+                    role: "Peer Mentor",
+                    detail: "Peer mentor at Zhicheng College for the Class of 2028.",
+                  },
+                  {
+                    years: "Oct 2023 – Jan 2024",
+                    role: "Teaching Assistant",
+                    detail: "TA for a short-term mindfulness course.",
+                  },
+                ],
+              },
+              {
+                org: "Lingnan University",
+                meta: "Hong Kong SAR",
+                roles: [
+                  {
+                    years: "Oct 2024 – Jan 2025",
+                    role: "Teaching Assistant",
+                    detail:
+                      "TA for Wellness Ambassador Program (WAP), jointly organized by SUSTech and Lingnan University.",
+                  },
+                ],
+              },
+            ].map(({ org, meta: orgMeta, roles }, groupIndex) => (
+              <div
+                key={org}
+                className="py-4 md:py-3 border-b border-zinc-100 dark:border-zinc-800/60 last:border-0"
+              >
+                <p
+                  style={{ fontFamily: "var(--font-nunito)", fontWeight: 600, fontSize: 17, lineHeight: 1.4 }}
+                  className="text-zinc-800 dark:text-zinc-200"
                 >
+                  {org}
+                </p>
+                {orgMeta ? (
                   <p
-                    style={{ fontFamily: "var(--font-nunito)", fontWeight: 600, fontSize: 17, lineHeight: 1.4 }}
-                    className="text-zinc-800 dark:text-zinc-200"
+                    style={{ fontFamily: "var(--font-nunito)", fontWeight: 400, fontSize: 11, letterSpacing: "0.04em" }}
+                    className="text-zinc-400 dark:text-zinc-600 mt-1"
                   >
-                    {org}
+                    {orgMeta}
                   </p>
-                  {orgMeta ? (
-                    <p
-                      style={{ fontFamily: "var(--font-nunito)", fontWeight: 400, fontSize: 11, letterSpacing: "0.04em" }}
-                      className="text-zinc-400 dark:text-zinc-600 mt-1"
+                ) : null}
+                <div className={roles.length > 1 ? "mt-3 space-y-0" : "mt-2.5"}>
+                  {roles.map((roleItem, roleIndex) => (
+                    <div
+                      key={`${groupIndex}-${roleIndex}`}
+                      className={
+                        roleIndex > 0
+                          ? "pt-4 mt-4 border-t border-zinc-100 dark:border-zinc-800/60"
+                          : undefined
+                      }
                     >
-                      {orgMeta}
-                    </p>
-                  ) : null}
-                  <div className={roles.length > 1 ? "mt-3 space-y-0" : "mt-2.5"}>
-                    {roles.map((roleItem, roleIndex) => (
-                      <div
-                        key={`${groupIndex}-${roleIndex}`}
-                        className={
-                          roleIndex > 0
-                            ? "pt-4 mt-4 border-t border-zinc-100 dark:border-zinc-800/60"
-                            : undefined
-                        }
+                      <p
+                        style={{ fontFamily: "var(--font-nunito)", fontWeight: 600, fontSize: 17, lineHeight: 1.4 }}
+                        className="text-zinc-500 dark:text-zinc-400"
                       >
+                        {roleItem.role}
+                      </p>
+                      <span
+                        style={{
+                          fontFamily: "var(--font-nunito)",
+                          fontWeight: 400,
+                          fontSize: 11,
+                          letterSpacing: "0.04em",
+                        }}
+                        className="text-zinc-400 dark:text-zinc-600 block mt-1"
+                      >
+                        {roleItem.years}
+                      </span>
+                      {roleItem.detail ? (
                         <p
-                          style={{ fontFamily: "var(--font-nunito)", fontWeight: 600, fontSize: 17, lineHeight: 1.4 }}
-                          className="text-zinc-500 dark:text-zinc-400"
+                          style={{ fontFamily: "var(--font-nunito)", fontWeight: 400, fontSize: 15, lineHeight: 1.5 }}
+                          className="text-zinc-500 dark:text-zinc-500 mt-1.5"
                         >
-                          {roleItem.role}
+                          {roleItem.detail}
                         </p>
-                        <span
-                          style={{
-                            fontFamily: "var(--font-nunito)",
-                            fontWeight: 400,
-                            fontSize: 11,
-                            letterSpacing: "0.04em",
-                          }}
-                          className="text-zinc-400 dark:text-zinc-600 block mt-1"
-                        >
-                          {roleItem.years}
-                        </span>
-                        {roleItem.detail ? (
-                          <p
-                            style={{ fontFamily: "var(--font-nunito)", fontWeight: 400, fontSize: 15, lineHeight: 1.5 }}
-                            className="text-zinc-500 dark:text-zinc-500 mt-1.5"
-                          >
-                            {roleItem.detail}
-                          </p>
-                        ) : null}
-                      </div>
-                    ))}
-                  </div>
+                      ) : null}
+                    </div>
+                  ))}
                 </div>
-              ))}
-            </div>
+              </div>
+            ))}
           </div>
+        </div>
+      </div>
 
-          {/* Volunteering */}
-          <div className="mag-card shrink-0">
-            <div className="mag-label">Volunteering</div>
-            <div className="flex flex-col">
-              {[
+      {/* Volunteering — full-width */}
+      <div className="mag-card fade-up" style={{ animationDelay: "120ms" }}>
+        <div className="mag-label">Volunteering</div>
+        <div className="flex flex-col">
+          {[
+            {
+              org: "SUSTech Emergency Rescue Association",
+              meta: "Shenzhen",
+              roles: [
+                {
+                  years: "2023 – 2025",
+                  role: "Certified First Aider",
+                },
+              ] as AboutRole[],
+            },
+            {
+              org: "SUSTech Psychology Society (SUSPsych)",
+              meta: "Shenzhen",
+              roles: [
                 {
-                  org: "SUSTech Emergency Rescue Association",
-                  meta: "Shenzhen",
-                  roles: [
-                    {
-                      years: "2023 – 2025",
-                      role: "Certified First Aider",
-                    },
-                  ] as AboutRole[],
+                  years: "2024 – 2025",
+                  role: "President",
+                  detail:
+                    "Organizing mental health workshops and peer support programs in partnership with SUSTech Counseling & Psychological Services.",
                 },
                 {
-                  org: "SUSTech Psychology Society (SUSPsych)",
-                  meta: "Shenzhen",
-                  roles: [
-                    {
-                      years: "2024 – 2025",
-                      role: "President",
-                      detail:
-                        "Organizing mental health workshops and peer support programs in partnership with SUSTech Counseling & Psychological Services.",
-                    },
-                    {
-                      years: "2023 – 2024",
-                      role: "External Vice President",
-                    },
-                  ] as AboutRole[],
+                  years: "2023 – 2024",
+                  role: "External Vice President",
                 },
-              ].map(({ org, meta: orgMeta, roles }, groupIndex) => (
-                <div
-                  key={org}
-                  className="py-4 md:py-3 border-b border-zinc-100 dark:border-zinc-800/60 last:border-0"
+              ] as AboutRole[],
+            },
+          ].map(({ org, meta: orgMeta, roles }, groupIndex) => (
+            <div
+              key={org}
+              className="py-4 md:py-3 border-b border-zinc-100 dark:border-zinc-800/60 last:border-0"
+            >
+              <p
+                style={{ fontFamily: "var(--font-nunito)", fontWeight: 600, fontSize: 17, lineHeight: 1.4 }}
+                className="text-zinc-800 dark:text-zinc-200"
+              >
+                {org}
+              </p>
+              {orgMeta ? (
+                <p
+                  style={{ fontFamily: "var(--font-nunito)", fontWeight: 400, fontSize: 11, letterSpacing: "0.04em" }}
+                  className="text-zinc-400 dark:text-zinc-600 mt-1"
                 >
-                  <p
-                    style={{ fontFamily: "var(--font-nunito)", fontWeight: 600, fontSize: 17, lineHeight: 1.4 }}
-                    className="text-zinc-800 dark:text-zinc-200"
+                  {orgMeta}
+                </p>
+              ) : null}
+              <div className={roles.length > 1 ? "mt-3 space-y-0" : "mt-2.5"}>
+                {roles.map((roleItem, roleIndex) => (
+                  <div
+                    key={`${groupIndex}-${roleIndex}`}
+                    className={
+                      roleIndex > 0
+                        ? "pt-4 mt-4 border-t border-zinc-100 dark:border-zinc-800/60"
+                        : undefined
+                    }
                   >
-                    {org}
-                  </p>
-                  {orgMeta ? (
                     <p
-                      style={{ fontFamily: "var(--font-nunito)", fontWeight: 400, fontSize: 11, letterSpacing: "0.04em" }}
-                      className="text-zinc-400 dark:text-zinc-600 mt-1"
+                      style={{ fontFamily: "var(--font-nunito)", fontWeight: 600, fontSize: 17, lineHeight: 1.4 }}
+                      className="text-zinc-500 dark:text-zinc-400"
                     >
-                      {orgMeta}
+                      {roleItem.role}
                     </p>
-                  ) : null}
-                  <div className={roles.length > 1 ? "mt-3 space-y-0" : "mt-2.5"}>
-                    {roles.map((roleItem, roleIndex) => (
-                      <div
-                        key={`${groupIndex}-${roleIndex}`}
-                        className={
-                          roleIndex > 0
-                            ? "pt-4 mt-4 border-t border-zinc-100 dark:border-zinc-800/60"
-                            : undefined
-                        }
+                    <span
+                      style={{
+                        fontFamily: "var(--font-nunito)",
+                        fontWeight: 400,
+                        fontSize: 11,
+                        letterSpacing: "0.04em",
+                      }}
+                      className="text-zinc-400 dark:text-zinc-600 block mt-1"
+                    >
+                      {roleItem.years}
+                    </span>
+                    {roleItem.detail ? (
+                      <p
+                        style={{ fontFamily: "var(--font-nunito)", fontWeight: 400, fontSize: 15, lineHeight: 1.5 }}
+                        className="text-zinc-500 dark:text-zinc-500 mt-1.5"
                       >
-                        <p
-                          style={{ fontFamily: "var(--font-nunito)", fontWeight: 600, fontSize: 17, lineHeight: 1.4 }}
-                          className="text-zinc-500 dark:text-zinc-400"
-                        >
-                          {roleItem.role}
-                        </p>
-                        <span
-                          style={{
-                            fontFamily: "var(--font-nunito)",
-                            fontWeight: 400,
-                            fontSize: 11,
-                            letterSpacing: "0.04em",
-                          }}
-                          className="text-zinc-400 dark:text-zinc-600 block mt-1"
-                        >
-                          {roleItem.years}
-                        </span>
-                        {roleItem.detail ? (
-                          <p
-                            style={{ fontFamily: "var(--font-nunito)", fontWeight: 400, fontSize: 15, lineHeight: 1.5 }}
-                            className="text-zinc-500 dark:text-zinc-500 mt-1.5"
-                          >
-                            {roleItem.detail}
-                          </p>
-                        ) : null}
-                      </div>
-                    ))}
+                        {roleItem.detail}
+                      </p>
+                    ) : null}
                   </div>
-                </div>
-              ))}
+                ))}
+              </div>
             </div>
-          </div>
-
+          ))}
         </div>
       </div>