soconnor/personal-website
1
0
Fork 0
mirror of https://github.com/soconnor0919/personal-website.git synced 2025-12-15 08:14:43 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add equal height card styling and layout improvements

Browse Source
This commit is contained in:
Sean O'Connor
2025-08-01 03:23:55 -04:00
parent 08539b8a53
commit d0db4bec08
6 changed files with 94 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/app/page.tsx
View File

@@ -65,9 +65,9 @@ export default function HomePage() {
{/* Current Focus */} {/* Current Focus */}
<section className="animate-fade-in-up space-y-6"> <section className="animate-fade-in-up space-y-6">
<h2 className="text-2xl font-bold">Current Focus</h2> <h2 className="text-2xl font-bold">Current Focus</h2>
<div className="grid gap-6 md:grid-cols-2"> <div className="grid-equal-height grid gap-6 md:grid-cols-2">
<div className="animate-fade-in-up-delay-1"> <div className="animate-fade-in-up-delay-1">
<Card className="card-hover"> <Card className="card-hover card-full-height">
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<FlaskConical className="h-5 w-5" /> <FlaskConical className="h-5 w-5" />
@@ -76,7 +76,7 @@ export default function HomePage() {
</CardTitle> </CardTitle>
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="pt-0"> <CardContent className="card-content-stretch pt-0">
<p className="text-muted-foreground"> <p className="text-muted-foreground">
Developing a web-based platform for HRI experiments that Developing a web-based platform for HRI experiments that
addresses reproducibility challenges in Wizard-of-Oz studies. addresses reproducibility challenges in Wizard-of-Oz studies.
@@ -88,14 +88,14 @@ export default function HomePage() {
</div> </div>
<div className="animate-fade-in-up-delay-2"> <div className="animate-fade-in-up-delay-2">
<Card className="card-hover"> <Card className="card-hover card-full-height">
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<GraduationCap className="h-5 w-5" /> <GraduationCap className="h-5 w-5" />
<CardTitle className="mb-1">Academic Excellence</CardTitle> <CardTitle className="mb-1">Academic Excellence</CardTitle>
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="pt-0"> <CardContent className="card-content-stretch pt-0">
<p className="text-muted-foreground"> <p className="text-muted-foreground">
Bachelor of Science in Computer Science and Engineering at Bachelor of Science in Computer Science and Engineering at
Bucknell University. 3.86 Engineering GPA, Dean&apos;s List Bucknell University. 3.86 Engineering GPA, Dean&apos;s List
@@ -112,7 +112,7 @@ export default function HomePage() {
<h2 className="text-2xl font-bold">Experience Highlights</h2> <h2 className="text-2xl font-bold">Experience Highlights</h2>
<div className="space-y-6"> <div className="space-y-6">
<div className="animate-fade-in-up-delay-1"> <div className="animate-fade-in-up-delay-1">
<Card className="card-hover"> <Card className="card-hover card-full-height">
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
@@ -192,13 +192,13 @@ export default function HomePage() {
<Code className="h-6 w-6" /> <Code className="h-6 w-6" />
Technical Skills Technical Skills
</h2> </h2>
<div className="grid gap-6 md:grid-cols-2"> <div className="grid-equal-height grid gap-6 md:grid-cols-2">
<div className="animate-fade-in-up-delay-1"> <div className="animate-fade-in-up-delay-1">
<Card className="card-hover"> <Card className="card-hover card-full-height">
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<CardTitle className="mb-1">Languages & Frameworks</CardTitle> <CardTitle className="mb-1">Languages & Frameworks</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="pt-0"> <CardContent className="card-content-stretch pt-0">
<p className="text-muted-foreground"> <p className="text-muted-foreground">
Java, C/C++, Python, JavaScript/TypeScript, React, Next.js, Java, C/C++, Python, JavaScript/TypeScript, React, Next.js,
PHP, SQL PHP, SQL
@@ -208,11 +208,11 @@ export default function HomePage() {
</div> </div>
<div className="animate-fade-in-up-delay-2"> <div className="animate-fade-in-up-delay-2">
<Card className="card-hover"> <Card className="card-hover card-full-height">
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<CardTitle className="mb-1">Backend & DevOps</CardTitle> <CardTitle className="mb-1">Backend & DevOps</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="pt-0"> <CardContent className="card-content-stretch pt-0">
<p className="text-muted-foreground"> <p className="text-muted-foreground">
REST APIs, MySQL, PostgreSQL, Docker, Apache Web Server, REST APIs, MySQL, PostgreSQL, Docker, Apache Web Server,
NGINX, ROS2 NGINX, ROS2
@@ -222,11 +222,11 @@ export default function HomePage() {
</div> </div>
<div className="animate-fade-in-up-delay-3"> <div className="animate-fade-in-up-delay-3">
<Card className="card-hover"> <Card className="card-hover card-full-height">
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<CardTitle className="mb-1">Cloud & Infrastructure</CardTitle> <CardTitle className="mb-1">Cloud & Infrastructure</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="pt-0"> <CardContent className="card-content-stretch pt-0">
<p className="text-muted-foreground"> <p className="text-muted-foreground">
AWS, GCP, Azure, Backblaze, Linux (RHEL/Debian), CI/CD AWS, GCP, Azure, Backblaze, Linux (RHEL/Debian), CI/CD
</p> </p>
@@ -235,11 +235,11 @@ export default function HomePage() {
</div> </div>
<div className="animate-fade-in-up-delay-4"> <div className="animate-fade-in-up-delay-4">
<Card className="card-hover"> <Card className="card-hover card-full-height">
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<CardTitle className="mb-1">Development Tools</CardTitle> <CardTitle className="mb-1">Development Tools</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="pt-0"> <CardContent className="card-content-stretch pt-0">
<p className="text-muted-foreground"> <p className="text-muted-foreground">
Git, JetBrains Suite, VS Code, Cursor, Linux CLI Git, JetBrains Suite, VS Code, Cursor, Linux CLI
</p> </p>
@@ -255,9 +255,9 @@ export default function HomePage() {
<Users className="h-6 w-6" /> <Users className="h-6 w-6" />
Leadership & Activities Leadership & Activities
</h2> </h2>
<div className="grid gap-6 md:grid-cols-2"> <div className="grid-equal-height grid gap-6 md:grid-cols-2">
<div className="animate-fade-in-up-delay-1"> <div className="animate-fade-in-up-delay-1">
<Card className="card-hover"> <Card className="card-hover card-full-height">
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<CardTitle className="mb-1"> <CardTitle className="mb-1">
AIChE Chem-E-Car Competition Team AIChE Chem-E-Car Competition Team
@@ -266,7 +266,7 @@ export default function HomePage() {
Former President, Electrical and Mechanical Team Lead Former President, Electrical and Mechanical Team Lead
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="pt-0"> <CardContent className="card-content-stretch pt-0">
<p className="text-muted-foreground"> <p className="text-muted-foreground">
Pioneered team&apos;s first custom hardware solution by Pioneered team&apos;s first custom hardware solution by
designing and fabricating a microcontroller-based control designing and fabricating a microcontroller-based control
@@ -278,12 +278,12 @@ export default function HomePage() {
</div> </div>
<div className="animate-fade-in-up-delay-2"> <div className="animate-fade-in-up-delay-2">
<Card className="card-hover"> <Card className="card-hover card-full-height">
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<CardTitle className="mb-1">Bucknell Coffee Society</CardTitle> <CardTitle className="mb-1">Bucknell Coffee Society</CardTitle>
<CardDescription>Treasurer</CardDescription> <CardDescription>Treasurer</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="pt-0"> <CardContent className="card-content-stretch pt-0">
<p className="text-muted-foreground"> <p className="text-muted-foreground">
Co-established and launched a new campus organization, Co-established and launched a new campus organization,
managing financial operations and coordinating event managing financial operations and coordinating event
@@ -294,12 +294,12 @@ export default function HomePage() {
</div> </div>
<div className="animate-fade-in-up-delay-3"> <div className="animate-fade-in-up-delay-3">
<Card className="card-hover"> <Card className="card-hover card-full-height">
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<CardTitle className="mb-1">RoboLab@Bucknell</CardTitle> <CardTitle className="mb-1">RoboLab@Bucknell</CardTitle>
<CardDescription>Founding Member</CardDescription> <CardDescription>Founding Member</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="pt-0"> <CardContent className="card-content-stretch pt-0">
<p className="text-muted-foreground"> <p className="text-muted-foreground">
Led and participated in group discussions in a new lab Led and participated in group discussions in a new lab
bridging computer science and psychology perspectives on bridging computer science and psychology perspectives on
@@ -315,12 +315,12 @@ export default function HomePage() {
{/* Quick Links */} {/* Quick Links */}
<section className="animate-fade-in-up space-y-6"> <section className="animate-fade-in-up space-y-6">
<h2 className="text-2xl font-bold">Explore More</h2> <h2 className="text-2xl font-bold">Explore More</h2>
<div className="grid gap-4 md:grid-cols-3"> <div className="grid-equal-height grid gap-4 md:grid-cols-3">
<div className="animate-fade-in-up-delay-1"> <div className="animate-fade-in-up-delay-1">
<Card className="card-hover group cursor-pointer transition-colors hover:bg-accent"> <Card className="card-hover card-full-height group cursor-pointer transition-colors hover:bg-accent">
<Link href="/publications" className="block p-4"> <Link href="/publications" className="block h-full p-4">
<CardContent className="p-0"> <CardContent className="card-content-stretch p-0">
<div className="flex items-center justify-between"> <div className="flex h-full items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<FlaskConical className="h-6 w-6 text-primary" /> <FlaskConical className="h-6 w-6 text-primary" />
<div> <div>
@@ -338,10 +338,10 @@ export default function HomePage() {
</div> </div>
<div className="animate-fade-in-up-delay-2"> <div className="animate-fade-in-up-delay-2">
<Card className="card-hover group cursor-pointer transition-colors hover:bg-accent"> <Card className="card-hover card-full-height group cursor-pointer transition-colors hover:bg-accent">
<Link href="/projects" className="block p-4"> <Link href="/projects" className="block h-full p-4">
<CardContent className="p-0"> <CardContent className="card-content-stretch p-0">
<div className="flex items-center justify-between"> <div className="flex h-full items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Code className="h-6 w-6 text-primary" /> <Code className="h-6 w-6 text-primary" />
<div> <div>
@@ -359,10 +359,10 @@ export default function HomePage() {
</div> </div>
<div className="animate-fade-in-up-delay-3"> <div className="animate-fade-in-up-delay-3">
<Card className="card-hover group cursor-pointer transition-colors hover:bg-accent"> <Card className="card-hover card-full-height group cursor-pointer transition-colors hover:bg-accent">
<Link href="/cv" className="block p-4"> <Link href="/cv" className="block h-full p-4">
<CardContent className="p-0"> <CardContent className="card-content-stretch p-0">
<div className="flex items-center justify-between"> <div className="flex h-full items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<GraduationCap className="h-6 w-6 text-primary" /> <GraduationCap className="h-6 w-6 text-primary" />
<div> <div>

32
src/app/projects/accessibility/page.tsx
View File

@@ -88,17 +88,17 @@ export default function AccessibilityPage() {
<section className="animate-fade-in-up-delay-3 space-y-6"> <section className="animate-fade-in-up-delay-3 space-y-6">
<h2 className="text-2xl font-bold">Implemented Features</h2> <h2 className="text-2xl font-bold">Implemented Features</h2>
<div className="grid gap-6 md:grid-cols-2"> <div className="grid-equal-height grid gap-6 md:grid-cols-2">
{/* Image Alt Text */} {/* Image Alt Text */}
<div className="animate-fade-in-up-delay-4 card-hover"> <div className="animate-fade-in-up-delay-4 card-hover">
<Card> <Card className="card-full-height">
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<CardTitle className="flex items-center gap-2"> <CardTitle className="flex items-center gap-2">
<Eye className="h-5 w-5" /> <Eye className="h-5 w-5" />
Image Accessibility Image Accessibility
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="pt-0"> <CardContent className="card-content-stretch pt-0">
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
All images include descriptive alt text for screen readers All images include descriptive alt text for screen readers
</p> </p>
@@ -107,14 +107,14 @@ export default function AccessibilityPage() {
</div> </div>
<div className="animate-fade-in-up-delay-4 card-hover"> <div className="animate-fade-in-up-delay-4 card-hover">
<Card> <Card className="card-full-height">
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<CardTitle className="flex items-center gap-2"> <CardTitle className="flex items-center gap-2">
<Keyboard className="h-5 w-5" /> <Keyboard className="h-5 w-5" />
Keyboard Navigation Keyboard Navigation
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="pt-0"> <CardContent className="card-content-stretch pt-0">
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
Full keyboard support for all interactive elements Full keyboard support for all interactive elements
</p> </p>
@@ -127,16 +127,16 @@ export default function AccessibilityPage() {
{/* Additional Features */} {/* Additional Features */}
<section className="space-y-6"> <section className="space-y-6">
<h2 className="text-2xl font-bold">Additional Features</h2> <h2 className="text-2xl font-bold">Additional Features</h2>
<div className="grid gap-6 md:grid-cols-2"> <div className="grid-equal-height grid gap-6 md:grid-cols-2">
{/* Video Accessibility */} {/* Video Accessibility */}
<Card> <Card className="card-full-height">
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<CardTitle className="flex items-center gap-2"> <CardTitle className="flex items-center gap-2">
<Volume2 className="h-5 w-5" /> <Volume2 className="h-5 w-5" />
Video Accessibility Video Accessibility
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-3 pt-0"> <CardContent className="card-content-stretch space-y-3 pt-0">
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
Custom video player with comprehensive accessibility features. Custom video player with comprehensive accessibility features.
</p> </p>
@@ -158,7 +158,7 @@ export default function AccessibilityPage() {
</Card> </Card>
{/* Semantic HTML */} {/* Semantic HTML */}
<Card> <Card className="card-full-height">
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<CardTitle className="flex items-center gap-2"> <CardTitle className="flex items-center gap-2">
<Globe className="h-5 w-5" /> <Globe className="h-5 w-5" />
@@ -225,7 +225,7 @@ export default function AccessibilityPage() {
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<CardTitle>Custom Components</CardTitle> <CardTitle>Custom Components</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="pt-0"> <CardContent className="card-content-stretch pt-0">
<p className="mb-3 text-sm text-muted-foreground"> <p className="mb-3 text-sm text-muted-foreground">
Built custom accessible components to ensure consistent user Built custom accessible components to ensure consistent user
experience across the site. experience across the site.
@@ -335,15 +335,15 @@ export default function AccessibilityPage() {
{/* Resources */} {/* Resources */}
<section className="space-y-4"> <section className="space-y-4">
<h2 className="text-2xl font-bold">Accessibility Resources</h2> <h2 className="text-2xl font-bold">Accessibility Resources</h2>
<div className="grid gap-4 md:grid-cols-2"> <div className="grid-equal-height grid gap-4 md:grid-cols-2">
<Card className="group cursor-pointer transition-colors hover:bg-accent"> <Card className="card-full-height group cursor-pointer transition-colors hover:bg-accent">
<Link <Link
href="https://www.w3.org/WAI/WCAG21/quickref/" href="https://www.w3.org/WAI/WCAG21/quickref/"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="block p-4" className="block p-4"
> >
<CardContent className="p-0"> <CardContent className="card-content-stretch p-0">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<CheckCircle className="h-6 w-6 text-primary" /> <CheckCircle className="h-6 w-6 text-primary" />
@@ -360,14 +360,14 @@ export default function AccessibilityPage() {
</Link> </Link>
</Card> </Card>
<Card className="group cursor-pointer transition-colors hover:bg-accent"> <Card className="card-full-height group cursor-pointer transition-colors hover:bg-accent">
<Link <Link
href="https://webaim.org/" href="https://webaim.org/"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="block p-4" className="block p-4"
> >
<CardContent className="p-0"> <CardContent className="card-content-stretch p-0">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Eye className="h-6 w-6 text-primary" /> <Eye className="h-6 w-6 text-primary" />
@@ -398,7 +398,7 @@ export default function AccessibilityPage() {
with user feedback and updated standards. with user feedback and updated standards.
</p> </p>
<div className="grid gap-4 md:grid-cols-2"> <div className="grid-equal-height grid gap-4 md:grid-cols-2">
<div> <div>
<h3 className="mb-2 font-semibold">Regular Testing</h3> <h3 className="mb-2 font-semibold">Regular Testing</h3>
<ul className="space-y-1 text-sm text-muted-foreground"> <ul className="space-y-1 text-sm text-muted-foreground">

26
src/app/projects/latex-intro/page.tsx
View File

@@ -76,16 +76,16 @@ export default function LatexTutorialPage() {
{/* What You'll Learn */} {/* What You'll Learn */}
<section className="animate-fade-in-up-delay-3 space-y-4"> <section className="animate-fade-in-up-delay-3 space-y-4">
<h2 className="text-2xl font-bold">What You&apos;ll Learn</h2> <h2 className="text-2xl font-bold">What You&apos;ll Learn</h2>
<div className="grid gap-4 md:grid-cols-2"> <div className="grid-equal-height grid gap-4 md:grid-cols-2">
<div className="animate-fade-in-up-delay-4 card-hover"> <div className="animate-fade-in-up-delay-4 card-hover">
<Card> <Card className="card-full-height">
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<CardTitle className="flex items-center gap-2"> <CardTitle className="flex items-center gap-2">
<Play className="h-5 w-5" /> <Play className="h-5 w-5" />
Getting Started Getting Started
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="pt-0"> <CardContent className="card-content-stretch pt-0">
<ul className="space-y-1 text-sm text-muted-foreground"> <ul className="space-y-1 text-sm text-muted-foreground">
<li>• Setting up Overleaf</li> <li>• Setting up Overleaf</li>
<li>• Basic document structure</li> <li>• Basic document structure</li>
@@ -97,14 +97,14 @@ export default function LatexTutorialPage() {
</div> </div>
<div className="animate-fade-in-up-delay-4 card-hover"> <div className="animate-fade-in-up-delay-4 card-hover">
<Card> <Card className="card-full-height">
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<CardTitle className="flex items-center gap-2"> <CardTitle className="flex items-center gap-2">
<Code className="h-5 w-5" /> <Code className="h-5 w-5" />
Core Features Core Features
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="pt-0"> <CardContent className="card-content-stretch pt-0">
<ul className="space-y-1 text-sm text-muted-foreground"> <ul className="space-y-1 text-sm text-muted-foreground">
<li>• Mathematical equations</li> <li>• Mathematical equations</li>
<li>• Document organization</li> <li>• Document organization</li>
@@ -128,7 +128,7 @@ export default function LatexTutorialPage() {
and engineering fields. and engineering fields.
</p> </p>
<div className="grid gap-4 md:grid-cols-2"> <div className="grid-equal-height grid gap-4 md:grid-cols-2">
<div> <div>
<h3 className="mb-2 font-semibold">Academic Excellence</h3> <h3 className="mb-2 font-semibold">Academic Excellence</h3>
<ul className="space-y-1 text-sm text-muted-foreground"> <ul className="space-y-1 text-sm text-muted-foreground">
@@ -153,15 +153,15 @@ export default function LatexTutorialPage() {
{/* Resources */} {/* Resources */}
<section className="animate-fade-in-up-delay-4 space-y-4"> <section className="animate-fade-in-up-delay-4 space-y-4">
<h2 className="text-2xl font-bold">Essential Resources</h2> <h2 className="text-2xl font-bold">Essential Resources</h2>
<div className="grid gap-4 md:grid-cols-3"> <div className="grid-equal-height grid gap-4 md:grid-cols-3">
<Card className="group cursor-pointer transition-colors hover:bg-accent"> <Card className="card-full-height group cursor-pointer transition-colors hover:bg-accent">
<Link <Link
href="https://www.overleaf.com" href="https://www.overleaf.com"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="block p-4" className="block p-4"
> >
<CardContent className="p-0"> <CardContent className="card-content-stretch p-0">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Play className="h-6 w-6 text-primary" /> <Play className="h-6 w-6 text-primary" />
@@ -178,14 +178,14 @@ export default function LatexTutorialPage() {
</Link> </Link>
</Card> </Card>
<Card className="group cursor-pointer transition-colors hover:bg-accent"> <Card className="card-full-height group cursor-pointer transition-colors hover:bg-accent">
<Link <Link
href="https://www.latex-project.org/get/" href="https://www.latex-project.org/get/"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="block p-4" className="block p-4"
> >
<CardContent className="p-0"> <CardContent className="card-content-stretch p-0">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Code className="h-6 w-6 text-primary" /> <Code className="h-6 w-6 text-primary" />
@@ -202,14 +202,14 @@ export default function LatexTutorialPage() {
</Link> </Link>
</Card> </Card>
<Card className="group cursor-pointer transition-colors hover:bg-accent"> <Card className="card-full-height group cursor-pointer transition-colors hover:bg-accent">
<Link <Link
href="https://en.wikibooks.org/wiki/LaTeX" href="https://en.wikibooks.org/wiki/LaTeX"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="block p-4" className="block p-4"
> >
<CardContent className="p-0"> <CardContent className="card-content-stretch p-0">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<BookOpen className="h-6 w-6 text-primary" /> <BookOpen className="h-6 w-6 text-primary" />

6
src/app/projects/page.tsx
View File

@@ -76,7 +76,7 @@ export default function ProjectsPage() {
)} )}
{/* Project Content */} {/* Project Content */}
<div className="flex flex-1 flex-col p-6"> <div className="card-content-stretch flex flex-1 flex-col p-6">
<div className="flex-1 space-y-4"> <div className="flex-1 space-y-4">
<div> <div>
<CardTitle className="text-xl"> <CardTitle className="text-xl">
@@ -148,7 +148,7 @@ export default function ProjectsPage() {
{otherProjects.length > 0 && ( {otherProjects.length > 0 && (
<section className="animate-fade-in-up space-y-6"> <section className="animate-fade-in-up space-y-6">
<h2 className="text-2xl font-bold">Additional Projects</h2> <h2 className="text-2xl font-bold">Additional Projects</h2>
<div className="grid gap-6 md:grid-cols-2"> <div className="grid-equal-height grid gap-6 md:grid-cols-2">
{loading ? ( {loading ? (
<> <>
<CardSkeleton /> <CardSkeleton />
@@ -160,7 +160,7 @@ export default function ProjectsPage() {
key={index} key={index}
className={`animate-fade-in-up-delay-${Math.min(index + 1, 4)} card-hover`} className={`animate-fade-in-up-delay-${Math.min(index + 1, 4)} card-hover`}
> >
<Card className="flex flex-col"> <Card className="card-full-height flex flex-col">
{project.image && ( {project.image && (
<div className="flex h-48 items-center justify-center p-4"> <div className="flex h-48 items-center justify-center p-4">
<Image <Image

18
src/app/travel/page.tsx
View File

@@ -38,7 +38,7 @@ export default function TripsPage() {
</p> </p>
</section> </section>
<div className="animate-fade-in-up-delay-2 grid grid-cols-1 gap-6 md:grid-cols-2"> <div className="animate-fade-in-up-delay-2 grid-equal-height grid grid-cols-1 gap-6 md:grid-cols-2">
{loading ? ( {loading ? (
<> <>
<CardSkeleton /> <CardSkeleton />
@@ -54,7 +54,7 @@ export default function TripsPage() {
key={index} key={index}
className={`animate-fade-in-up-delay-${Math.min(index + 3, 4)} card-hover`} className={`animate-fade-in-up-delay-${Math.min(index + 3, 4)} card-hover`}
> >
<Card className="overflow-hidden rounded-lg"> <Card className="card-full-height overflow-hidden rounded-lg">
<CardHeader className="p-0"> <CardHeader className="p-0">
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex space-x-0 overflow-x-auto"> <div className="flex space-x-0 overflow-x-auto">
@@ -76,12 +76,14 @@ export default function TripsPage() {
</div> </div>
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="card-content-stretch">
<div className="flex flex-col content-between justify-items-start"> <div className="flex flex-1 flex-col">
<CardTitle className="mb-2 mt-6">{trip.title}</CardTitle> <div className="flex-1">
<CardDescription className=""> <CardTitle className="mb-2 mt-6">{trip.title}</CardTitle>
{trip.description} <CardDescription className="">
</CardDescription> {trip.description}
</CardDescription>
</div>
{/* Show badges for tags */} {/* Show badges for tags */}
<div className="mt-4 flex flex-wrap gap-2"> <div className="mt-4 flex flex-wrap gap-2">
{trip.tags.map((tag, tagIndex) => ( {trip.tags.map((tag, tagIndex) => (

17
src/styles/globals.css
View File

@@ -240,6 +240,23 @@ body {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 8px hsl(var(--foreground) / 0.1); box-shadow: 0 4px 8px hsl(var(--foreground) / 0.1);
} }
/* Equal height cards in grid layouts */
.grid-equal-height > * {
height: 100%;
}
.card-full-height {
height: 100%;
display: flex;
flex-direction: column;
}
.card-content-stretch {
flex: 1;
display: flex;
flex-direction: column;
}
} }
@keyframes fadeIn { @keyframes fadeIn {