From 344596e390eb773e72b35741addeeb476063d0cc Mon Sep 17 00:00:00 2001
From: neutrino2211 <neutrino2211@gmail.com>
Date: Fri, 19 Sep 2025 22:17:14 +0100
Subject: [PATCH] init

---
 CRUSH.md         |  34 ++++++
 src/app/page.tsx | 261 +++++++++++++++++++++++++++++------------------
 2 files changed, 197 insertions(+), 98 deletions(-)
 create mode 100644 CRUSH.md

diff --git a/CRUSH.md b/CRUSH.md
new file mode 100644
index 0000000..72a5884
--- /dev/null
+++ b/CRUSH.md
@@ -0,0 +1,34 @@
+# CRUSH.md
+
+## Commands
+
+- **Install dependencies**: `pnpm install`
+- **Development server**: `pnpm dev` (runs `next dev --turbopack`)
+- **Build**: `pnpm build` (runs `next build --turbopack`)
+- **Start production**: `pnpm start` (runs `next start`)
+- **Lint**: `pnpm lint` (runs `eslint`)
+- **Typecheck**: `pnpm tsc --noEmit` (TypeScript compiler without emitting files)
+- **Tests**: No test script defined. Add Jest or Vitest via `pnpm add -D vitest` and configure.
+- **Run single test**: Once tests are set up, e.g., `pnpm vitest src/app/page.test.tsx` (example; adjust based on setup).
+
+## Code Style Guidelines
+
+- **Language**: TypeScript with strict mode enabled (`strict: true` in tsconfig.json).
+- **Framework**: Next.js 15 (App Router). Use server components by default; mark client components with `'use client'`.
+- **Styling**: Tailwind CSS (via globals.css). Use utility classes; avoid custom CSS unless necessary.
+- **Fonts**: Geist Sans for body (`--font-geist-sans`), Geist Mono for code (`--font-geist-mono`).
+- **Imports**:
+  - Use absolute paths with `@/*` alias (e.g., `import { Component } from '@/components'`).
+  - Prefer named imports over default where possible.
+  - Import types explicitly: `import type { Metadata } from 'next';`.
+  - Group imports: Next.js/React, then third-party, then local.
+- **Formatting**: Follow ESLint rules from `eslint.config.mjs` (extends `next/core-web-vitals`, `next/typescript`). Use Prettier if added.
+- **Types**: Always type props (e.g., `Readonly<{ children: React.ReactNode }>`). Use `React.FC` sparingly; prefer function signatures.
+- **Naming Conventions**:
+  - Components: PascalCase (e.g., `HomePage`).
+  - Variables/functions: camelCase.
+  - Files: kebab-case for pages (e.g., `page.tsx`), PascalCase for components.
+- **Error Handling**: Use Next.js error boundaries or try-catch in async functions. Log errors to console in development.
+- **Components**: Functional components with hooks. Colocate styles and logic.
+- **Paths**: Use `next/image` for images with `priority` for above-fold. Optimize with width/height.
+- **Ignores**: ESLint ignores `node_modules/**`, `.next/**`, etc. Respect `.gitignore`.
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a932894..f91eff3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,103 +1,168 @@
-import Image from "next/image";
-
 export default function Home() {
   return (
-    <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
+    <div className="min-h-screen bg-gradient-to-br from-green-50 via-teal-50 to-blue-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-green-300">
+              <div className="text-4xl font-bold text-green-300">MN</div>
+            </div>
+          </div>
+          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 uppercase tracking-wide">
+            Mainasara Sowa
+          </h1>
+          <p className="text-lg text-gray-700 max-w-2xl mx-auto leading-relaxed font-semibold">
+            Developer & Cybersecurity Expert crafting secure digital experiences
+          </p>
+        </header>
 
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+        <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><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="#writing" className="text-black font-bold hover:bg-purple-200 px-4 py-2 transition-colors border-2 border-black hover:border-purple-400">Writing</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>
+        </nav>
+
+        <main className="space-y-16">
+          <section id="about" className="bg-white border-4 border-black rounded-none p-8 shadow-brutal">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center uppercase">About</h2>
+            <p className="text-gray-800 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 thoughtful digital solutions. When I&apos;m not coding or 
+              exploring security vulnerabilities, you&apos;ll find me creating art or writing 
+              mini stories that capture life&apos;s quiet moments.
+            </p>
+          </section>
+
+          <section id="expertise" className="bg-white border-4 border-black rounded-none p-8 shadow-brutal">
+            <h2 className="text-2xl font-bold text-gray-900 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">
+                <h3 className="text-lg font-bold text-gray-900 mb-3 uppercase">Development</h3>
+                <ul className="space-y-2 text-gray-800">
+                  <li className="flex items-center">
+                    <span className="w-3 h-3 bg-black 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>
+                    Clean Architecture
+                  </li>
+                  <li className="flex items-center">
+                    <span className="w-3 h-3 bg-black rounded-full mr-3"></span>
+                    Performance Optimization
+                  </li>
+                </ul>
+              </div>
+              <div className="bg-teal-100 border-2 border-black rounded-none p-6">
+                <h3 className="text-lg font-bold text-gray-900 mb-3 uppercase">Cybersecurity</h3>
+                <ul className="space-y-2 text-gray-800">
+                  <li className="flex items-center">
+                    <span className="w-3 h-3 bg-black rounded-full mr-3"></span>
+                    Security Auditing
+                  </li>
+                  <li className="flex items-center">
+                    <span className="w-3 h-3 bg-black 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>
+                    Security Architecture
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </section>
+
+          <section id="projects" className="bg-white border-4 border-black rounded-none p-8 shadow-brutal">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center uppercase">Featured Projects</h2>
+            <div className="grid md:grid-cols-2 gap-6">
+              <div className="bg-blue-100 border-2 border-black rounded-none p-6">
+                <h3 className="text-lg font-bold text-gray-900 mb-2 uppercase">Security Scanner</h3>
+                <p className="text-gray-800 text-sm mb-3">Automated vulnerability detection tool</p>
+                <a href="#" className="text-black font-bold underline hover:text-blue-600">View Project →</a>
+              </div>
+              <div className="bg-teal-100 border-2 border-black rounded-none p-6">
+                <h3 className="text-lg font-bold text-gray-900 mb-2 uppercase">Art Portfolio</h3>
+                <p className="text-gray-800 text-sm mb-3">Digital art showcase platform</p>
+                <a href="#" className="text-black font-bold underline hover:text-teal-600">View Project →</a>
+              </div>
+            </div>
+          </section>
+
+          <section id="writing" className="bg-white border-4 border-black rounded-none p-8 shadow-brutal">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center uppercase">Creative Corner</h2>
+            <div className="grid md:grid-cols-3 gap-6">
+              <div className="bg-yellow-100 border-2 border-black rounded-none p-6 text-center">
+                <div className="text-4xl mb-3">🎨</div>
+                <h3 className="text-lg font-bold text-gray-900 mb-2 uppercase">Digital Art</h3>
+                <p className="text-gray-800 text-sm">
+                  Exploring creativity through digital canvases
+                </p>
+              </div>
+              <div className="bg-green-100 border-2 border-black rounded-none p-6 text-center">
+                <div className="text-4xl mb-3">📝</div>
+                <h3 className="text-lg font-bold text-gray-900 mb-2 uppercase">Mini Stories</h3>
+                <p className="text-gray-800 text-sm">
+                  Capturing moments in brief narratives
+                </p>
+              </div>
+              <div className="bg-teal-100 border-2 border-black rounded-none p-6 text-center">
+                <div className="text-4xl mb-3">🌸</div>
+                <h3 className="text-lg font-bold text-gray-900 mb-2 uppercase">Thoughts</h3>
+                <p className="text-gray-800 text-sm">
+                  Reflections on technology and life
+                </p>
+              </div>
+            </div>
+          </section>
+
+          <section id="contact" className="bg-white border-4 border-black rounded-none p-8 shadow-brutal">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6 text-center uppercase">Get In Touch</h2>
+            <div className="text-center">
+              <p className="text-gray-800 mb-6 font-semibold">
+                Let&apos;s collaborate on something interesting
+              </p>
+              <a href="mailto:hello@example.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">
+                SEND EMAIL
+              </a>
+            </div>
+          </section>
+        </main>
+
+        <footer className="mt-20 text-center">
+          <div className="flex justify-center space-x-6 mb-6">
+            <a href="#" className="text-black font-bold hover:text-green-600 transition-colors">
+              <span className="sr-only">GitHub</span>
+              <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
+                <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+              </svg>
+            </a>
+            <a href="#" className="text-black font-bold hover:text-teal-600 transition-colors">
+              <span className="sr-only">LinkedIn</span>
+              <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
+              </svg>
+            </a>
+            <a href="#" className="text-black font-bold hover:text-blue-600 transition-colors">
+              <span className="sr-only">Twitter</span>
+              <svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
+              </svg>
+            </a>
+          </div>
+          <div className="bg-black text-white p-4 font-bold">
+            <p className="text-sm uppercase">
+              Built with brutalist pastels
+            </p>
+          </div>
+        </footer>
+      </div>
     </div>
   );
-}
+}
\ No newline at end of file