soconnor/personal-website
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

feat: Implement new 'soft, translucent, and alive' design system with updated UI components, navigation, and a new blog post.

Browse Source
This commit is contained in:
Sean O'Connor
2025-12-10 03:08:08 -05:00
parent 347a61e1bf
commit 49243758c9
19 changed files with 507 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/layout.tsx
+18 -17
View File
@@ -7,7 +7,7 @@ import { Navigation } from "~/components/Navigation";
import { Sidebar } from "~/components/Sidebar";
import { BreadcrumbWrapper } from "~/components/BreadcrumbWrapper";
import { inter } from "~/lib/fonts";
import { inter, playfair } from "~/lib/fonts";
import { description, name } from "~/lib/data";
import "~/styles/globals.css";
@@ -19,11 +19,21 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: React.PropsWithChildren) {
return (
<html lang="en" className={inter.className} suppressHydrationWarning>
<html
lang="en"
className={`${inter.variable} ${playfair.variable}`}
suppressHydrationWarning
>
<body
className="flex min-h-screen flex-col bg-background font-sans text-foreground"
className="flex min-h-screen flex-col bg-background font-sans text-foreground relative"
suppressHydrationWarning
>
{/* Background Elements */}
<div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none flex items-center justify-center">
<div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
<div className="w-[800px] h-[800px] bg-neutral-400/40 dark:bg-neutral-500/30 rounded-full blur-3xl animate-blob"></div>
</div>
{env.NEXT_PUBLIC_UMAMI_WEBSITE_ID && (
<Script
defer
@@ -36,20 +46,11 @@ export default function RootLayout({ children }: React.PropsWithChildren) {
)}
<Navigation />
<div className="flex flex-1">
{/* Desktop sidebar - extends to edge */}
<aside className="hidden overflow-y-auto lg:sticky lg:top-16 lg:block lg:h-[calc(100vh-4rem)]">
<Sidebar />
</aside>
<div className="flex-1">
{/* Mobile sidebar - horizontal intro bar only on homepage */}
<div className="px-4 sm:px-6 lg:hidden lg:px-8">
<Sidebar />
</div>
<div className="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8">
<main className="py-8">
<div className="flex flex-1 pt-24 flex-col lg:flex-row">
<Sidebar />
<div className="flex-1 min-w-0 lg:pl-96">
<div className="mx-auto max-w-screen-xl px-6 sm:px-8 lg:pl-0 lg:pr-8">
<main className="pb-8 pt-4">
<BreadcrumbWrapper />
{children}
</main>