Improved image expansion in Projects. Introduced Mods page.

app/globals.css

@@ -131,19 +131,12 @@
 }
 
 *,
-*::before,
-*::after {
+*::before, *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
 
-/* The page below the profile "more" threshold is tinted. Painting it as the
-   root background rather than as an element means it covers the whole document
-   for free, and -- unlike an oversized absolutely-positioned box -- it cannot
-   extend the scrollable area. `--threshold-y` is the line's distance from the
-   top of the document, set from ProfileMore; with no threshold on the page the
-   100% fallback puts the stop at the bottom, so nothing is tinted. */
 html {
   background-color: var(--bg);
   background-image: linear-gradient(
@@ -220,13 +213,7 @@ nav {
   
 }
 
-/* ---- project card selection ---- *
- *
- * Browsers with the View Transitions API morph the card between its grid slot
- * and the full-width slot; `data-vt="off"` marks the fallback path, where the
- * newly-selected card plays this enter animation instead.
- */
-
+/* ---- project card selection ----  */
 @keyframes card-select-in {
   from {
     opacity: 0;

app/layout.tsx

@@ -23,9 +23,7 @@ export const metadata: Metadata = {
   description: SITE.description
 };
 
-export default function RootLayout({
-  children,
-}: {
+export default function RootLayout( {children}: {
   children: React.ReactNode;
 }) {
   return (

app/mods/layout.tsx

@@ -0,0 +1,49 @@
+import Nav from "@/components/Nav";
+import Footer from "@/components/Footer";
+
+export default async function ModsLayout({children}: {
+  children: React.ReactNode;
+}) {
+
+  return (
+    <div style={{ minHeight: "100vh", paddingBottom: 36 }}>
+
+      <div
+        style={{
+          maxWidth: 880,
+          margin: "0 auto",
+          padding: "0 24px",
+          transition: "all 0.5s cubic-bezier(0.16, 1, 0.3, 1)",
+        }}>
+
+        <header
+          style={{
+            padding: "24px 0 0",
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}>
+
+          <div
+            style={{
+              fontFamily: "var(--mono)",
+              fontSize: 14,
+              fontWeight: 700,
+              color: "var(--accent)",
+              letterSpacing: "-0.02em",
+            }}>
+          </div>
+
+        </header>
+
+        <Nav section={"mods"} />
+
+        <main>
+          {children}
+        </main>
+      </div>
+
+      <Footer />
+    </div>
+  );
+}

app/mods/page.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import ModsGrid from "@/components/ModsGrid";
+
+export default function Mods() {
+  return (
+        <main>
+          <ModsGrid />
+        </main>
+  );
+}

app/profile/layout.tsx

@@ -13,16 +13,16 @@ export default function Layout({children}: {
           margin: "0 auto",
           padding: "0 24px",
           transition: "all 0.5s cubic-bezier(0.16, 1, 0.3, 1)",
-        }}
-      >
+        }}>
+
         <header
           style={{
             padding: "24px 0 0",
             display: "flex",
             justifyContent: "space-between",
             alignItems: "center",
-          }}
-        >
+          }}>
+
           <div
             style={{
               fontFamily: "var(--mono)",
@@ -30,8 +30,8 @@ export default function Layout({children}: {
               fontWeight: 700,
               color: "var(--accent)",
               letterSpacing: "-0.02em",
-            }}
-          >          
+            }}>          
+            
           </div>
           
         </header>

app/project/[slug]/layout.tsx

@@ -1,6 +1,11 @@
 import { ProjectProvider } from "../../context/ProjectContext";
 import { getProjectDetails } from "@/data/content";
 
+
+/**
+ * Layout for all paths caught under project/[slug]
+ */
+
 export default async function SlugLayout({children, params}: {
   children: React.ReactNode;
   params: Promise<{ slug: string }>;

app/project/[slug]/page.tsx

@@ -8,9 +8,8 @@ import "../../../styles/markdown-container.css";
 import Link from 'next/link';
 import { PROJECTS } from '@/data/content';
 
-export default function ProjectPage({
-  params,
-}: {params: Promise<{ slug: string }>}) {  
+export default function ProjectPage({params}: { params: Promise<{ slug: string }> })
+{  
 
   const mounted = useMountTransition(50)
   const { slug } = use(params);

app/project/layout.tsx

@@ -9,22 +9,23 @@ export default async function ProjectLayout({children}: {
 
   return (
     <div style={{ minHeight: "100vh", paddingBottom: 36 }}>
+      
       <div
         style={{
           maxWidth: 880,
           margin: "0 auto",
           padding: "0 24px",
           transition: "all 0.5s cubic-bezier(0.16, 1, 0.3, 1)",
-        }}
-      >
+        }}>
+
         <header
           style={{
             padding: "24px 0 0",
             display: "flex",
             justifyContent: "space-between",
             alignItems: "center",
-          }}
-        >
+          }}>
+
           <div
             style={{
               fontFamily: "var(--mono)",
@@ -32,8 +33,7 @@ export default async function ProjectLayout({children}: {
               fontWeight: 700,
               color: "var(--accent)",
               letterSpacing: "-0.02em",
-            }}
-          >          
+            }}>          
           </div>
           
         </header>