Update layout

src/app/articles/page.tsx

@@ -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,9 +32,18 @@ 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>
@@ -38,7 +51,14 @@ export default function ArticlesPage() {
                         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) => (
+                {loading ? (
+                    <>
+                        <CardSkeleton />
+                        <CardSkeleton />
+                        <CardSkeleton />
+                    </>
+                ) : (
+                    articles.map((article, index) => (
                         <Card key={index}>
                             <CardHeader>
                                 <div className="flex items-center justify-between">
@@ -62,7 +82,8 @@ export default function ArticlesPage() {
                                 </p>
                             </CardContent>
                         </Card>
-                ))}
+                    ))
+                )}
             </section>
         </div>
     );

src/app/cv/page.tsx

@@ -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>

src/app/projects/page.tsx

@@ -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>

src/app/publications/page.tsx

@@ -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>