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

Update sidebar responsiveness

Browse Source
This commit is contained in:
Sean O'Connor
2024-10-28 10:14:48 -07:00
parent e224ce89f7
commit 39488efefc
2 changed files with 146 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/layout.tsx
View File

@@ -19,7 +19,7 @@ export default function RootLayout({ children }: React.PropsWithChildren) {
<div className="flex-1"> <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"> <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 /> <Sidebar />
</aside> </aside>
<main className="flex-1 overflow-y-auto py-8"> <main className="flex-1 overflow-y-auto py-8">

226
src/components/Sidebar.tsx
View File

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