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

View File

@@ -14,7 +14,7 @@ export default function CVPage() {
<div className="space-y-6"> <div className="space-y-6">
<section className="prose prose-zinc dark:prose-invert max-w-none"> <section className="prose prose-zinc dark:prose-invert max-w-none">
<h1 className="text-2xl font-bold">Curriculum Vitae 📄</h1> <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. My academic and professional experience in computer science, robotics, and engineering.
</p> </p>
</section> </section>
@@ -30,7 +30,7 @@ export default function CVPage() {
<object <object
data="/cv.pdf" data="/cv.pdf"
type="application/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> <Card>
<CardHeader className="pb-2"> <CardHeader className="pb-2">
@@ -65,7 +65,7 @@ export default function CVPage() {
<object <object
data="/resume.pdf" data="/resume.pdf"
type="application/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> <Card>

View File

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

View File

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