Skip to content

Commit 61b6fef

Browse files
yizhuoliangyizhuoliang
committed
try more fix mobile layout
1 parent 48e6fe1 commit 61b6fef

File tree

1 file changed

+44
-46
lines changed

1 file changed

+44
-46
lines changed

‎app/page.tsx‎

Lines changed: 44 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -8,53 +8,51 @@ export default function Home() {
88
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 xl:max-w-6xl">
99
<div className="flex flex-col md:flex-row md:gap-16">
1010
{/* Left column: Namecard and Photo */}
11-
<div className="md:w-[30%] md:sticky md:top-8 md:self-start">
12-
<div className="flex flex-col md:h-full" style={{ minHeight: "0" }}>
13-
<div className="flex flex-col gap-6 md:gap-8 mb-4 md:mb-8">
14-
{/* Namecard */}
15-
<Card className="overflow-hidden bg-gradient-to-r from-zinc-800 to-zinc-900 shadow-lg border-none">
16-
<div className="p-8 text-white">
17-
<h1 className="mb-2 text-3xl font-bold">Yizhuo Liang (Coulson)</h1>
18-
<p className="text-zinc-300">CS PhD Student @USC</p>
19-
</div>
20-
</Card>
21-
22-
{/* Photo */}
23-
<Card className="w-full h-48 md:h-auto md:aspect-square overflow-hidden shadow-lg border-none dark:border-zinc-200">
24-
<Image
25-
src="/pics/coulson-faker.jpg"
26-
alt="Yizhuo Liang"
27-
width={400}
28-
height={400}
29-
priority
30-
className="object-cover w-full h-full transition-transform hover:scale-105 duration-300"
31-
/>
32-
</Card>
33-
34-
{/* Contact Card */}
35-
<Card className="bg-white border border-zinc-100 dark:bg-white dark:border-zinc-100">
36-
<div className="p-5">
37-
<div className="space-y-1.5">
38-
<div className="flex items-center gap-2">
39-
<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"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
40-
<a href="mailto:[email protected]" className="text-xs text-zinc-800 hover:text-zinc-950 dark:text-zinc-800 dark:hover:text-zinc-950">[email protected]</a>
41-
</div>
42-
<div className="flex items-center gap-2">
43-
<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"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>
44-
<a href="https://github.com/yizhuoliang" className="text-xs text-zinc-800 hover:text-zinc-950 dark:text-zinc-800 dark:hover:text-zinc-950">github.com/yizhuoliang</a>
45-
</div>
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+
{/* Namecard */}
14+
<Card className="overflow-hidden bg-gradient-to-r from-zinc-800 to-zinc-900 shadow-lg border-none">
15+
<div className="p-8 text-white">
16+
<h1 className="mb-2 text-3xl font-bold">Yizhuo Liang (Coulson)</h1>
17+
<p className="text-zinc-300">CS PhD Student @USC</p>
18+
</div>
19+
</Card>
20+
21+
{/* Photo */}
22+
<Card className="w-full h-48 md:h-auto md:aspect-square overflow-hidden shadow-lg border-none dark:border-zinc-200">
23+
<Image
24+
src="/pics/coulson-faker.jpg"
25+
alt="Yizhuo Liang"
26+
width={400}
27+
height={400}
28+
priority
29+
className="object-cover w-full h-full transition-transform hover:scale-105 duration-300"
30+
/>
31+
</Card>
32+
33+
{/* Contact Card */}
34+
<Card className="bg-white border border-zinc-100 dark:bg-white dark:border-zinc-100">
35+
<div className="p-5">
36+
<div className="space-y-1.5">
37+
<div className="flex items-center gap-2">
38+
<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"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
39+
<a href="mailto:[email protected]" className="text-xs text-zinc-800 hover:text-zinc-950 dark:text-zinc-800 dark:hover:text-zinc-950">[email protected]</a>
40+
</div>
41+
<div className="flex items-center gap-2">
42+
<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"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>
43+
<a href="https://github.com/yizhuoliang" className="text-xs text-zinc-800 hover:text-zinc-950 dark:text-zinc-800 dark:hover:text-zinc-950">github.com/yizhuoliang</a>
4644
</div>
4745
</div>
48-
</Card>
49-
</div>
50-
51-
{/* Footer with copyright - desktop only */}
52-
<div className="hidden md:block mt-auto text-center text-[10px] text-zinc-400 mb-4">
53-
<p>© 2025 Yizhuo Liang</p>
54-
<p className="mt-1">
55-
Hosted on GitHub, welcome to fork my <a href="https://github.com/yizhuoliang/yizhuoliang.github.io" className="hover:text-zinc-600 transition-colors">page</a>.
56-
</p>
57-
</div>
46+
</div>
47+
</Card>
48+
</div>
49+
50+
{/* Footer with copyright - desktop only */}
51+
<div className="hidden md:block text-center text-[10px] text-zinc-400 mb-4">
52+
<p>© 2025 Yizhuo Liang</p>
53+
<p className="mt-1">
54+
Hosted on GitHub, welcome to fork my <a href="https://github.com/yizhuoliang/yizhuoliang.github.io" className="hover:text-zinc-600 transition-colors">page</a>.
55+
</p>
5856
</div>
5957
</div>
6058

@@ -200,7 +198,7 @@ export default function Home() {
200198
</div>
201199

202200
{/* Mobile-only footer */}
203-
<div className="block md:hidden mt-4 mb-4 text-center text-[10px] text-zinc-400">
201+
<div className="block md:hidden mt-8 mb-4 text-center text-[10px] text-zinc-400">
204202
<p>© 2025 Yizhuo Liang</p>
205203
<p className="mt-1">
206204
Hosted on GitHub, welcome to fork my <a href="https://github.com/yizhuoliang/yizhuoliang.github.io" className="hover:text-zinc-600 transition-colors">page</a>.

0 commit comments

Comments
 (0)