soconnor/personal-website
1
0
Fork 0
mirror of https://github.com/soconnor0919/personal-website.git synced 2025-12-15 08:14:43 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix navigation menu, add google scholar link

Browse Source
This commit is contained in:
Sean O'Connor
2024-11-05 18:39:36 -05:00
parent 0b64c4384b
commit c8749df337
5 changed files with 84 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/layout.tsx
View File

@@ -16,7 +16,7 @@ export const metadata = {
export default function RootLayout({ children }: React.PropsWithChildren) { export default function RootLayout({ children }: React.PropsWithChildren) {
return ( return (
<html lang="en" suppressHydrationWarning className={inter.className}> <html lang="en" className={inter.className} suppressHydrationWarning>
<body className="font-sans bg-background text-foreground min-h-screen flex flex-col" suppressHydrationWarning> <body className="font-sans bg-background text-foreground min-h-screen flex flex-col" suppressHydrationWarning>
<ThemeProvider <ThemeProvider
attribute="data-theme" attribute="data-theme"

259
src/components/Navigation.tsx
View File

@@ -1,12 +1,11 @@
'use client'; 'use client';
import { BookOpenText, FileText, FolderGit2, Home, Menu, Moon, Newspaper, Plane, Sun, SunMoon, X } from 'lucide-react'; import { BookOpenText, FileText, FolderGit2, Home, Menu, Newspaper, Plane, X } from 'lucide-react';
import { useTheme } from 'next-themes';
import Link from 'next/link';
import { usePathname } from 'next/navigation'; import { usePathname } from 'next/navigation';
import Link from 'next/link';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { ThemeToggler } from '~/components/ThemeToggler';
// Define the nav items without icons
const navItems = [ const navItems = [
{ href: '/', label: 'About', icon: Home }, { href: '/', label: 'About', icon: Home },
{ href: '/articles', label: 'Articles', icon: Newspaper }, { href: '/articles', label: 'Articles', icon: Newspaper },
@@ -17,25 +16,11 @@ const navItems = [
]; ];
export function Navigation() { export function Navigation() {
const { theme, setTheme } = useTheme();
const pathname = usePathname(); const pathname = usePathname();
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [mounted, setMounted] = useState(false);
// Only show theme switcher after mounting to prevent hydration mismatch return (
useEffect(() => { <>
setMounted(true);
}, []);
// Update the document title based on the current pathname
useEffect(() => {
const currentItem = navItems.find(item => item.href === pathname);
document.title = currentItem ? `${currentItem.label} - Sean O'Connor` : 'Sean O\'Connor';
}, [pathname]);
// Always render a consistent initial state for SSR
if (!mounted) {
return (
<nav className="sticky top-0 z-[51] bg-background border-b border-border shadow-sm"> <nav className="sticky top-0 z-[51] bg-background border-b border-border shadow-sm">
<div className="relative max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8"> <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">
@@ -43,12 +28,22 @@ export function Navigation() {
<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 items-center space-x-4"> <div className="flex items-center space-x-4">
<button <div className="hidden lg:flex lg:space-x-4 lg:justify-end">
className="ml-4 text-sm font-medium text-muted-foreground hover:text-primary flex items-center" {navItems.map((item) => {
aria-label="Toggle theme" const isActive = pathname === item.href;
> return (
<SunMoon size={20} /> <Link
</button> 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>
<ThemeToggler />
<button <button
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
className="text-gray-500 hover:text-primary focus:outline-none relative h-6 w-6 lg:hidden" className="text-gray-500 hover:text-primary focus:outline-none relative h-6 w-6 lg:hidden"
@@ -62,202 +57,40 @@ export function Navigation() {
</span> </span>
</button> </button>
</div> </div>
<div className="hidden lg:flex lg:space-x-4 lg:justify-end">
{navItems.map((item) => {
const isActive = pathname === item.href;
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>
);
})}
<button
className="ml-4 text-sm font-medium text-muted-foreground hover:text-primary flex items-center"
aria-label="Toggle theme"
>
<SunMoon size={20} />
</button>
</div>
</div>
</div>
{/* Mobile menu - delayed fade */}
<div
className={`
absolute
top-full
left-0
right-0
z-40
bg-background
border-b
border-border
shadow-sm
lg:hidden
overflow-hidden
transition-all
duration-300
delay-50
${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>
</div> </div>
</nav> </nav>
); <div
} className={`fixed inset-0 z-40 bg-background/80 backdrop-blur-sm transition-opacity duration-200 ${
isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
// Client-side only code
const themeIcon = theme === 'dark' ? <Sun size={20} /> :
theme === 'light' ? <Moon size={20} /> :
<SunMoon size={20} />;
const cycleTheme = () => {
if (theme === 'dark') {
setTheme('light');
} else if (theme === 'light') {
setTheme('system');
} else {
setTheme('dark');
}
};
return (
<>
{/* Backdrop overlay - faster fade */}
<div
className={`fixed inset-0 bg-background/80 backdrop-blur-sm lg:hidden transition-opacity duration-200 ${
isOpen ? 'opacity-100 z-50' : 'opacity-0 pointer-events-none'
}`} }`}
onClick={() => setIsOpen(false)} onClick={() => setIsOpen(false)}
aria-hidden="true" aria-hidden="true"
/> />
<div
{/* Existing nav component */} className={`fixed top-16 left-0 right-0 z-50 bg-background border-b border-border shadow-sm lg:hidden overflow-hidden transition-all duration-300 ${
<nav className="sticky top-0 z-[51] bg-background border-b border-border shadow-sm"> isOpen ? 'max-h-[calc(100vh-4rem)] opacity-100' : 'max-h-0 opacity-0'
<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="/"> <div className="flex flex-col p-4 space-y-2">
<span className="text-lg font-bold">Sean O'Connor</span> {navItems.map((item) => {
</Link> const isActive = pathname === item.href;
<div className="flex items-center space-x-4"> return (
<button <Link
onClick={cycleTheme} key={item.href}
className="text-sm font-medium text-muted-foreground hover:text-primary flex items-center lg:hidden" href={item.href}
aria-label="Toggle theme" className={`flex items-center text-sm font-medium transition-colors ${
isActive ? 'text-primary' : 'text-muted-foreground'
} hover:text-primary gap-2`}
onClick={() => setIsOpen(false)}
> >
{themeIcon} <item.icon size={16} />
</button> <span>{item.label}</span>
<button </Link>
onClick={() => setIsOpen(!isOpen)} );
className="text-gray-500 hover:text-primary focus:outline-none relative h-6 w-6 lg:hidden" })}
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>
<div className="hidden lg:flex lg:space-x-4 lg:justify-end">
{navItems.map((item) => {
const isActive = pathname === item.href;
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>
);
})}
<button
onClick={cycleTheme}
className="ml-4 text-sm font-medium text-muted-foreground hover:text-primary flex items-center"
aria-label="Toggle theme"
>
{themeIcon}
</button>
</div>
</div>
</div> </div>
</div>
{/* Mobile menu - delayed fade */}
<div
className={`
absolute
top-full
left-0
right-0
z-40
bg-background
border-b
border-border
shadow-sm
lg:hidden
overflow-hidden
transition-all
duration-300
delay-50
${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>
</> </>
); );
} }

31
src/components/ThemeToggler.tsx Normal file
View File

@@ -0,0 +1,31 @@
'use client';
import { Sun, Moon, SunMoon } from 'lucide-react';
import { useTheme } from 'next-themes';
import { useEffect, useState } from 'react';
export function ThemeToggler() {
const { theme, setTheme } = useTheme();
const [mounted, setMounted] = useState(false);
// Only show theme switcher after mounting to prevent hydration mismatch
useEffect(() => {
setMounted(true);
}, []);
// Determine the icon to display based on the current theme
const themeIcon = mounted ? (theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />) : <SunMoon size={20} />;
return (
<button
onClick={() => {
const newTheme = theme === 'dark' ? 'light' : 'dark';
setTheme(newTheme);
}}
className="text-sm font-medium text-muted-foreground hover:text-primary flex items-center"
aria-label="Toggle theme"
>
{themeIcon}
</button>
);
}

8
src/lib/data.ts
View File

@@ -1,4 +1,4 @@
import { Globe, Mail, Phone, Linkedin, Github, School } from "lucide-react"; import { Github, Linkedin, Mail, Phone, School, GraduationCap } from "lucide-react";
export const name = [ export const name = [
{ {
@@ -37,9 +37,9 @@ export const contact = [
href: 'tel:+16316016555' href: 'tel:+16316016555'
}, },
{ {
icon: Globe, icon: GraduationCap,
label: 'Website', label: 'Google Scholar',
href: 'https://soconnor.dev', href: 'https://scholar.google.com/citations?hl=en&user=OCgINDcAAAAJ',
external: true external: true
}, },
{ {

4
src/styles/globals.css
View File

@@ -6,7 +6,7 @@
:root { :root {
--background: 0 0% 100%; --background: 0 0% 100%;
--foreground: 0 0% 10%; --foreground: 0 0% 10%;
--card: 0 0% 98%; --card: 0 0% 99%;
--card-foreground: 0 0% 10%; --card-foreground: 0 0% 10%;
--badge: 0 100%, 50%; --badge: 0 100%, 50%;
--popover: 0 0% 100%; --popover: 0 0% 100%;
@@ -31,7 +31,7 @@
[data-theme='dark'] { [data-theme='dark'] {
--background: 0 0% 10%; --background: 0 0% 10%;
--foreground: 0 0% 90%; --foreground: 0 0% 90%;
--card: 0 0% 15%; --card: 0 0% 12%;
--card-foreground: 0 0% 90%; --card-foreground: 0 0% 90%;
--popover: 0 0% 20%; --popover: 0 0% 20%;
--popover-foreground: 0 0% 90%; --popover-foreground: 0 0% 90%;