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 { useState, type JSX, useEffect } from "react";
|
||||||
import {
|
import {
|
||||||
Star,
|
Star,
|
||||||
Plus,
|
|
||||||
X,
|
X,
|
||||||
Mail,
|
|
||||||
Phone,
|
|
||||||
MapPin,
|
|
||||||
Github,
|
|
||||||
Linkedin,
|
|
||||||
Award,
|
|
||||||
Briefcase,
|
|
||||||
GraduationCap,
|
|
||||||
Trophy,
|
|
||||||
Zap,
|
|
||||||
Users,
|
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { addReview, fetchReviews, type Review } from "./reviewsApi";
|
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 App = () => {
|
||||||
const [showModal, setShowModal] = useState(false);
|
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 [reviews, setReviews] = useState<Review[]>([]);
|
||||||
const [newReview, setNewReview] = useState<Review>({
|
const [newReview, setNewReview] = useState<Review>({
|
||||||
name: "",
|
name: "",
|
||||||
@@ -74,629 +70,33 @@ const App = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100">
|
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100">
|
||||||
{/* Header */}
|
{/* Hero Section */}
|
||||||
<div className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 text-white py-16">
|
<HeroSection />
|
||||||
<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>
|
|
||||||
|
|
||||||
<div className="max-w-6xl mx-auto px-6 py-12">
|
<div className="max-w-6xl mx-auto px-6 py-12">
|
||||||
{/* Why I Stand Out */}
|
<UniqueSection />
|
||||||
<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>
|
|
||||||
|
|
||||||
{/* Academic & STEM Highlights */}
|
{/* Academic & STEM Highlights */}
|
||||||
<section className="mb-16">
|
<AcademicSTEMHighlights />
|
||||||
<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>
|
|
||||||
|
|
||||||
{/* Tech, Innovation, and Projects */}
|
{/* Tech, Innovation, and Projects */}
|
||||||
<section className="mb-16">
|
<TechSection />
|
||||||
<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>
|
|
||||||
|
|
||||||
{/* Leadership, Service, & School */}
|
{/* Leadership, Service, & School */}
|
||||||
<section className="mb-16">
|
<LeadershipSection />
|
||||||
<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>
|
|
||||||
|
|
||||||
{isOutOfCollege && (
|
|
||||||
/* Athletics & Competitions */
|
{/* Athletics & Competitions */}
|
||||||
<section className="mb-16">
|
<AthleticSection />
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Entrepreneurship and Drive */}
|
{/* Entrepreneurship and Drive */}
|
||||||
{isOutOfCollege && (
|
<EntrepreuneurshipSection />
|
||||||
<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>
|
|
||||||
|
|
||||||
{/* Let's Connect */}
|
{/* Reviews Section */}
|
||||||
<section className="mb-16">
|
<ReviewSection setShowModal={setShowModal} reviews={reviews} renderStars={renderStars} />
|
||||||
<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>
|
{/* Footer */}
|
||||||
<p className="text-xl mb-8 opacity-90">
|
<Footer />
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Modal */}
|
{/* 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 {
|
import { Trophy } from 'lucide-react';
|
||||||
isDarkMode: boolean;
|
|
||||||
textClasses: string;
|
interface AthleticSectionProps {
|
||||||
|
isOutOfCollege?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const AthleticsSection = ({
|
const AthleticSection: React.FC<AthleticSectionProps> = ({ isOutOfCollege = false }) => {
|
||||||
isDarkMode,
|
return (
|
||||||
textClasses,
|
<>
|
||||||
}: AthleticsSectionProps) => {
|
{isOutOfCollege && (
|
||||||
return (
|
<section className="mb-16">
|
||||||
<section id="athletics" className="py-20">
|
<div className="flex items-center gap-3 mb-8">
|
||||||
<div className="max-w-6xl px-6 mx-auto">
|
<Trophy className="w-8 h-8 text-indigo-600" />
|
||||||
<div className="mb-16 text-center">
|
<h2 className="text-3xl font-bold text-slate-800">
|
||||||
<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
|
||||||
🏊♂️🏸 Athletics & Competitions
|
</h2>
|
||||||
</h2>
|
</div>
|
||||||
<div className="w-24 h-1 mx-auto bg-gradient-to-r from-blue-400 to-green-400"></div>
|
<div className="grid md:grid-cols-3 gap-6">
|
||||||
</div>
|
<div className="bg-white rounded-2xl shadow-lg p-6">
|
||||||
|
<h3 className="text-xl font-semibold text-slate-800 mb-4">
|
||||||
<div className="grid gap-8 md:grid-cols-2">
|
Competitive Programming
|
||||||
<div
|
</h3>
|
||||||
className={`$${
|
<ul className="space-y-2 text-slate-700">
|
||||||
isDarkMode
|
<li className="flex items-center gap-2">
|
||||||
? "bg-gradient-to-br from-blue-900/20 to-cyan-900/20 border-blue-900"
|
<Trophy className="w-4 h-4 text-gold-500" />
|
||||||
: "bg-gradient-to-br from-blue-100/40 to-cyan-100/40 border-blue-200"
|
<span className="text-sm">
|
||||||
} 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`}
|
ACM ICPC World Finals - Top 20
|
||||||
>
|
</span>
|
||||||
<div className="mb-4 text-4xl group-hover:animate-bounce">🏊♂️</div>
|
</li>
|
||||||
<h3 className="mb-4 text-2xl font-bold text-blue-400">
|
<li className="flex items-center gap-2">
|
||||||
Swimming Competitions
|
<Trophy className="w-4 h-4 text-silver-400" />
|
||||||
</h3>
|
<span className="text-sm">
|
||||||
<p className={textClasses}>
|
Google Code Jam - Round 3 Qualifier
|
||||||
Competed across multiple events, honing discipline, mental
|
</span>
|
||||||
toughness, and an enduring competitive spirit.
|
</li>
|
||||||
</p>
|
<li className="flex items-center gap-2">
|
||||||
</div>
|
<Trophy className="w-4 h-4 text-bronze-400" />
|
||||||
|
<span className="text-sm">
|
||||||
<div
|
Facebook Hacker Cup - Top 100
|
||||||
className={`$${
|
</span>
|
||||||
isDarkMode
|
</li>
|
||||||
? "bg-gradient-to-br from-green-900/20 to-emerald-900/20 border-green-900"
|
</ul>
|
||||||
: "bg-gradient-to-br from-green-100/40 to-emerald-100/40 border-green-200"
|
</div>
|
||||||
} 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="bg-white rounded-2xl shadow-lg p-6">
|
||||||
>
|
<h3 className="text-xl font-semibold text-slate-800 mb-4">
|
||||||
<div className="mb-4 text-4xl group-hover:animate-bounce">🏸</div>
|
Hackathons
|
||||||
<h3 className="mb-4 text-2xl font-bold text-green-400">
|
</h3>
|
||||||
Badminton Competitions
|
<ul className="space-y-2 text-slate-700">
|
||||||
</h3>
|
<li className="flex items-center gap-2">
|
||||||
<p className={textClasses}>
|
<Trophy className="w-4 h-4 text-gold-500" />
|
||||||
Sharpened hand-eye coordination, strategic thinking, and graceful
|
<span className="text-sm">
|
||||||
sportsmanship on the court.
|
TechCrunch Disrupt - 1st Place
|
||||||
</p>
|
</span>
|
||||||
</div>
|
</li>
|
||||||
</div>
|
<li className="flex items-center gap-2">
|
||||||
</div>
|
<Trophy className="w-4 h-4 text-gold-500" />
|
||||||
</section>
|
<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 {
|
interface AthleticSectionProps {
|
||||||
isDarkMode: boolean;
|
isOutOfCollege?: boolean;
|
||||||
textClasses: string;
|
|
||||||
cardClasses: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const EntrepreneurshipSection = ({
|
const EntrepreuneurshipSection: React.FC<AthleticSectionProps> = ({ isOutOfCollege = false }) => {
|
||||||
isDarkMode,
|
return (
|
||||||
textClasses,
|
<>
|
||||||
cardClasses,
|
{isOutOfCollege && (
|
||||||
}: EntrepreneurshipSectionProps) => {
|
<section className="mb-16">
|
||||||
return (
|
<div className="flex items-center gap-3 mb-8">
|
||||||
<section
|
<Zap className="w-8 h-8 text-indigo-600" />
|
||||||
id="entrepreneurship"
|
<h2 className="text-3xl font-bold text-slate-800">
|
||||||
className={`py-20 ${
|
Entrepreneurial Ventures
|
||||||
isDarkMode
|
</h2>
|
||||||
? "bg-gradient-to-r from-orange-900/20 to-red-900/20"
|
</div>
|
||||||
: "bg-gradient-to-r from-orange-100/60 to-red-100/60"
|
<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">
|
||||||
<div className="max-w-6xl px-6 mx-auto">
|
Founded Startups
|
||||||
<div className="mb-16 text-center">
|
</h3>
|
||||||
<h2 className="mb-4 text-4xl font-bold text-transparent bg-gradient-to-r from-orange-400 to-red-400 bg-clip-text">
|
<div className="space-y-4">
|
||||||
💡 Entrepreneurship & Drive
|
<div className="border-l-4 border-emerald-500 pl-4">
|
||||||
</h2>
|
<h4 className="font-semibold text-slate-700">
|
||||||
<div className="w-24 h-1 mx-auto bg-gradient-to-r from-orange-400 to-red-400"></div>
|
EcoTech Solutions
|
||||||
</div>
|
</h4>
|
||||||
|
<p className="text-sm text-slate-600 mb-2">
|
||||||
<div className="grid gap-8 md:grid-cols-2">
|
Co-Founder & CTO • 2023-Present
|
||||||
<div
|
</p>
|
||||||
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`}
|
<p className="text-slate-600">
|
||||||
>
|
$2M in funding raised, 50+ employees, revolutionizing
|
||||||
<Rocket
|
renewable energy storage
|
||||||
className="mb-4 text-orange-400 group-hover:animate-bounce"
|
</p>
|
||||||
size={40}
|
</div>
|
||||||
/>
|
<div className="border-l-4 border-blue-500 pl-4">
|
||||||
<h3 className="mb-4 text-2xl font-bold text-orange-400">
|
<h4 className="font-semibold text-slate-700">StudySync</h4>
|
||||||
Entrepreneurial Spirit
|
<p className="text-sm text-slate-600 mb-2">
|
||||||
</h3>
|
Founder • 2022-2023
|
||||||
<p className={textClasses}>
|
</p>
|
||||||
Always on the lookout for new opportunities—whether launching
|
<p className="text-slate-600">
|
||||||
small ventures, leading peer projects, or exploring tech startups.
|
EdTech platform with 10K+ users, acquired by major
|
||||||
</p>
|
educational publisher
|
||||||
</div>
|
</p>
|
||||||
|
</div>
|
||||||
<div
|
<div className="border-l-4 border-purple-500 pl-4">
|
||||||
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`}
|
<h4 className="font-semibold text-slate-700">
|
||||||
>
|
DevTools Pro
|
||||||
<Zap
|
</h4>
|
||||||
className="mb-4 text-red-400 group-hover:animate-pulse"
|
<p className="text-sm text-slate-600 mb-2">
|
||||||
size={40}
|
Co-Founder • 2021-2022
|
||||||
/>
|
</p>
|
||||||
<h3 className="mb-4 text-2xl font-bold text-red-400">
|
<p className="text-slate-600">
|
||||||
Growth Mindset
|
Developer productivity suite, $500K ARR before successful
|
||||||
</h3>
|
exit
|
||||||
<p className={textClasses}>
|
</p>
|
||||||
I love to learn—whether it be a new programming framework,
|
</div>
|
||||||
exploring scientific research, or mastering a new athletic skill.
|
</div>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
<div className="bg-white rounded-2xl shadow-lg p-6">
|
||||||
</div>
|
<h3 className="text-xl font-semibold text-slate-800 mb-4">
|
||||||
</div>
|
Investment & Advisory
|
||||||
</section>
|
</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 {
|
import { Mail, Linkedin, Github } from 'lucide-react';
|
||||||
isDarkMode: boolean;
|
|
||||||
textClasses: string;
|
interface Props {
|
||||||
|
isOutOfCollege?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const Footer = ({ isDarkMode, textClasses }: FooterProps) => {
|
const Footer: React.FC<Props> = ({ isOutOfCollege }) => {
|
||||||
return (
|
return (
|
||||||
<footer
|
<section className="mb-16">
|
||||||
className={`py-12 ${
|
<div className="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl shadow-xl text-white p-12 text-center">
|
||||||
isDarkMode ? "bg-black/40" : "bg-gray-900/10"
|
<h2 className="text-4xl font-bold mb-6">Let's Connect</h2>
|
||||||
} backdrop-blur-lg border-t ${
|
<p className="text-xl mb-8 opacity-90">
|
||||||
isDarkMode ? "border-white/10" : "border-gray-300/30"
|
Ready to collaborate on something amazing? I'm always excited to
|
||||||
}`}
|
discuss new opportunities and innovative projects.
|
||||||
>
|
</p>
|
||||||
<div className="max-w-6xl px-6 mx-auto text-center">
|
<div className="flex flex-wrap justify-center gap-6">
|
||||||
<div className="mb-8">
|
<a
|
||||||
<h3 className="mb-4 text-2xl font-bold text-transparent bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text">
|
href="khokharmaaz@gmail.com"
|
||||||
Let's Connect
|
className="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-6 py-3 rounded-lg hover:bg-white/30 transition-colors"
|
||||||
</h3>
|
>
|
||||||
<p className={`${textClasses} mb-6`}>
|
<Mail className="w-5 h-5" />
|
||||||
Ready to collaborate on exciting projects or discuss opportunities?
|
Email Me
|
||||||
</p>
|
</a>
|
||||||
</div>
|
{isOutOfCollege && (
|
||||||
|
<a
|
||||||
<div className="text-center">
|
href="https://linkedin.com/MyLinkedinProfile"
|
||||||
<p className={isDarkMode ? "text-gray-400" : "text-gray-600"}>
|
className="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-6 py-3 rounded-lg hover:bg-white/30 transition-colors"
|
||||||
© 2025 Maaz Khokhar. All rights reserved.
|
>
|
||||||
</p>
|
<Linkedin className="w-5 h-5" />
|
||||||
<a
|
LinkedIn
|
||||||
href="mailto:khokharmaaz@gmail.com"
|
</a>
|
||||||
className={`block mt-2 underline hover:text-cyan-400 transition-colors duration-200 ${
|
)}
|
||||||
isDarkMode ? "text-gray-300" : "text-gray-700"
|
<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"
|
||||||
khokharmaaz@gmail.com
|
>
|
||||||
</a>
|
<Github className="w-5 h-5" />
|
||||||
</div>
|
GitHub
|
||||||
</div>
|
</a>
|
||||||
</footer>
|
</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 {
|
const HeroSection: React.FC = () => {
|
||||||
isDarkMode: boolean;
|
|
||||||
scrollToSection: (sectionId: string) => void;
|
|
||||||
textClasses: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const HeroSection = ({
|
|
||||||
isDarkMode,
|
|
||||||
scrollToSection,
|
|
||||||
textClasses,
|
|
||||||
}: HeroSectionProps) => {
|
|
||||||
return (
|
return (
|
||||||
<section
|
<section className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 text-white py-16">
|
||||||
id="hero"
|
<div className="max-w-6xl mx-auto px-6">
|
||||||
className="relative flex items-center justify-center min-h-screen overflow-hidden"
|
<div className="flex flex-col lg:flex-row items-center gap-8">
|
||||||
>
|
<img
|
||||||
<div
|
src="/mugshot.jpeg"
|
||||||
className={`absolute inset-0 transition-all duration-1000 ${
|
alt="Maaz Khokhar"
|
||||||
isDarkMode
|
className="w-48 h-48 rounded-full shadow-lg border-4 border-white"
|
||||||
? "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 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">
|
||||||
></div>
|
Maaz Khokhar
|
||||||
|
</h1>
|
||||||
{/* Animated background particles */}
|
<p className="text-xl text-slate-300 mb-6">
|
||||||
<div className="absolute inset-0 overflow-hidden">
|
Full-Stack Developer
|
||||||
{[...Array(20)].map((_, i) => (
|
</p>
|
||||||
<div
|
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm">
|
||||||
key={i}
|
<div className="flex items-center gap-2">
|
||||||
className={`absolute w-2 h-2 rounded-full animate-float-particle opacity-30 ${
|
<Mail className="w-4 h-4" />
|
||||||
isDarkMode ? "bg-cyan-400" : "bg-purple-500"
|
khokharmaaz@gmail.com
|
||||||
}`}
|
</div>
|
||||||
style={{
|
<div className="flex items-center gap-2">
|
||||||
left: `${Math.random() * 100}%`,
|
<Phone className="w-4 h-4" />
|
||||||
top: `${Math.random() * 100}%`,
|
(214) 732-2569
|
||||||
animationDelay: `${Math.random() * 5}s`,
|
</div>
|
||||||
animationDuration: `${3 + Math.random() * 4}s`,
|
<div className="flex items-center gap-2">
|
||||||
}}
|
<MapPin className="w-4 h-4" />
|
||||||
/>
|
Dallas, TX
|
||||||
))}
|
</div>
|
||||||
</div>
|
</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>
|
</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">
|
</section>
|
||||||
Hi! I'm Maaz
|
)
|
||||||
</h1>
|
|
||||||
<p
|
|
||||||
className={`text-xl md:text-2xl mb-8 leading-relaxed animate-fade-in-up ${textClasses}`}
|
|
||||||
>
|
|
||||||
A curious, ambitious, and multidisciplinary student passionate about
|
|
||||||
<span className="text-cyan-500 animate-pulse"> science</span>,
|
|
||||||
<span className="text-purple-500 animate-pulse"> technology</span>,
|
|
||||||
<span className="text-pink-500 animate-pulse"> leadership</span>, and
|
|
||||||
<span className="text-green-500 animate-pulse"> athletics</span>
|
|
||||||
</p>
|
|
||||||
<button
|
|
||||||
onClick={() => scrollToSection("about")}
|
|
||||||
className="px-8 py-4 font-medium text-white transition-all duration-300 transform rounded-full group bg-gradient-to-r from-cyan-500 to-purple-600 hover:from-cyan-600 hover:to-purple-700 hover:scale-105 hover:shadow-2xl hover:shadow-purple-500/25 animate-bounce-subtle"
|
|
||||||
>
|
|
||||||
Explore My Journey
|
|
||||||
<ChevronDown
|
|
||||||
className="inline ml-2 group-hover:animate-bounce"
|
|
||||||
size={20}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Floating Elements */}
|
|
||||||
<div className="absolute top-20 left-10 animate-float">
|
|
||||||
<Code
|
|
||||||
className={isDarkMode ? "text-cyan-400" : "text-purple-600"}
|
|
||||||
size={40}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="absolute top-40 right-20 animate-float-delayed">
|
|
||||||
<Trophy
|
|
||||||
className={isDarkMode ? "text-yellow-400" : "text-orange-500"}
|
|
||||||
size={35}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="absolute bottom-20 left-20 animate-float">
|
|
||||||
<Rocket
|
|
||||||
className={isDarkMode ? "text-pink-400" : "text-purple-500"}
|
|
||||||
size={30}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default HeroSection;
|
export default HeroSection;
|
||||||
@@ -1,74 +1,88 @@
|
|||||||
import { Award, Star, Users } from "lucide-react";
|
import { Users } from 'lucide-react';
|
||||||
|
|
||||||
interface LeadershipSectionProps {
|
interface LeadershipSectionProps {
|
||||||
isDarkMode: boolean;
|
isOutOfCollege?: boolean;
|
||||||
textClasses: string;
|
|
||||||
cardClasses: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const LeadershipSection = ({
|
const LeadershipSection: React.FC<LeadershipSectionProps> = ({ isOutOfCollege = false }) => {
|
||||||
isDarkMode,
|
return (
|
||||||
textClasses,
|
<section className="mb-16">
|
||||||
cardClasses,
|
<div className="flex items-center gap-3 mb-8">
|
||||||
}: LeadershipSectionProps) => {
|
<Users className="w-8 h-8 text-indigo-600" />
|
||||||
return (
|
<h2 className="text-3xl font-bold text-slate-800">
|
||||||
<section
|
Leadership & Service
|
||||||
id="leadership"
|
</h2>
|
||||||
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>
|
||||||
|
<div className="bg-white rounded-2xl shadow-lg p-8">
|
||||||
<div
|
<div className="grid md:grid-cols-2 gap-8">
|
||||||
className={`${cardClasses} rounded-xl p-6 border border-white/10 hover:border-pink-400/50 transition-all duration-300 transform hover:scale-105`}
|
<div>
|
||||||
>
|
<h3 className="text-xl font-semibold text-slate-800 mb-6">
|
||||||
<Users className="mb-4 text-pink-400" size={40} />
|
Leadership Roles
|
||||||
<h3 className="mb-3 text-xl font-bold text-pink-400">Tutoring</h3>
|
</h3>
|
||||||
<p className={textClasses}>
|
<div className="space-y-4">
|
||||||
Volunteered regularly to tutor peers in math, science, and
|
<div>
|
||||||
programming—fostering academic growth in others.
|
<h4 className="font-semibold text-slate-700">
|
||||||
</p>
|
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>
|
||||||
|
</section>
|
||||||
<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>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
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 {
|
interface TechSectionProps {
|
||||||
isDarkMode: boolean;
|
isOutOfCollege?: boolean;
|
||||||
textClasses: string;
|
|
||||||
cardClasses: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const TechSection = ({
|
const TechSection: React.FC<TechSectionProps> = ({ isOutOfCollege = false }) => {
|
||||||
isDarkMode,
|
return (
|
||||||
textClasses,
|
<section className="mb-16">
|
||||||
cardClasses,
|
<div className="flex items-center gap-3 mb-8">
|
||||||
}: TechSectionProps) => {
|
<Briefcase className="w-8 h-8 text-indigo-600" />
|
||||||
return (
|
<h2 className="text-3xl font-bold text-slate-800">
|
||||||
<section id="tech" className="py-20">
|
Technology & Innovation
|
||||||
<div className="max-w-6xl px-6 mx-auto">
|
</h2>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div className="grid md:grid-cols-2 gap-6">
|
||||||
className={`${
|
<div className="bg-white rounded-2xl shadow-lg p-6">
|
||||||
isDarkMode
|
<h3 className="text-xl font-semibold text-slate-800 mb-4">
|
||||||
? "bg-gradient-to-r from-blue-900/20 to-indigo-900/20"
|
Featured Projects
|
||||||
: "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
|
|
||||||
</h3>
|
</h3>
|
||||||
<span className="px-3 py-1 ml-3 text-sm text-yellow-400 rounded-full bg-yellow-500/20">
|
<div className="space-y-4">
|
||||||
Award Winner
|
<div className="border-l-4 border-blue-500 pl-4">
|
||||||
</span>
|
<a
|
||||||
</div>{" "}
|
href="https://ialfm-attendance.netlify.app"
|
||||||
<p className={`${textClasses} mb-4`}>
|
className="font-semibold text-slate-700"
|
||||||
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"
|
|
||||||
>
|
>
|
||||||
{skill}
|
Local School Attendance App
|
||||||
</span>
|
</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>{" "}
|
|
||||||
<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>
|
||||||
</div>
|
</section>
|
||||||
</div>
|
);
|
||||||
</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