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,7 +59,8 @@ 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="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"
@@ -25,17 +72,48 @@ export function Sidebar() {
             </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>
+              {schoolInfo.map((item) => (
-            <p className="text-sm text-muted-foreground flex items-center gap-2">
+                <a
-              <School className="h-4 w-4" />
+                  key={item.label}
-              Bucknell University
+                  href={item.href}
-            </p>
+                  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="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="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
@@ -50,62 +128,46 @@ export function Sidebar() {
           
           <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>
+            {schoolInfo.map((item) => (
-          <p className="text-sm text-muted-foreground flex items-center gap-2 justify-center lg:justify-start">
+              <a
-            <School className="h-4 w-4" />
+                key={item.label}
-            Bucknell University
+                href={item.href}
-          </p>
+                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 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
-                href="mailto:sean@soconnor.dev"
+                    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"
+                    })}
                   >
-                <Mail className="h-4 w-4" />
+                    <item.icon className="h-4 w-4" />
-                <span>Personal Email</span>
+                    <span>{item.label}</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>
             </div>
           </div>
         </div>
 
-        {/* Copyright notice for desktop */}
+        <div className="mt-6">
-        <div className="hidden lg:block mt-auto pt-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>