Add articles section

src/app/articles/page.tsx

@@ -0,0 +1,69 @@
+import { ArrowUpRight } from 'lucide-react';
+import Link from "next/link";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+
+const articles = [
+    {
+        title: "Positively Innovative: Robotics for Good",
+        link: "https://magazine.bucknell.edu/issue/fall-2024/robotics-for-good/",
+        author: "Kate Willard",
+        description: "Sean O’Connor ’26 is using his interest in robotics to fuel forward-thinking research and lead important conversations about the impact robots can have on society.",
+        source: "Bucknell Magazine (Fall 2024)"
+    },
+    {
+        title: "Student Story: Sean O'Connor '26, Computer Science and Engineering",
+        link: "https://www.bucknell.edu/meet-bucknell/bucknell-stories/student-stories/sean-oconnor-26-computer-science-engineering",
+        author: "Sarah Downey",
+        description: "At Bucknell, Sean O'Connor '26 is conducting research to improve the ways robots assist, collaborate and coexist with humans.",
+        source: "Bucknell Student Stories"
+    },
+    {
+        title: "Shaping the Future: Exploring the Social Impact of Robots",
+        link: "https://magazine.bucknell.edu/college-of-engineering/2024-college-report/",
+        author: "Bucknell Publications",
+        description: "RoboLab provides an environment for scholarly and creative conversations.",
+        source: "the Bucknell College of Engineering Report 2024"
+    }
+    // Add more articles as needed
+];
+
+export default function ArticlesPage() {
+    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>
+                ))}
+            </section>
+        </div>
+    );
+}

src/app/page.tsx

@@ -1,7 +1,6 @@
-import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "~/components/ui/card";
-import { Badge } from "~/components/ui/badge";
-import Link from "next/link";
 import { ArrowUpRight, Code, FlaskConical, Users } from 'lucide-react';
+import Link from "next/link";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
 import { projects } from "~/lib/data";
 
 export default function HomePage() {
@@ -12,8 +11,8 @@ export default function HomePage() {
         <div>
           <h1 className="text-2xl font-bold">Hi! I'm Sean. 👋</h1>
           <p className="text-lg text-muted-foreground mt-2">
-            I am a Computer Science and Engineering student at Bucknell University, passionate about robotics, 
-            software development, and human-computer interaction. With a strong foundation in both academic 
+            I am a Computer Science and Engineering student at Bucknell University, passionate about robotics,
+            software development, and human-computer interaction. With a strong foundation in both academic
             research and practical development, I bridge the gap between theoretical concepts and real-world applications.
           </p>
         </div>
@@ -75,8 +74,8 @@ export default function HomePage() {
       <section className="space-y-6">
         <div className="flex items-center justify-between">
           <h2 className="text-2xl font-bold">Featured Projects 🌟</h2>
-          <Link 
-            href="/projects" 
+          <Link
+            href="/projects"
             className="text-sm text-muted-foreground hover:text-primary flex items-center gap-1"
           >
             View all projects
@@ -93,7 +92,7 @@ export default function HomePage() {
                   <div className="flex items-center justify-between">
                     <CardTitle>{project.title}</CardTitle>
                     {project.link && (
-                      <Link 
+                      <Link
                         href={project.link}
                         target="_blank"
                         rel="noopener noreferrer"

src/components/Navigation.tsx

@@ -1,14 +1,15 @@
 'use client';
 
+import { BookOpenText, FileText, FolderGit2, Home, Menu, Moon, Newspaper, Sun, SunMoon, X } from 'lucide-react';
+import { useTheme } from 'next-themes';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { useTheme } from 'next-themes';
-import { useState, useEffect } from 'react';
-import { Home, FolderGit2, FileText, BookOpenText, Menu, X, Sun, Moon, SunMoon } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 // Define the nav items without icons
 const navItems = [
   { href: '/', label: 'About', icon: Home },
+  { href: '/articles', label: 'Articles', icon: Newspaper },
   { href: '/projects', label: 'Projects', icon: FolderGit2 },
   { href: '/publications', label: 'Publications', icon: BookOpenText },
   { href: '/cv', label: 'CV', icon: FileText },