Improved image expansion in Projects. Introduced Mods page.

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>
+  );
+}