275 lines
12 KiB
TypeScript
275 lines
12 KiB
TypeScript
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.",
|
|
openGraph: {
|
|
title: "Home | Mainasara Tsowa",
|
|
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.",
|
|
},
|
|
};
|
|
|
|
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="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">
|
|
<Image
|
|
src="/media/me/me.jpeg"
|
|
alt="Mainasara Tsowa"
|
|
className="rounded-full"
|
|
width={128}
|
|
height={128}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 uppercase tracking-wide">
|
|
Mainasara Tsowa
|
|
</h1>
|
|
<p className="text-lg text-gray-700 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">
|
|
<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"
|
|
>
|
|
Blog
|
|
</a>
|
|
</li>*/}
|
|
<li>
|
|
<Link
|
|
href="/digital-art"
|
|
className="text-black font-bold hover:bg-purple-200 px-4 py-2 transition-colors border-2 border-black hover:border-purple-400"
|
|
>
|
|
Digital Art
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/stories"
|
|
className="text-black font-bold hover:bg-yellow-200 px-4 py-2 transition-colors border-2 border-black hover:border-yellow-400"
|
|
>
|
|
Mini 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>
|
|
<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-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'm a passionate developer and cybersecurity expert who
|
|
believes in building beautiful, secure, and purposeful digital
|
|
solutions. When I'm not coding or exploring security tooling,
|
|
you'll probably find me trying my hands at some creative
|
|
projects.
|
|
</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 Tooling
|
|
</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>
|
|
|
|
<ProjectsSection />
|
|
|
|
<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">
|
|
<Link
|
|
href="/digital-art"
|
|
className="bg-yellow-100 border-2 border-black rounded-none p-6 text-center hover:bg-yellow-200 transition-colors"
|
|
>
|
|
<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">
|
|
Someone messing around with colors and shapes.
|
|
</p>
|
|
</Link>
|
|
<Link
|
|
href="/stories"
|
|
className="bg-green-100 border-2 border-black rounded-none p-6 text-center hover:bg-green-200 transition-colors"
|
|
>
|
|
<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">
|
|
I like good narratives, so I try to imitate them.
|
|
</p>
|
|
</Link>
|
|
<Link
|
|
href="/thoughts"
|
|
className="bg-teal-100 border-2 border-black rounded-none p-6 text-center hover:bg-teal-200 transition-colors"
|
|
>
|
|
<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">
|
|
Rants on technology, maybe something else.
|
|
</p>
|
|
</Link>
|
|
</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'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"
|
|
>
|
|
SEND EMAIL
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer className="mt-20 text-center">
|
|
<div className="flex justify-center space-x-6 mb-6">
|
|
<a
|
|
href="https://github.com/neutrino2211/"
|
|
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="https://www.linkedin.com/in/mainasara-tsowa-17098b214/"
|
|
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="https://x.com/neutrino2211/"
|
|
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 Charm Crush, Z.AI GLM and some pastel
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|