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

2025-12-10 03:08:08 -05:00
parent 347a61e1bf
commit 49243758c9
19 changed files with 507 additions and 319 deletions
@@ -49,12 +49,12 @@ export default async function BlogPost({ params }: PageProps) {
    return (
        <article className="animate-fade-in-up space-y-8">
            <div className="mb-8">
-                <Button variant="ghost" asChild className="-ml-4 text-muted-foreground mb-4">
+                {/* <Button variant="ghost" asChild className="-ml-4 text-muted-foreground mb-4">
                    <Link href="/blog">
                        <ArrowLeft className="mr-2 h-4 w-4" />
                        Back to Blog
                    </Link>
-                </Button>
+                </Button> */}

                <h1 className="text-3xl font-bold mb-4">{metadata.title}</h1>

@@ -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>
@@ -68,7 +68,7 @@ export default function ProjectsPage() {
                            alt={project.imageAlt || project.title}
                            width={400}
                            height={300}
-                            className="h-auto w-full object-contain"
+                            className="h-auto w-full object-contain rounded-xl shadow-md"
                            priority={index === 0}
                          />
                        </div>
@@ -114,7 +114,7 @@ export default function ProjectsPage() {
                            >
                              <Link href={project.link}>
                                {project.title ===
-                                "LaTeX Introduction Tutorial" ? (
+                                  "LaTeX Introduction Tutorial" ? (
                                  <>
                                    <Play className="mr-2 h-4 w-4" />
                                    Watch Tutorial
@@ -217,7 +217,7 @@ export default function ProjectsPage() {
                          alt={project.imageAlt || project.title}
                          width={400}
                          height={250}
-                          className="h-auto max-h-full w-full object-contain"
+                          className="h-auto max-h-full w-full object-contain rounded-xl shadow-md"
                        />
                      </div>
                    )}
@@ -54,7 +54,7 @@ export default function TripsPage() {
              key={index}
              className={`animate-fade-in-up-delay-${Math.min(index + 3, 4)} card-hover`}
            >
-              <Card className="card-full-height overflow-hidden rounded-lg">
+              <Card className="card-full-height overflow-hidden">
                <CardHeader className="p-0">
                  <div className="flex flex-col">
                    <div className="flex space-x-0 overflow-x-auto">