Skip to content

fix: mobile hover tips, About page updates, and Vercel build #84

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kaiiiichen merged 2 commits into from
Jun 26, 2026
Merged

fix: mobile hover tips, About page updates, and Vercel build #84

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
65bbaa3
fix: sync About experience from LinkedIn and align volunteering format
kaiiiichen Jun 26, 2026
807e5e4
fix: add AboutRole type for volunteering section build
kaiiiichen Jun 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 78 additions & 48 deletions app/about/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import type { Metadata } from "next";
import MagChip from "../components/mag-chip";

type AboutRole = {
years: string;
role: string;
detail?: string;
};

export const metadata: Metadata = {
title: "About — Kai T. Chen",
description:
Expand Down Expand Up @@ -161,45 +167,41 @@ export default function About() {
roles: [
{
years: "Apr 2026 – Present",
meta: "On-site",
role: "Research Assistant",
detail: "RA with an Astra fellow on a compute governance project.",
},
],
},
{
org: "Southern University of Science and Technology",
meta: "Shenzhen, China",
meta: "Shenzhen",
roles: [
{
years: "Jun 2024 – Jun 2025",
meta: "On-site",
role: "Peer Mentor",
detail: "Peer mentor at Zhicheng College for the Class of 2028.",
},
{
years: "Feb 2024 – Aug 2024",
meta: "On-site",
years: "Feb 2024 – Jul 2024",
role: "Research Assistant",
detail: "Control theory RA at NCC Lab.",
},
{
years: "Nov 2023 – Jan 2024",
meta: "On-site",
role: "Teaching Assistant",
detail: "TA for a short-term mindfulness course.",
},
],
},
{
org: "SUSTech Psychology Society (SUSPsych)",
meta: "Shenzhen, China · On-site",
meta: "Shenzhen",
roles: [
{
years: "Jun 2024 – Jun 2025",
role: "President",
detail:
"Mental health workshops and peer support programs with SUSTech Counseling & Psychological Services.",
"Organizing mental health workshops and peer support programs in partnership with SUSTech Counseling & Psychological Services.",
},
{
years: "Oct 2023 – Jun 2024",
Expand All @@ -213,7 +215,6 @@ export default function About() {
roles: [
{
years: "Oct 2024 – Jan 2025",
meta: "Hybrid",
role: "Teaching Assistant",
detail:
"TA for Wellness Ambassador Program (WAP), jointly organized by SUSTech and Lingnan University.",
Expand Down Expand Up @@ -255,27 +256,17 @@ export default function About() {
>
{roleItem.role}
</p>
<div className="flex gap-2 items-baseline mt-1 flex-wrap">
<span
style={{
fontFamily: "'Nunito'",
fontWeight: 400,
fontSize: 11,
letterSpacing: "0.04em",
}}
className="text-zinc-400 dark:text-zinc-600"
>
{roleItem.years}
</span>
{"meta" in roleItem && roleItem.meta ? (
<span
style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 11 }}
className="text-zinc-300 dark:text-zinc-700"
>
· {roleItem.meta}
</span>
) : null}
</div>
<span
style={{
fontFamily: "'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: "'Nunito'", fontWeight: 400, fontSize: 15, lineHeight: 1.55 }}
Expand All @@ -295,36 +286,75 @@ export default function About() {
{/* Volunteering */}
<div className="mag-card shrink-0">
<div className="mag-label">Volunteering</div>
<div>
<div className="flex flex-col">
{[
{
years: "Oct 2023 – Dec 2025",
role: "Certified First Aider",
org: "SUSTech Emergency Rescue Association",
meta: "Shenzhen",
roles: [
{
years: "Oct 2023 – Dec 2025",
role: "Certified First Aider",
},
] as AboutRole[],
},
].map(({ years, role, org }, i) => (
].map(({ org, meta: orgMeta, roles }, groupIndex) => (
<div
key={i}
className="py-4 border-b border-zinc-100 dark:border-zinc-800/60 last:border-0"
key={org}
className="py-4 md:py-3 border-b border-zinc-100 dark:border-zinc-800/60 last:border-0"
>
<span
style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 11, letterSpacing: "0.04em" }}
className="text-zinc-400 dark:text-zinc-600 block mb-1"
>
{years}
</span>
<p
style={{ fontFamily: "'Nunito'", fontWeight: 600, fontSize: 17, lineHeight: 1.4 }}
className="text-zinc-800 dark:text-zinc-200"
>
{role}
</p>
<p
style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 16, lineHeight: 1.5 }}
className="text-[#C4894F] dark:text-[#D9A870] mt-0.5"
>
{org}
</p>
{orgMeta ? (
<p
style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 11, letterSpacing: "0.04em" }}
className="text-zinc-400 dark:text-zinc-600 mt-1"
>
{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: "'Nunito'", fontWeight: 600, fontSize: 17, lineHeight: 1.4 }}
className="text-[#C4894F] dark:text-[#D9A870]"
>
{roleItem.role}
</p>
<span
style={{
fontFamily: "'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: "'Nunito'", fontWeight: 400, fontSize: 15, lineHeight: 1.55 }}
className="text-zinc-500 dark:text-zinc-500 mt-1.5"
>
{roleItem.detail}
</p>
) : null}
</div>
))}
</div>
</div>
))}
</div>
Comment on lines 286 to 360

@devin-ai-integration devin-ai-integration Bot Jun 26, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚩 Volunteering section restructured to match Experience — visual ordering changed

The old Volunteering section rendered items in the order: years → role → org (with the org styled as an accent-colored sub-label). The new code at app/about/page.tsx:286-361 restructures it to match Experience: org → meta → role → years. This means the org name is now the primary heading (zinc-800/200) and the role is the accent-colored element beneath it. For the single current entry ('SUSTech Emergency Rescue Association' / 'Certified First Aider'), this changes the visual hierarchy noticeably — the role title ('Certified First Aider') moves from being the large primary text to being the accent sub-heading. This is likely intentional for consistency but is a semantic/visual change worth confirming.

(Refers to lines 286-361)

Open in Devin Review

Was this helpful? React with 👍 or 👎 to provide feedback.

Expand Down