Refactor portfolio sections: Remove ReviewsSection, add AboutSection, AcademicSection, AthleticsSection, EntrepreneurshipSection, Footer, HeroSection, LeadershipSection, TechSection with improved structure and styling.
This commit is contained in:
613
src/App.tsx
613
src/App.tsx
@@ -1,17 +1,14 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import ReviewsSection from "./ReviewsSection";
|
||||
import {
|
||||
ChevronDown,
|
||||
Trophy,
|
||||
Code,
|
||||
Users,
|
||||
Zap,
|
||||
Award,
|
||||
Rocket,
|
||||
Star,
|
||||
Sun,
|
||||
Moon,
|
||||
} from "lucide-react";
|
||||
import HeroSection from "./components/HeroSection";
|
||||
import LeadershipSection from "./components/LeadershipSection";
|
||||
import EntrepreneurshipSection from "./components/EntrepreneurshipSection";
|
||||
import AcademicSection from "./components/AcademicSection";
|
||||
import TechSection from "./components/TechSection";
|
||||
import AboutSection from "./components/AboutSection";
|
||||
import AthleticsSection from "./components/AthleticsSection";
|
||||
import ReviewsSection from "./components/ReviewsSection";
|
||||
import Footer from "./components/Footer";
|
||||
import { Sun, Moon } from "lucide-react";
|
||||
|
||||
const App = () => {
|
||||
const [, setActiveSection] = useState("hero");
|
||||
@@ -154,7 +151,6 @@ const App = () => {
|
||||
animation: spin-slow 8s linear infinite;
|
||||
}
|
||||
`}</style>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav
|
||||
className={`fixed top-0 w-full z-40 ${navClasses} border-b transition-all duration-500`}
|
||||
@@ -162,7 +158,9 @@ const App = () => {
|
||||
<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">
|
||||
<div className="flex items-center space-x-6">
|
||||
{" "}
|
||||
<div className="hidden space-x-8 md:flex">
|
||||
{[
|
||||
"About",
|
||||
"Academic",
|
||||
@@ -201,520 +199,60 @@ const App = () => {
|
||||
</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>
|
||||
<HeroSection
|
||||
isDarkMode={isDarkMode}
|
||||
scrollToSection={scrollToSection}
|
||||
textClasses={textClasses}
|
||||
cardClasses={cardClasses}
|
||||
/>
|
||||
|
||||
{/* 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>
|
||||
<AboutSection
|
||||
isDarkMode={isDarkMode}
|
||||
scrollToSection={scrollToSection}
|
||||
textClasses={textClasses}
|
||||
cardClasses={cardClasses}
|
||||
/>
|
||||
|
||||
{/* 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>
|
||||
<AcademicSection
|
||||
isDarkMode={isDarkMode}
|
||||
scrollToSection={scrollToSection}
|
||||
textClasses={textClasses}
|
||||
cardClasses={cardClasses}
|
||||
/>
|
||||
|
||||
{/* 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"
|
||||
} transition-all duration-300 transform hover:scale-105 hover:shadow-xl hover:border-cyan-400/70`}
|
||||
>
|
||||
<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"
|
||||
} transition-all duration-300 transform hover:scale-105 hover:shadow-xl hover:border-purple-400/70`}
|
||||
>
|
||||
<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 transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:border-green-400/70`}
|
||||
>
|
||||
<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 transition-all duration-300 hover:bg-green-400/40 hover:scale-105 inline-block"
|
||||
>
|
||||
{skill}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>{" "}
|
||||
<div
|
||||
className={`${cardClasses} rounded-xl p-6 border border-white/10 transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:border-orange-400/70`}
|
||||
>
|
||||
<h4 className="mb-3 text-lg font-bold text-orange-400">
|
||||
Striker Competition
|
||||
</h4>
|
||||
<p className={`${textClasses}`}>
|
||||
Engineered a realistic operating room prototype showcased at
|
||||
the Stryker Competition, demonstrating advanced surgical
|
||||
workflow design and innovation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<TechSection
|
||||
isDarkMode={isDarkMode}
|
||||
scrollToSection={scrollToSection}
|
||||
textClasses={textClasses}
|
||||
cardClasses={cardClasses}
|
||||
/>
|
||||
|
||||
{/* 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>
|
||||
<LeadershipSection
|
||||
isDarkMode={isDarkMode}
|
||||
scrollToSection={scrollToSection}
|
||||
textClasses={textClasses}
|
||||
cardClasses={cardClasses}
|
||||
/>
|
||||
|
||||
{/* 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>
|
||||
<AthleticsSection
|
||||
isDarkMode={isDarkMode}
|
||||
scrollToSection={scrollToSection}
|
||||
textClasses={textClasses}
|
||||
cardClasses={cardClasses}
|
||||
/>
|
||||
|
||||
<div className="grid gap-8 md:grid-cols-2">
|
||||
<div
|
||||
className={`$${
|
||||
isDarkMode
|
||||
? "bg-gradient-to-br from-blue-900/20 to-cyan-900/20 border-blue-900"
|
||||
: "bg-gradient-to-br from-blue-100/40 to-cyan-100/40 border-blue-200"
|
||||
} backdrop-blur-lg rounded-xl p-8 border-2 transition-all duration-300 transform hover:scale-105 hover:border-blue-400/70 hover:shadow-lg`}
|
||||
>
|
||||
<div className="mb-4 text-4xl group-hover:animate-bounce">🏊♂️</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 border-green-900"
|
||||
: "bg-gradient-to-br from-green-100/40 to-emerald-100/40 border-green-200"
|
||||
} backdrop-blur-lg rounded-xl p-8 border-2 transition-all duration-300 transform hover:scale-105 hover:border-green-400/70 hover:shadow-lg`}
|
||||
>
|
||||
<div className="mb-4 text-4xl group-hover:animate-bounce">🏸</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
|
||||
id="entrepreneurship"
|
||||
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 transition-all duration-300 transform hover:scale-105 hover:border-orange-400/70 hover:shadow-lg`}
|
||||
>
|
||||
<Rocket
|
||||
className="mb-4 text-orange-400 group-hover:animate-bounce"
|
||||
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 transition-all duration-300 transform hover:scale-105 hover:border-red-400/70 hover:shadow-lg`}
|
||||
>
|
||||
<Zap
|
||||
className="mb-4 text-red-400 group-hover:animate-pulse"
|
||||
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>
|
||||
{/* Entrepreneurship Section */}
|
||||
<EntrepreneurshipSection
|
||||
isDarkMode={isDarkMode}
|
||||
scrollToSection={scrollToSection}
|
||||
textClasses={textClasses}
|
||||
cardClasses={cardClasses}
|
||||
/>
|
||||
|
||||
{/* Reviews Section */}
|
||||
<ReviewsSection
|
||||
@@ -724,39 +262,12 @@ const App = () => {
|
||||
/>
|
||||
|
||||
{/* 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>
|
||||
<Footer
|
||||
isDarkMode={isDarkMode}
|
||||
scrollToSection={scrollToSection}
|
||||
textClasses={textClasses}
|
||||
cardClasses={cardClasses}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user