750 lines
28 KiB
TypeScript
750 lines
28 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import {
|
|
ChevronDown,
|
|
Trophy,
|
|
Code,
|
|
Users,
|
|
Zap,
|
|
Award,
|
|
Rocket,
|
|
Star,
|
|
Sun,
|
|
Moon,
|
|
} from "lucide-react";
|
|
|
|
const App = () => {
|
|
const [activeSection, setActiveSection] = useState("hero");
|
|
const [isVisible, setIsVisible] = useState({});
|
|
const [isDarkMode, setIsDarkMode] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
setIsVisible((prev) => ({ ...prev, [entry.target.id]: true }));
|
|
setActiveSection(entry.target.id);
|
|
}
|
|
});
|
|
},
|
|
{ threshold: 0.3 }
|
|
);
|
|
|
|
document.querySelectorAll("section[id]").forEach((section) => {
|
|
observer.observe(section);
|
|
});
|
|
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
const scrollToSection = (sectionId: string) => {
|
|
document.getElementById(sectionId)?.scrollIntoView({ behavior: "smooth" });
|
|
};
|
|
|
|
const toggleDarkMode = () => {
|
|
setIsDarkMode(!isDarkMode);
|
|
};
|
|
|
|
const themeClasses = isDarkMode
|
|
? "min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white overflow-x-hidden transition-all duration-1000"
|
|
: "min-h-screen bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 text-gray-900 overflow-x-hidden transition-all duration-1000";
|
|
|
|
const cardClasses = isDarkMode
|
|
? "bg-white/5 backdrop-blur-lg border-white/10"
|
|
: "bg-white/90 backdrop-blur-lg border-gray-200/60 shadow-xl";
|
|
|
|
const navClasses = isDarkMode
|
|
? "bg-black/20 backdrop-blur-lg border-white/10"
|
|
: "bg-white/80 backdrop-blur-lg border-gray-200/30";
|
|
|
|
const textClasses = isDarkMode ? "text-gray-300" : "text-gray-700";
|
|
|
|
return (
|
|
<div className={themeClasses}>
|
|
<style>{`
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-20px); }
|
|
}
|
|
|
|
@keyframes float-delayed {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-15px); }
|
|
}
|
|
|
|
@keyframes float-particle {
|
|
0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.3; }
|
|
50% { transform: translateY(-30px) translateX(10px); opacity: 0.8; }
|
|
}
|
|
|
|
@keyframes gradient-text {
|
|
0%, 100% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
}
|
|
|
|
@keyframes fade-in-up {
|
|
0% { opacity: 0; transform: translateY(30px); }
|
|
100% { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes slide-in-left {
|
|
0% { opacity: 0; transform: translateX(-50px); }
|
|
100% { opacity: 1; transform: translateX(0); }
|
|
}
|
|
|
|
@keyframes slide-in-right {
|
|
0% { opacity: 0; transform: translateX(50px); }
|
|
100% { opacity: 1; transform: translateX(0); }
|
|
}
|
|
|
|
@keyframes slide-in-up {
|
|
0% { opacity: 0; transform: translateY(50px); }
|
|
100% { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes bounce-subtle {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-5px); }
|
|
}
|
|
|
|
@keyframes spin-slow {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-float-delayed {
|
|
animation: float-delayed 8s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-float-particle {
|
|
animation: float-particle 4s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-gradient-text {
|
|
background-size: 200% 200%;
|
|
animation: gradient-text 3s ease infinite;
|
|
}
|
|
|
|
.animate-fade-in-up {
|
|
animation: fade-in-up 1s ease-out;
|
|
}
|
|
|
|
.animate-slide-in-left {
|
|
animation: slide-in-left 0.8s ease-out;
|
|
}
|
|
|
|
.animate-slide-in-right {
|
|
animation: slide-in-right 0.8s ease-out;
|
|
}
|
|
|
|
.animate-slide-in-up {
|
|
animation: slide-in-up 0.8s ease-out;
|
|
}
|
|
|
|
.animate-bounce-subtle {
|
|
animation: bounce-subtle 2s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-spin-slow {
|
|
animation: spin-slow 8s linear infinite;
|
|
}
|
|
`}</style>
|
|
|
|
{/* Navigation */}
|
|
<nav
|
|
className={`fixed top-0 w-full z-40 ${navClasses} border-b transition-all duration-500`}
|
|
>
|
|
<div className="px-6 py-4 mx-auto max-w-7xl">
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-2xl font-bold text-transparent bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text animate-pulse" />
|
|
<div className="flex items-center space-x-6">
|
|
<div className="hidden space-x-8 md:flex">
|
|
{["About", "Academic", "Tech", "Leadership", "Athletics"].map(
|
|
(item) => (
|
|
<button
|
|
key={item}
|
|
onClick={() => scrollToSection(item.toLowerCase())}
|
|
className={`transition-all duration-300 transform hover:scale-110 ${
|
|
isDarkMode
|
|
? "hover:text-cyan-400"
|
|
: "hover:text-purple-600 text-gray-800 font-medium"
|
|
}`}
|
|
>
|
|
{item}
|
|
</button>
|
|
)
|
|
)}
|
|
</div>
|
|
<button
|
|
onClick={toggleDarkMode}
|
|
className={`p-2 rounded-full transition-all duration-300 transform hover:scale-110 ${
|
|
isDarkMode
|
|
? "bg-white/10 hover:bg-white/20 text-yellow-400"
|
|
: "bg-gray-900/10 hover:bg-gray-900/20 text-purple-600"
|
|
}`}
|
|
>
|
|
{isDarkMode ? <Sun size={20} /> : <Moon size={20} />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Hero Section */}
|
|
<section
|
|
id="hero"
|
|
className="relative flex items-center justify-center min-h-screen overflow-hidden"
|
|
>
|
|
<div
|
|
className={`absolute inset-0 transition-all duration-1000 ${
|
|
isDarkMode
|
|
? "bg-gradient-to-r from-blue-600/20 to-purple-600/20"
|
|
: "bg-gradient-to-r from-blue-400/10 to-purple-400/10"
|
|
}`}
|
|
></div>
|
|
|
|
{/* Animated background particles */}
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
{[...Array(20)].map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className={`absolute w-2 h-2 rounded-full animate-float-particle opacity-30 ${
|
|
isDarkMode ? "bg-cyan-400" : "bg-purple-500"
|
|
}`}
|
|
style={{
|
|
left: `${Math.random() * 100}%`,
|
|
top: `${Math.random() * 100}%`,
|
|
animationDelay: `${Math.random() * 5}s`,
|
|
animationDuration: `${3 + Math.random() * 4}s`,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<div className="relative z-10 max-w-4xl px-6 mx-auto text-center">
|
|
<div className="mb-8">
|
|
<div className="w-32 h-32 p-1 mx-auto mb-6 rounded-full bg-gradient-to-r from-cyan-400 to-purple-600">
|
|
<div
|
|
className={`w-full h-full rounded-full flex items-center justify-center ${
|
|
isDarkMode ? "bg-slate-900" : "bg-white"
|
|
}`}
|
|
>
|
|
<img
|
|
src="/mugshot.jpeg"
|
|
alt="Maaz's Avatar"
|
|
className="rounded-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h1 className="mb-6 text-5xl font-bold text-transparent md:text-7xl bg-gradient-to-r from-cyan-400 via-purple-400 to-pink-400 bg-clip-text animate-gradient-text">
|
|
Hi! I'm Maaz
|
|
</h1>
|
|
<p
|
|
className={`text-xl md:text-2xl mb-8 leading-relaxed animate-fade-in-up ${textClasses}`}
|
|
>
|
|
A curious, ambitious, and multidisciplinary student passionate about
|
|
<span className="text-cyan-500 animate-pulse"> science</span>,
|
|
<span className="text-purple-500 animate-pulse"> technology</span>,
|
|
<span className="text-pink-500 animate-pulse"> leadership</span>,
|
|
and
|
|
<span className="text-green-500 animate-pulse"> athletics</span>
|
|
</p>
|
|
<button
|
|
onClick={() => scrollToSection("about")}
|
|
className="px-8 py-4 font-medium text-white transition-all duration-300 transform rounded-full group bg-gradient-to-r from-cyan-500 to-purple-600 hover:from-cyan-600 hover:to-purple-700 hover:scale-105 hover:shadow-2xl hover:shadow-purple-500/25 animate-bounce-subtle"
|
|
>
|
|
Explore My Journey
|
|
<ChevronDown
|
|
className="inline ml-2 group-hover:animate-bounce"
|
|
size={20}
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Floating Elements */}
|
|
<div className="absolute top-20 left-10 animate-float">
|
|
<Code
|
|
className={isDarkMode ? "text-cyan-400" : "text-purple-600"}
|
|
size={40}
|
|
/>
|
|
</div>
|
|
<div className="absolute top-40 right-20 animate-float-delayed">
|
|
<Trophy
|
|
className={isDarkMode ? "text-yellow-400" : "text-orange-500"}
|
|
size={35}
|
|
/>
|
|
</div>
|
|
<div className="absolute bottom-20 left-20 animate-float">
|
|
<Rocket
|
|
className={isDarkMode ? "text-pink-400" : "text-purple-500"}
|
|
size={30}
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
{/* About Section */}
|
|
<section id="about" className="relative py-20">
|
|
<div className="max-w-6xl px-6 mx-auto">
|
|
<div className="mb-16 text-center">
|
|
<h2 className="mb-4 text-4xl font-bold text-transparent bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text">
|
|
Why I Stand Out
|
|
</h2>
|
|
<div className="w-24 h-1 mx-auto bg-gradient-to-r from-cyan-400 to-purple-400"></div>
|
|
</div>
|
|
|
|
<div className="grid gap-8 md:grid-cols-3">
|
|
<div
|
|
className={`${cardClasses} rounded-xl p-6 border hover:border-cyan-400/50 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2 animate-slide-in-left`}
|
|
>
|
|
<Zap className="mb-4 text-cyan-400 animate-pulse" size={40} />
|
|
<h3 className="mb-3 text-xl font-bold text-cyan-400">
|
|
Unique Blend
|
|
</h3>
|
|
<p className={textClasses}>
|
|
Academic excellence, technological fluency, creative innovation
|
|
in robotics and software, leadership through service, and
|
|
athletic resilience.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className={`${cardClasses} rounded-xl p-6 border hover:border-purple-400/50 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2 animate-slide-in-up`}
|
|
>
|
|
<Users className="mb-4 text-purple-400 animate-pulse" size={40} />
|
|
<h3 className="mb-3 text-xl font-bold text-purple-400">
|
|
Team Player
|
|
</h3>
|
|
<p className={textClasses}>
|
|
I thrive in team environments, whether coaching classmates,
|
|
collaborating in science competitions, or building apps with
|
|
peers.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className={`${cardClasses} rounded-xl p-6 border hover:border-pink-400/50 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2 animate-slide-in-right`}
|
|
>
|
|
<Rocket className="mb-4 text-pink-400 animate-pulse" size={40} />
|
|
<h3 className="mb-3 text-xl font-bold text-pink-400">
|
|
Self-Driven
|
|
</h3>
|
|
<p className={textClasses}>
|
|
Consistently pursuing excellence—from earning honors and awards
|
|
to shipping production-level apps and standing tall on the
|
|
podium.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Academic Section */}
|
|
<section
|
|
id="academic"
|
|
className={`py-20 transition-all duration-1000 ${
|
|
isDarkMode
|
|
? "bg-gradient-to-r from-blue-900/20 to-purple-900/20"
|
|
: "bg-gradient-to-r from-blue-100/60 to-purple-100/60"
|
|
}`}
|
|
>
|
|
<div className="max-w-6xl px-6 mx-auto">
|
|
<div className="mb-16 text-center">
|
|
<h2 className="mb-4 text-4xl font-bold text-transparent bg-gradient-to-r from-yellow-400 to-orange-400 bg-clip-text">
|
|
🏆 Academic & STEM Highlights
|
|
</h2>
|
|
<div className="w-24 h-1 mx-auto bg-gradient-to-r from-yellow-400 to-orange-400"></div>
|
|
</div>
|
|
|
|
<div className="grid gap-8 md:grid-cols-2">
|
|
<div
|
|
className={`${cardClasses} rounded-xl p-6 border hover:border-yellow-400/50 transition-all duration-500 transform hover:scale-105 hover:rotate-1 animate-slide-in-left`}
|
|
>
|
|
<div className="flex items-center mb-4">
|
|
<Trophy
|
|
className="mr-3 text-yellow-400 animate-bounce"
|
|
size={30}
|
|
/>
|
|
<h3 className="text-xl font-bold text-yellow-400">
|
|
UIL Science 1st Place
|
|
</h3>
|
|
</div>
|
|
<p className={textClasses}>
|
|
Showcased analytical rigor and creative problem-solving in a
|
|
highly competitive academic environment.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className={`${cardClasses} rounded-xl p-6 border hover:border-green-400/50 transition-all duration-500 transform hover:scale-105 hover:-rotate-1 animate-slide-in-right`}
|
|
>
|
|
<div className="flex items-center mb-4">
|
|
<Award
|
|
className="mr-3 text-green-400 animate-pulse"
|
|
size={30}
|
|
/>
|
|
<h3 className="text-xl font-bold text-green-400">
|
|
Science Olympiad
|
|
</h3>
|
|
</div>
|
|
<p className={textClasses}>
|
|
Regular participant developing strong teamwork, precise
|
|
experimentation, and rapid on-your-feet thinking.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className={`${cardClasses} rounded-xl p-6 border hover:border-purple-400/50 transition-all duration-500 transform hover:scale-105 hover:rotate-1 animate-slide-in-left`}
|
|
>
|
|
<div className="flex items-center mb-4">
|
|
<Star
|
|
className="mr-3 text-purple-400 animate-spin-slow"
|
|
size={30}
|
|
/>
|
|
<h3 className="text-xl font-bold text-purple-400">
|
|
Gifted and Talented Program
|
|
</h3>
|
|
</div>
|
|
<p className={textClasses}>
|
|
Advanced coursework that cultivated deeper critical thinking and
|
|
an enriched love for learning.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className={`${cardClasses} rounded-xl p-6 border hover:border-cyan-400/50 transition-all duration-500 transform hover:scale-105 hover:-rotate-1 animate-slide-in-right`}
|
|
>
|
|
<div className="flex items-center mb-4">
|
|
<Award
|
|
className="mr-3 text-cyan-400 animate-bounce"
|
|
size={30}
|
|
/>
|
|
<h3 className="text-xl font-bold text-cyan-400">Honor Roll</h3>
|
|
</div>
|
|
<p className={textClasses}>
|
|
Full schedule of honors classes, consistently challenging myself
|
|
to excel in every subject.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Tech Section */}
|
|
<section id="tech" className="py-20">
|
|
<div className="max-w-6xl px-6 mx-auto">
|
|
<div className="mb-16 text-center">
|
|
<h2 className="mb-4 text-4xl font-bold text-transparent bg-gradient-to-r from-cyan-400 to-green-400 bg-clip-text">
|
|
⚙️ Tech, Innovation & Projects
|
|
</h2>
|
|
<div className="w-24 h-1 mx-auto bg-gradient-to-r from-cyan-400 to-green-400"></div>
|
|
</div>
|
|
|
|
<div className="space-y-8">
|
|
<div
|
|
className={`${
|
|
isDarkMode
|
|
? "bg-gradient-to-r from-cyan-900/20 to-blue-900/20"
|
|
: "bg-gradient-to-r from-cyan-100/40 to-blue-100/40"
|
|
} backdrop-blur-lg rounded-xl p-8 border ${
|
|
isDarkMode ? "border-cyan-400/30" : "border-cyan-300/50"
|
|
}`}
|
|
>
|
|
<div className="flex items-center mb-4">
|
|
<Code className="mr-3 text-cyan-400" size={30} />
|
|
<h3 className="text-2xl font-bold text-cyan-400">
|
|
Sunday School Attendance App
|
|
</h3>
|
|
<span className="px-3 py-1 ml-3 text-sm text-green-400 rounded-full bg-green-500/20">
|
|
In Production
|
|
</span>
|
|
</div>
|
|
<p className={`${textClasses} mb-4`}>
|
|
Architecting and building a fully functional, community-oriented
|
|
app, designed for a local community center. Handling everything
|
|
from UI/UX design to back-end integration.
|
|
</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{["React Native", "UI/UX Design", "Backend Integration"].map(
|
|
(tech) => (
|
|
<span
|
|
key={tech}
|
|
className="px-3 py-1 text-sm rounded-full bg-cyan-400/20 text-cyan-400"
|
|
>
|
|
{tech}
|
|
</span>
|
|
)
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={`${
|
|
isDarkMode
|
|
? "bg-gradient-to-r from-purple-900/20 to-pink-900/20"
|
|
: "bg-gradient-to-r from-purple-100/40 to-pink-100/40"
|
|
} backdrop-blur-lg rounded-xl p-8 border ${
|
|
isDarkMode ? "border-purple-400/30" : "border-purple-300/50"
|
|
}`}
|
|
>
|
|
<div className="flex items-center mb-4">
|
|
<Trophy className="mr-3 text-purple-400" size={30} />
|
|
<h3 className="text-2xl font-bold text-purple-400">
|
|
Competitive Robotics
|
|
</h3>
|
|
<span className="px-3 py-1 ml-3 text-sm text-yellow-400 rounded-full bg-yellow-500/20">
|
|
Award Winner
|
|
</span>
|
|
</div>
|
|
<p className={`${textClasses} mb-4`}>
|
|
Core contributor on an RC Robotics Team, earned the "Plethora of
|
|
Features" award by integrating remarkable range of
|
|
capabilities—demonstrating versatility and innovation.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|
<div
|
|
className={`${cardClasses} rounded-xl p-6 border border-white/10`}
|
|
>
|
|
<h4 className="mb-3 text-lg font-bold text-green-400">
|
|
Programming Skills
|
|
</h4>
|
|
<div className="flex flex-wrap gap-2">
|
|
{[
|
|
"Python",
|
|
"React",
|
|
"React Native",
|
|
"Tailwind CSS",
|
|
"Javascript",
|
|
"APIs",
|
|
"AI Integration",
|
|
"UI/UX Design",
|
|
].map((skill) => (
|
|
<span
|
|
key={skill}
|
|
className="px-3 py-1 text-sm text-green-400 rounded-full bg-green-400/20"
|
|
>
|
|
{skill}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={`${cardClasses} rounded-xl p-6 border border-white/10`}
|
|
>
|
|
<h4 className="mb-3 text-lg font-bold text-orange-400">
|
|
Striker Competition
|
|
</h4>
|
|
<p className={`${textClasses} text-sm`}>
|
|
Modeled an operationg room for a Striker Competition
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Leadership Section */}
|
|
<section
|
|
id="leadership"
|
|
className={`py-20 ${
|
|
isDarkMode
|
|
? "bg-gradient-to-r from-purple-900/20 to-pink-900/20"
|
|
: "bg-gradient-to-r from-purple-100/60 to-pink-100/60"
|
|
}`}
|
|
>
|
|
<div className="max-w-6xl px-6 mx-auto">
|
|
<div className="mb-16 text-center">
|
|
<h2 className="mb-4 text-4xl font-bold text-transparent bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text">
|
|
📚 Leadership, Service & School
|
|
</h2>
|
|
<div className="w-24 h-1 mx-auto bg-gradient-to-r from-purple-400 to-pink-400"></div>
|
|
</div>
|
|
|
|
<div className="grid gap-8 md:grid-cols-3">
|
|
<div
|
|
className={`${cardClasses} rounded-xl p-6 border border-white/10 hover:border-purple-400/50 transition-all duration-300 transform hover:scale-105`}
|
|
>
|
|
<Award className="mb-4 text-purple-400" size={40} />
|
|
<h3 className="mb-3 text-xl font-bold text-purple-400">
|
|
NJHS Inductee
|
|
</h3>
|
|
<p className={textClasses}>
|
|
National Junior Honor Society recognition for academic
|
|
excellence, leadership, and community commitment.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className={`${cardClasses} rounded-xl p-6 border border-white/10 hover:border-pink-400/50 transition-all duration-300 transform hover:scale-105`}
|
|
>
|
|
<Users className="mb-4 text-pink-400" size={40} />
|
|
<h3 className="mb-3 text-xl font-bold text-pink-400">Tutoring</h3>
|
|
<p className={textClasses}>
|
|
Volunteered regularly to tutor peers in math, science, and
|
|
programming—fostering academic growth in others.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className={`${cardClasses} rounded-xl p-6 border border-white/10 hover:border-yellow-400/50 transition-all duration-300 transform hover:scale-105`}
|
|
>
|
|
<Star className="mb-4 text-yellow-400" size={40} />
|
|
<h3 className="mb-3 text-xl font-bold text-yellow-400">
|
|
Fabulous Falcon Award
|
|
</h3>
|
|
<p className={textClasses}>
|
|
Honored for outstanding school spirit, positive contributions to
|
|
campus life, and consistent character.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Athletics Section */}
|
|
<section id="athletics" className="py-20">
|
|
<div className="max-w-6xl px-6 mx-auto">
|
|
<div className="mb-16 text-center">
|
|
<h2 className="mb-4 text-4xl font-bold text-transparent bg-gradient-to-r from-blue-400 to-green-400 bg-clip-text">
|
|
🏊♂️🏸 Athletics & Competitions
|
|
</h2>
|
|
<div className="w-24 h-1 mx-auto bg-gradient-to-r from-blue-400 to-green-400"></div>
|
|
</div>
|
|
|
|
<div className="grid gap-8 md:grid-cols-2">
|
|
<div
|
|
className={`${
|
|
isDarkMode
|
|
? "bg-gradient-to-br from-blue-900/20 to-cyan-900/20"
|
|
: "bg-gradient-to-br from-blue-100/40 to-cyan-100/40"
|
|
} backdrop-blur-lg rounded-xl p-8 border ${
|
|
isDarkMode ? "border-blue-400/30" : "border-blue-300/50"
|
|
}`}
|
|
>
|
|
<div className="mb-4 text-4xl">🏊♂️</div>
|
|
<h3 className="mb-4 text-2xl font-bold text-blue-400">
|
|
Swimming Competitions
|
|
</h3>
|
|
<p className={textClasses}>
|
|
Competed across multiple events, honing discipline, mental
|
|
toughness, and an enduring competitive spirit.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className={`${
|
|
isDarkMode
|
|
? "bg-gradient-to-br from-green-900/20 to-emerald-900/20"
|
|
: "bg-gradient-to-br from-green-100/40 to-emerald-100/40"
|
|
} backdrop-blur-lg rounded-xl p-8 border ${
|
|
isDarkMode ? "border-green-400/30" : "border-green-300/50"
|
|
}`}
|
|
>
|
|
<div className="mb-4 text-4xl">🏸</div>
|
|
<h3 className="mb-4 text-2xl font-bold text-green-400">
|
|
Badminton Competitions
|
|
</h3>
|
|
<p className={textClasses}>
|
|
Sharpened hand-eye coordination, strategic thinking, and
|
|
graceful sportsmanship on the court.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Entrepreneurship Section */}
|
|
<section
|
|
className={`py-20 ${
|
|
isDarkMode
|
|
? "bg-gradient-to-r from-orange-900/20 to-red-900/20"
|
|
: "bg-gradient-to-r from-orange-100/60 to-red-100/60"
|
|
}`}
|
|
>
|
|
<div className="max-w-6xl px-6 mx-auto">
|
|
<div className="mb-16 text-center">
|
|
<h2 className="mb-4 text-4xl font-bold text-transparent bg-gradient-to-r from-orange-400 to-red-400 bg-clip-text">
|
|
💡 Entrepreneurship & Drive
|
|
</h2>
|
|
<div className="w-24 h-1 mx-auto bg-gradient-to-r from-orange-400 to-red-400"></div>
|
|
</div>
|
|
|
|
<div className="grid gap-8 md:grid-cols-2">
|
|
<div
|
|
className={`${cardClasses} rounded-xl p-8 border border-white/10`}
|
|
>
|
|
<Rocket className="mb-4 text-orange-400" size={40} />
|
|
<h3 className="mb-4 text-2xl font-bold text-orange-400">
|
|
Entrepreneurial Spirit
|
|
</h3>
|
|
<p className={textClasses}>
|
|
Always on the lookout for new opportunities—whether launching
|
|
small ventures, leading peer projects, or exploring tech
|
|
startups.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className={`${cardClasses} rounded-xl p-8 border border-white/10`}
|
|
>
|
|
<Zap className="mb-4 text-red-400" size={40} />
|
|
<h3 className="mb-4 text-2xl font-bold text-red-400">
|
|
Growth Mindset
|
|
</h3>
|
|
<p className={textClasses}>
|
|
I love to learn—whether it be a new programming framework,
|
|
exploring scientific research, or mastering a new athletic
|
|
skill.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer
|
|
className={`py-12 ${
|
|
isDarkMode ? "bg-black/40" : "bg-gray-900/10"
|
|
} backdrop-blur-lg border-t ${
|
|
isDarkMode ? "border-white/10" : "border-gray-300/30"
|
|
}`}
|
|
>
|
|
<div className="max-w-6xl px-6 mx-auto text-center">
|
|
<div className="mb-8">
|
|
<h3 className="mb-4 text-2xl font-bold text-transparent bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text">
|
|
Let's Connect
|
|
</h3>
|
|
<p className={`${textClasses} mb-6`}>
|
|
Ready to collaborate on exciting projects or discuss
|
|
opportunities?
|
|
</p>
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<p className={isDarkMode ? "text-gray-400" : "text-gray-600"}>
|
|
© 2025 Maaz Khokhar. All rights reserved.
|
|
</p>
|
|
<a
|
|
href="mailto:khokharmaaz@gmail.com"
|
|
className={`block mt-2 underline hover:text-cyan-400 transition-colors duration-200 ${
|
|
isDarkMode ? "text-gray-300" : "text-gray-700"
|
|
}`}
|
|
>
|
|
khokharmaaz@gmail.com
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default App;
|