update

package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@next/mdx": "^15.5.3",
+    "@next/mdx": "^15.5.9",
     "@types/mdx": "^2.0.13",
     "gray-matter": "^4.0.3",
     "next": "15.5.3",
@@ -20,15 +20,15 @@
     "react-markdown": "^10.1.0"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3",
+    "@eslint/eslintrc": "^3.3.3",
-    "@tailwindcss/postcss": "^4",
+    "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^20",
+    "@types/node": "^20.19.27",
-    "@types/react": "^19",
+    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19",
+    "@types/react-dom": "^19.2.3",
-    "eslint": "^9",
+    "eslint": "^9.39.2",
     "eslint-config-next": "15.5.3",
-    "tailwindcss": "^4",
+    "tailwindcss": "^4.1.18",
-    "typescript": "^5"
+    "typescript": "^5.9.3"
   },
   "packageManager": "pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977"
 }

src/app/digital-art/page.tsx

@@ -1,121 +1,23 @@
+import DigitalArt from "@/components/Art";
 import type { Metadata } from "next";
-import Link from "next/link";
-import { artItems } from "@/data/creativeData";
 
 export const metadata: Metadata = {
   title: "Digital Art",
-  description: "Explore my digital art collection featuring creative works through digital canvases and new media. Discover the intersection of technology and artistic expression.",
+  description:
+    "Explore my digital art collection featuring creative works through digital canvases and new media. Discover the intersection of technology and artistic expression.",
   openGraph: {
     title: "Digital Art | Mainasara Tsowa",
-    description: "Explore my digital art collection featuring creative works through digital canvases and new media.",
+    description:
+      "Explore my digital art collection featuring creative works through digital canvases and new media.",
     url: "https://mainasara.dev/digital-art",
   },
   twitter: {
     title: "Digital Art | Mainasara Tsowa",
-    description: "Explore my digital art collection featuring creative works through digital canvases and new media.",
+    description:
+      "Explore my digital art collection featuring creative works through digital canvases and new media.",
   },
 };
 
 export default function DigitalArtPage() {
-  return (
+  return <DigitalArt />;
-    <div className="min-h-screen bg-gradient-to-br from-purple-50 via-pink-50 to-yellow-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-purple-300">
-              <div className="text-4xl font-bold text-purple-300">🎨</div>
-            </div>
-          </div>
-          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 uppercase tracking-wide">
-            Digital Art
-          </h1>
-          <p className="text-lg text-gray-700 max-w-2xl mx-auto leading-relaxed font-semibold">
-            Exploring creativity through digital canvases and new media
-          </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="border-purple-200 bg-purple-300 px-4 py-2 border-2 text-black"
-                >
-                  Digital Art
-                </Link>
-              </li>
-              <li>
-                <Link
-                  href="/stories"
-                  className="text-black font-bold hover:bg-yellow-200 px-4 py-2 transition-colors border-2 border-black hover:border-yellow-400"
-                >
-                  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">
-          {artItems.map((art) => (
-            <article
-              key={art.id}
-              className="bg-white border-4 border-black rounded-none p-8 shadow-brutal"
-            >
-              <div className="flex flex-col md:flex-row gap-8">
-                <div className="md:w-1/3">
-                  <div className="bg-purple-100 border-2 border-black rounded-none w-full h-48 flex items-center justify-center">
-                    <span className="text-6xl">🎨</span>
-                  </div>
-                </div>
-                <div className="md:w-2/3">
-                  <h2 className="text-2xl font-bold text-gray-900 mb-4 uppercase">
-                    {art.title}
-                  </h2>
-                  <p className="text-gray-800 mb-4 leading-relaxed">
-                    {art.description}
-                  </p>
-                  <div className="flex flex-wrap gap-4 text-sm">
-                    <span className="bg-purple-200 text-black px-3 py-1 border-2 border-black font-bold">
-                      {art.medium}
-                    </span>
-                    <span className="bg-gray-200 text-black px-3 py-1 border-2 border-black font-bold">
-                      {new Date(art.createdAt).toLocaleDateString("en-US", {
-                        year: "numeric",
-                        month: "long",
-                        day: "numeric",
-                      })}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </article>
-          ))}
-        </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>
-  );
 }

src/app/globals.css

@@ -1,8 +1,32 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
+  /* Neo-brutalist muted color palette */
-  --foreground: #171717;
+  --background: #FAF8F5;
+  --foreground: #3D3D3D;
+  --card-bg: #FEFDFB;
+  --border-color: #3D3D3D;
+
+  /* Muted accent colors */
+  --sage: #B8C5B3;
+  --sage-light: #CBD6C8;
+  --sage-dark: #A8B5A0;
+
+  --terracotta: #D4B5A0;
+  --terracotta-light: #E0C9B8;
+  --terracotta-dark: #C9A88E;
+
+  --blue-grey: #A5B4BE;
+  --blue-grey-light: #B8C5CE;
+  --blue-grey-dark: #9BAAB5;
+
+  --rose: #D4B5B8;
+  --rose-light: #E0C9CC;
+  --rose-dark: #C9A8AB;
+
+  --sand: #E8DCC8;
+  --sand-light: #F0E8D8;
+  --sand-dark: #DDD0BB;
 }
 
 @theme inline {
@@ -14,8 +38,30 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #0a0a0a;
+    --background: #1A1A1A;
-    --foreground: #ededed;
+    --foreground: #E8E3D8;
+    --card-bg: #242424;
+    --border-color: #4D4D4D;
+
+    --sage: #8A9985;
+    --sage-light: #9BAA96;
+    --sage-dark: #7A8975;
+
+    --terracotta: #A38E7D;
+    --terracotta-light: #B29E8D;
+    --terracotta-dark: #937E6D;
+
+    --blue-grey: #7D8C95;
+    --blue-grey-light: #8D9CA5;
+    --blue-grey-dark: #6D7C85;
+
+    --rose: #A38E91;
+    --rose-light: #B39EA1;
+    --rose-dark: #937E81;
+
+    --sand: #B8AC98;
+    --sand-light: #C8BCA8;
+    --sand-dark: #A89C88;
   }
 }
 
@@ -24,3 +70,20 @@ body {
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+/* Neo-brutalist shadow utilities */
+.shadow-neo-brutal {
+  box-shadow: 5px 5px 0px var(--border-color);
+}
+
+.shadow-neo-brutal-hover {
+  box-shadow: 7px 7px 0px var(--border-color);
+}
+
+.shadow-brutal {
+  box-shadow: 5px 5px 0px var(--border-color);
+}
+
+.shadow-brutal-hover {
+  box-shadow: 7px 7px 0px var(--border-color);
+}

src/app/layout.tsx

@@ -13,60 +13,67 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  metadataBase: new URL('https://mainasara.dev'),
+  metadataBase: new URL("https://mainasara.dev"),
   title: {
-    default: 'Mainasara Tsowa - Developer & Cybersecurity Expert',
+    default: "Mainasara Tsowa - Developer & Cybersecurity Expert",
-    template: '%s | Mainasara Tsowa'
+    template: "%s | Mainasara Tsowa",
   },
-  description: 'Passionate developer and cybersecurity expert building secure, elegant digital solutions. Explore projects, creative writing, and technical insights.',
+  description:
-  keywords: ['developer', 'cybersecurity', 'full-stack', 'web development', 'security', 'programming', 'digital art', 'creative writing'],
+    "Passionate developer and cybersecurity expert building secure, elegant digital solutions. Explore projects, creative writing, and technical insights.",
-  authors: [{ name: 'Mainasara Tsowa' }],
+  keywords: [
-  creator: 'Mainasara Tsowa',
+    "developer",
-  publisher: 'Mainasara Tsowa',
+    "cybersecurity",
-  robots: 'index, follow',
+    "full-stack",
+    "web development",
+    "security",
+    "programming",
+    "digital art",
+    "creative writing",
+  ],
+  authors: [{ name: "Mainasara Tsowa" }],
+  creator: "Mainasara Tsowa",
+  publisher: "Mainasara Tsowa",
+  robots: "index, follow",
   openGraph: {
-    title: 'Mainasara Tsowa - Developer & Cybersecurity Expert',
+    title: "Mainasara Tsowa - Developer & Cybersecurity Expert",
-    description: 'Passionate developer and cybersecurity expert building secure, elegant digital solutions.',
+    description:
-    url: 'https://mainasara.dev',
+      "Passionate developer and cybersecurity expert building secure, elegant digital solutions.",
-    siteName: 'Mainasara Tsowa',
+    url: "https://mainasara.dev",
-    locale: 'en_US',
+    siteName: "Mainasara Tsowa",
-    type: 'website',
+    locale: "en_US",
+    type: "website",
     images: [
       {
-        url: '/media/me/me.jpeg',
+        url: "/media/me/me.jpeg",
         width: 800,
         height: 800,
-        alt: 'Mainasara Tsowa',
+        alt: "Mainasara Tsowa",
       },
     ],
   },
   twitter: {
-    card: 'summary_large_image',
+    card: "summary_large_image",
-    title: 'Mainasara Tsowa - Developer & Cybersecurity Expert',
+    title: "Mainasara Tsowa - Developer & Cybersecurity Expert",
-    description: 'Passionate developer and cybersecurity expert building secure, elegant digital solutions.',
+    description:
-    images: ['/media/me/me.jpeg'],
+      "Passionate developer and cybersecurity expert building secure, elegant digital solutions.",
-    creator: '@mainasara',
+    images: ["/media/me/me.jpeg"],
+    creator: "@neutrino2211",
   },
   alternates: {
-    canonical: 'https://mainasara.dev',
+    canonical: "https://mainasara.dev",
   },
   icons: {
-    icon: [
+    icon: [{ url: "/favicon.ico" }, { url: "/icon.png", type: "image/png" }],
-      { url: '/favicon.ico' },
+    apple: [{ url: "/apple-icon.png" }],
-      { url: '/icon.png', type: 'image/png' },
-    ],
-    apple: [
-      { url: '/apple-icon.png' },
-    ],
   },
-  manifest: '/manifest.json',
+  manifest: "/manifest.json",
   verification: {
-    google: 'your-google-site-verification-code',
+    google: "your-google-site-verification-code",
   },
-  category: 'technology',
+  category: "technology",
   other: {
-    'twitter:site': '@mainasara',
+    "twitter:site": "@neutrino2211",
-    'twitter:creator': '@mainasara',
+    "twitter:creator": "@neutrino2211",
   },
 };
 

src/app/page.tsx

@@ -1,28 +1,32 @@
 import type { Metadata } from "next";
 import ProjectsSection from "@/components/ProjectsSection";
 import Image from "next/image";
+import Link from "next/link";
 
 export const metadata: Metadata = {
   title: "Home",
-  description: "Welcome to my personal portfolio. I'm Mainasara Tsowa, a developer and cybersecurity expert passionate about building secure, elegant digital solutions.",
+  description:
+    "Welcome to my personal portfolio. I'm Mainasara Tsowa, a developer and cybersecurity expert passionate about building secure, elegant digital solutions.",
   openGraph: {
     title: "Home | Mainasara Tsowa",
-    description: "Welcome to my personal portfolio. Developer and cybersecurity expert building secure, elegant digital solutions.",
+    description:
+      "Welcome to my personal portfolio. Developer and cybersecurity expert building secure, elegant digital solutions.",
     url: "https://mainasara.dev",
   },
   twitter: {
     title: "Home | Mainasara Tsowa",
-    description: "Welcome to my personal portfolio. Developer and cybersecurity expert building secure, elegant digital solutions.",
+    description:
+      "Welcome to my personal portfolio. Developer and cybersecurity expert building secure, elegant digital solutions.",
   },
 };
 
 export default function Home() {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-green-50 via-teal-50 to-blue-50 font-mono">
+    <div className="min-h-screen bg-[#FAF8F5] 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-green-300">
+            <div className="w-32 h-32 mx-auto bg-[#3D3D3D] rounded-full flex items-center justify-center border-[3px] border-[#B8C5B3]">
               <Image
                 src="/media/me/me.jpeg"
                 alt="Mainasara Tsowa"
@@ -32,85 +36,49 @@ export default function Home() {
               />
             </div>
           </div>
-          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 uppercase tracking-wide">
+          <h1 className="text-4xl md:text-5xl font-bold text-[#3D3D3D] mb-4 uppercase tracking-wide">
             Mainasara Tsowa
           </h1>
-          <p className="text-lg text-gray-700 max-w-2xl mx-auto leading-relaxed font-semibold">
+          <p className="text-lg text-[#5D5D5D] max-w-2xl mx-auto leading-relaxed font-semibold">
             Developer & Cybersecurity Expert working on secure, elegant digital
             solutions
           </p>
         </header>
 
         <nav className="mb-16">
-          <div className="bg-white border-4 border-black rounded-none p-6 shadow-brutal">
+          <div className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-6 shadow-brutal">
             <ul className="flex flex-wrap justify-center gap-4 md:gap-8">
-              <li>
+              {/*<li>
-                <a
-                  href="#about"
-                  className="text-black font-bold hover:bg-green-200 px-4 py-2 transition-colors border-2 border-black hover:border-green-400"
-                >
-                  About
-                </a>
-              </li>
-              <li>
-                <a
-                  href="#expertise"
-                  className="text-black font-bold hover:bg-teal-200 px-4 py-2 transition-colors border-2 border-black hover:border-teal-400"
-                >
-                  Expertise
-                </a>
-              </li>
-              <li>
-                <a
-                  href="#projects"
-                  className="text-black font-bold hover:bg-blue-200 px-4 py-2 transition-colors border-2 border-black hover:border-blue-400"
-                >
-                  Projects
-                </a>
-              </li>
-              <li>
-                <a
-                  href="#contact"
-                  className="text-black font-bold hover:bg-yellow-200 px-4 py-2 transition-colors border-2 border-black hover:border-yellow-400"
-                >
-                  Contact
-                </a>
-              </li>
-            </ul>
-          </div>
-          <div className="bg-white border-4 border-black rounded-none p-6 shadow-brutal mt-6">
-            <ul className="flex flex-wrap justify-center gap-4 md:gap-8">
-              <li>
                 <a
                   href="https://blog.mainasara.dev"
-                  className="text-black font-bold hover:bg-slate-200 px-4 py-2 transition-colors border-2 border-black hover:border-slate-400"
+                  className="text-[#3D3D3D] font-bold hover:bg-[#E8DCC8] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
                 >
                   Blog
                 </a>
-              </li>
+              </li>*/}
               <li>
-                <a
+                <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"
+                  className="text-[#3D3D3D] font-bold hover:bg-[#E0C9CC] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
                 >
                   Digital Art
-                </a>
+                </Link>
               </li>
               <li>
-                <a
+                <Link
                   href="/stories"
-                  className="text-black font-bold hover:bg-yellow-200 px-4 py-2 transition-colors border-2 border-black hover:border-yellow-400"
+                  className="text-[#3D3D3D] font-bold hover:bg-[#F0E8D8] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
                 >
                   Mini Stories
-                </a>
+                </Link>
               </li>
               <li>
-                <a
+                <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"
+                  className="text-[#3D3D3D] font-bold hover:bg-[#CBD6C8] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
                 >
                   Thoughts
-                </a>
+                </Link>
               </li>
             </ul>
           </div>
@@ -119,12 +87,12 @@ export default function Home() {
         <main className="space-y-16">
           <section
             id="about"
-            className="bg-white border-4 border-black rounded-none p-8 shadow-brutal"
+            className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-8 shadow-brutal"
           >
-            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center uppercase">
+            <h2 className="text-2xl font-bold text-[#3D3D3D] mb-6 text-center uppercase">
               About
             </h2>
-            <p className="text-gray-800 leading-relaxed text-center max-w-3xl mx-auto font-semibold">
+            <p className="text-[#5D5D5D] leading-relaxed text-center max-w-3xl mx-auto font-semibold">
               I&apos;m a passionate developer and cybersecurity expert who
               believes in building beautiful, secure, and purposeful digital
               solutions. When I&apos;m not coding or exploring security tooling,
@@ -135,46 +103,46 @@ export default function Home() {
 
           <section
             id="expertise"
-            className="bg-white border-4 border-black rounded-none p-8 shadow-brutal"
+            className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-8 shadow-brutal"
           >
-            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center uppercase">
+            <h2 className="text-2xl font-bold text-[#3D3D3D] mb-6 text-center uppercase">
               Expertise
             </h2>
             <div className="grid md:grid-cols-2 gap-6">
-              <div className="bg-green-100 border-2 border-black rounded-none p-6">
+              <div className="bg-[#CBD6C8] border-2 border-[#3D3D3D] rounded-sm p-6">
-                <h3 className="text-lg font-bold text-gray-900 mb-3 uppercase">
+                <h3 className="text-lg font-bold text-[#3D3D3D] mb-3 uppercase">
                   Development
                 </h3>
-                <ul className="space-y-2 text-gray-800">
+                <ul className="space-y-2 text-[#5D5D5D]">
                   <li className="flex items-center">
-                    <span className="w-3 h-3 bg-black rounded-full mr-3"></span>
+                    <span className="w-3 h-3 bg-[#3D3D3D] rounded-full mr-3"></span>
                     Full-Stack Applications
                   </li>
                   <li className="flex items-center">
-                    <span className="w-3 h-3 bg-black rounded-full mr-3"></span>
+                    <span className="w-3 h-3 bg-[#3D3D3D] rounded-full mr-3"></span>
                     Clean Architecture
                   </li>
                   <li className="flex items-center">
-                    <span className="w-3 h-3 bg-black rounded-full mr-3"></span>
+                    <span className="w-3 h-3 bg-[#3D3D3D] rounded-full mr-3"></span>
                     Performance Optimization
                   </li>
                 </ul>
               </div>
-              <div className="bg-teal-100 border-2 border-black rounded-none p-6">
+              <div className="bg-[#B8C5CE] border-2 border-[#3D3D3D] rounded-sm p-6">
-                <h3 className="text-lg font-bold text-gray-900 mb-3 uppercase">
+                <h3 className="text-lg font-bold text-[#3D3D3D] mb-3 uppercase">
                   Cybersecurity
                 </h3>
-                <ul className="space-y-2 text-gray-800">
+                <ul className="space-y-2 text-[#5D5D5D]">
                   <li className="flex items-center">
-                    <span className="w-3 h-3 bg-black rounded-full mr-3"></span>
+                    <span className="w-3 h-3 bg-[#3D3D3D] rounded-full mr-3"></span>
                     Security Tooling
                   </li>
                   <li className="flex items-center">
-                    <span className="w-3 h-3 bg-black rounded-full mr-3"></span>
+                    <span className="w-3 h-3 bg-[#3D3D3D] rounded-full mr-3"></span>
                     Penetration Testing
                   </li>
                   <li className="flex items-center">
-                    <span className="w-3 h-3 bg-black rounded-full mr-3"></span>
+                    <span className="w-3 h-3 bg-[#3D3D3D] rounded-full mr-3"></span>
                     Security Architecture
                   </li>
                 </ul>
@@ -186,65 +154,65 @@ export default function Home() {
 
           <section
             id="writing"
-            className="bg-white border-4 border-black rounded-none p-8 shadow-brutal"
+            className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-8 shadow-brutal"
           >
-            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center uppercase">
+            <h2 className="text-2xl font-bold text-[#3D3D3D] mb-6 text-center uppercase">
               Creative Corner
             </h2>
             <div className="grid md:grid-cols-3 gap-6">
-              <a
+              <Link
                 href="/digital-art"
-                className="bg-yellow-100 border-2 border-black rounded-none p-6 text-center hover:bg-yellow-200 transition-colors"
+                className="bg-[#F0E8D8] border-2 border-[#3D3D3D] rounded-sm p-6 text-center hover:bg-[#E8DCC8] transition-colors"
               >
                 <div className="text-4xl mb-3">🎨</div>
-                <h3 className="text-lg font-bold text-gray-900 mb-2 uppercase">
+                <h3 className="text-lg font-bold text-[#3D3D3D] mb-2 uppercase">
                   Digital Art
                 </h3>
-                <p className="text-gray-800 text-sm">
+                <p className="text-[#5D5D5D] text-sm">
-                  Exploring creativity through digital canvases
+                  Someone messing around with colors and shapes.
                 </p>
-              </a>
+              </Link>
-              <a
+              <Link
                 href="/stories"
-                className="bg-green-100 border-2 border-black rounded-none p-6 text-center hover:bg-green-200 transition-colors"
+                className="bg-[#CBD6C8] border-2 border-[#3D3D3D] rounded-sm p-6 text-center hover:bg-[#B8C5B3] transition-colors"
               >
                 <div className="text-4xl mb-3">📝</div>
-                <h3 className="text-lg font-bold text-gray-900 mb-2 uppercase">
+                <h3 className="text-lg font-bold text-[#3D3D3D] mb-2 uppercase">
                   Mini Stories
                 </h3>
-                <p className="text-gray-800 text-sm">
+                <p className="text-[#5D5D5D] text-sm">
-                  Capturing moments in brief narratives
+                  I like good narratives, so I try to imitate them.
                 </p>
-              </a>
+              </Link>
-              <a
+              <Link
                 href="/thoughts"
-                className="bg-teal-100 border-2 border-black rounded-none p-6 text-center hover:bg-teal-200 transition-colors"
+                className="bg-[#B8C5CE] border-2 border-[#3D3D3D] rounded-sm p-6 text-center hover:bg-[#A5B4BE] transition-colors"
               >
                 <div className="text-4xl mb-3">🌸</div>
-                <h3 className="text-lg font-bold text-gray-900 mb-2 uppercase">
+                <h3 className="text-lg font-bold text-[#3D3D3D] mb-2 uppercase">
                   Thoughts
                 </h3>
-                <p className="text-gray-800 text-sm">
+                <p className="text-[#5D5D5D] text-sm">
-                  Reflections on technology and life
+                  Rants on technology, maybe something else.
                 </p>
-              </a>
+              </Link>
             </div>
           </section>
 
           <section
             id="contact"
-            className="bg-white border-4 border-black rounded-none p-8 shadow-brutal"
+            className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-8 shadow-brutal"
           >
-            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center uppercase">
+            <h2 className="text-2xl font-bold text-[#3D3D3D] mb-6 text-center uppercase">
               Get In Touch
             </h2>
             <div className="text-center">
-              <p className="text-gray-800 mb-6 font-semibold">
+              <p className="text-[#5D5D5D] mb-6 font-semibold">
                 Let&apos;s collaborate on something interesting
               </p>
               <a
                 href="mailto:tsowamainasara@gmail.com"
-                className="inline-block bg-black text-white px-8 py-4 font-bold border-2 border-black hover:bg-white hover:text-black transition-colors"
+                className="inline-block bg-[#3D3D3D] text-white px-8 py-4 font-bold border-2 border-[#3D3D3D] hover:bg-[#FEFDFB] hover:text-[#3D3D3D] transition-colors rounded-sm"
               >
                 SEND EMAIL
               </a>
@@ -255,8 +223,8 @@ export default function Home() {
         <footer className="mt-20 text-center">
           <div className="flex justify-center space-x-6 mb-6">
             <a
-              href="#"
+              href="https://github.com/neutrino2211/"
-              className="text-black font-bold hover:text-green-600 transition-colors"
+              className="text-[#3D3D3D] font-bold hover:text-[#B8C5B3] transition-colors"
             >
               <span className="sr-only">GitHub</span>
               <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
@@ -268,8 +236,8 @@ export default function Home() {
               </svg>
             </a>
             <a
-              href="#"
+              href="https://www.linkedin.com/in/mainasara-tsowa-17098b214/"
-              className="text-black font-bold hover:text-teal-600 transition-colors"
+              className="text-[#3D3D3D] font-bold hover:text-[#A5B4BE] transition-colors"
             >
               <span className="sr-only">LinkedIn</span>
               <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
@@ -277,8 +245,8 @@ export default function Home() {
               </svg>
             </a>
             <a
-              href="#"
+              href="https://x.com/neutrino2211/"
-              className="text-black font-bold hover:text-blue-600 transition-colors"
+              className="text-[#3D3D3D] font-bold hover:text-[#D4B5A0] transition-colors"
             >
               <span className="sr-only">Twitter</span>
               <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
@@ -286,9 +254,9 @@ export default function Home() {
               </svg>
             </a>
           </div>
-          <div className="bg-black text-white p-4 font-bold">
+          <div className="bg-[#3D3D3D] text-white p-4 font-bold rounded-md">
             <p className="text-sm uppercase">
-              Built with Charm Crush, Z.AI GLM and some pastel
+              Built with Charm Crush, Z.AI GLM and some muted colors
             </p>
           </div>
         </footer>

src/app/stories/[slug]/page.tsx

@@ -0,0 +1,161 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { loadStories } from "@/utils/mdxLoader";
+import { formatReadingTime } from "@/utils/readingTime";
+
+interface StoryPageProps {
+  params: {
+    slug: string;
+  };
+}
+
+import fs from "fs";
+import { Metadata } from "next";
+
+export async function generateStaticParams() {
+  const storiesDirectory = process.cwd() + "/src/content/stories";
+
+  try {
+    const filenames = fs.readdirSync(storiesDirectory);
+    return filenames.map((filename: string) => ({
+      slug: filename.replace(/\.mdx$/, ""),
+    }));
+  } catch {
+    return [];
+  }
+}
+
+export async function generateMetadata({
+  params,
+}: StoryPageProps): Promise<Metadata> {
+  const story = await getStoryBySlug(params.slug);
+
+  if (!story) {
+    return {
+      title: "Story Not Found",
+    };
+  }
+
+  return {
+    title: `${story.title} | Mainasara Tsowa`,
+    description: story.excerpt,
+    openGraph: {
+      title: `${story.title} | Mainasara Tsowa`,
+      description: story.excerpt,
+      url: `https://mainasara.dev/stories/${params.slug}`,
+    },
+    twitter: {
+      title: `${story.title} | Mainasara Tsowa`,
+      description: story.excerpt,
+    },
+  };
+}
+
+async function getStoryBySlug(slug: string) {
+  const stories = await loadStories();
+  return stories.find(
+    (story) => story.id === slug.replace(/[^a-zA-Z0-9]/g, "-"),
+  );
+}
+
+export default async function StoryPage({ params }: StoryPageProps) {
+  const story = await getStoryBySlug(params.slug);
+
+  if (!story) {
+    notFound();
+  }
+
+  return (
+    <div className="min-h-screen bg-[#FAF8F5] 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-[#3D3D3D] rounded-full flex items-center justify-center border-[3px] border-[#F0E8D8]">
+              <div className="text-4xl font-bold text-[#F0E8D8]">📝</div>
+            </div>
+          </div>
+          <h1 className="text-4xl md:text-5xl font-bold text-[#3D3D3D] mb-4 uppercase tracking-wide">
+            Mini Stories
+          </h1>
+          <p className="text-lg text-[#5D5D5D] max-w-2xl mx-auto leading-relaxed font-semibold">
+            Capturing moments in brief narratives
+          </p>
+        </header>
+
+        <nav className="mb-16">
+          <div className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-6 shadow-brutal">
+            <ul className="flex flex-wrap justify-center gap-4 md:gap-8">
+              <li>
+                <Link
+                  href="/"
+                  className="text-[#3D3D3D] font-bold hover:bg-[#CBD6C8] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
+                >
+                  Home
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/digital-art"
+                  className="text-[#3D3D3D] font-bold hover:bg-[#E0C9CC] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
+                >
+                  Digital Art
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/stories"
+                  className="border-[#3D3D3D] bg-[#F0E8D8] px-4 py-2 border-2 text-[#3D3D3D] rounded-sm"
+                >
+                  All Stories
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/thoughts"
+                  className="text-[#3D3D3D] font-bold hover:bg-[#B8C5CE] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
+                >
+                  Thoughts
+                </Link>
+              </li>
+            </ul>
+          </div>
+        </nav>
+
+        <main>
+          <article className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-8 shadow-brutal">
+            <div className="mb-8">
+              <h1 className="text-3xl md:text-4xl font-bold text-[#3D3D3D] uppercase mb-4">
+                {story.title}
+              </h1>
+
+              <div className="flex gap-4 text-sm mb-6">
+                <span className="bg-[#F0E8D8] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
+                  {formatReadingTime(story.readTime)} read
+                </span>
+                <span className="bg-[#E8DCC8] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
+                  {new Date(story.createdAt).toLocaleDateString("en-US", {
+                    year: "numeric",
+                    month: "long",
+                    day: "numeric",
+                  })}
+                </span>
+              </div>
+            </div>
+
+            <div className="prose prose-lg max-w-none">
+              <div className="text-[#5D5D5D] leading-relaxed whitespace-pre-line">
+                {story.content}
+              </div>
+            </div>
+          </article>
+        </main>
+
+        <footer className="mt-20 text-center">
+          <div className="bg-[#3D3D3D] text-white p-4 font-bold rounded-md">
+            <p className="text-sm uppercase">Built with neo-brutalist muted colors</p>
+          </div>
+        </footer>
+      </div>
+    </div>
+  );
+}

src/app/stories/page.tsx

@@ -21,29 +21,29 @@ export default async function StoriesPage() {
   const stories = await getStories();
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-yellow-50 via-orange-50 to-red-50 font-mono">
+    <div className="min-h-screen bg-[#FAF8F5] 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="w-32 h-32 mx-auto bg-[#3D3D3D] rounded-full flex items-center justify-center border-[3px] border-[#F0E8D8]">
-              <div className="text-4xl font-bold text-yellow-300">📝</div>
+              <div className="text-4xl font-bold text-[#F0E8D8]">📝</div>
             </div>
           </div>
-          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 uppercase tracking-wide">
+          <h1 className="text-4xl md:text-5xl font-bold text-[#3D3D3D] mb-4 uppercase tracking-wide">
             Mini Stories
           </h1>
-          <p className="text-lg text-gray-700 max-w-2xl mx-auto leading-relaxed font-semibold">
+          <p className="text-lg text-[#5D5D5D] 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">
+          <div className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md 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"
+                  className="text-[#3D3D3D] font-bold hover:bg-[#CBD6C8] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
                 >
                   Home
                 </Link>
@@ -51,7 +51,7 @@ export default async function StoriesPage() {
               <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"
+                  className="text-[#3D3D3D] font-bold hover:bg-[#E0C9CC] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
                 >
                   Digital Art
                 </Link>
@@ -59,7 +59,7 @@ export default async function StoriesPage() {
               <li>
                 <Link
                   href="/stories"
-                  className="border-yellow-200 bg-yellow-300 px-4 py-2 border-2 text-black"
+                  className="border-[#3D3D3D] bg-[#F0E8D8] px-4 py-2 border-2 text-[#3D3D3D] rounded-sm"
                 >
                   Stories
                 </Link>
@@ -67,7 +67,7 @@ export default async function StoriesPage() {
               <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"
+                  className="text-[#3D3D3D] font-bold hover:bg-[#B8C5CE] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
                 >
                   Thoughts
                 </Link>
@@ -83,8 +83,8 @@ export default async function StoriesPage() {
         </main>
 
         <footer className="mt-20 text-center">
-          <div className="bg-black text-white p-4 font-bold">
+          <div className="bg-[#3D3D3D] text-white p-4 font-bold rounded-md">
-            <p className="text-sm uppercase">Built with brutalist pastels</p>
+            <p className="text-sm uppercase">Built with neo-brutalist muted colors</p>
           </div>
         </footer>
       </div>

src/app/thoughts/[slug]/page.tsx

@@ -0,0 +1,165 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { loadThoughts } from "@/utils/mdxLoader";
+import { formatReadingTime } from "@/utils/readingTime";
+
+interface ThoughtPageProps {
+  params: {
+    slug: string;
+  };
+}
+
+import fs from "fs";
+import { Metadata } from "next";
+import Markdown from "react-markdown";
+
+export async function generateStaticParams() {
+  const thoughtsDirectory = process.cwd() + "/src/content/thoughts";
+
+  try {
+    const filenames = fs.readdirSync(thoughtsDirectory);
+    return filenames.map((filename: string) => ({
+      slug: filename.replace(/\.mdx$/, ""),
+    }));
+  } catch {
+    return [];
+  }
+}
+
+export async function generateMetadata({
+  params,
+}: ThoughtPageProps): Promise<Metadata> {
+  const thought = await getThoughtBySlug(params.slug);
+
+  if (!thought) {
+    return {
+      title: "Thought Not Found",
+    };
+  }
+
+  return {
+    title: `${thought.title} | Mainasara Tsowa`,
+    description: thought.excerpt,
+    openGraph: {
+      title: `${thought.title} | Mainasara Tsowa`,
+      description: thought.excerpt,
+      url: `https://mainasara.dev/thoughts/${params.slug}`,
+    },
+    twitter: {
+      title: `${thought.title} | Mainasara Tsowa`,
+      description: thought.excerpt,
+    },
+  };
+}
+
+async function getThoughtBySlug(slug: string) {
+  const thoughts = await loadThoughts();
+  return thoughts.find(
+    (thought) => thought.id === slug.replace(/[^a-zA-Z0-9]/g, "-"),
+  );
+}
+
+export default async function ThoughtPage({ params }: ThoughtPageProps) {
+  const thought = await getThoughtBySlug(params.slug);
+
+  if (!thought) {
+    notFound();
+  }
+
+  return (
+    <div className="min-h-screen bg-[#FAF8F5] 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-[#3D3D3D] rounded-full flex items-center justify-center border-[3px] border-[#B8C5CE]">
+              <div className="text-4xl font-bold text-[#B8C5CE]">🌸</div>
+            </div>
+          </div>
+          <h1 className="text-4xl md:text-5xl font-bold text-[#3D3D3D] mb-4 uppercase tracking-wide">
+            Thoughts
+          </h1>
+          <p className="text-lg text-[#5D5D5D] max-w-2xl mx-auto leading-relaxed font-semibold">
+            Reflections on technology and life
+          </p>
+        </header>
+
+        <nav className="mb-16">
+          <div className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-6 shadow-brutal">
+            <ul className="flex flex-wrap justify-center gap-4 md:gap-8">
+              <li>
+                <Link
+                  href="/"
+                  className="text-[#3D3D3D] font-bold hover:bg-[#CBD6C8] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
+                >
+                  Home
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/digital-art"
+                  className="text-[#3D3D3D] font-bold hover:bg-[#E0C9CC] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
+                >
+                  Digital Art
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/stories"
+                  className="text-[#3D3D3D] font-bold hover:bg-[#F0E8D8] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
+                >
+                  Stories
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/thoughts"
+                  className="border-[#3D3D3D] bg-[#B8C5CE] px-4 py-2 border-2 text-[#3D3D3D] rounded-sm"
+                >
+                  All Thoughts
+                </Link>
+              </li>
+            </ul>
+          </div>
+        </nav>
+
+        <main>
+          <article className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-8 shadow-brutal">
+            <div className="mb-8">
+              <h1 className="text-3xl md:text-4xl font-bold text-[#3D3D3D] uppercase mb-4">
+                {thought.title}
+              </h1>
+
+              <div className="flex gap-4 text-sm mb-6">
+                <span className="bg-[#B8C5CE] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
+                  {thought.category}
+                </span>
+                <span className="bg-[#B8C5CE] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
+                  {formatReadingTime(thought.readTime)} read
+                </span>
+                <span className="bg-[#E8DCC8] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
+                  {new Date(thought.createdAt).toLocaleDateString("en-US", {
+                    year: "numeric",
+                    month: "long",
+                    day: "numeric",
+                  })}
+                </span>
+              </div>
+            </div>
+
+            <div className="prose prose-lg max-w-none">
+              <div className="text-[#5D5D5D] leading-relaxed whitespace-pre-line">
+                <Markdown>{thought.content}</Markdown>
+              </div>
+            </div>
+          </article>
+        </main>
+
+        <footer className="mt-20 text-center">
+          <div className="bg-[#3D3D3D] text-white p-4 font-bold rounded-md">
+            <p className="text-sm uppercase">Built with neo-brutalist muted colors</p>
+          </div>
+        </footer>
+      </div>
+    </div>
+  );
+}

src/app/thoughts/page.tsx

@@ -21,29 +21,29 @@ export default async function ThoughtsPage() {
   const thoughts = await getThoughts();
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-teal-50 via-green-50 to-blue-50 font-mono">
+    <div className="min-h-screen bg-[#FAF8F5] 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-teal-300">
+            <div className="w-32 h-32 mx-auto bg-[#3D3D3D] rounded-full flex items-center justify-center border-[3px] border-[#B8C5CE]">
-              <div className="text-4xl font-bold text-teal-300">🌸</div>
+              <div className="text-4xl font-bold text-[#B8C5CE]">🌸</div>
             </div>
           </div>
-          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 uppercase tracking-wide">
+          <h1 className="text-4xl md:text-5xl font-bold text-[#3D3D3D] mb-4 uppercase tracking-wide">
             Thoughts
           </h1>
-          <p className="text-lg text-gray-700 max-w-2xl mx-auto leading-relaxed font-semibold">
+          <p className="text-lg text-[#5D5D5D] max-w-2xl mx-auto leading-relaxed font-semibold">
             Reflections on technology and life
           </p>
         </header>
 
         <nav className="mb-16">
-          <div className="bg-white border-4 border-black rounded-none p-6 shadow-brutal">
+          <div className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md 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"
+                  className="text-[#3D3D3D] font-bold hover:bg-[#CBD6C8] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
                 >
                   Home
                 </Link>
@@ -51,7 +51,7 @@ export default async function ThoughtsPage() {
               <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"
+                  className="text-[#3D3D3D] font-bold hover:bg-[#E0C9CC] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
                 >
                   Digital Art
                 </Link>
@@ -59,7 +59,7 @@ export default async function ThoughtsPage() {
               <li>
                 <Link
                   href="/stories"
-                  className="text-black font-bold hover:bg-yellow-200 px-4 py-2 transition-colors border-2 border-black hover:border-yellow-400"
+                  className="text-[#3D3D3D] font-bold hover:bg-[#F0E8D8] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
                 >
                   Stories
                 </Link>
@@ -67,7 +67,7 @@ export default async function ThoughtsPage() {
               <li>
                 <Link
                   href="/thoughts"
-                  className="border-teal-200 bg-teal-300 px-4 py-2 border-2 text-black"
+                  className="border-[#3D3D3D] bg-[#B8C5CE] px-4 py-2 border-2 text-[#3D3D3D] rounded-sm"
                 >
                   Thoughts
                 </Link>
@@ -83,8 +83,8 @@ export default async function ThoughtsPage() {
         </main>
 
         <footer className="mt-20 text-center">
-          <div className="bg-black text-white p-4 font-bold">
+          <div className="bg-[#3D3D3D] text-white p-4 font-bold rounded-md">
-            <p className="text-sm uppercase">Built with brutalist pastels</p>
+            <p className="text-sm uppercase">Built with neo-brutalist muted colors</p>
           </div>
         </footer>
       </div>

src/components/Art.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import Link from "next/link";
+import { artItems } from "@/data/artData";
+import { useState } from "react";
+import ArtModal from "@/components/ArtModal";
+
+export default function DigitalArt() {
+  const [selectedArt, setSelectedArt] = useState<(typeof artItems)[0] | null>(
+    null,
+  );
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleArtClick = (artItem: (typeof artItems)[0]) => {
+    setSelectedArt(artItem);
+    setCurrentImageIndex(0);
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setSelectedArt(null);
+    setCurrentImageIndex(0);
+  };
+
+  const handleImageChange = (index: number) => {
+    setCurrentImageIndex(index);
+  };
+
+  return (
+    <div className="min-h-screen bg-[#FAF8F5] 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-[#3D3D3D] rounded-full flex items-center justify-center border-[3px] border-[#E0C9CC]">
+              <div className="text-4xl font-bold text-[#E0C9CC]">🎨</div>
+            </div>
+          </div>
+          <h1 className="text-4xl md:text-5xl font-bold text-[#3D3D3D] mb-4 uppercase tracking-wide">
+            Digital Art
+          </h1>
+          <p className="text-lg text-[#5D5D5D] max-w-2xl mx-auto leading-relaxed font-semibold">
+            Exploring creativity through digital canvases and new media
+          </p>
+        </header>
+
+        <nav className="mb-16">
+          <div className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-6 shadow-brutal">
+            <ul className="flex flex-wrap justify-center gap-4 md:gap-8">
+              <li>
+                <Link
+                  href="/"
+                  className="text-[#3D3D3D] font-bold hover:bg-[#CBD6C8] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
+                >
+                  Home
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/digital-art"
+                  className="border-[#3D3D3D] bg-[#E0C9CC] px-4 py-2 border-2 text-[#3D3D3D] rounded-sm"
+                >
+                  Digital Art
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/stories"
+                  className="text-[#3D3D3D] font-bold hover:bg-[#F0E8D8] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
+                >
+                  Stories
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/thoughts"
+                  className="text-[#3D3D3D] font-bold hover:bg-[#B8C5CE] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
+                >
+                  Thoughts
+                </Link>
+              </li>
+            </ul>
+          </div>
+        </nav>
+
+        <main className="space-y-8">
+          {artItems.map((art) => (
+            <article
+              key={art.id}
+              className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-8 shadow-brutal cursor-pointer hover:shadow-brutal-hover transition-shadow"
+              onClick={() => handleArtClick(art)}
+            >
+              <div className="flex flex-col md:flex-row gap-8">
+                <div className="md:w-1/3">
+                  <div className="bg-[#E0C9CC] border-2 border-[#3D3D3D] rounded-sm w-full h-48 flex items-center justify-center">
+                    <img
+                      src={
+                        art.type === "collection"
+                          ? art.images![0].url
+                          : art.imageUrl
+                      }
+                      alt={art.title}
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                </div>
+                <div className="md:w-2/3">
+                  <h2 className="text-2xl font-bold text-[#3D3D3D] mb-4 uppercase">
+                    {art.title}
+                  </h2>
+                  <p className="text-[#5D5D5D] mb-4 leading-relaxed">
+                    {art.description}
+                  </p>
+                  <div className="flex flex-wrap gap-4 text-sm">
+                    <span className="bg-[#E0C9CC] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
+                      {art.medium}
+                    </span>
+                    <span className="bg-[#E8DCC8] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
+                      {art.type === "collection" ? "Collection" : "Single"}
+                    </span>
+                    <span className="bg-[#E8DCC8] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
+                      {new Date(art.createdAt).toLocaleDateString("en-US", {
+                        year: "numeric",
+                        month: "long",
+                        day: "numeric",
+                      })}
+                    </span>
+                    {art.type === "collection" && art.images && (
+                      <span className="bg-[#B8C5CE] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
+                        {art.images.length} images
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </article>
+          ))}
+        </main>
+
+        <footer className="mt-20 text-center">
+          <div className="bg-[#3D3D3D] text-white p-4 font-bold rounded-md">
+            <p className="text-sm uppercase">Built with neo-brutalist muted colors</p>
+          </div>
+        </footer>
+      </div>
+
+      <ArtModal
+        isOpen={isModalOpen}
+        onClose={handleCloseModal}
+        artItem={selectedArt}
+        currentImageIndex={currentImageIndex}
+        onImageChange={handleImageChange}
+      />
+    </div>
+  );
+}

src/components/ArtModal.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import React from "react";
+import { ArtItem } from "@/data/creative";
+
+interface ArtModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  artItem: ArtItem | null;
+  currentImageIndex: number;
+  onImageChange: (index: number) => void;
+}
+
+export default function ArtModal({
+  isOpen,
+  onClose,
+  artItem,
+  currentImageIndex,
+  onImageChange,
+}: ArtModalProps) {
+  if (!isOpen || !artItem) return null;
+
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  const handlePrevImage = () => {
+    if (artItem.images && artItem.images.length > 1) {
+      const newIndex =
+        currentImageIndex > 0
+          ? currentImageIndex - 1
+          : artItem.images.length - 1;
+      onImageChange(newIndex);
+    }
+  };
+
+  const handleNextImage = () => {
+    if (artItem.images && artItem.images.length > 1) {
+      const newIndex =
+        currentImageIndex < artItem.images.length - 1
+          ? currentImageIndex + 1
+          : 0;
+      onImageChange(newIndex);
+    }
+  };
+
+  const currentImage = artItem.images?.[currentImageIndex];
+
+  return (
+    <div
+      className="fixed inset-0 bg-[#3D3D3D] bg-opacity-90 flex items-center justify-center z-50 p-4"
+      onClick={handleBackdropClick}
+    >
+      <div className="max-w-4xl w-full max-h-[90vh] overflow-y-auto bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md shadow-brutal">
+        <div className="p-6">
+          <div className="flex justify-between items-start mb-6">
+            <div>
+              <h2 className="text-3xl font-bold text-[#3D3D3D] mb-2 uppercase">
+                {artItem.title}
+              </h2>
+              <p className="text-[#5D5D5D] mb-4">{artItem.description}</p>
+              <div className="flex gap-4 text-sm flex-wrap">
+                <span className="bg-[#E0C9CC] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
+                  {artItem.medium}
+                </span>
+                <span className="bg-[#E8DCC8] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
+                  {artItem.type === "collection" ? "Collection" : "Single"}
+                </span>
+                <span className="bg-[#E8DCC8] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
+                  {new Date(artItem.createdAt).toLocaleDateString("en-US", {
+                    year: "numeric",
+                    month: "long",
+                    day: "numeric",
+                  })}
+                </span>
+              </div>
+            </div>
+            <button
+              onClick={onClose}
+              className="text-3xl font-bold text-[#3D3D3D] w-10 h-10 flex items-center justify-center hover:text-[#E0C9CC] transition-colors"
+            >
+              ×
+            </button>
+          </div>
+
+          {currentImage && (
+            <div className="relative">
+              <div className="w-full h-96 flex items-center justify-center mb-4 bg-[#E0C9CC] border-2 border-[#3D3D3D] rounded-sm">
+                <img
+                  src={currentImage.url}
+                  alt={currentImage.title}
+                  className="max-w-full max-h-full"
+                />
+              </div>
+
+              {artItem.type === "collection" &&
+                artItem.images &&
+                artItem.images.length > 1 && (
+                  <>
+                    <button
+                      onClick={handlePrevImage}
+                      className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-[#FEFDFB] text-[#3D3D3D] border-2 border-[#3D3D3D] px-4 py-2 font-bold hover:bg-[#E0C9CC] transition-colors rounded-sm"
+                    >
+                      ←
+                    </button>
+                    <button
+                      onClick={handleNextImage}
+                      className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-[#FEFDFB] text-[#3D3D3D] border-2 border-[#3D3D3D] px-4 py-2 font-bold hover:bg-[#E0C9CC] transition-colors rounded-sm"
+                    >
+                      →
+                    </button>
+                  </>
+                )}
+
+              <div className="text-center">
+                <h3 className="text-xl font-bold text-[#3D3D3D] mb-2">
+                  {currentImage.title || `Image ${currentImageIndex + 1}`}
+                </h3>
+                {currentImage.description && (
+                  <p className="text-[#5D5D5D]">{currentImage.description}</p>
+                )}
+              </div>
+            </div>
+          )}
+
+          {artItem.type === "collection" &&
+            artItem.images &&
+            artItem.images.length > 1 && (
+              <div className="mt-6">
+                <h4 className="text-lg font-bold mb-3 text-center text-[#3D3D3D] uppercase">
+                  Collection Preview
+                </h4>
+                <div className="flex gap-2 overflow-x-auto pb-2 justify-center">
+                  {artItem.images.map((image, index) => (
+                    <button
+                      key={image.id}
+                      onClick={() => onImageChange(index)}
+                      className={`flex-shrink-0 w-20 h-20 border-2 ${
+                        index === currentImageIndex
+                          ? "border-[#E0C9CC] bg-[#E0C9CC]"
+                          : "border-[#3D3D3D] bg-[#F0E8D8]"
+                      } rounded-sm flex items-center justify-center hover:border-[#E0C9CC] transition-colors`}
+                    >
+                      <img
+                        src={image.url}
+                        alt={image.title}
+                        className="max-w-full max-h-full"
+                      />
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/ExpandableStory.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import Link from 'next/link';
 import { Story } from '@/data/creative';
 import { formatReadingTime } from '@/utils/readingTime';
 
@@ -12,44 +13,50 @@ export default function ExpandableStory({ story }: ExpandableStoryProps) {
   const [isExpanded, setIsExpanded] = useState(false);
 
   return (
-    <article className="bg-white border-4 border-black rounded-none p-8 shadow-brutal">
+    <article className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-8 shadow-brutal">
-      <div 
+      <div
         className="cursor-pointer"
         onClick={() => setIsExpanded(!isExpanded)}
       >
         <div className="flex justify-between items-start mb-4">
-          <h2 className="text-2xl font-bold text-gray-900 uppercase flex-1 pr-4">
+          <h2 className="text-2xl font-bold text-[#3D3D3D] uppercase flex-1 pr-4">
             {story.title}
           </h2>
-          <div className="text-black font-bold text-lg bg-yellow-200 border-2 border-black px-3 py-1 whitespace-nowrap">
+          <div className="text-[#3D3D3D] font-bold text-lg bg-[#F0E8D8] border-2 border-[#3D3D3D] px-3 py-1 whitespace-nowrap rounded-sm">
             {isExpanded ? '▼' : '▶'}
           </div>
         </div>
-        
+
-        <p className="text-gray-600 italic mb-4">{story.excerpt}</p>
+        <p className="text-[#6D6D6D] italic mb-4">{story.excerpt}</p>
-        
+
         <div className="flex gap-4 text-sm">
-          <span className="bg-yellow-200 text-black px-3 py-1 border-2 border-black font-bold">
+          <Link
+            href={`/stories/${story.id}`}
+            className="bg-[#F0E8D8] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold hover:bg-[#E8DCC8] transition-colors rounded-sm"
+          >
+            Read Full Story
+          </Link>
+          <span className="bg-[#F0E8D8] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
             {formatReadingTime(story.readTime)} read
           </span>
-          <span className="bg-gray-200 text-black px-3 py-1 border-2 border-black font-bold">
+          <span className="bg-[#E8DCC8] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
-            {new Date(story.createdAt).toLocaleDateString('en-US', { 
+            {new Date(story.createdAt).toLocaleDateString('en-US', {
-              year: 'numeric', 
+              year: 'numeric',
-              month: 'long', 
+              month: 'long',
-              day: 'numeric' 
+              day: 'numeric'
             })}
           </span>
         </div>
       </div>
 
-      <div 
+      <div
         className={`overflow-hidden transition-all duration-500 ease-in-out ${
           isExpanded ? 'max-h-[2000px] opacity-100 mt-6' : 'max-h-0 opacity-0'
         }`}
       >
-        <div className="border-t-2 border-black pt-6">
+        <div className="border-t-2 border-[#3D3D3D] pt-6">
           <div className="prose prose-lg max-w-none">
-            <div className="text-gray-800 leading-relaxed whitespace-pre-line">
+            <div className="text-[#5D5D5D] leading-relaxed whitespace-pre-line">
               {story.content}
             </div>
           </div>

src/components/ExpandableThought.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import Link from "next/link";
 import { Thought } from "@/data/creative";
 import { formatReadingTime } from "@/utils/readingTime";
 import Markdown from "react-markdown";
@@ -10,41 +11,47 @@ interface ExpandableThoughtProps {
 }
 
 const categoryColors = {
-  technology: "bg-blue-200",
+  technology: "bg-[#B8C5CE]",
-  life: "bg-green-200",
+  life: "bg-[#CBD6C8]",
-  creativity: "bg-purple-200",
+  creativity: "bg-[#E0C9CC]",
 };
 
 export default function ExpandableThought({ thought }: ExpandableThoughtProps) {
   const [isExpanded, setIsExpanded] = useState(false);
 
   return (
-    <article className="bg-white border-4 border-black rounded-none p-8 shadow-brutal">
+    <article className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-8 shadow-brutal">
       <div
         className="cursor-pointer"
         onClick={() => setIsExpanded(!isExpanded)}
       >
         <div className="flex justify-between items-start mb-4">
-          <h2 className="text-2xl font-bold text-gray-900 uppercase flex-1 pr-4">
+          <h2 className="text-2xl font-bold text-[#3D3D3D] uppercase flex-1 pr-4">
             {thought.title}
           </h2>
-          <div className="text-black font-bold text-lg bg-teal-200 border-2 border-black px-3 py-1 whitespace-nowrap">
+          <div className="text-[#3D3D3D] font-bold text-lg bg-[#B8C5CE] border-2 border-[#3D3D3D] px-3 py-1 whitespace-nowrap rounded-sm">
             {isExpanded ? "▼" : "▶"}
           </div>
         </div>
 
-        <p className="text-gray-600 italic mb-4">{thought.excerpt}</p>
+        <p className="text-[#6D6D6D] italic mb-4">{thought.excerpt}</p>
 
         <div className="flex gap-4 text-sm">
+          <Link
+            href={`/thoughts/${thought.id}`}
+            className="bg-[#B8C5CE] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold hover:bg-[#A5B4BE] transition-colors rounded-sm"
+          >
+            Read Full Thought
+          </Link>
           <span
-            className={`${categoryColors[thought.category]} text-black px-3 py-1 border-2 border-black font-bold`}
+            className={`${categoryColors[thought.category]} text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm`}
           >
             {thought.category}
           </span>
-          <span className="bg-teal-200 text-black px-3 py-1 border-2 border-black font-bold">
+          <span className="bg-[#B8C5CE] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
             {formatReadingTime(thought.readTime)} read
           </span>
-          <span className="bg-gray-200 text-black px-3 py-1 border-2 border-black font-bold">
+          <span className="bg-[#E8DCC8] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
             {new Date(thought.createdAt).toLocaleDateString("en-GB", {
               year: "numeric",
               month: "long",
@@ -59,9 +66,9 @@ export default function ExpandableThought({ thought }: ExpandableThoughtProps) {
           isExpanded ? "max-h-[2000px] opacity-100 mt-6" : "max-h-0 opacity-0"
         }`}
       >
-        <div className="border-t-2 border-black pt-6">
+        <div className="border-t-2 border-[#3D3D3D] pt-6">
           <div className="prose prose-lg max-w-none">
-            <div className="text-gray-800 leading-relaxed whitespace-pre-line">
+            <div className="text-[#5D5D5D] leading-relaxed whitespace-pre-line">
               <Markdown>{thought.content}</Markdown>
             </div>
           </div>

src/components/ProjectsSection.tsx

@@ -4,17 +4,17 @@ import { useState } from "react";
 import { projects, Project } from "@/data/projects";
 
 const categoryColors = {
-  security: "bg-red-100 hover:border-red-400",
+  security: "bg-[#E0C9B8] hover:border-[#5D5D5D]",
-  development: "bg-blue-100 hover:border-blue-400",
+  development: "bg-[#B8C5CE] hover:border-[#5D5D5D]",
-  art: "bg-purple-100 hover:border-purple-400",
+  art: "bg-[#E0C9CC] hover:border-[#5D5D5D]",
-  other: "bg-gray-100 hover:border-gray-400",
+  other: "bg-[#E8DCC8] hover:border-[#5D5D5D]",
 };
 
 const categoryHoverColors = {
-  security: "hover:text-red-600",
+  security: "hover:text-[#C9A88E]",
-  development: "hover:text-blue-600",
+  development: "hover:text-[#9BAAB5]",
-  art: "hover:text-purple-600",
+  art: "hover:text-[#C9A8AB]",
-  other: "hover:text-gray-600",
+  other: "hover:text-[#DDD0BB]",
 };
 
 export default function ProjectsSection() {
@@ -26,9 +26,9 @@ export default function ProjectsSection() {
   return (
     <section
       id="projects"
-      className="bg-white border-4 border-black rounded-none p-8 shadow-brutal"
+      className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-8 shadow-brutal"
     >
-      <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center uppercase">
+      <h2 className="text-2xl font-bold text-[#3D3D3D] mb-6 text-center uppercase">
         Featured Projects
       </h2>
 
@@ -54,7 +54,7 @@ export default function ProjectsSection() {
         <div className="text-center mt-6">
           <button
             onClick={() => setIsExpanded(!isExpanded)}
-            className="bg-black text-white px-6 py-3 font-bold border-2 border-black hover:bg-white hover:text-black transition-colors uppercase"
+            className="bg-[#3D3D3D] text-white px-6 py-3 font-bold border-2 border-[#3D3D3D] hover:bg-[#FEFDFB] hover:text-[#3D3D3D] transition-colors uppercase rounded-sm"
           >
             {isExpanded ? "Show Less" : "Read More"}
           </button>
@@ -70,16 +70,16 @@ function ProjectCard({ project }: { project: Project }) {
 
   return (
     <div
-      className={`${colorClass} border-2 border-black rounded-none p-6 transition-colors`}
+      className={`${colorClass} border-2 border-[#3D3D3D] rounded-sm p-6 transition-colors`}
     >
-      <h3 className="text-lg font-bold text-gray-900 mb-2 uppercase">
+      <h3 className="text-lg font-bold text-[#3D3D3D] mb-2 uppercase">
         {project.title}
       </h3>
-      <p className="text-gray-800 text-sm mb-3">{project.description}</p>
+      <p className="text-[#5D5D5D] text-sm mb-3">{project.description}</p>
       {project.link && (
         <a
           href={project.link}
-          className={`text-black font-bold underline ${hoverColorClass} transition-colors`}
+          className={`text-[#3D3D3D] font-bold underline ${hoverColorClass} transition-colors`}
         >
           View Project →
         </a>

src/data/artData.ts

@@ -0,0 +1,45 @@
+import { ArtItem } from "./creative";
+
+export const artItems: ArtItem[] = [
+  {
+    id: "screen-saver",
+    title: "Glassy Screen Saver",
+    description:
+      "Have a set of beautifully translucent glass shards accompany you through the day.",
+    createdAt: "2023-01-16",
+    medium: "Digital Abstract Art",
+    type: "collection",
+    images: [
+      {
+        id: "artboard-2",
+        url: "/media/art/screensaver/Artboard – 2.png",
+        title: "Flow",
+        description: "A calm set of fluttery glass shards",
+      },
+      {
+        id: "artboard-4",
+        url: "/media/art/screensaver/Artboard – 4.png",
+        title: "It Cuts",
+        description: "Sharp, daring and a clear warning.",
+      },
+      {
+        id: "screensaver-1",
+        url: "/media/art/screensaver/ScreenSaver-1.png",
+        title: "Unoffensive",
+        description: "Yes, it can cut. But it does not want to.",
+      },
+      {
+        id: "screensaver-2",
+        url: "/media/art/screensaver/ScreenSaver-2.png",
+        title: "Rebel",
+        description: "These shards are not afraid to scare you.",
+      },
+      {
+        id: "screensaver-3",
+        url: "/media/art/screensaver/ScreenSaver-3.png",
+        title: "Stained",
+        description: "What if our calm friend from earlier was stained?",
+      },
+    ],
+  },
+];

src/data/creative.ts

@@ -5,6 +5,15 @@ export interface ArtItem {
   imageUrl?: string;
   createdAt: string;
   medium: string;
+  type: 'collection' | 'single';
+  images?: ArtImage[];
+}
+
+export interface ArtImage {
+  id: string;
+  url: string;
+  title?: string;
+  description?: string;
 }
 
 export interface Story {

src/data/creativeData.ts

@@ -1,29 +1,5 @@
-import { ArtItem, Story, Thought } from './creative';
+import { Story, Thought } from "./creative";
-import { loadStories, loadThoughts } from '@/utils/mdxLoader';
+import { loadStories, loadThoughts } from "@/utils/mdxLoader";
-
-export const artItems: ArtItem[] = [
-  {
-    id: 'digital-landscapes',
-    title: 'Digital Landscapes',
-    description: 'Exploring the intersection of nature and technology through vibrant digital canvases',
-    createdAt: '2024-01-15',
-    medium: 'Digital Painting'
-  },
-  {
-    id: 'abstract-emotions',
-    title: 'Abstract Emotions',
-    description: 'A series exploring human emotions through color and form',
-    createdAt: '2024-02-20',
-    medium: 'Mixed Media'
-  },
-  {
-    id: 'cyberpunk-dreams',
-    title: 'Cyberpunk Dreams',
-    description: 'Futuristic cityscapes blending retro aesthetics with modern technology',
-    createdAt: '2024-03-10',
-    medium: '3D Render'
-  }
-];
 
 // Load stories from MDX files
 export async function getStories(): Promise<Story[]> {
@@ -33,4 +9,4 @@ export async function getStories(): Promise<Story[]> {
 // Load thoughts from MDX files
 export async function getThoughts(): Promise<Thought[]> {
   return await loadThoughts();
-}
+}

src/data/projects.ts

@@ -2,42 +2,18 @@ export interface Project {
   id: string;
   title: string;
   description: string;
-  category: 'security' | 'development' | 'art' | 'other';
+  category: "security" | "development" | "art" | "other";
   link?: string;
   featured: boolean;
 }
 
 export const projects: Project[] = [
   {
-    id: 'security-scanner',
+    id: "valradar",
-    title: 'Security Scanner',
+    title: "Valradar",
-    description: 'Automated vulnerability detection tool',
+    description: "OSINT and general purpose multiprocessing framework.",
-    category: 'security',
+    category: "security",
-    link: '#',
+    link: "https://github.com/neutrino2211/valradar",
-    featured: true
+    featured: true,
   },
-  {
+];
-    id: 'art-portfolio',
-    title: 'Art Portfolio',
-    description: 'Digital art showcase platform',
-    category: 'art',
-    link: '#',
-    featured: true
-  },
-  {
-    id: 'api-gateway',
-    title: 'API Gateway',
-    description: 'Secure microservices gateway with authentication',
-    category: 'development',
-    link: '#',
-    featured: false
-  },
-  {
-    id: 'threat-detector',
-    title: 'Threat Detector',
-    description: 'Machine learning-based threat detection system',
-    category: 'security',
-    link: '#',
-    featured: false
-  }
-];