Update sidebar responsiveness

src/app/layout.tsx

@@ -19,7 +19,7 @@ export default function RootLayout({ children }: React.PropsWithChildren) {
         <div className="flex-1">
           <div className="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
             <div className="flex flex-col lg:flex-row lg:gap-12">
-              <aside className="lg:sticky lg:top-16 lg:h-[calc(100vh-4rem)]">
+              <aside className="lg:sticky lg:top-16 lg:h-[calc(100vh-4rem)] overflow-y-auto">
                 <Sidebar />
               </aside>
               <main className="flex-1 overflow-y-auto py-8">

src/components/Sidebar.tsx

@@ -1,9 +1,55 @@
 'use client';
 
+import { Github, Globe, GraduationCap, Linkedin, Mail, Phone, School } from 'lucide-react';
 import Image from 'next/image';
-import { Mail, Phone, Globe, School, Linkedin } from 'lucide-react';
 import { usePathname } from 'next/navigation';
-import Link from 'next/link';
+
+const schoolInfo = [
+  {
+    icon: School,
+    label: 'Bucknell University',
+    href: 'https://bucknell.edu'
+  },
+  {
+    label: 'Computer Science and Engineering',
+  }
+]
+
+const contactInfo = [
+  {
+    icon: Mail,
+    label: 'Personal Email',
+    href: 'mailto:sean@soconnor.dev'
+  },
+  {
+    icon: Mail,
+    label: 'University Email',
+    href: 'mailto:sso005@bucknell.edu'
+  },
+  {
+    icon: Phone,
+    label: 'Phone',
+    href: 'tel:+16316016555'
+  },
+  {
+    icon: Globe,
+    label: 'Website',
+    href: 'https://soconnor.dev',
+    external: true
+  },
+  {
+    icon: Linkedin,
+    label: 'LinkedIn',
+    href: 'https://linkedin.com/in/bu-soconnor',
+    external: true
+  },
+  {
+    icon: Github,
+    label: 'GitHub',
+    href: 'https://github.com/soconnor0919',
+    external: true
+  }
+];
 
 export function Sidebar() {
   const pathname = usePathname();
@@ -13,99 +59,115 @@ export function Sidebar() {
     <>
       {/* Mobile layout - only on home page */}
       {isHomePage && (
-        <div className="lg:hidden w-full pt-6 pb-2 flex items-center space-x-4">
-          <div className="w-24 h-24 relative overflow-hidden rounded-lg">
-            <Image
-              src="/headshot.png"
-              alt="Sean O'Connor"
-              fill
-              className="object-cover"
-              priority
-            />
+        <div className="lg:hidden w-full pt-6 pb-2 space-y-4">
+          <div className="flex items-center space-x-4">
+            <div className="w-24 h-24 relative overflow-hidden rounded-lg">
+              <Image
+                src="/headshot.png"
+                alt="Sean O'Connor"
+                fill
+                className="object-cover"
+                priority
+              />
+            </div>
+            <div className="flex flex-col space-y-1">
+              <h2 className="font-bold text-xl hover:text-primary transition-colors">Sean O'Connor</h2>
+              {schoolInfo.map((item) => (
+                <a
+                  key={item.label}
+                  href={item.href}
+                  className="text-sm text-muted-foreground flex items-center gap-2"
+                  {...(item.href && {
+                    target: "_blank",
+                    rel: "noopener noreferrer"
+                  })}
+                >
+                  {item.icon && <item.icon className="h-4 w-4" />}
+                  {item.label}
+                </a>
+              ))}
+            </div>
           </div>
-          <div className="flex flex-col space-y-1">
-            <h2 className="font-bold text-xl hover:text-primary transition-colors">Sean O'Connor</h2>
-            <p className="text-sm text-muted-foreground">Computer Science and Engineering</p>
-            <p className="text-sm text-muted-foreground flex items-center gap-2">
-              <School className="h-4 w-4" />
-              Bucknell University
-            </p>
+          
+          <div className="space-y-3">
+            <h3 className="text-xs uppercase text-muted-foreground font-medium">Contact</h3>
+            <div className="grid grid-cols-2 gap-2">
+              {contactInfo.map((item) => (
+                <a
+                  key={item.href}
+                  href={item.href}
+                  className="flex items-center gap-2 text-sm text-muted-foreground hover:text-primary transition-colors"
+                  {...(item.external && {
+                    target: "_blank",
+                    rel: "noopener noreferrer"
+                  })}
+                >
+                  <item.icon className="h-4 w-4" />
+                  <span>{item.label}</span>
+                </a>
+              ))}
+            </div>
           </div>
         </div>
       )}
 
       {/* Desktop layout - on all pages */}
-      <div className="hidden lg:block w-64 p-6 space-y-6">
-        <div className="max-w-[240px] mx-auto lg:max-w-none">
-          <div className="aspect-square relative overflow-hidden rounded-xl w-full">
-            <Image
-              src="/headshot.png"
-              alt="Sean O'Connor"
-              fill
-              className="object-cover"
-              priority
-            />
+      <div className="hidden lg:block w-64 p-6">
+        <div className="space-y-6">
+          <div className="max-w-[240px] mx-auto lg:max-w-none">
+            <div className="aspect-square relative overflow-hidden rounded-xl w-full">
+              <Image
+                src="/headshot.png"
+                alt="Sean O'Connor"
+                fill
+                className="object-cover"
+                priority
+              />
+            </div>
+          </div>
+          
+          <div className="text-center lg:text-left space-y-2">
+            <h2 className="font-bold text-xl hover:text-primary transition-colors">Sean O'Connor</h2>
+            {schoolInfo.map((item) => (
+              <a
+                key={item.label}
+                href={item.href}
+                className="text-sm text-muted-foreground flex items-center gap-2 justify-center lg:justify-start"
+                {...(item.href && {
+                  target: "_blank",
+                  rel: "noopener noreferrer"
+                })}
+              >
+                {item.icon && <item.icon className="h-4 w-4" />}
+                {item.label}
+              </a>
+            ))}
           </div>
-        </div>
-        
-        <div className="text-center lg:text-left space-y-2">
-          <h2 className="font-bold text-xl hover:text-primary transition-colors">Sean O'Connor</h2>
-          <p className="text-sm text-muted-foreground">Computer Science and Engineering</p>
-          <p className="text-sm text-muted-foreground flex items-center gap-2 justify-center lg:justify-start">
-            <School className="h-4 w-4" />
-            Bucknell University
-          </p>
-        </div>
 
-        <div className="space-y-3 text-sm">
-          <div>
-            <h3 className="text-xs uppercase text-muted-foreground font-medium mb-2 text-center lg:text-left">Contact</h3>
-            <div className="space-y-2">
-              <a 
-                href="mailto:sean@soconnor.dev"
-                className="flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors justify-center lg:justify-start"
-              >
-                <Mail className="h-4 w-4" />
-                <span>Personal Email</span>
-              </a>
-              <a 
-                href="mailto:sso005@bucknell.edu"
-                className="flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors justify-center lg:justify-start"
-              >
-                <Mail className="h-4 w-4" />
-                <span>University Email</span>
-              </a>
-              <a 
-                href="tel:+16316016555"
-                className="flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors justify-center lg:justify-start"
-              >
-                <Phone className="h-4 w-4" />
-                <span>Phone</span>
-              </a>
-              <a 
-                href="https://soconnor.dev"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors justify-center lg:justify-start"
-              >
-                <Globe className="h-4 w-4" />
-                <span>Website</span>
-              </a>
-              <a 
-                href="https://linkedin.com/in/bu-soconnor"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors justify-center lg:justify-start"
-              >
-                <Linkedin className="h-4 w-4" />
-                <span>LinkedIn</span>
-              </a>
+          <div className="space-y-3 text-sm">
+            <div>
+              <h3 className="text-xs uppercase text-muted-foreground font-medium mb-2 text-center lg:text-left">Contact</h3>
+              <div className="space-y-2">
+                {contactInfo.map((item) => (
+                  <a
+                    key={item.href}
+                    href={item.href}
+                    className="flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors justify-center lg:justify-start"
+                    {...(item.external && {
+                      target: "_blank",
+                      rel: "noopener noreferrer"
+                    })}
+                  >
+                    <item.icon className="h-4 w-4" />
+                    <span>{item.label}</span>
+                  </a>
+                ))}
+              </div>
             </div>
           </div>
         </div>
 
-        {/* Copyright notice for desktop */}
-        <div className="hidden lg:block mt-auto pt-6">
+        <div className="mt-6">
           <p className="text-sm text-muted-foreground text-center lg:text-left">
             &copy; 2024&nbsp;Sean&nbsp;O'Connor. All&nbsp;rights&nbsp;reserved.
           </p>