diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 4c47c16..b3d41d2 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -16,7 +16,7 @@ export const metadata = { export default function RootLayout({ children }: React.PropsWithChildren) { return ( - + { - 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 ( + return ( + <> - ); - } - - // Client-side only code - const themeIcon = theme === 'dark' ? : - theme === 'light' ? : - ; - - const cycleTheme = () => { - if (theme === 'dark') { - setTheme('light'); - } else if (theme === 'light') { - setTheme('system'); - } else { - setTheme('dark'); - } - }; - - return ( - <> - {/* Backdrop overlay - faster fade */} -
setIsOpen(false)} aria-hidden="true" /> - - {/* Existing nav component */} - +
); } diff --git a/src/components/ThemeToggler.tsx b/src/components/ThemeToggler.tsx new file mode 100644 index 0000000..fa47e08 --- /dev/null +++ b/src/components/ThemeToggler.tsx @@ -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' ? : ) : ; + + return ( + + ); +} \ No newline at end of file diff --git a/src/lib/data.ts b/src/lib/data.ts index a40bd23..4b716a5 100644 --- a/src/lib/data.ts +++ b/src/lib/data.ts @@ -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 = [ { @@ -37,9 +37,9 @@ export const contact = [ href: 'tel:+16316016555' }, { - icon: Globe, - label: 'Website', - href: 'https://soconnor.dev', + icon: GraduationCap, + label: 'Google Scholar', + href: 'https://scholar.google.com/citations?hl=en&user=OCgINDcAAAAJ', external: true }, { diff --git a/src/styles/globals.css b/src/styles/globals.css index 272dee4..36a0544 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -6,7 +6,7 @@ :root { --background: 0 0% 100%; --foreground: 0 0% 10%; - --card: 0 0% 98%; + --card: 0 0% 99%; --card-foreground: 0 0% 10%; --badge: 0 100%, 50%; --popover: 0 0% 100%; @@ -31,7 +31,7 @@ [data-theme='dark'] { --background: 0 0% 10%; --foreground: 0 0% 90%; - --card: 0 0% 15%; + --card: 0 0% 12%; --card-foreground: 0 0% 90%; --popover: 0 0% 20%; --popover-foreground: 0 0% 90%;