soconnor/personal-website
1
0
Fork 0
mirror of https://github.com/soconnor0919/personal-website.git synced 2026-02-05 00:06:36 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

General updates- mobile responsive

Browse Source
This commit is contained in:
Sean O'Connor
2024-10-28 10:03:12 -07:00
parent a244f7d83f
commit e224ce89f7
7 changed files with 210 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/cv/page.tsx
View File

@@ -6,7 +6,7 @@ export default function CVPage() {
<object <object
data="/cv.pdf" data="/cv.pdf"
type="application/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"> <div className="flex flex-col items-center justify-center p-8">
<p className="text-lg text-muted-foreground"> <p className="text-lg text-muted-foreground">
@@ -15,7 +15,7 @@ export default function CVPage() {
<a <a
href="/cv.pdf" href="/cv.pdf"
download 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 Download PDF
</a> </a>

13
src/app/layout.tsx
View File

@@ -2,6 +2,8 @@ import { inter } from "~/lib/fonts"
import "~/styles/globals.css" import "~/styles/globals.css"
import { Navigation } from "~/components/Navigation" import { Navigation } from "~/components/Navigation"
import { Sidebar } from "~/components/Sidebar" import { Sidebar } from "~/components/Sidebar"
import { ThemeProvider } from 'next-themes'
import { Footer } from "~/components/Footer"
export const metadata = { export const metadata = {
title: "Sean O'Connor", title: "Sean O'Connor",
@@ -12,16 +14,21 @@ export const metadata = {
export default function RootLayout({ children }: React.PropsWithChildren) { export default function RootLayout({ children }: React.PropsWithChildren) {
return ( return (
<html lang="en" className={inter.className}> <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 /> <Navigation />
<div className="flex-1">
<div className="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8"> <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"> <div className="flex flex-col lg:flex-row lg:gap-12">
<aside className="lg:sticky lg:top-16 lg:h-[calc(100vh-4rem)]">
<Sidebar /> <Sidebar />
<main className="flex-1"> </aside>
<main className="flex-1 overflow-y-auto py-8">
{children} {children}
</main> </main>
</div> </div>
</div> </div>
</div>
<Footer />
</body> </body>
</html> </html>
) )

13
src/components/Footer.tsx Normal file
View File

@@ -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>
);
}

91
src/components/Navigation.tsx
View File

@@ -2,42 +2,103 @@
import Link from 'next/link'; import Link from 'next/link';
import { usePathname } from 'next/navigation'; 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 = [ const navItems = [
{ href: '/', label: 'About' }, { href: '/', label: 'About', icon: Home },
{ href: '/projects', label: 'Projects' }, { href: '/projects', label: 'Projects', icon: FolderGit2 },
{ href: '/cv', label: 'CV' }, { href: '/cv', label: 'CV', icon: FileText },
]; ];
export function Navigation() { export function Navigation() {
const { theme, setTheme } = useTheme();
const pathname = usePathname(); const pathname = usePathname();
const [isOpen, setIsOpen] = useState(false); // State to manage the navbar toggle
return ( return (
<nav className="border-b"> <nav className="sticky top-0 z-50 bg-background border-b shadow-sm">
<div className="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8"> {/* 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"> <div className="flex h-16 items-center justify-between">
<Link href="/"> <Link href="/">
<span className="text-lg font-bold">Sean O'Connor</span> <span className="text-lg font-bold">Sean O'Connor</span>
</Link> </Link>
<div className="flex gap-8"> <div className="flex items-center lg:hidden">
{navItems.map((item) => ( <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 <Link
key={item.href} key={item.href}
href={item.href} href={item.href}
className={cn( className={`text-sm font-medium transition-colors ${isActive ? 'text-primary' : 'text-muted-foreground'} hover:text-primary flex items-center gap-2`}
"text-sm font-medium transition-colors hover:text-primary",
pathname === item.href
? "text-primary"
: "text-muted-foreground"
)}
> >
<item.icon size={16} />
{item.label} {item.label}
</Link> </Link>
))} );
})}
</div> </div>
</div> </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={`
flex items-center
text-sm font-medium
transition-colors
${isActive ? 'text-primary' : 'text-muted-foreground'}
hover:text-primary
gap-2
`}
onClick={() => setIsOpen(false)}
>
<item.icon size={16} />
<span>{item.label}</span>
</Link>
);
})}
</div>
</div>
</nav> </nav>
); );
} }

65
src/components/Sidebar.tsx
View File

@@ -4,37 +4,38 @@ import Image from 'next/image';
import { Mail, Phone, Globe, School, Linkedin } from 'lucide-react'; import { Mail, Phone, Globe, School, Linkedin } from 'lucide-react';
import { usePathname } from 'next/navigation'; import { usePathname } from 'next/navigation';
import Link from 'next/link'; import Link from 'next/link';
import { useEffect, useState } from 'react';
export function Sidebar() { export function Sidebar() {
const pathname = usePathname(); const pathname = usePathname();
const isHomePage = pathname === '/'; 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 ( return (
<div className="w-full lg:w-64 p-6 space-y-6"> <>
{/* Container with max-width on mobile */} {/* 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="max-w-[240px] mx-auto lg:max-w-none">
<div className="aspect-square relative overflow-hidden rounded-xl w-full"> <div className="aspect-square relative overflow-hidden rounded-xl w-full">
<Image <Image
@@ -49,9 +50,7 @@ export function Sidebar() {
<div className="text-center lg:text-left space-y-2"> <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> <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"> <p className="text-sm text-muted-foreground">Computer Science and Engineering</p>
Computer Science and Engineering
</p>
<p className="text-sm text-muted-foreground flex items-center gap-2 justify-center lg:justify-start"> <p className="text-sm text-muted-foreground flex items-center gap-2 justify-center lg:justify-start">
<School className="h-4 w-4" /> <School className="h-4 w-4" />
Bucknell University Bucknell University
@@ -93,7 +92,7 @@ export function Sidebar() {
<span>Website</span> <span>Website</span>
</a> </a>
<a <a
href="https://www.linkedin.com/in/bu-soconnor" href="https://linkedin.com/in/bu-soconnor"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors justify-center lg:justify-start" className="flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors justify-center lg:justify-start"
@@ -104,6 +103,14 @@ export function Sidebar() {
</div> </div>
</div> </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>
</>
); );
} }

10
src/styles/globals.css
View File

@@ -6,33 +6,25 @@
:root { :root {
--background: 0 0% 100%; --background: 0 0% 100%;
--foreground: 0 0% 10%; --foreground: 0 0% 10%;
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: 0 0% 10%; --card-foreground: 0 0% 10%;
--popover: 0 0% 100%; --popover: 0 0% 100%;
--popover-foreground: 0 0% 10%; --popover-foreground: 0 0% 10%;
--primary: 0 0% 10%; --primary: 0 0% 10%;
--primary-foreground: 0 0% 100%; --primary-foreground: 0 0% 100%;
--secondary: 0 0% 96%; --secondary: 0 0% 96%;
--secondary-foreground: 0 0% 10%; --secondary-foreground: 0 0% 10%;
--muted: 0 0% 96%; --muted: 0 0% 96%;
--muted-foreground: 0 0% 45%; --muted-foreground: 0 0% 45%;
--accent: 0 0% 96%; --accent: 0 0% 96%;
--accent-foreground: 0 0% 10%; --accent-foreground: 0 0% 10%;
--destructive: 0 84% 60%; --destructive: 0 84% 60%;
--destructive-foreground: 0 0% 100%; --destructive-foreground: 0 0% 100%;
--border: 0 0% 90%; --border: 0 0% 90%;
--input: 0 0% 90%; --input: 0 0% 90%;
--ring: 0 0% 10%; --ring: 0 0% 10%;
--radius: 0.5rem; --radius: 0.5rem;
--shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
} }
} }