Refactor components for improved structure and clarity; update Footer, HeroSection, LeadershipSection, TechSection, and add new AcademicSTEMHighlights, ReviewSection, and UniqueSection components. Remove ReviewsSection and streamline props for better maintainability.
This commit is contained in:
648
src/App.tsx
648
src/App.tsx
@@ -1,25 +1,21 @@
|
||||
import { useState, type JSX, useEffect } from "react";
|
||||
import {
|
||||
Star,
|
||||
Plus,
|
||||
X,
|
||||
Mail,
|
||||
Phone,
|
||||
MapPin,
|
||||
Github,
|
||||
Linkedin,
|
||||
Award,
|
||||
Briefcase,
|
||||
GraduationCap,
|
||||
Trophy,
|
||||
Zap,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import { addReview, fetchReviews, type Review } from "./reviewsApi";
|
||||
import HeroSection from "./components/HeroSection";
|
||||
import UniqueSection from "./components/UniqueSection";
|
||||
import AcademicSTEMHighlights from "./components/AcademicStemHighlights";
|
||||
import TechSection from "./components/TechSection";
|
||||
import LeadershipSection from "./components/LeadershipSection";
|
||||
import AthleticSection from "./components/AthleticsSection";
|
||||
import EntrepreuneurshipSection from "./components/EntrepreneurshipSection";
|
||||
import ReviewSection from "./components/ReviewSection";
|
||||
import Footer from "./components/Footer";
|
||||
|
||||
const App = () => {
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const isOutOfCollege = false; // Change this to false if you want to simulate being in college
|
||||
const [reviews, setReviews] = useState<Review[]>([]);
|
||||
const [newReview, setNewReview] = useState<Review>({
|
||||
name: "",
|
||||
@@ -74,629 +70,33 @@ const App = () => {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100">
|
||||
{/* Header */}
|
||||
<div className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 text-white py-16">
|
||||
<div className="max-w-6xl mx-auto px-6">
|
||||
<div className="flex flex-col lg:flex-row items-center gap-8">
|
||||
<img
|
||||
src="/mugshot.jpeg"
|
||||
alt="Maaz Khokhar"
|
||||
className="w-48 h-48 rounded-full shadow-lg border-4 border-white"
|
||||
/>
|
||||
<div className="text-center lg:text-left">
|
||||
<h1 className="text-5xl font-bold mb-4 bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
|
||||
Maaz Khokhar
|
||||
</h1>
|
||||
<p className="text-xl text-slate-300 mb-6">
|
||||
Full-Stack Developer
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<Mail className="w-4 h-4" />
|
||||
khokharmaaz@gmail.com
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Phone className="w-4 h-4" />
|
||||
(214) 732-2569
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin className="w-4 h-4" />
|
||||
Dallas, TX
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Hero Section */}
|
||||
<HeroSection />
|
||||
|
||||
<div className="max-w-6xl mx-auto px-6 py-12">
|
||||
{/* Why I Stand Out */}
|
||||
<section className="mb-16">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<Zap className="w-8 h-8 text-indigo-600" />
|
||||
<h2 className="text-3xl font-bold text-slate-800">
|
||||
What Makes Me Unique
|
||||
</h2>
|
||||
</div>
|
||||
<div className="bg-white rounded-2xl shadow-lg p-8 border-l-4 border-indigo-500">
|
||||
<p className="text-lg text-slate-700 leading-relaxed mb-6">
|
||||
I bridge the gap between cutting-edge technology and real-world
|
||||
impact. With a unique combination of technical expertise,
|
||||
entrepreneurial mindset, and leadership experience, I transform
|
||||
complex problems into elegant solutions that drive meaningful
|
||||
change.
|
||||
</p>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
||||
<Award className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-slate-800">
|
||||
Innovation Driver
|
||||
</h3>
|
||||
<p className="text-sm text-slate-600">
|
||||
Transforming ideas into scalable solutions
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
||||
<Users className="w-8 h-8 text-green-600" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-slate-800">Team Catalyst</h3>
|
||||
<p className="text-sm text-slate-600">
|
||||
Inspiring collaboration and excellence
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
||||
<Briefcase className="w-8 h-8 text-purple-600" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-slate-800">
|
||||
Results Focused
|
||||
</h3>
|
||||
<p className="text-sm text-slate-600">
|
||||
Delivering measurable impact consistently
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<UniqueSection />
|
||||
|
||||
{/* Academic & STEM Highlights */}
|
||||
<section className="mb-16">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<GraduationCap className="w-8 h-8 text-indigo-600" />
|
||||
<h2 className="text-3xl font-bold text-slate-800">
|
||||
Academic & STEM Excellence
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{isOutOfCollege && (
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6">
|
||||
<h3 className="text-xl font-semibold text-slate-800 mb-4">
|
||||
Education
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-700">
|
||||
Master of Science in Computer Science
|
||||
</h4>
|
||||
<p className="text-slate-600">
|
||||
Stanford University • GPA: 3.9/4.0
|
||||
</p>
|
||||
<p className="text-sm text-slate-500">
|
||||
Specialization: AI & Machine Learning
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-700">
|
||||
Bachelor of Science in Engineering
|
||||
</h4>
|
||||
<p className="text-slate-600">
|
||||
MIT • Summa Cum Laude • GPA: 3.95/4.0
|
||||
</p>
|
||||
<p className="text-sm text-slate-500">
|
||||
Double Major: Computer Science & Mathematics
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6">
|
||||
<h3 className="text-xl font-semibold text-slate-800 mb-4">
|
||||
STEM Achievements
|
||||
</h3>
|
||||
<ul className="space-y-3 text-slate-700">
|
||||
{[
|
||||
"Developed 5+ freelance applications serving diverse client needs",
|
||||
"Specialized in full-stack web development and mobile applications",
|
||||
"Maintained 100% client satisfaction rate with on-time delivery",
|
||||
"Expertise in React, TypeScript, and modern web technologies",
|
||||
].map((achievement, index) => (
|
||||
<li key={index} className="flex items-start gap-2">
|
||||
<Award className="w-5 h-5 text-gold-500 mt-0.5 flex-shrink-0" />
|
||||
<span>{achievement}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<AcademicSTEMHighlights />
|
||||
|
||||
{/* Tech, Innovation, and Projects */}
|
||||
<section className="mb-16">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<Briefcase className="w-8 h-8 text-indigo-600" />
|
||||
<h2 className="text-3xl font-bold text-slate-800">
|
||||
Technology & Innovation
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6">
|
||||
<h3 className="text-xl font-semibold text-slate-800 mb-4">
|
||||
Featured Projects
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="border-l-4 border-blue-500 pl-4">
|
||||
<a
|
||||
href="https://ialfm-attendance.netlify.app"
|
||||
className="font-semibold text-slate-700"
|
||||
>
|
||||
Local School Attendance App
|
||||
</a>
|
||||
<p className="text-sm text-slate-600 mb-2">
|
||||
Lead Developer | 2025
|
||||
</p>
|
||||
<p className="text-slate-600">
|
||||
Developed and deployed a comprehensive attendance management
|
||||
system for a local educational institution, streamlining
|
||||
their administrative processes and improving data accuracy.
|
||||
The application continues to serve the organization daily,
|
||||
demonstrating successful long-term solution delivery.
|
||||
</p>
|
||||
</div>
|
||||
{isOutOfCollege && (
|
||||
<div className="border-l-4 border-green-500 pl-4">
|
||||
<h4 className="font-semibold text-slate-700">Sun-Scope</h4>
|
||||
<p className="text-sm text-slate-600 mb-2">
|
||||
Full-Stack Engineer | 2025
|
||||
</p>
|
||||
<p className="text-slate-600">
|
||||
Built IoT solution reducing energy consumption by 35%
|
||||
across 200+ commercial buildings
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="border-l-4 border-purple-500 pl-4">
|
||||
<a
|
||||
href="https://i-dazzle.netlify.app"
|
||||
className="font-semibold text-slate-700"
|
||||
>
|
||||
I-Dazzle E-Commerce Platform
|
||||
</a>
|
||||
<p className="text-sm text-slate-600 mb-2">
|
||||
Technical Lead | 2025
|
||||
</p>
|
||||
<p className="text-slate-600">
|
||||
Architected and developed a custom e-commerce platform for a
|
||||
luxury bag retailer, enabling direct-to-consumer sales and
|
||||
reducing third-party marketplace dependency. Implemented
|
||||
responsive design, secure payment processing, and inventory
|
||||
management features to support business growth and brand
|
||||
independence.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6">
|
||||
<h3 className="text-xl font-semibold text-slate-800 mb-4">
|
||||
Technical Skills
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-700 mb-2">
|
||||
Programming Languages
|
||||
</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{["Python", "JavaScript", "TypeScript"].map((skill) => (
|
||||
<span
|
||||
key={skill}
|
||||
className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium"
|
||||
>
|
||||
{skill}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-700 mb-2">
|
||||
Frameworks & Tools
|
||||
</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{[
|
||||
"React",
|
||||
"React Native",
|
||||
"Docker",
|
||||
"React Native",
|
||||
"TailwindCSS",
|
||||
].map((skill) => (
|
||||
<span
|
||||
key={skill}
|
||||
className="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium"
|
||||
>
|
||||
{skill}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{isOutOfCollege && (
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-700 mb-2">
|
||||
Specializations
|
||||
</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{["UI/UX Design", ""].map((skill) => (
|
||||
<span
|
||||
key={skill}
|
||||
className="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm font-medium"
|
||||
>
|
||||
{skill}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<TechSection />
|
||||
|
||||
{/* Leadership, Service, & School */}
|
||||
<section className="mb-16">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<Users className="w-8 h-8 text-indigo-600" />
|
||||
<h2 className="text-3xl font-bold text-slate-800">
|
||||
Leadership & Service
|
||||
</h2>
|
||||
</div>
|
||||
<div className="bg-white rounded-2xl shadow-lg p-8">
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-slate-800 mb-6">
|
||||
Leadership Roles
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-700">
|
||||
NJHS Inductee
|
||||
</h4>
|
||||
<p className="text-slate-600">
|
||||
National Junior Honor Society Inductee • 2024
|
||||
</p>
|
||||
<p className="text-sm text-slate-600">
|
||||
Recognized for academic excellence, leadership, and
|
||||
community service in middle school
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-700">
|
||||
"Fabulous Falcon" Award
|
||||
</h4>
|
||||
<p className="text-slate-600">
|
||||
Forestwood Middle School • 2024
|
||||
</p>
|
||||
<p className="text-sm text-slate-600">
|
||||
Awarded for outstanding contributions to school community
|
||||
and leadership in student activities
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-700">
|
||||
Peer Learning Mentor
|
||||
</h4>
|
||||
<p className="text-slate-600">
|
||||
Forestwood Middle School • 2023-2024
|
||||
</p>
|
||||
<p className="text-sm text-slate-600">
|
||||
Mentored 50+ students in computer science fundamentals,
|
||||
fostering a collaborative learning environment
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{isOutOfCollege && (
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-slate-800 mb-6">
|
||||
Community Service
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-700">
|
||||
Code for Good Volunteer
|
||||
</h4>
|
||||
<p className="text-slate-600">
|
||||
2020-Present • 500+ hours
|
||||
</p>
|
||||
<p className="text-sm text-slate-600">
|
||||
Built digital solutions for 10+ nonprofits, impacting
|
||||
10,000+ lives
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<LeadershipSection />
|
||||
|
||||
{isOutOfCollege && (
|
||||
/* Athletics & Competitions */
|
||||
<section className="mb-16">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<Trophy className="w-8 h-8 text-indigo-600" />
|
||||
<h2 className="text-3xl font-bold text-slate-800">
|
||||
Athletics & Competitions
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6">
|
||||
<h3 className="text-xl font-semibold text-slate-800 mb-4">
|
||||
Competitive Programming
|
||||
</h3>
|
||||
<ul className="space-y-2 text-slate-700">
|
||||
<li className="flex items-center gap-2">
|
||||
<Trophy className="w-4 h-4 text-gold-500" />
|
||||
<span className="text-sm">
|
||||
ACM ICPC World Finals - Top 20
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Trophy className="w-4 h-4 text-silver-400" />
|
||||
<span className="text-sm">
|
||||
Google Code Jam - Round 3 Qualifier
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Trophy className="w-4 h-4 text-bronze-400" />
|
||||
<span className="text-sm">
|
||||
Facebook Hacker Cup - Top 100
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6">
|
||||
<h3 className="text-xl font-semibold text-slate-800 mb-4">
|
||||
Hackathons
|
||||
</h3>
|
||||
<ul className="space-y-2 text-slate-700">
|
||||
<li className="flex items-center gap-2">
|
||||
<Trophy className="w-4 h-4 text-gold-500" />
|
||||
<span className="text-sm">
|
||||
TechCrunch Disrupt - 1st Place
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Trophy className="w-4 h-4 text-gold-500" />
|
||||
<span className="text-sm">MIT HackMIT - Winner</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Trophy className="w-4 h-4 text-silver-400" />
|
||||
<span className="text-sm">
|
||||
Stanford TreeHacks - 2nd Place
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6">
|
||||
<h3 className="text-xl font-semibold text-slate-800 mb-4">
|
||||
Athletic Achievements
|
||||
</h3>
|
||||
<ul className="space-y-2 text-slate-700">
|
||||
<li className="flex items-center gap-2">
|
||||
<Trophy className="w-4 h-4 text-gold-500" />
|
||||
<span className="text-sm">
|
||||
Varsity Tennis - Team Captain
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Trophy className="w-4 h-4 text-silver-400" />
|
||||
<span className="text-sm">
|
||||
Marathon Finisher - Sub 3:30
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Trophy className="w-4 h-4 text-bronze-400" />
|
||||
<span className="text-sm">
|
||||
Rock Climbing - Advanced Level
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Athletics & Competitions */}
|
||||
<AthleticSection />
|
||||
|
||||
{/* Entrepreneurship and Drive */}
|
||||
{isOutOfCollege && (
|
||||
<section className="mb-16">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<Zap className="w-8 h-8 text-indigo-600" />
|
||||
<h2 className="text-3xl font-bold text-slate-800">
|
||||
Entrepreneurial Ventures
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6">
|
||||
<h3 className="text-xl font-semibold text-slate-800 mb-4">
|
||||
Founded Startups
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="border-l-4 border-emerald-500 pl-4">
|
||||
<h4 className="font-semibold text-slate-700">
|
||||
EcoTech Solutions
|
||||
</h4>
|
||||
<p className="text-sm text-slate-600 mb-2">
|
||||
Co-Founder & CTO • 2023-Present
|
||||
</p>
|
||||
<p className="text-slate-600">
|
||||
$2M in funding raised, 50+ employees, revolutionizing
|
||||
renewable energy storage
|
||||
</p>
|
||||
</div>
|
||||
<div className="border-l-4 border-blue-500 pl-4">
|
||||
<h4 className="font-semibold text-slate-700">StudySync</h4>
|
||||
<p className="text-sm text-slate-600 mb-2">
|
||||
Founder • 2022-2023
|
||||
</p>
|
||||
<p className="text-slate-600">
|
||||
EdTech platform with 10K+ users, acquired by major
|
||||
educational publisher
|
||||
</p>
|
||||
</div>
|
||||
<div className="border-l-4 border-purple-500 pl-4">
|
||||
<h4 className="font-semibold text-slate-700">
|
||||
DevTools Pro
|
||||
</h4>
|
||||
<p className="text-sm text-slate-600 mb-2">
|
||||
Co-Founder • 2021-2022
|
||||
</p>
|
||||
<p className="text-slate-600">
|
||||
Developer productivity suite, $500K ARR before successful
|
||||
exit
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6">
|
||||
<h3 className="text-xl font-semibold text-slate-800 mb-4">
|
||||
Investment & Advisory
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-700">
|
||||
Angel Investor
|
||||
</h4>
|
||||
<p className="text-slate-600">
|
||||
15+ early-stage investments in AI and sustainability
|
||||
startups
|
||||
</p>
|
||||
<p className="text-sm text-slate-600">
|
||||
3 successful exits, 2 unicorns in portfolio
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-700">
|
||||
Startup Accelerator Mentor
|
||||
</h4>
|
||||
<p className="text-slate-600">
|
||||
Y Combinator, Techstars, 500 Startups
|
||||
</p>
|
||||
<p className="text-sm text-slate-600">
|
||||
Mentored 50+ startups, $100M+ in follow-on funding
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-700">
|
||||
Innovation Consultant
|
||||
</h4>
|
||||
<p className="text-slate-600">
|
||||
Fortune 500 digital transformation advisor
|
||||
</p>
|
||||
<p className="text-sm text-slate-600">
|
||||
Led innovation workshops for 20+ enterprises
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
{/* Reviews Section */}
|
||||
<section className="mb-16">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div className="flex items-center gap-3">
|
||||
<Star className="w-8 h-8 text-indigo-600" />
|
||||
<h2 className="text-3xl font-bold text-slate-800">
|
||||
Professional Reviews
|
||||
</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowModal(true)}
|
||||
className="flex items-center gap-2 bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition-colors font-medium"
|
||||
>
|
||||
<Plus className="w-5 h-5" />
|
||||
Add Review
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{reviews.length > 1 ? (
|
||||
reviews.map((review, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white rounded-2xl shadow-lg p-6 hover:shadow-xl transition-shadow"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<Star className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-slate-800">
|
||||
{review.name}
|
||||
</h3>
|
||||
<p className="text-sm text-slate-600">
|
||||
{review.position}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center mb-4">
|
||||
{renderStars(review.rating)}
|
||||
</div>
|
||||
<p className="text-slate-700">{review.text}</p>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="col-span-full text-center text-slate-500 bg-slate-200 outline-1 outline-white rounded-2xl p-6">
|
||||
No reviews yet. Be the first to add one!
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
<EntrepreuneurshipSection />
|
||||
|
||||
{/* Let's Connect */}
|
||||
<section className="mb-16">
|
||||
<div className="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl shadow-xl text-white p-12 text-center">
|
||||
<h2 className="text-4xl font-bold mb-6">Let's Connect</h2>
|
||||
<p className="text-xl mb-8 opacity-90">
|
||||
Ready to collaborate on something amazing? I'm always excited to
|
||||
discuss new opportunities and innovative projects.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-6">
|
||||
<a
|
||||
href="khokharmaaz@gmail.com"
|
||||
className="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-6 py-3 rounded-lg hover:bg-white/30 transition-colors"
|
||||
>
|
||||
<Mail className="w-5 h-5" />
|
||||
Email Me
|
||||
</a>
|
||||
{isOutOfCollege && (
|
||||
<a
|
||||
href="https://linkedin.com/MyLinkedinProfile"
|
||||
className="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-6 py-3 rounded-lg hover:bg-white/30 transition-colors"
|
||||
>
|
||||
<Linkedin className="w-5 h-5" />
|
||||
LinkedIn
|
||||
</a>
|
||||
)}
|
||||
<a
|
||||
href="https://github.com/coolestcoder655"
|
||||
className="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-6 py-3 rounded-lg hover:bg-white/30 transition-colors"
|
||||
>
|
||||
<Github className="w-5 h-5" />
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Reviews Section */}
|
||||
<ReviewSection setShowModal={setShowModal} reviews={reviews} renderStars={renderStars} />
|
||||
|
||||
{/* Footer */}
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
{/* Modal */}
|
||||
|
||||
@@ -1,66 +0,0 @@
|
||||
import { Zap, Users, Rocket } from "lucide-react";
|
||||
|
||||
interface AboutSectionProps {
|
||||
textClasses: string;
|
||||
cardClasses: string;
|
||||
}
|
||||
|
||||
const AboutSection = ({ textClasses, cardClasses }: AboutSectionProps) => {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutSection;
|
||||
@@ -1,101 +0,0 @@
|
||||
import { Trophy, Award, Star } from "lucide-react";
|
||||
|
||||
interface AcademicSectionProps {
|
||||
isDarkMode: boolean;
|
||||
textClasses: string;
|
||||
cardClasses: string;
|
||||
}
|
||||
|
||||
const AcademicSection = ({
|
||||
isDarkMode,
|
||||
textClasses,
|
||||
cardClasses,
|
||||
}: AcademicSectionProps) => {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export default AcademicSection;
|
||||
71
src/components/AcademicStemHighlights.tsx
Normal file
71
src/components/AcademicStemHighlights.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import { GraduationCap, Award } from "lucide-react";
|
||||
|
||||
interface AcademicSTEMHighlightsProps {
|
||||
isOutOfCollege?: boolean;
|
||||
}
|
||||
|
||||
const AcademicSTEMHighlights: React.FC<AcademicSTEMHighlightsProps> = ({ isOutOfCollege = false }) => {
|
||||
return (
|
||||
<section className="mb-16">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<GraduationCap className="w-8 h-8 text-indigo-600" />
|
||||
<h2 className="text-3xl font-bold text-slate-800">
|
||||
Academic & STEM Excellence
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{isOutOfCollege && (
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6">
|
||||
<h3 className="text-xl font-semibold text-slate-800 mb-4">
|
||||
Education
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-700">
|
||||
Master of Science in Computer Science
|
||||
</h4>
|
||||
<p className="text-slate-600">
|
||||
Stanford University • GPA: 3.9/4.0
|
||||
</p>
|
||||
<p className="text-sm text-slate-500">
|
||||
Specialization: AI & Machine Learning
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-700">
|
||||
Bachelor of Science in Engineering
|
||||
</h4>
|
||||
<p className="text-slate-600">
|
||||
MIT • Summa Cum Laude • GPA: 3.95/4.0
|
||||
</p>
|
||||
<p className="text-sm text-slate-500">
|
||||
Double Major: Computer Science & Mathematics
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6">
|
||||
<h3 className="text-xl font-semibold text-slate-800 mb-4">
|
||||
STEM Achievements
|
||||
</h3>
|
||||
<ul className="space-y-3 text-slate-700">
|
||||
{[
|
||||
"Developed 5+ freelance applications serving diverse client needs",
|
||||
"Specialized in full-stack web development and mobile applications",
|
||||
"Maintained 100% client satisfaction rate with on-time delivery",
|
||||
"Expertise in React, TypeScript, and modern web technologies",
|
||||
].map((achievement, index) => (
|
||||
<li key={index} className="flex items-start gap-2">
|
||||
<Award className="w-5 h-5 text-gold-500 mt-0.5 flex-shrink-0" />
|
||||
<span>{achievement}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default AcademicSTEMHighlights;
|
||||
@@ -1,60 +1,99 @@
|
||||
interface AthleticsSectionProps {
|
||||
isDarkMode: boolean;
|
||||
textClasses: string;
|
||||
import { Trophy } from 'lucide-react';
|
||||
|
||||
interface AthleticSectionProps {
|
||||
isOutOfCollege?: boolean;
|
||||
}
|
||||
|
||||
const AthleticsSection = ({
|
||||
isDarkMode,
|
||||
textClasses,
|
||||
}: AthleticsSectionProps) => {
|
||||
return (
|
||||
<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 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>
|
||||
);
|
||||
const AthleticSection: React.FC<AthleticSectionProps> = ({ isOutOfCollege = false }) => {
|
||||
return (
|
||||
<>
|
||||
{isOutOfCollege && (
|
||||
<section className="mb-16">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<Trophy className="w-8 h-8 text-indigo-600" />
|
||||
<h2 className="text-3xl font-bold text-slate-800">
|
||||
Athletics & Competitions
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6">
|
||||
<h3 className="text-xl font-semibold text-slate-800 mb-4">
|
||||
Competitive Programming
|
||||
</h3>
|
||||
<ul className="space-y-2 text-slate-700">
|
||||
<li className="flex items-center gap-2">
|
||||
<Trophy className="w-4 h-4 text-gold-500" />
|
||||
<span className="text-sm">
|
||||
ACM ICPC World Finals - Top 20
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Trophy className="w-4 h-4 text-silver-400" />
|
||||
<span className="text-sm">
|
||||
Google Code Jam - Round 3 Qualifier
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Trophy className="w-4 h-4 text-bronze-400" />
|
||||
<span className="text-sm">
|
||||
Facebook Hacker Cup - Top 100
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6">
|
||||
<h3 className="text-xl font-semibold text-slate-800 mb-4">
|
||||
Hackathons
|
||||
</h3>
|
||||
<ul className="space-y-2 text-slate-700">
|
||||
<li className="flex items-center gap-2">
|
||||
<Trophy className="w-4 h-4 text-gold-500" />
|
||||
<span className="text-sm">
|
||||
TechCrunch Disrupt - 1st Place
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Trophy className="w-4 h-4 text-gold-500" />
|
||||
<span className="text-sm">MIT HackMIT - Winner</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Trophy className="w-4 h-4 text-silver-400" />
|
||||
<span className="text-sm">
|
||||
Stanford TreeHacks - 2nd Place
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6">
|
||||
<h3 className="text-xl font-semibold text-slate-800 mb-4">
|
||||
Athletic Achievements
|
||||
</h3>
|
||||
<ul className="space-y-2 text-slate-700">
|
||||
<li className="flex items-center gap-2">
|
||||
<Trophy className="w-4 h-4 text-gold-500" />
|
||||
<span className="text-sm">
|
||||
Varsity Tennis - Team Captain
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Trophy className="w-4 h-4 text-silver-400" />
|
||||
<span className="text-sm">
|
||||
Marathon Finisher - Sub 3:30
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Trophy className="w-4 h-4 text-bronze-400" />
|
||||
<span className="text-sm">
|
||||
Rock Climbing - Advanced Level
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AthleticsSection;
|
||||
export default AthleticSection;
|
||||
@@ -1,69 +1,108 @@
|
||||
import { Rocket, Zap } from "lucide-react";
|
||||
import { Zap } from 'lucide-react';
|
||||
|
||||
interface EntrepreneurshipSectionProps {
|
||||
isDarkMode: boolean;
|
||||
textClasses: string;
|
||||
cardClasses: string;
|
||||
interface AthleticSectionProps {
|
||||
isOutOfCollege?: boolean;
|
||||
}
|
||||
|
||||
const EntrepreneurshipSection = ({
|
||||
isDarkMode,
|
||||
textClasses,
|
||||
cardClasses,
|
||||
}: EntrepreneurshipSectionProps) => {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
const EntrepreuneurshipSection: React.FC<AthleticSectionProps> = ({ isOutOfCollege = false }) => {
|
||||
return (
|
||||
<>
|
||||
{isOutOfCollege && (
|
||||
<section className="mb-16">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<Zap className="w-8 h-8 text-indigo-600" />
|
||||
<h2 className="text-3xl font-bold text-slate-800">
|
||||
Entrepreneurial Ventures
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6">
|
||||
<h3 className="text-xl font-semibold text-slate-800 mb-4">
|
||||
Founded Startups
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="border-l-4 border-emerald-500 pl-4">
|
||||
<h4 className="font-semibold text-slate-700">
|
||||
EcoTech Solutions
|
||||
</h4>
|
||||
<p className="text-sm text-slate-600 mb-2">
|
||||
Co-Founder & CTO • 2023-Present
|
||||
</p>
|
||||
<p className="text-slate-600">
|
||||
$2M in funding raised, 50+ employees, revolutionizing
|
||||
renewable energy storage
|
||||
</p>
|
||||
</div>
|
||||
<div className="border-l-4 border-blue-500 pl-4">
|
||||
<h4 className="font-semibold text-slate-700">StudySync</h4>
|
||||
<p className="text-sm text-slate-600 mb-2">
|
||||
Founder • 2022-2023
|
||||
</p>
|
||||
<p className="text-slate-600">
|
||||
EdTech platform with 10K+ users, acquired by major
|
||||
educational publisher
|
||||
</p>
|
||||
</div>
|
||||
<div className="border-l-4 border-purple-500 pl-4">
|
||||
<h4 className="font-semibold text-slate-700">
|
||||
DevTools Pro
|
||||
</h4>
|
||||
<p className="text-sm text-slate-600 mb-2">
|
||||
Co-Founder • 2021-2022
|
||||
</p>
|
||||
<p className="text-slate-600">
|
||||
Developer productivity suite, $500K ARR before successful
|
||||
exit
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6">
|
||||
<h3 className="text-xl font-semibold text-slate-800 mb-4">
|
||||
Investment & Advisory
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-700">
|
||||
Angel Investor
|
||||
</h4>
|
||||
<p className="text-slate-600">
|
||||
15+ early-stage investments in AI and sustainability
|
||||
startups
|
||||
</p>
|
||||
<p className="text-sm text-slate-600">
|
||||
3 successful exits, 2 unicorns in portfolio
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-700">
|
||||
Startup Accelerator Mentor
|
||||
</h4>
|
||||
<p className="text-slate-600">
|
||||
Y Combinator, Techstars, 500 Startups
|
||||
</p>
|
||||
<p className="text-sm text-slate-600">
|
||||
Mentored 50+ startups, $100M+ in follow-on funding
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-700">
|
||||
Innovation Consultant
|
||||
</h4>
|
||||
<p className="text-slate-600">
|
||||
Fortune 500 digital transformation advisor
|
||||
</p>
|
||||
<p className="text-sm text-slate-600">
|
||||
Led innovation workshops for 20+ enterprises
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default EntrepreneurshipSection;
|
||||
export default EntrepreuneurshipSection;
|
||||
@@ -1,43 +1,46 @@
|
||||
interface FooterProps {
|
||||
isDarkMode: boolean;
|
||||
textClasses: string;
|
||||
import { Mail, Linkedin, Github } from 'lucide-react';
|
||||
|
||||
interface Props {
|
||||
isOutOfCollege?: boolean;
|
||||
}
|
||||
|
||||
const Footer = ({ isDarkMode, textClasses }: FooterProps) => {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
const Footer: React.FC<Props> = ({ isOutOfCollege }) => {
|
||||
return (
|
||||
<section className="mb-16">
|
||||
<div className="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl shadow-xl text-white p-12 text-center">
|
||||
<h2 className="text-4xl font-bold mb-6">Let's Connect</h2>
|
||||
<p className="text-xl mb-8 opacity-90">
|
||||
Ready to collaborate on something amazing? I'm always excited to
|
||||
discuss new opportunities and innovative projects.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-6">
|
||||
<a
|
||||
href="khokharmaaz@gmail.com"
|
||||
className="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-6 py-3 rounded-lg hover:bg-white/30 transition-colors"
|
||||
>
|
||||
<Mail className="w-5 h-5" />
|
||||
Email Me
|
||||
</a>
|
||||
{isOutOfCollege && (
|
||||
<a
|
||||
href="https://linkedin.com/MyLinkedinProfile"
|
||||
className="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-6 py-3 rounded-lg hover:bg-white/30 transition-colors"
|
||||
>
|
||||
<Linkedin className="w-5 h-5" />
|
||||
LinkedIn
|
||||
</a>
|
||||
)}
|
||||
<a
|
||||
href="https://github.com/coolestcoder655"
|
||||
className="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-6 py-3 rounded-lg hover:bg-white/30 transition-colors"
|
||||
>
|
||||
<Github className="w-5 h-5" />
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
export default Footer;
|
||||
@@ -1,108 +1,41 @@
|
||||
import { ChevronDown, Trophy, Code, Rocket } from "lucide-react";
|
||||
import { Mail, MapPin, Phone } from 'lucide-react';
|
||||
|
||||
interface HeroSectionProps {
|
||||
isDarkMode: boolean;
|
||||
scrollToSection: (sectionId: string) => void;
|
||||
textClasses: string;
|
||||
}
|
||||
|
||||
const HeroSection = ({
|
||||
isDarkMode,
|
||||
scrollToSection,
|
||||
textClasses,
|
||||
}: HeroSectionProps) => {
|
||||
const HeroSection: React.FC = () => {
|
||||
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"
|
||||
/>
|
||||
<section className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 text-white py-16">
|
||||
<div className="max-w-6xl mx-auto px-6">
|
||||
<div className="flex flex-col lg:flex-row items-center gap-8">
|
||||
<img
|
||||
src="/mugshot.jpeg"
|
||||
alt="Maaz Khokhar"
|
||||
className="w-48 h-48 rounded-full shadow-lg border-4 border-white"
|
||||
/>
|
||||
<div className="text-center lg:text-left">
|
||||
<h1 className="text-5xl font-bold mb-4 bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
|
||||
Maaz Khokhar
|
||||
</h1>
|
||||
<p className="text-xl text-slate-300 mb-6">
|
||||
Full-Stack Developer
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<Mail className="w-4 h-4" />
|
||||
khokharmaaz@gmail.com
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Phone className="w-4 h-4" />
|
||||
(214) 732-2569
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin className="w-4 h-4" />
|
||||
Dallas, TX
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
);
|
||||
</section>
|
||||
)
|
||||
};
|
||||
|
||||
export default HeroSection;
|
||||
export default HeroSection;
|
||||
@@ -1,74 +1,88 @@
|
||||
import { Award, Star, Users } from "lucide-react";
|
||||
import { Users } from 'lucide-react';
|
||||
|
||||
interface LeadershipSectionProps {
|
||||
isDarkMode: boolean;
|
||||
textClasses: string;
|
||||
cardClasses: string;
|
||||
isOutOfCollege?: boolean;
|
||||
}
|
||||
|
||||
const LeadershipSection = ({
|
||||
isDarkMode,
|
||||
textClasses,
|
||||
cardClasses,
|
||||
}: LeadershipSectionProps) => {
|
||||
return (
|
||||
<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>
|
||||
const LeadershipSection: React.FC<LeadershipSectionProps> = ({ isOutOfCollege = false }) => {
|
||||
return (
|
||||
<section className="mb-16">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<Users className="w-8 h-8 text-indigo-600" />
|
||||
<h2 className="text-3xl font-bold text-slate-800">
|
||||
Leadership & Service
|
||||
</h2>
|
||||
</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 className="bg-white rounded-2xl shadow-lg p-8">
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-slate-800 mb-6">
|
||||
Leadership Roles
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-700">
|
||||
NJHS Inductee
|
||||
</h4>
|
||||
<p className="text-slate-600">
|
||||
National Junior Honor Society Inductee • 2024
|
||||
</p>
|
||||
<p className="text-sm text-slate-600">
|
||||
Recognized for academic excellence, leadership, and
|
||||
community service in middle school
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-700">
|
||||
"Fabulous Falcon" Award
|
||||
</h4>
|
||||
<p className="text-slate-600">
|
||||
Forestwood Middle School • 2024
|
||||
</p>
|
||||
<p className="text-sm text-slate-600">
|
||||
Awarded for outstanding contributions to school community
|
||||
and leadership in student activities
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-700">
|
||||
Peer Learning Mentor
|
||||
</h4>
|
||||
<p className="text-slate-600">
|
||||
Forestwood Middle School • 2023-2024
|
||||
</p>
|
||||
<p className="text-sm text-slate-600">
|
||||
Mentored 50+ students in computer science fundamentals,
|
||||
fostering a collaborative learning environment
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{isOutOfCollege && (
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-slate-800 mb-6">
|
||||
Community Service
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-700">
|
||||
Code for Good Volunteer
|
||||
</h4>
|
||||
<p className="text-slate-600">
|
||||
2020-Present • 500+ hours
|
||||
</p>
|
||||
<p className="text-sm text-slate-600">
|
||||
Built digital solutions for 10+ nonprofits, impacting
|
||||
10,000+ lives
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</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>
|
||||
);
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default LeadershipSection;
|
||||
export default LeadershipSection;
|
||||
65
src/components/ReviewSection.tsx
Normal file
65
src/components/ReviewSection.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import { Star, Plus } from 'lucide-react';
|
||||
import { type JSX } from 'react';
|
||||
import { type Review } from '../reviewsApi';
|
||||
|
||||
interface Props {
|
||||
setShowModal: (show: boolean) => void;
|
||||
reviews: Review[];
|
||||
renderStars: (rating: number) => JSX.Element[];
|
||||
}
|
||||
|
||||
const ReviewSection: React.FC<Props> = ({ setShowModal, renderStars, reviews }) => {
|
||||
return (
|
||||
<section className="mb-16">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div className="flex items-center gap-3">
|
||||
<Star className="w-8 h-8 text-indigo-600" />
|
||||
<h2 className="text-3xl font-bold text-slate-800">
|
||||
Professional Reviews
|
||||
</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowModal(true)}
|
||||
className="flex items-center gap-2 bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition-colors font-medium"
|
||||
>
|
||||
<Plus className="w-5 h-5" />
|
||||
Add Review
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{reviews.length > 1 ? (
|
||||
reviews.map((review, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white rounded-2xl shadow-lg p-6 hover:shadow-xl transition-shadow"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<Star className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-slate-800">
|
||||
{review.name}
|
||||
</h3>
|
||||
<p className="text-sm text-slate-600">
|
||||
{review.position}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center mb-4">
|
||||
{renderStars(review.rating)}
|
||||
</div>
|
||||
<p className="text-slate-700">{review.text}</p>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="col-span-full text-center text-slate-500 bg-slate-200 outline-1 outline-white rounded-2xl p-6">
|
||||
No reviews yet. Be the first to add one!
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReviewSection;
|
||||
@@ -1,207 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { fetchReviews, addReview } from "../reviewsApi";
|
||||
import type { Review } from "../reviewsApi";
|
||||
import { Star } from "lucide-react";
|
||||
|
||||
const ReviewsSection = ({
|
||||
cardClasses,
|
||||
textClasses,
|
||||
isDarkMode,
|
||||
}: {
|
||||
cardClasses: string;
|
||||
textClasses: string;
|
||||
isDarkMode: boolean;
|
||||
}) => {
|
||||
const [reviews, setReviews] = useState<Review[]>([]);
|
||||
const [name, setName] = useState("");
|
||||
const [message, setMessage] = useState("");
|
||||
const [rating, setRating] = useState(5);
|
||||
const [hoverRating, setHoverRating] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [success, setSuccess] = useState("");
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchReviews().then(setReviews);
|
||||
}, []);
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError("");
|
||||
setSuccess("");
|
||||
try {
|
||||
await addReview({ name, message, rating });
|
||||
setSuccess("Review submitted!");
|
||||
setName("");
|
||||
setMessage("");
|
||||
setRating(5);
|
||||
setReviews(await fetchReviews());
|
||||
// Close modal immediately after successful submission
|
||||
setIsModalOpen(false);
|
||||
} catch (err) {
|
||||
setError("Failed to submit review.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const openModal = () => {
|
||||
setIsModalOpen(true);
|
||||
setError("");
|
||||
setSuccess("");
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="reviews" className="py-20">
|
||||
<div className="max-w-3xl mx-auto px-4">
|
||||
<h2 className="text-3xl font-bold mb-8 text-center text-transparent bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text">
|
||||
Reviews
|
||||
</h2>
|
||||
|
||||
<div className="flex justify-center mb-8">
|
||||
<button
|
||||
onClick={openModal}
|
||||
className="px-6 py-3 rounded-lg bg-gradient-to-r from-cyan-400 to-purple-400 text-white font-semibold shadow-lg hover:from-purple-400 hover:to-cyan-400 transition-colors transform hover:scale-105 duration-500"
|
||||
>
|
||||
Add Your Review
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Review Modal */}
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 flex items-center justify-center z-50 bg-black/50 backdrop-blur-sm">
|
||||
<div
|
||||
className={`relative w-full max-w-md p-6 rounded-xl border ${cardClasses} animate-fade-in-up`}
|
||||
>
|
||||
<button
|
||||
onClick={() => setIsModalOpen(false)}
|
||||
className="absolute top-4 right-4 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
<h3 className="text-xl font-bold mb-4 text-transparent bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text">
|
||||
Share Your Review
|
||||
</h3>{" "}
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
|
||||
<input
|
||||
className={`p-3 rounded border focus:outline-none ${
|
||||
isDarkMode
|
||||
? "bg-slate-800 text-white border-white/10"
|
||||
: "bg-white text-gray-900 border-gray-300"
|
||||
}`}
|
||||
placeholder="Your Name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<div className="mb-2">
|
||||
<label className="block text-sm mb-1">Your Rating</label>
|
||||
<div className="flex gap-1">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<button
|
||||
key={star}
|
||||
type="button"
|
||||
onClick={() => setRating(star)}
|
||||
onMouseEnter={() => setHoverRating(star)}
|
||||
onMouseLeave={() => setHoverRating(0)}
|
||||
className="transition-transform hover:scale-110"
|
||||
>
|
||||
<Star
|
||||
size={24}
|
||||
fill={
|
||||
(hoverRating || rating) >= star ? "#38BDF8" : "none"
|
||||
}
|
||||
color={
|
||||
(hoverRating || rating) >= star
|
||||
? "#38BDF8"
|
||||
: "#9CA3AF"
|
||||
}
|
||||
className="transition-colors duration-200"
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<textarea
|
||||
className={`p-3 rounded border focus:outline-none ${
|
||||
isDarkMode
|
||||
? "bg-slate-800 text-white border-white/10"
|
||||
: "bg-white text-gray-900 border-gray-300"
|
||||
}`}
|
||||
placeholder="Your Review"
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
required
|
||||
rows={3}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-6 py-2 rounded bg-gradient-to-r from-cyan-400 to-purple-400 text-white font-semibold shadow-md hover:from-purple-400 hover:to-cyan-400 transition-colors duration-500"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? "Submitting..." : "Submit Review"}
|
||||
</button>
|
||||
{error && <p className="text-red-500 text-sm mt-2">{error}</p>}
|
||||
{success && (
|
||||
<p className="text-green-500 text-sm mt-2">{success}</p>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-6">
|
||||
{reviews.length === 0 && (
|
||||
<p className={textClasses + " text-center"}>
|
||||
No reviews yet. Be the first!
|
||||
</p>
|
||||
)}
|
||||
{reviews.map((review) => (
|
||||
<div
|
||||
key={review.id}
|
||||
className={`p-5 rounded-xl border ${cardClasses} transition-all duration-300 transform hover:scale-105 hover:shadow-xl hover:border-cyan-400/70`}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center">
|
||||
<span className="font-semibold mr-2 text-cyan-400">
|
||||
{review.name}
|
||||
</span>
|
||||
<span className="text-xs text-gray-400">
|
||||
{review.createdAt?.toDate?.().toLocaleString?.() || ""}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex">
|
||||
{Array.from({ length: 5 }, (_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
size={16}
|
||||
fill={i < (review.rating || 5) ? "#38BDF8" : "none"}
|
||||
color={i < (review.rating || 5) ? "#38BDF8" : "#9CA3AF"}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<p className={textClasses}>{review.message}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReviewsSection;
|
||||
@@ -1,166 +1,138 @@
|
||||
import { Code, Trophy, Cloud } from "lucide-react";
|
||||
import { Briefcase } from "lucide-react";
|
||||
|
||||
interface TechSectionProps {
|
||||
isDarkMode: boolean;
|
||||
textClasses: string;
|
||||
cardClasses: string;
|
||||
isOutOfCollege?: boolean;
|
||||
}
|
||||
|
||||
const TechSection = ({
|
||||
isDarkMode,
|
||||
textClasses,
|
||||
cardClasses,
|
||||
}: TechSectionProps) => {
|
||||
return (
|
||||
<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} />
|
||||
<a
|
||||
className="text-2xl font-bold text-cyan-400"
|
||||
href="https://ialfm-attendance.netlify.app/"
|
||||
>
|
||||
Sunday School Attendance App
|
||||
</a>
|
||||
<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>
|
||||
const TechSection: React.FC<TechSectionProps> = ({ isOutOfCollege = false }) => {
|
||||
return (
|
||||
<section className="mb-16">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<Briefcase className="w-8 h-8 text-indigo-600" />
|
||||
<h2 className="text-3xl font-bold text-slate-800">
|
||||
Technology & Innovation
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
className={`${
|
||||
isDarkMode
|
||||
? "bg-gradient-to-r from-blue-900/20 to-indigo-900/20"
|
||||
: "bg-gradient-to-r from-blue-100/40 to-indigo-100/40"
|
||||
} backdrop-blur-lg rounded-xl p-8 border ${
|
||||
isDarkMode ? "border-blue-400/30" : "border-blue-300/50"
|
||||
} transition-all duration-300 transform hover:scale-105 hover:shadow-xl hover:border-blue-400/70`}
|
||||
>
|
||||
<div className="flex items-center mb-4">
|
||||
<Cloud className="mr-3 text-blue-400" size={30} />
|
||||
<a
|
||||
className="text-2xl font-bold text-blue-400"
|
||||
href="https://sunscope.netlify.app"
|
||||
>
|
||||
Sunscope
|
||||
</a>
|
||||
<span className="px-3 py-1 ml-3 text-sm text-blue-400 rounded-full bg-blue-500/20">
|
||||
Weather Application
|
||||
</span>
|
||||
</div>
|
||||
<p className={`${textClasses} mb-4`}>
|
||||
Developed a weather application that provides real-time weather
|
||||
updates, forecasts, and alerts using WeatherAPI's API, showcasing
|
||||
my skills in API integration and responsive design.
|
||||
</p>
|
||||
</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
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6">
|
||||
<h3 className="text-xl font-semibold text-slate-800 mb-4">
|
||||
Featured Projects
|
||||
</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",
|
||||
"Docker Containers",
|
||||
"Git",
|
||||
"Virtualization",
|
||||
].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"
|
||||
<div className="space-y-4">
|
||||
<div className="border-l-4 border-blue-500 pl-4">
|
||||
<a
|
||||
href="https://ialfm-attendance.netlify.app"
|
||||
className="font-semibold text-slate-700"
|
||||
>
|
||||
{skill}
|
||||
</span>
|
||||
))}
|
||||
Local School Attendance App
|
||||
</a>
|
||||
<p className="text-sm text-slate-600 mb-2">
|
||||
Lead Developer | 2025
|
||||
</p>
|
||||
<p className="text-slate-600">
|
||||
Developed and deployed a comprehensive attendance management
|
||||
system for a local educational institution, streamlining
|
||||
their administrative processes and improving data accuracy.
|
||||
The application continues to serve the organization daily,
|
||||
demonstrating successful long-term solution delivery.
|
||||
</p>
|
||||
</div>
|
||||
{isOutOfCollege && (
|
||||
<div className="border-l-4 border-green-500 pl-4">
|
||||
<h4 className="font-semibold text-slate-700">Sun-Scope</h4>
|
||||
<p className="text-sm text-slate-600 mb-2">
|
||||
Full-Stack Engineer | 2025
|
||||
</p>
|
||||
<p className="text-slate-600">
|
||||
Built IoT solution reducing energy consumption by 35%
|
||||
across 200+ commercial buildings
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="border-l-4 border-purple-500 pl-4">
|
||||
<a
|
||||
href="https://i-dazzle.netlify.app"
|
||||
className="font-semibold text-slate-700"
|
||||
>
|
||||
I-Dazzle E-Commerce Platform
|
||||
</a>
|
||||
<p className="text-sm text-slate-600 mb-2">
|
||||
Technical Lead | 2025
|
||||
</p>
|
||||
<p className="text-slate-600">
|
||||
Architected and developed a custom e-commerce platform for a
|
||||
luxury bag retailer, enabling direct-to-consumer sales and
|
||||
reducing third-party marketplace dependency. Implemented
|
||||
responsive design, secure payment processing, and inventory
|
||||
management features to support business growth and brand
|
||||
independence.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6">
|
||||
<h3 className="text-xl font-semibold text-slate-800 mb-4">
|
||||
Technical Skills
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-700 mb-2">
|
||||
Programming Languages
|
||||
</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{["Python", "JavaScript", "TypeScript"].map((skill) => (
|
||||
<span
|
||||
key={skill}
|
||||
className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium"
|
||||
>
|
||||
{skill}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-700 mb-2">
|
||||
Frameworks & Tools
|
||||
</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{[
|
||||
"React",
|
||||
"React Native",
|
||||
"Docker",
|
||||
"React Native",
|
||||
"TailwindCSS",
|
||||
].map((skill) => (
|
||||
<span
|
||||
key={skill}
|
||||
className="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium"
|
||||
>
|
||||
{skill}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{isOutOfCollege && (
|
||||
<div>
|
||||
<h4 className="font-semibold text-slate-700 mb-2">
|
||||
Specializations
|
||||
</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{["UI/UX Design", ""].map((skill) => (
|
||||
<span
|
||||
key={skill}
|
||||
className="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm font-medium"
|
||||
>
|
||||
{skill}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</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>
|
||||
);
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default TechSection;
|
||||
export default TechSection;
|
||||
58
src/components/UniqueSection.tsx
Normal file
58
src/components/UniqueSection.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import { Award, Zap, Users, Briefcase } from 'lucide-react';
|
||||
|
||||
const UniqueSection: React.FC = () => {
|
||||
return (
|
||||
<section className="mb-16">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<Zap className="w-8 h-8 text-indigo-600" />
|
||||
<h2 className="text-3xl font-bold text-slate-800">
|
||||
What Makes Me Unique
|
||||
</h2>
|
||||
</div>
|
||||
<div className="bg-white rounded-2xl shadow-lg p-8 border-l-4 border-indigo-500">
|
||||
<p className="text-lg text-slate-700 leading-relaxed mb-6">
|
||||
I bridge the gap between cutting-edge technology and real-world
|
||||
impact. With a unique combination of technical expertise,
|
||||
entrepreneurial mindset, and leadership experience, I transform
|
||||
complex problems into elegant solutions that drive meaningful
|
||||
change.
|
||||
</p>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
||||
<Award className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-slate-800">
|
||||
Innovation Driver
|
||||
</h3>
|
||||
<p className="text-sm text-slate-600">
|
||||
Transforming ideas into scalable solutions
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
||||
<Users className="w-8 h-8 text-green-600" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-slate-800">Team Catalyst</h3>
|
||||
<p className="text-sm text-slate-600">
|
||||
Inspiring collaboration and excellence
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
||||
<Briefcase className="w-8 h-8 text-purple-600" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-slate-800">
|
||||
Results Focused
|
||||
</h3>
|
||||
<p className="text-sm text-slate-600">
|
||||
Delivering measurable impact consistently
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default UniqueSection;
|
||||
Reference in New Issue
Block a user