Skip to content

Commit 6b34856

Browse files
yizhuoliangyizhuoliang
committed
Add more about me
1 parent 6810245 commit 6b34856

File tree

19 files changed

+250
-10
lines changed

19 files changed

+250
-10
lines changed

‎app/about/friends/page.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import Link from 'next/link'
2+
import { Card } from "@/components/ui/card"
3+
4+
export default function FriendsPage() {
5+
return (
6+
<main className="min-h-screen p-4 pb-2 md:p-8 md:pb-4 bg-zinc-100 dark:bg-zinc-100">
7+
<div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
8+
<div className="flex justify-center mb-8">
9+
<Link href="/about" className="inline-flex items-center rounded-full bg-zinc-300 text-zinc-900 px-4 py-2 text-xs font-medium border border-zinc-400 shadow-sm">
10+
Back to About
11+
</Link>
12+
</div>
13+
<h1 className="text-2xl font-semibold mb-6">My friends</h1>
14+
<p className="text-lg">You are, my friend :)</p>
15+
</div>
16+
</main>
17+
)
18+
}
19+
20+

‎app/about/music/page.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import Link from 'next/link'
2+
3+
export default function MusicPage() {
4+
return (
5+
<main className="min-h-screen p-4 pb-2 md:p-8 md:pb-4 bg-zinc-100 dark:bg-zinc-100">
6+
<div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
7+
<div className="flex justify-center mb-6">
8+
<Link href="/about" className="inline-flex items-center rounded-full bg-zinc-300 text-zinc-900 px-4 py-2 text-xs font-medium border border-zinc-400 shadow-sm">
9+
Back to About
10+
</Link>
11+
</div>
12+
<h1 className="text-2xl font-semibold mb-6">Music I love</h1>
13+
14+
<div className="flex flex-col gap-16">
15+
16+
<div className="flex flex-col md:flex-row gap-8 items-start">
17+
<a href="/pics/music/spiral-longman-cover.jpeg" target="_blank" rel="noreferrer" className="md:w-2/3">
18+
<img src="/pics/music/spiral-longman-cover.jpeg" alt="LONGMAN - SPIRAL cover" className="rounded-2xl w-full h-auto" />
19+
</a>
20+
<div className="md:w-1/3 text-sm text-zinc-700">
21+
<p>Spiral - LONGMAN <br/> <br/> 一个烂透的人也配得到救赎，这是我见过最温柔的事。 </p>
22+
</div>
23+
</div>
24+
25+
<div className="flex flex-col md:flex-row gap-8 items-start">
26+
<a href="/pics/music/amusement-park.jpeg" target="_blank" rel="noreferrer" className="md:w-2/3">
27+
<img src="/pics/music/amusement-park.jpeg" alt="Amusement Park cover" className="rounded-2xl w-full h-auto" />
28+
</a>
29+
<div className="md:w-1/3 text-sm text-zinc-700">
30+
<p>Piano: Amusement Park - 帆足圭吾 </p>
31+
</div>
32+
</div>
33+
34+
<div className="flex flex-col md:flex-row gap-8 items-start">
35+
<a href="/pics/music/horizondreamer-cover.jpeg" target="_blank" rel="noreferrer" className="md:w-2/3">
36+
<img src="/pics/music/horizondreamer-cover.jpeg" alt="Horizon Dreamer cover" className="rounded-2xl w-full h-auto" />
37+
</a>
38+
<div className="md:w-1/3 text-sm text-zinc-700">
39+
<p>Horizon Dreamer - 三浦大知 </p>
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
</main>
45+
)
46+
}
47+
48+

‎app/about/page.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import Link from 'next/link'
2+
import { Card } from "@/components/ui/card"
3+
import { LinkSection } from "@/components/ui/shared-components"
4+
5+
export default function About() {
6+
return (
7+
<main className="min-h-screen p-4 pb-2 md:p-8 md:pb-4 bg-zinc-100 dark:bg-zinc-100">
8+
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
9+
<div className="flex flex-col md:flex-row md:gap-16">
10+
{/* Left column: Title card with back pill */}
11+
<div className="md:w-[30%] md:sticky md:top-8 md:self-start flex flex-col justify-between md:min-h-[calc(100vh-6rem)]">
12+
<div className="flex flex-col gap-8 mb-8">
13+
<Card className="overflow-hidden bg-gradient-to-r from-zinc-800 to-zinc-900 shadow-lg border-none">
14+
<div className="p-8 text-white">
15+
<h1 className="mb-2 text-3xl font-bold">About Coulson</h1>
16+
<div className="mt-4">
17+
<Link href="/" className="inline-flex items-center rounded-full bg-zinc-400 text-zinc-900 px-4 py-2 text-xs font-medium shadow-sm">
18+
Back to Home
19+
</Link>
20+
</div>
21+
</div>
22+
</Card>
23+
</div>
24+
</div>
25+
26+
{/* Right column: About image + Link sections */
27+
}
28+
<div className="mt-0 md:mt-0 md:w-[70%]">
29+
<div className="mb-8">
30+
<img src="/pics/about.png" alt="About Coulson" className="w-full h-auto rounded-3xl" />
31+
</div>
32+
<LinkSection title="1" description="My Photos" href="/about/photos" />
33+
<LinkSection title="2" description="Music I Love" href="/about/music" />
34+
<LinkSection title="3" description="My Friends" href="/about/friends" />
35+
</div>
36+
</div>
37+
</div>
38+
</main>
39+
)
40+
}
41+
42+

‎app/about/photos/page.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import Link from 'next/link'
2+
3+
export default function PhotosPage() {
4+
return (
5+
<main className="min-h-screen p-4 pb-2 md:p-8 md:pb-4 bg-zinc-100 dark:bg-zinc-100">
6+
<div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
7+
<div className="flex justify-center mb-6">
8+
<Link href="/about" className="inline-flex items-center rounded-full bg-zinc-300 text-zinc-900 px-4 py-2 text-xs font-medium border border-zinc-400 shadow-sm">
9+
Back to About
10+
</Link>
11+
</div>
12+
<h1 className="text-2xl font-semibold mb-6">My Photos</h1>
13+
14+
<div className="flex flex-col gap-16">
15+
<div className="flex flex-col md:flex-row gap-8 items-start">
16+
<a href="/pics/photos/bk-bridge-park.PNG" target="_blank" rel="noreferrer" className="md:w-2/3">
17+
<img src="/pics/photos/bk-bridge-park.PNG" alt="Brooklyn Bridge Park" className="rounded-2xl w-full h-auto" />
18+
</a>
19+
<div className="md:w-1/3 text-sm text-zinc-700">
20+
<p>纽约最喜欢的地方，最喜欢的时间。</p>
21+
</div>
22+
</div>
23+
24+
<div className="flex flex-col md:flex-row gap-8 items-start">
25+
<a href="/pics/photos/sea-couple.PNG" target="_blank" rel="noreferrer" className="md:w-2/3">
26+
<img src="/pics/photos/sea-couple.PNG" alt="Sea Couple" className="rounded-2xl w-full h-auto" />
27+
</a>
28+
<div className="md:w-1/3 text-sm text-zinc-700">
29+
<p>一个小岛上的老夫妻。他们骑着自行车来的，所以应该是岛上的住户。那这片海，他们可能已经一起看过无数次了。</p>
30+
</div>
31+
</div>
32+
33+
<div className="flex flex-col md:flex-row gap-8 items-start">
34+
<a href="/pics/photos/rockerfeller.png" target="_blank" rel="noreferrer" className="md:w-2/3">
35+
<img src="/pics/photos/rockerfeller.png" alt="Backyard" className="rounded-2xl w-full h-auto" />
36+
</a>
37+
<div className="md:w-1/3 text-sm text-zinc-700">
38+
<p>一个小岛上某家人的后院。</p>
39+
</div>
40+
</div>
41+
42+
<div className="flex flex-col md:flex-row gap-8 items-start">
43+
<a href="/pics/photos/room-sunset.png" target="_blank" rel="noreferrer" className="md:w-2/3">
44+
<img src="/pics/photos/room-sunset.png" alt="Room at sunset" className="rounded-2xl w-full h-auto" />
45+
</a>
46+
<div className="md:w-1/3 text-sm text-zinc-700">
47+
<p>新泽西的房间.</p>
48+
</div>
49+
</div>
50+
51+
<div className="flex flex-col md:flex-row gap-8 items-start">
52+
<a href="/pics/photos/room.png" target="_blank" rel="noreferrer" className="md:w-2/3">
53+
<img src="/pics/photos/room.png" alt="Room" className="rounded-2xl w-full h-auto" />
54+
</a>
55+
<div className="md:w-1/3 text-sm text-zinc-700">
56+
<p>新泽西的房间是朝西边的！</p>
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
</main>
62+
)
63+
}
64+
65+

‎app/page.tsx‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
ContactItem,
88
EmailIcon,
99
GithubIcon,
10+
ScholarIcon,
1011
Footer,
1112
SkillTag,
1213
ProjectItem
@@ -52,6 +53,13 @@ export default function Home() {
5253
>
5354
github.com/yizhuoliang
5455
</ContactItem>
56+
57+
<ContactItem
58+
icon={<ScholarIcon />}
59+
href="https://scholar.google.com/citations?user=86jYY2MAAAAJ&hl=en&oi=ao"
60+
>
61+
Google Scholar
62+
</ContactItem>
5563
</div>
5664
</div>
5765
</Card>
@@ -116,11 +124,13 @@ export default function Home() {
116124
defaultExpanded={false}
117125
summary={
118126
<div className="space-y-1">
119-
<p className="font-semibold">USC Networked Systems Lab</p>
120-
<p>Full-time Research Intern</p>
127+
<p>
128+
<span className="font-semibold">USC Networked Systems Lab</span> — <span>Full-time Research Intern</span>
129+
</p>
121130
<p className="text-xs mt-1">July 2024 - May 2025</p>
122-
<p className="font-semibold mt-3">NYU Secure Systems Lab</p>
123-
<p>Undergraduate Researcher</p>
131+
<p className="mt-3">
132+
<span className="font-semibold">NYU Secure Systems Lab</span> — <span>Undergraduate Researcher</span>
133+
</p>
124134
<p className="text-xs mt-1">June 2023 - June 2024</p>
125135
</div>
126136
}
@@ -158,7 +168,7 @@ export default function Home() {
158168
defaultExpanded={false}
159169
summary={
160170
<div className="space-y-1">
161-
<p>Granular Resource Demand Heterogeneity (HotOS '25)</p>
171+
<p>Granular Resource Demand Heterogeneity (HotOS'25)</p>
162172
<p className="text-xs mt-1"><strong>Yizhuo Liang</strong>, Ramesh Govindan, Seo Jin Park</p>
163173
</div>
164174
}
@@ -214,6 +224,13 @@ export default function Home() {
214224
</div>
215225
</div>
216226
</ExpandableSection>
227+
228+
{/* Subtle More About Me link - centered */}
229+
<div className="mt-8 flex justify-center">
230+
<StyledLink href="/about" variant="muted" className="text-sm">
231+
More about me?
232+
</StyledLink>
233+
</div>
217234
</div>
218235
</div>
219236

‎components/ui/shared-components.tsx‎

Lines changed: 47 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,24 @@ import React from 'react'
44
import Image from 'next/image'
55
import { useState } from 'react'
66
import { ChevronDown } from 'lucide-react'
7+
import Link from 'next/link'
78
import { cn } from "@/lib/utils"
89
import { Card } from "@/components/ui/card"
910

1011
// Styled link with consistent styling
1112
export const StyledLink = React.forwardRef<
1213
HTMLAnchorElement,
13-
React.AnchorHTMLAttributes<HTMLAnchorElement> & { variant?: 'underline' | 'plain' }
14+
React.AnchorHTMLAttributes<HTMLAnchorElement> & { variant?: 'underline' | 'plain' | 'muted' }
1415
>(({ className = "", variant = 'plain', ...props }, ref) => (
1516
<a
1617
ref={ref}
1718
className={cn(
1819
"transition-colors",
19-
variant === 'underline'
20-
? "underline text-zinc-800 hover:text-zinc-600 dark:text-zinc-800 dark:hover:text-zinc-600"
21-
: "text-zinc-800 hover:text-zinc-600 dark:text-zinc-800 dark:hover:text-zinc-600",
20+
variant === 'underline'
21+
? "underline text-zinc-800 hover:text-zinc-600 dark:text-zinc-800 dark:hover:text-zinc-600"
22+
: variant === 'muted'
23+
? "text-zinc-400 hover:text-zinc-600 dark:text-zinc-400 dark:hover:text-zinc-600"
24+
: "text-zinc-800 hover:text-zinc-600 dark:text-zinc-800 dark:hover:text-zinc-600",
2225
className
2326
)}
2427
{...props}
@@ -94,6 +97,16 @@ export function GithubIcon() {
9497
);
9598
}
9699

100+
// Scholar icon (graduation cap)
101+
export function ScholarIcon() {
102+
return (
103+
<svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5 text-zinc-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
104+
<path d="M22 10L12 4 2 10l10 6 10-6" />
105+
<path d="M6 12v5c0 1.7 3.6 3 6 3s6-1.3 6-3v-5" />
106+
</svg>
107+
);
108+
}
109+
97110
// Footer component
98111
export function Footer({ className = "" }: { className?: string }) {
99112
return (
@@ -189,4 +202,33 @@ export function ExpandableSection({ title, children, defaultExpanded = false, su
189202
</div>
190203
</div>
191204
)
192-
}
205+
}
206+
207+
// Link Section (non-expandable, arrow points right)
208+
interface LinkSectionProps {
209+
title: string
210+
href: string
211+
description?: React.ReactNode
212+
}
213+
214+
export function LinkSection({ title, href, description }: LinkSectionProps) {
215+
return (
216+
<div className="mb-8">
217+
<div className="rounded-3xl bg-white border border-zinc-100 dark:bg-white dark:border-zinc-100">
218+
<Link href={href} className="flex w-full items-start justify-between p-6 transition-all duration-200 hover:bg-zinc-50 dark:hover:bg-zinc-50 rounded-3xl group">
219+
<div className="text-left">
220+
<h2 className="text-2xl font-bold mb-1 text-zinc-900 dark:text-zinc-900">{title}</h2>
221+
{description && (
222+
<div className="text-sm text-zinc-600 dark:text-zinc-600">
223+
{description}
224+
</div>
225+
)}
226+
</div>
227+
<div className="bg-zinc-100 dark:bg-zinc-100 rounded-full p-2.5 group-hover:bg-zinc-200 dark:group-hover:bg-zinc-200 transition-colors">
228+
<ChevronDown className="h-5 w-5 -rotate-90 transition-all duration-200 text-zinc-500 dark:text-zinc-500 group-hover:text-zinc-800 dark:group-hover:text-zinc-800" />
229+
</div>
230+
</Link>
231+
</div>
232+
</div>
233+
)
234+
}

‎public/pics/about.jpg‎

2.45 MB
Loading

‎public/pics/about.png‎

14.4 MB
Loading

‎public/pics/friends/.gitkeep‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+

‎public/pics/music/.gitkeep‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+

0 commit comments

Comments
 (0)