Skip to content

Commit 9a68657

Browse files
yizhuoliangyizhuoliang
committed
more spacing, move contacts
1 parent ba97727 commit 9a68657

File tree

2 files changed

+34
-33
lines changed

2 files changed

+34
-33
lines changed

‎app/page.tsx

+26-25
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import { ExpandableSection } from "@/components/expandable-section"
44

55
export default function Home() {
66
return (
7-
<main className="min-h-screen p-4 md:p-8 bg-zinc-100">
7+
<main className="min-h-screen p-4 md:p-8 bg-zinc-100 dark:bg-zinc-100">
88
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 xl:max-w-6xl">
9-
<div className="flex flex-col md:flex-row md:gap-12">
9+
<div className="flex flex-col md:flex-row md:gap-16">
1010
{/* Left column: Namecard and Photo */}
1111
<div className="md:w-[30%] md:sticky md:top-8 md:self-start">
1212
<div className="mb-8 flex flex-col gap-8">
@@ -18,18 +18,8 @@ export default function Home() {
1818
</div>
1919
</Card>
2020

21-
{/* Contact Card */}
22-
<Card className="overflow-hidden bg-gradient-to-r from-zinc-800 to-zinc-900 shadow-lg border-none">
23-
<div className="p-5 text-white">
24-
<div className="flex flex-wrap gap-3 text-xs text-zinc-400">
25-
<a href="mailto:[email protected]" className="hover:text-white rounded-full px-3 py-1.5 bg-zinc-800 hover:bg-zinc-700 transition-colors">[email protected]</a>
26-
<a href="https://github.com/yizhuoliang" className="hover:text-white rounded-full px-3 py-1.5 bg-zinc-800 hover:bg-zinc-700 transition-colors">github.com/yizhuoliang</a>
27-
</div>
28-
</div>
29-
</Card>
30-
3121
{/* Photo */}
32-
<Card className="w-full h-48 md:h-auto md:aspect-square overflow-hidden shadow-lg border-none">
22+
<Card className="w-full h-48 md:h-auto md:aspect-square overflow-hidden shadow-lg border-none dark:border-zinc-200">
3323
<Image
3424
src="/pics/coulson-faker.jpg"
3525
alt="Yizhuo Liang"
@@ -38,15 +28,26 @@ export default function Home() {
3828
className="object-cover w-full h-full transition-transform hover:scale-105 duration-300"
3929
/>
4030
</Card>
31+
32+
{/* Contact Card */}
33+
<Card className="bg-white border border-zinc-100 dark:bg-white dark:border-zinc-100">
34+
<div className="p-6">
35+
<h3 className="text-sm font-medium mb-3 text-zinc-700 dark:text-zinc-700">Contact</h3>
36+
<div className="flex flex-wrap gap-3">
37+
<a href="mailto:[email protected]" className="text-xs rounded-full px-3 py-1.5 bg-zinc-100 text-zinc-800 hover:bg-zinc-200 transition-colors dark:bg-zinc-100 dark:text-zinc-800 dark:hover:bg-zinc-200">[email protected]</a>
38+
<a href="https://github.com/yizhuoliang" className="text-xs rounded-full px-3 py-1.5 bg-zinc-100 text-zinc-800 hover:bg-zinc-200 transition-colors dark:bg-zinc-100 dark:text-zinc-800 dark:hover:bg-zinc-200">github.com/yizhuoliang</a>
39+
</div>
40+
</div>
41+
</Card>
4142
</div>
4243
</div>
4344

4445
{/* Right column: Bio and Expandable sections */}
4546
<div className="md:w-[70%]">
4647
{/* Bio Section */}
47-
<Card className="mb-8 bg-white border border-zinc-100">
48+
<Card className="mb-8 bg-white border border-zinc-100 dark:bg-white dark:border-zinc-100">
4849
<div className="p-6">
49-
<p className="text-sm text-zinc-700 leading-relaxed">
50+
<p className="text-sm text-zinc-700 leading-relaxed dark:text-zinc-700">
5051
Hi, I'm an incoming PhD at University of Southern California, advised by Professor Seo Jin Park. I have a broad interest of distributed and operating systems.
5152
</p>
5253
</div>
@@ -102,9 +103,9 @@ export default function Home() {
102103
July 2024 - Present
103104
</p>
104105
<ul className="mt-3 space-y-3 pl-5 text-sm">
105-
<li className="rounded-lg bg-zinc-50 p-2.5 border border-zinc-100 shadow-sm">Built a tool for monitoring application performance and profiling resource usage at microsecond scale.</li>
106-
<li className="rounded-lg bg-zinc-50 p-2.5 border border-zinc-100 shadow-sm">Achieved less than 10% runtime overhead while identifying lock contention, interference, and hardware resource bottlenecks.</li>
107-
<li className="rounded-lg bg-zinc-50 p-2.5 border border-zinc-100 shadow-sm">Investigating memory bandwidth contention and resource demand heterogeneity.</li>
106+
<li className="rounded-lg bg-zinc-50 p-2.5 border border-zinc-100 shadow-sm dark:bg-zinc-50 dark:text-zinc-800 dark:border-zinc-100">Built a tool for monitoring application performance and profiling resource usage at microsecond scale.</li>
107+
<li className="rounded-lg bg-zinc-50 p-2.5 border border-zinc-100 shadow-sm dark:bg-zinc-50 dark:text-zinc-800 dark:border-zinc-100">Achieved less than 10% runtime overhead while identifying lock contention, interference, and hardware resource bottlenecks.</li>
108+
<li className="rounded-lg bg-zinc-50 p-2.5 border border-zinc-100 shadow-sm dark:bg-zinc-50 dark:text-zinc-800 dark:border-zinc-100">Investigating memory bandwidth contention and resource demand heterogeneity.</li>
108109
</ul>
109110
</div>
110111

@@ -117,10 +118,10 @@ export default function Home() {
117118
June 2023 - June 2024
118119
</p>
119120
<ul className="mt-3 space-y-3 pl-5 text-sm">
120-
<li className="rounded-lg bg-zinc-50 p-2.5 border border-zinc-100 shadow-sm">Built a Software Fault Isolation system for process-level sandboxing.</li>
121-
<li className="rounded-lg bg-zinc-50 p-2.5 border border-zinc-100 shadow-sm">Implemented a library OS with fast inter-process communications.</li>
122-
<li className="rounded-lg bg-zinc-50 p-2.5 border border-zinc-100 shadow-sm">Made benchmarks 75-200% faster than native Linux.</li>
123-
<li className="rounded-lg bg-zinc-50 p-2.5 border border-zinc-100 shadow-sm">Led transition to WASM runtimes and ported glibc to WASM.</li>
121+
<li className="rounded-lg bg-zinc-50 p-2.5 border border-zinc-100 shadow-sm dark:bg-zinc-50 dark:text-zinc-800 dark:border-zinc-100">Built a Software Fault Isolation system for process-level sandboxing.</li>
122+
<li className="rounded-lg bg-zinc-50 p-2.5 border border-zinc-100 shadow-sm dark:bg-zinc-50 dark:text-zinc-800 dark:border-zinc-100">Implemented a library OS with fast inter-process communications.</li>
123+
<li className="rounded-lg bg-zinc-50 p-2.5 border border-zinc-100 shadow-sm dark:bg-zinc-50 dark:text-zinc-800 dark:border-zinc-100">Made benchmarks 75-200% faster than native Linux.</li>
124+
<li className="rounded-lg bg-zinc-50 p-2.5 border border-zinc-100 shadow-sm dark:bg-zinc-50 dark:text-zinc-800 dark:border-zinc-100">Led transition to WASM runtimes and ported glibc to WASM.</li>
124125
</ul>
125126
</div>
126127
</div>
@@ -134,7 +135,7 @@ export default function Home() {
134135
{["Go", "C", "Rust", "Python", "Java", "Coq"].map((skill) => (
135136
<span
136137
key={skill}
137-
className="rounded-full bg-zinc-100 px-4 py-2 text-xs font-medium text-zinc-800 border border-zinc-200 shadow-sm"
138+
className="rounded-full bg-zinc-100 px-4 py-2 text-xs font-medium text-zinc-800 border border-zinc-200 shadow-sm dark:bg-zinc-100 dark:text-zinc-800 dark:border-zinc-200"
138139
>
139140
{skill}
140141
</span>
@@ -149,7 +150,7 @@ export default function Home() {
149150
{["Go", "C", "Rust", "Python", "Java", "Coq"].map((skill) => (
150151
<span
151152
key={skill}
152-
className="rounded-full bg-zinc-100 px-4 py-2 text-sm font-medium text-zinc-800 border border-zinc-200 shadow-sm"
153+
className="rounded-full bg-zinc-100 px-4 py-2 text-sm font-medium text-zinc-800 border border-zinc-200 shadow-sm dark:bg-zinc-100 dark:text-zinc-800 dark:border-zinc-200"
153154
>
154155
{skill}
155156
</span>
@@ -170,7 +171,7 @@ export default function Home() {
170171
].map((skill) => (
171172
<span
172173
key={skill}
173-
className="rounded-full bg-zinc-200 px-4 py-2 text-sm font-medium text-zinc-800 border border-zinc-300 shadow-sm"
174+
className="rounded-full bg-zinc-200 px-4 py-2 text-sm font-medium text-zinc-800 border border-zinc-300 shadow-sm dark:bg-zinc-200 dark:text-zinc-800 dark:border-zinc-300"
174175
>
175176
{skill}
176177
</span>

‎components/expandable-section.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,16 @@ export function ExpandableSection({ title, children, defaultExpanded = false, su
1616

1717
return (
1818
<div className="mb-8">
19-
<div className="rounded-3xl bg-white border border-zinc-100">
19+
<div className="rounded-3xl bg-white border border-zinc-100 dark:bg-white dark:border-zinc-100">
2020
<button
2121
onClick={() => setIsExpanded(!isExpanded)}
22-
className="flex w-full items-start justify-between p-6 transition-all duration-200 hover:bg-zinc-50 rounded-3xl group"
22+
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"
2323
>
2424
<div className="text-left">
25-
<h2 className="text-xl font-semibold mb-2">{title}</h2>
25+
<h2 className="text-xl font-semibold mb-2 text-zinc-900 dark:text-zinc-900">{title}</h2>
2626
{!isExpanded && summary && (
2727
<div
28-
className="text-sm text-zinc-600 transition-all duration-200 ease-in-out"
28+
className="text-sm text-zinc-600 dark:text-zinc-600 transition-all duration-200 ease-in-out"
2929
style={{
3030
opacity: isExpanded ? 0 : 1,
3131
transform: isExpanded ? 'translateY(-8px)' : 'translateY(0)',
@@ -35,19 +35,19 @@ export function ExpandableSection({ title, children, defaultExpanded = false, su
3535
</div>
3636
)}
3737
</div>
38-
<div className="bg-zinc-100 rounded-full p-2.5 group-hover:bg-zinc-200 transition-colors">
38+
<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">
3939
<ChevronDown
4040
className={cn(
41-
"h-5 w-5 transform transition-all duration-200 text-zinc-500 group-hover:text-zinc-800",
41+
"h-5 w-5 transform transition-all duration-200 text-zinc-500 dark:text-zinc-500 group-hover:text-zinc-800 dark:group-hover:text-zinc-800",
4242
isExpanded ? "rotate-180" : ""
4343
)}
4444
/>
4545
</div>
4646
</button>
4747
<div
4848
className={cn(
49-
"overflow-hidden transition-all duration-200 ease-in-out border-t",
50-
isExpanded ? "max-h-[2000px] opacity-100" : "max-h-0 opacity-0 border-transparent"
49+
"overflow-hidden transition-all duration-200 ease-in-out border-t border-zinc-100 dark:border-zinc-100",
50+
isExpanded ? "max-h-[2000px] opacity-100" : "max-h-0 opacity-0 border-transparent dark:border-transparent"
5151
)}
5252
>
5353
<div className="p-6 rounded-b-3xl">{children}</div>

0 commit comments

Comments
 (0)