neutrino2211/mainasara.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
neutrino2211
2025-09-19 22:17:14 +01:00
parent 2bd8fc582e
commit 344596e390
2 changed files with 197 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
CRUSH.md Normal file
View File

@@ -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`.

261
src/app/page.tsx
View File

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