mirror of
https://github.com/soconnor0919/personal-website.git
synced 2025-12-15 16:24:44 -05:00
Update layout
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user