Almost complete
This commit is contained in:
neutrino2211
202
src/app/page.tsx
202
src/app/page.tsx
@@ -1,3 +1,5 @@
|
||||
import ProjectsSection from "@/components/ProjectsSection";
|
||||
|
||||
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">
|
||||
@@ -9,41 +11,106 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 uppercase tracking-wide">
|
||||
Mainasara Sowa
|
||||
Mainasara Tsowa
|
||||
</h1>
|
||||
<p className="text-lg text-gray-700 max-w-2xl mx-auto leading-relaxed font-semibold">
|
||||
Developer & Cybersecurity Expert crafting secure digital experiences
|
||||
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="#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>
|
||||
<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="/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
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
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
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
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
|
||||
</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>
|
||||
<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 thoughtful digital solutions. When I'm not coding or
|
||||
exploring security vulnerabilities, you'll find me creating art or writing
|
||||
mini stories that capture life's quiet moments.
|
||||
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>
|
||||
<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>
|
||||
<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>
|
||||
@@ -60,11 +127,13 @@ export default function Home() {
|
||||
</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>
|
||||
<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
|
||||
Security Tooling
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<span className="w-3 h-3 bg-black rounded-full mr-3"></span>
|
||||
@@ -79,56 +148,70 @@ export default function Home() {
|
||||
</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>
|
||||
<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>
|
||||
<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">
|
||||
<a
|
||||
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>
|
||||
<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">
|
||||
</a>
|
||||
<a
|
||||
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>
|
||||
<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">
|
||||
</a>
|
||||
<a
|
||||
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>
|
||||
<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>
|
||||
</a>
|
||||
</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>
|
||||
<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: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">
|
||||
<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>
|
||||
@@ -137,19 +220,32 @@ export default function Home() {
|
||||
|
||||
<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">
|
||||
<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" />
|
||||
<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">
|
||||
<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">
|
||||
<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" />
|
||||
@@ -158,11 +254,11 @@ export default function Home() {
|
||||
</div>
|
||||
<div className="bg-black text-white p-4 font-bold">
|
||||
<p className="text-sm uppercase">
|
||||
Built with brutalist pastels
|
||||
Built with Charm Crush, Z.AI GLM and some pastel
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user