General updates- mobile responsive

2025-12-15 08:14:43 -05:00 · 2024-10-28 10:03:12 -07:00
parent a244f7d83f
commit e224ce89f7
7 changed files with 210 additions and 130 deletions
--- a/src/app/cv/page.tsx
+++ b/src/app/cv/page.tsx
@@ -6,7 +6,7 @@ export default function CVPage() {
      <object
        data="/cv.pdf"
        type="application/pdf"
-        className="w-full h-[calc(100vh-8rem)]"
+        className="w-full h-[calc(100vh-11rem)]"
      >
        <div className="flex flex-col items-center justify-center p-8">
          <p className="text-lg text-muted-foreground">
@@ -15,7 +15,7 @@ export default function CVPage() {
          <a 
            href="/cv.pdf" 
            download
-            className="mt-4 inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
+            className="mt-4 inline-flex items-center justify-center px-4 pt-2 pb-0 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
          >
            Download PDF
          </a>
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,6 +2,8 @@ import { inter } from "~/lib/fonts"
 import "~/styles/globals.css"
 import { Navigation } from "~/components/Navigation"
 import { Sidebar } from "~/components/Sidebar"
+import { ThemeProvider } from 'next-themes'
+import { Footer } from "~/components/Footer"

 export const metadata = {
  title: "Sean O'Connor",
@@ -12,16 +14,21 @@ export const metadata = {
 export default function RootLayout({ children }: React.PropsWithChildren) {
  return (
    <html lang="en" className={inter.className}>
-      <body className="font-sans bg-background text-foreground min-h-screen">
+      <body className="font-sans bg-background text-foreground min-h-screen flex flex-col">
        <Navigation />
-        <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 py-8">
-            <Sidebar />
-            <main className="flex-1">
-              {children}
-            </main>
+        <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)]">
+                <Sidebar />
+              </aside>
+              <main className="flex-1 overflow-y-auto py-8">
+                {children}
+              </main>
+            </div>
          </div>
        </div>
+        <Footer />
      </body>
    </html>
  )
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export function Footer() {
+  return (
+    <footer className="lg:hidden bg-background text-foreground pb-4">
+      <div className="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
+        <p className="text-sm text-muted-foreground">
+          &copy; 2024 Sean O'Connor. All rights reserved.
+        </p>
+      </div>
+    </footer>
+  );
+}
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -2,40 +2,101 @@

 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { cn } from "~/lib/utils";
+import { useTheme } from 'next-themes';
+import { useState } from 'react';
+import { Home, FolderGit2, FileText, Menu, X } from 'lucide-react';

+// Define the nav items without icons
 const navItems = [
-  { href: '/', label: 'About' },
-  { href: '/projects', label: 'Projects' },
-  { href: '/cv', label: 'CV' },
+  { href: '/', label: 'About', icon: Home },
+  { href: '/projects', label: 'Projects', icon: FolderGit2 },
+  { href: '/cv', label: 'CV', icon: FileText },
 ];

 export function Navigation() {
+  const { theme, setTheme } = useTheme();
  const pathname = usePathname();
-  
+  const [isOpen, setIsOpen] = useState(false); // State to manage the navbar toggle
+
  return (
-    <nav className="border-b">
-      <div className="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
+    <nav className="sticky top-0 z-50 bg-background border-b shadow-sm">
+      {/* Static top bar */}
+      <div className="relative max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex h-16 items-center justify-between">
          <Link href="/">
            <span className="text-lg font-bold">Sean O'Connor</span>
          </Link>
-          <div className="flex gap-8">
-            {navItems.map((item) => (
+          <div className="flex items-center lg:hidden">
+            <button
+              onClick={() => setIsOpen(!isOpen)}
+              className="text-gray-500 hover:text-primary focus:outline-none relative h-6 w-6"
+              aria-label={isOpen ? 'Close menu' : 'Open menu'}
+            >
+              <span className={`absolute inset-0 transition-opacity duration-300 ${isOpen ? 'opacity-0' : 'opacity-100'}`}>
+                <Menu size={24} />
+              </span>
+              <span className={`absolute inset-0 transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0'}`}>
+                <X size={24} />
+              </span>
+            </button>
+          </div>
+          {/* Navigation items for large screens */}
+          <div className="hidden lg:flex lg:space-x-4">
+            {navItems.map((item) => {
+              const isActive = pathname === item.href; // Determine if the item is active
+              return (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className={`text-sm font-medium transition-colors ${isActive ? 'text-primary' : 'text-muted-foreground'} hover:text-primary flex items-center gap-2`}
+                >
+                  <item.icon size={16} />
+                  {item.label}
+                </Link>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+
+      {/* Animated mobile menu */}
+      <div 
+        className={`
+          absolute
+          top-full
+          left-0
+          right-0
+          z-40
+          bg-background
+          border-b
+          shadow-sm
+          lg:hidden 
+          overflow-hidden
+          ${isOpen ? 'h-auto opacity-100' : 'h-0 opacity-0'}
+        `}
+      >
+        <div className="flex flex-col p-4 space-y-2 bg-background">
+          {navItems.map((item) => {
+            const isActive = pathname === item.href;
+            return (
              <Link
                key={item.href}
                href={item.href}
-                className={cn(
-                  "text-sm font-medium transition-colors hover:text-primary",
-                  pathname === item.href 
-                    ? "text-primary"
-                    : "text-muted-foreground"
-                )}
+                className={`
+                  flex items-center 
+                  text-sm font-medium 
+                  transition-colors 
+                  ${isActive ? 'text-primary' : 'text-muted-foreground'} 
+                  hover:text-primary 
+                  gap-2
+                `}
+                onClick={() => setIsOpen(false)}
              >
-                {item.label}
+                <item.icon size={16} />
+                <span>{item.label}</span>
              </Link>
-            ))}
-          </div>
+            );
+          })}
        </div>
      </div>
    </nav>
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -4,106 +4,113 @@ import Image from 'next/image';
 import { Mail, Phone, Globe, School, Linkedin } from 'lucide-react';
 import { usePathname } from 'next/navigation';
 import Link from 'next/link';
-import { useEffect, useState } from 'react';

 export function Sidebar() {
  const pathname = usePathname();
  const isHomePage = pathname === '/';
-  const [isMobile, setIsMobile] = useState(false);
-
-  useEffect(() => {
-    // Initial check
-    const checkMobile = () => {
-      setIsMobile(window.innerWidth < 1024);
-    };
-    
-    // Set initial state
-    checkMobile();
-    
-    // Add resize listener
-    window.addEventListener('resize', checkMobile);
-    
-    // Cleanup
-    return () => window.removeEventListener('resize', checkMobile);
-  }, []);
-
-  // If not homepage and on mobile, don't render
-  if (!isHomePage && isMobile) {
-    return null;
-  }

  return (
-    <div className="w-full lg:w-64 p-6 space-y-6">
-      {/* Container with max-width on mobile */}
-      <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>
-        <p className="text-sm text-muted-foreground flex items-center gap-2 justify-center lg:justify-start">
-          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://www.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>
+    <>
+      {/* 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>
+          <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>
        </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>
+        </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>
+          </div>
+        </div>
+
+        {/* Copyright notice for desktop */}
+        <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>
+        </div>
      </div>
-    </div>
+    </>
  );
 }
--- a/src/lib/fonts.ts
+++ b/src/lib/fonts.ts
@@ -3,4 +3,4 @@ import { Inter } from 'next/font/google'
 export const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
-});
+});
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -6,33 +6,25 @@
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 10%;
-    
    --card: 0 0% 100%;
    --card-foreground: 0 0% 10%;
-    
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 10%;
-    
    --primary: 0 0% 10%;
    --primary-foreground: 0 0% 100%;
-    
    --secondary: 0 0% 96%;
    --secondary-foreground: 0 0% 10%;
-    
    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 45%;
-    
    --accent: 0 0% 96%;
    --accent-foreground: 0 0% 10%;
-    
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
-    
    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: 0 0% 10%;
-    
    --radius: 0.5rem;
+    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  }
 }

@@ -45,4 +37,4 @@ html {
 body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
-}
+}