111 lines
3.8 KiB
TypeScript
111 lines
3.8 KiB
TypeScript
import { ChevronDown, Trophy, Code, Users, Zap, Rocket } from "lucide-react";
|
|
|
|
interface HeroSectionProps {
|
|
isDarkMode: boolean;
|
|
scrollToSection: (sectionId: string) => void;
|
|
textClasses: string;
|
|
cardClasses: string;
|
|
}
|
|
|
|
const HeroSection = ({
|
|
isDarkMode,
|
|
scrollToSection,
|
|
textClasses,
|
|
cardClasses,
|
|
}: HeroSectionProps) => {
|
|
return (
|
|
<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>
|
|
);
|
|
};
|
|
|
|
export default HeroSection;
|