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

Improve article and publication card layouts for responsiveness

Browse Source
This commit is contained in:
Sean O'Connor
2025-08-01 17:40:28 -04:00
parent c288ee91e6
commit 178e8f37eb
2 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/articles/page.tsx
View File

@@ -1,6 +1,7 @@
"use client"; "use client";
import { ArrowUpRight, Newspaper } from "lucide-react"; import { ArrowUpRight, Newspaper } from "lucide-react";
import { Button } from "~/components/ui/button";
import Link from "next/link"; import Link from "next/link";
import { import {
Card, Card,
@@ -54,25 +55,35 @@ export default function ArticlesPage() {
> >
<Card> <Card>
<CardHeader> <CardHeader>
<div className="flex items-center justify-between"> <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<CardTitle>{article.title}</CardTitle> <CardTitle>{article.title}</CardTitle>
<Link <Link
href={article.link} href={article.link}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="text-muted-foreground hover:text-primary" className="hidden items-center gap-1 text-sm text-muted-foreground hover:text-primary sm:flex sm:flex-shrink-0"
> >
<ArrowUpRight className="h-5 w-5" /> Read Article
<ArrowUpRight className="h-4 w-4" />
</Link> </Link>
</div> </div>
<CardDescription className="text-sm text-muted-foreground"> <CardDescription className="text-sm text-muted-foreground">
Written by {article.author}, found in {article.source}. Written by {article.author}, found in {article.source}.
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="space-y-4">
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{article.description} {article.description}
</p> </p>
<Link
href={article.link}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary sm:hidden"
>
Read Article
<ArrowUpRight className="h-4 w-4" />
</Link>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>

4
src/app/publications/page.tsx
View File

@@ -110,14 +110,14 @@ export default function PublicationsPage() {
> >
<Card> <Card>
<CardHeader className="pb-2"> <CardHeader className="pb-2">
<div className="flex items-center justify-between"> <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<CardTitle>{pub.title}</CardTitle> <CardTitle>{pub.title}</CardTitle>
{pub.paperUrl && ( {pub.paperUrl && (
<Link <Link
href={pub.paperUrl} href={pub.paperUrl}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="text-muted-foreground hover:text-primary" className="text-muted-foreground hover:text-primary sm:flex-shrink-0"
> >
<ArrowUpRight className="h-5 w-5" /> <ArrowUpRight className="h-5 w-5" />
</Link> </Link>