Almost complete

src/app/stories/page.tsx

@@ -0,0 +1,76 @@
+import Link from "next/link";
+import { stories } from "@/data/creativeData";
+import ExpandableStory from "@/components/ExpandableStory";
+
+export default function StoriesPage() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-yellow-50 via-orange-50 to-red-50 font-mono">
+      <div className="max-w-4xl mx-auto px-6 py-12">
+        <header className="text-center mb-16">
+          <div className="mb-8">
+            <div className="w-32 h-32 mx-auto bg-black rounded-full flex items-center justify-center border-4 border-yellow-300">
+              <div className="text-4xl font-bold text-yellow-300">📝</div>
+            </div>
+          </div>
+          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 uppercase tracking-wide">
+            Mini Stories
+          </h1>
+          <p className="text-lg text-gray-700 max-w-2xl mx-auto leading-relaxed font-semibold">
+            Capturing moments in brief narratives
+          </p>
+        </header>
+
+        <nav className="mb-16">
+          <div className="bg-white border-4 border-black rounded-none p-6 shadow-brutal">
+            <ul className="flex flex-wrap justify-center gap-4 md:gap-8">
+              <li>
+                <Link
+                  href="/"
+                  className="text-black font-bold hover:bg-green-200 px-4 py-2 transition-colors border-2 border-black hover:border-green-400"
+                >
+                  Home
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/digital-art"
+                  className="text-black font-bold hover:bg-purple-200 px-4 py-2 transition-colors border-2 border-black hover:border-purple-400"
+                >
+                  Digital Art
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/stories"
+                  className="border-yellow-200 bg-yellow-300 px-4 py-2 border-2 text-black"
+                >
+                  Stories
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/thoughts"
+                  className="text-black font-bold hover:bg-teal-200 px-4 py-2 transition-colors border-2 border-black hover:border-teal-400"
+                >
+                  Thoughts
+                </Link>
+              </li>
+            </ul>
+          </div>
+        </nav>
+
+        <main className="space-y-8">
+          {stories.map((story) => (
+            <ExpandableStory key={story.id} story={story} />
+          ))}
+        </main>
+
+        <footer className="mt-20 text-center">
+          <div className="bg-black text-white p-4 font-bold">
+            <p className="text-sm uppercase">Built with brutalist pastels</p>
+          </div>
+        </footer>
+      </div>
+    </div>
+  );
+}