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

dark mode

Browse Source
This commit is contained in:
Sean O'Connor
2024-10-28 21:55:29 -07:00
parent 103cbb82a9
commit b73d83d942
7 changed files with 94 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/app/layout.tsx
View File

@@ -1,11 +1,11 @@
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"
import { Analytics } from "@vercel/analytics/react" import { Analytics } from "@vercel/analytics/react"
import { SpeedInsights } from "@vercel/speed-insights/next" import { SpeedInsights } from "@vercel/speed-insights/next"
import { ThemeProvider } from "next-themes"
import { Footer } from "~/components/Footer"
import { Navigation } from "~/components/Navigation"
import { Sidebar } from "~/components/Sidebar"
import { inter } from "~/lib/fonts"
import "~/styles/globals.css"
export const metadata = { export const metadata = {
title: "Sean O'Connor", title: "Sean O'Connor",
@@ -17,22 +17,28 @@ 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 flex flex-col"> <body className="font-sans bg-background text-foreground min-h-screen flex flex-col">
<Analytics /> <ThemeProvider
<SpeedInsights /> attribute="data-theme"
<Navigation /> defaultTheme="system"
<div className="flex-1"> enableSystem
<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"> <Analytics />
<aside className="lg:sticky lg:top-16 lg:h-[calc(100vh-4rem)] overflow-y-auto"> <SpeedInsights />
<Sidebar /> <Navigation />
</aside> <div className="flex-1">
<main className="flex-1 overflow-y-auto py-8"> <div className="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
{children} <div className="flex flex-col lg:flex-row lg:gap-12">
</main> <aside className="lg:sticky lg:top-16 lg:h-[calc(100vh-4rem)] overflow-y-auto">
<Sidebar />
</aside>
<main className="flex-1 overflow-y-auto py-8">
{children}
</main>
</div>
</div> </div>
</div> </div>
</div> <Footer />
<Footer /> </ThemeProvider>
</body> </body>
</html> </html>
) )

6
src/app/page.tsx
View File

@@ -26,7 +26,7 @@ export default function HomePage() {
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="space-y-2"> <CardContent className="space-y-2">
<ul className="list-disc pl-5 space-y-2"> <ul className="list-disc pl-5 space-y-2 text-muted-foreground">
<li>Full-stack development with modern frameworks (React, Next.js, Node.js)</li> <li>Full-stack development with modern frameworks (React, Next.js, Node.js)</li>
<li>Robotics development using ROS2 and C++</li> <li>Robotics development using ROS2 and C++</li>
<li>Systems programming and architecture design</li> <li>Systems programming and architecture design</li>
@@ -44,7 +44,7 @@ export default function HomePage() {
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="space-y-2"> <CardContent className="space-y-2">
<ul className="list-disc pl-5 space-y-2"> <ul className="list-disc pl-5 space-y-2 text-muted-foreground">
<li>Human-Robot Interaction studies and experimental design</li> <li>Human-Robot Interaction studies and experimental design</li>
<li>Published researcher at IEEE RO-MAN 2024</li> <li>Published researcher at IEEE RO-MAN 2024</li>
<li>Development of experimental platforms for HRI research</li> <li>Development of experimental platforms for HRI research</li>
@@ -61,7 +61,7 @@ export default function HomePage() {
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="space-y-2"> <CardContent className="space-y-2">
<ul className="list-disc pl-5 space-y-2"> <ul className="list-disc pl-5 space-y-2 text-muted-foreground">
<li>President of AIChE Chem-E-Car Competition Team</li> <li>President of AIChE Chem-E-Car Competition Team</li>
<li>Treasurer of Bucknell Coffee Society</li> <li>Treasurer of Bucknell Coffee Society</li>
<li>Teaching Assistant for Computer Science courses</li> <li>Teaching Assistant for Computer Science courses</li>

10
src/app/publications/page.tsx
View File

@@ -116,7 +116,7 @@ export default function PublicationsPage() {
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<Badge variant="outline" className="capitalize"> <Badge variant="secondary" className="capitalize">
<ArrowUpRight className="h-4 w-4" /> <ArrowUpRight className="h-4 w-4" />
DOI DOI
</Badge> </Badge>
@@ -128,7 +128,7 @@ export default function PublicationsPage() {
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<Badge variant="outline" className="capitalize"> <Badge variant="secondary" className="capitalize">
<FileText className="h-4 w-4" /> <FileText className="h-4 w-4" />
Paper Paper
</Badge> </Badge>
@@ -140,16 +140,16 @@ export default function PublicationsPage() {
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<Badge variant="outline" className="capitalize"> <Badge variant="secondary" className="capitalize">
<Presentation className="h-4 w-4" /> <Presentation className="h-4 w-4" />
Poster Poster
</Badge> </Badge>
</Link> </Link>
)} )}
<Badge <Badge
onClick={() => downloadBibtex(pub)} onClick={() => downloadBibtex(pub)}
className="cursor-pointer capitalize" className="cursor-pointer capitalize"
variant="outline" variant="secondary"
> >
<BookOpenText className="h-4 w-4" /> <BookOpenText className="h-4 w-4" />
BibTeX BibTeX

31
src/components/Navigation.tsx
View File

@@ -4,7 +4,7 @@ import Link from 'next/link';
import { usePathname } from 'next/navigation'; import { usePathname } from 'next/navigation';
import { useTheme } from 'next-themes'; import { useTheme } from 'next-themes';
import { useState } from 'react'; import { useState } from 'react';
import { Home, FolderGit2, FileText, BookOpenText, Menu, X } from 'lucide-react'; import { Home, FolderGit2, FileText, BookOpenText, Menu, X, Sun, Moon } from 'lucide-react';
// Define the nav items without icons // Define the nav items without icons
const navItems = [ const navItems = [
@@ -17,20 +17,26 @@ const navItems = [
export function Navigation() { export function Navigation() {
const { theme, setTheme } = useTheme(); const { theme, setTheme } = useTheme();
const pathname = usePathname(); const pathname = usePathname();
const [isOpen, setIsOpen] = useState(false); // State to manage the navbar toggle const [isOpen, setIsOpen] = useState(false);
return ( return (
<nav className="sticky top-0 z-50 bg-background border-b shadow-sm"> <nav className="sticky top-0 z-50 bg-background border-b border-border shadow-sm">
{/* Static top bar */}
<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">
<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 items-center lg:hidden"> <div className="flex items-center space-x-4">
<button
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
className="text-sm font-medium text-muted-foreground hover:text-primary flex items-center lg:hidden"
aria-label="Toggle theme"
>
{theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
</button>
<button <button
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
className="text-gray-500 hover:text-primary focus:outline-none relative h-6 w-6" className="text-gray-500 hover:text-primary focus:outline-none relative h-6 w-6 lg:hidden"
aria-label={isOpen ? 'Close menu' : 'Open menu'} aria-label={isOpen ? 'Close menu' : 'Open menu'}
> >
<span className={`absolute inset-0 transition-opacity duration-300 ${isOpen ? 'opacity-0' : 'opacity-100'}`}> <span className={`absolute inset-0 transition-opacity duration-300 ${isOpen ? 'opacity-0' : 'opacity-100'}`}>
@@ -41,10 +47,9 @@ export function Navigation() {
</span> </span>
</button> </button>
</div> </div>
{/* Navigation items for large screens */} <div className="hidden lg:flex lg:space-x-4 lg:justify-end">
<div className="hidden lg:flex lg:space-x-4">
{navItems.map((item) => { {navItems.map((item) => {
const isActive = pathname === item.href; // Determine if the item is active const isActive = pathname === item.href;
return ( return (
<Link <Link
key={item.href} key={item.href}
@@ -56,11 +61,17 @@ export function Navigation() {
</Link> </Link>
); );
})} })}
<button
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
className="ml-4 text-sm font-medium text-muted-foreground hover:text-primary flex items-center"
aria-label="Toggle theme"
>
{theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
</button>
</div> </div>
</div> </div>
</div> </div>
{/* Animated mobile menu */}
<div <div
className={` className={`
absolute absolute

2
src/components/ui/badge.tsx
View File

@@ -11,7 +11,7 @@ const badgeVariants = cva(
default: default:
"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80", "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
secondary: secondary:
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", "border-transparent bg-primary/10 text-secondary-foreground hover:bg-primary/20",
destructive: destructive:
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80", "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
outline: "text-foreground", outline: "text-foreground",

35
src/styles/globals.css
View File

@@ -6,8 +6,9 @@
: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% 98%;
--card-foreground: 0 0% 10%; --card-foreground: 0 0% 10%;
--badge: 0 100%, 50%;
--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%;
@@ -26,6 +27,38 @@
--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); --shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
} }
[data-theme='dark'] {
--background: 0 0% 10%;
--foreground: 0 0% 90%;
--card: 0 0% 15%;
--card-foreground: 0 0% 90%;
--popover: 0 0% 20%;
--popover-foreground: 0 0% 90%;
--primary: 0 0% 90%;
--primary-foreground: 0 0% 10%;
--secondary: 0 0% 30%;
--secondary-foreground: 0 0% 90%;
--muted: 0 0% 30%;
--muted-foreground: 0 0% 70%;
--accent: 0 0% 30%;
--accent-foreground: 0 0% 90%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 10%;
--border: 0 0% 20%;
--input: 0 0% 20%;
--ring: 0 0% 90%;
--radius: 0.5rem;
--shadow: 0 1px 3px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(255, 255, 255, 0.06);
}
}
.border {
border: 1px solid hsl(var(--border));
}
.shadow {
box-shadow: var(--shadow);
} }
/* Optional: Add smooth scrolling */ /* Optional: Add smooth scrolling */

4
tailwind.config.ts
View File

@@ -56,6 +56,10 @@ export default {
'4': 'hsl(var(--chart-4))', '4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))' '5': 'hsl(var(--chart-5))'
} }
},
boxShadow: {
DEFAULT: 'var(--shadow)',
// other shadows
} }
} }
}, },