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 { 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>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user