Skip to content

style: tighten spacing and polish misc links #86

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 29, 2026
Merged

style: tighten spacing and polish misc links #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
13a6fea
style: tighten spacing and polish misc links
kaiiiichen Jun 29, 2026
4ddd103
feat: show full email address in social hover
kaiiiichen Jun 29, 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
19 changes: 4 additions & 15 deletions app/about/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down
8 changes: 6 additions & 2 deletions app/components/home-social-links.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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: (
Expand Down Expand Up @@ -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}
Expand All @@ -105,7 +107,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"
Expand Down
6 changes: 3 additions & 3 deletions app/components/oxford-dul/course-project-link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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 = (
<>
Expand All @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions app/components/pinned-project-link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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">
Expand Down
35 changes: 33 additions & 2 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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);
}
Comment on lines +310 to +315

@devin-ai-integration devin-ai-integration Bot Jun 29, 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.

🚩 Arrow border color slightly differs from tooltip border color in light mode

The outer arrow triangle uses border-top: 7px solid var(--color-border-secondary) which resolves to #d4d4d8 (zinc-300) in light mode (app/globals.css:314). However, the tooltip itself (via TIP_BASE_CLASS at app/components/hover-tip.tsx:48) uses border-zinc-200 which is #e4e4e7. This means the arrow's outer border is slightly darker than the tooltip border in light mode. In dark mode both resolve to zinc-700 (#3f3f46) so they match. This is likely a deliberate design choice for arrow definition but could be unintentional.

Open in Devin Review

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

.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;
Expand Down
56 changes: 50 additions & 6 deletions app/misc/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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",
Expand All @@ -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" }}>
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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>
);
}
4 changes: 2 additions & 2 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion app/projects/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down