Update layout

This commit is contained in:
2024-10-28 23:52:54 -07:00
parent c04a6ce660
commit 8528bab599
4 changed files with 58 additions and 37 deletions

View File

@@ -1,6 +1,10 @@
"use client"
import { ArrowUpRight } from 'lucide-react';
import Link from "next/link";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
import { CardSkeleton } from "~/components/ui/skeletons";
import { useState, useEffect } from 'react';
const articles = [
{
@@ -28,41 +32,58 @@ const articles = [
];
export default function ArticlesPage() {
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchArticles = async () => {
await new Promise(resolve => setTimeout(resolve, 0));
setLoading(false);
};
fetchArticles();
}, []);
return (
<div className="space-y-12">
{/* Articles Section */}
<section className="space-y-6">
<div>
<h1 className="text-2xl font-bold">In the Media 🗞</h1>
<p className="text-lg text-muted-foreground mt-2">
I have been lucky enough to have a few wonderful articles written about me and my work. Go check them out!
</p>
</div>
{articles.map((article, index) => (
<Card key={index}>
<CardHeader>
<div className="flex items-center justify-between">
<CardTitle>{article.title}</CardTitle>
<Link
href={article.link}
target="_blank"
rel="noopener noreferrer"
className="text-muted-foreground hover:text-primary"
>
<ArrowUpRight className="h-5 w-5" />
</Link>
</div>
<CardDescription className="text-sm text-muted-foreground">
Written by {article.author}, found in {article.source}.
</CardDescription>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground">
{article.description}
</p>
</CardContent>
</Card>
))}
<div>
<h1 className="text-2xl font-bold">In the Media 🗞</h1>
<p className="text-lg text-muted-foreground mt-2">
I have been lucky enough to have a few wonderful articles written about me and my work. Go check them out!
</p>
</div>
{loading ? (
<>
<CardSkeleton />
<CardSkeleton />
<CardSkeleton />
</>
) : (
articles.map((article, index) => (
<Card key={index}>
<CardHeader>
<div className="flex items-center justify-between">
<CardTitle>{article.title}</CardTitle>
<Link
href={article.link}
target="_blank"
rel="noopener noreferrer"
className="text-muted-foreground hover:text-primary"
>
<ArrowUpRight className="h-5 w-5" />
</Link>
</div>
<CardDescription className="text-sm text-muted-foreground">
Written by {article.author}, found in {article.source}.
</CardDescription>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground">
{article.description}
</p>
</CardContent>
</Card>
))
)}
</section>
</div>
);

View File

@@ -14,7 +14,7 @@ export default function CVPage() {
<div className="space-y-6">
<section className="prose prose-zinc dark:prose-invert max-w-none">
<h1 className="text-2xl font-bold">Curriculum Vitae 📄</h1>
<p className="text-lg text-muted-foreground">
<p className="text-lg text-muted-foreground mt-2">
My academic and professional experience in computer science, robotics, and engineering.
</p>
</section>
@@ -30,7 +30,7 @@ export default function CVPage() {
<object
data="/cv.pdf"
type="application/pdf"
className="w-full h-[calc(100vh-20.5rem)] lg:h-[calc(100vh-18rem)]"
className="w-full h-[calc(100vh-21rem)] lg:h-[calc(100vh-18rem)]"
>
<Card>
<CardHeader className="pb-2">
@@ -65,7 +65,7 @@ export default function CVPage() {
<object
data="/resume.pdf"
type="application/pdf"
className="w-full h-[calc(100vh-20.5rem)] lg:h-[calc(100vh-18rem)]"
className="w-full h-[calc(100vh-21rem)] lg:h-[calc(100vh-18rem)]"
>
<Card>

View File

@@ -20,7 +20,7 @@ export default function ProjectsPage() {
<div className="space-y-6">
<section className="prose prose-zinc dark:prose-invert max-w-none">
<h1 className="text-2xl font-bold">Featured Projects 🌟</h1>
<p className="text-lg text-muted-foreground">
<p className="text-lg text-muted-foreground mt-2">
A selection of my academic and professional projects, focusing on robotics,
web development, and embedded systems.
</p>

View File

@@ -61,7 +61,7 @@ export default function PublicationsPage() {
<div className="space-y-6">
<section className="prose prose-zinc dark:prose-invert max-w-none">
<h1 className="text-2xl font-bold">Publications 📚</h1>
<p className="text-lg text-muted-foreground">
<p className="text-lg text-muted-foreground mt-2">
My research publications in human-robot interaction and robotics.
</p>
</section>