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

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 { 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 = {
title: "Sean O'Connor",
@@ -17,22 +17,28 @@ export default function RootLayout({ children }: React.PropsWithChildren) {
return (
<html lang="en" className={inter.className}>
<body className="font-sans bg-background text-foreground min-h-screen flex flex-col">
<Analytics />
<SpeedInsights />
<Navigation />
<div className="flex-1">
<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">
<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>
<ThemeProvider
attribute="data-theme"
defaultTheme="system"
enableSystem
>
<Analytics />
<SpeedInsights />
<Navigation />
<div className="flex-1">
<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">
<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>
<Footer />
<Footer />
</ThemeProvider>
</body>
</html>
)

6
src/app/page.tsx
View File

@@ -26,7 +26,7 @@ export default function HomePage() {
</div>
</CardHeader>
<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>Robotics development using ROS2 and C++</li>
<li>Systems programming and architecture design</li>
@@ -44,7 +44,7 @@ export default function HomePage() {
</div>
</CardHeader>
<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>Published researcher at IEEE RO-MAN 2024</li>
<li>Development of experimental platforms for HRI research</li>
@@ -61,7 +61,7 @@ export default function HomePage() {
</div>
</CardHeader>
<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>Treasurer of Bucknell Coffee Society</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"
rel="noopener noreferrer"
>
<Badge variant="outline" className="capitalize">
<Badge variant="secondary" className="capitalize">
<ArrowUpRight className="h-4 w-4" />
DOI
</Badge>
@@ -128,7 +128,7 @@ export default function PublicationsPage() {
target="_blank"
rel="noopener noreferrer"
>
<Badge variant="outline" className="capitalize">
<Badge variant="secondary" className="capitalize">
<FileText className="h-4 w-4" />
Paper
</Badge>
@@ -140,16 +140,16 @@ export default function PublicationsPage() {
target="_blank"
rel="noopener noreferrer"
>
<Badge variant="outline" className="capitalize">
<Badge variant="secondary" className="capitalize">
<Presentation className="h-4 w-4" />
Poster
</Badge>
</Link>
)}
<Badge
<Badge
onClick={() => downloadBibtex(pub)}
className="cursor-pointer capitalize"
variant="outline"
variant="secondary"
>
<BookOpenText className="h-4 w-4" />
BibTeX

31
src/components/Navigation.tsx
View File

@@ -4,7 +4,7 @@ import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useTheme } from 'next-themes';
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
const navItems = [
@@ -17,20 +17,26 @@ const navItems = [
export function Navigation() {
const { theme, setTheme } = useTheme();
const pathname = usePathname();
const [isOpen, setIsOpen] = useState(false); // State to manage the navbar toggle
const [isOpen, setIsOpen] = useState(false);
return (
<nav className="sticky top-0 z-50 bg-background border-b shadow-sm">
{/* Static top bar */}
<nav className="sticky top-0 z-50 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="flex h-16 items-center justify-between">
<Link href="/">
<span className="text-lg font-bold">Sean O'Connor</span>
</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
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'}
>
<span className={`absolute inset-0 transition-opacity duration-300 ${isOpen ? 'opacity-0' : 'opacity-100'}`}>
@@ -41,10 +47,9 @@ export function Navigation() {
</span>
</button>
</div>
{/* Navigation items for large screens */}
<div className="hidden lg:flex lg:space-x-4">
<div className="hidden lg:flex lg:space-x-4 lg:justify-end">
{navItems.map((item) => {
const isActive = pathname === item.href; // Determine if the item is active
const isActive = pathname === item.href;
return (
<Link
key={item.href}
@@ -56,11 +61,17 @@ export function Navigation() {
</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>
{/* Animated mobile menu */}
<div
className={`
absolute

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

@@ -11,7 +11,7 @@ const badgeVariants = cva(
default:
"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
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:
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
outline: "text-foreground",

35
src/styles/globals.css
View File

@@ -6,8 +6,9 @@
:root {
--background: 0 0% 100%;
--foreground: 0 0% 10%;
--card: 0 0% 100%;
--card: 0 0% 98%;
--card-foreground: 0 0% 10%;
--badge: 0 100%, 50%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 10%;
--primary: 0 0% 10%;
@@ -26,6 +27,38 @@
--radius: 0.5rem;
--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 */

4
tailwind.config.ts
View File

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