pure_sagacity/Portfolio-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement dark mode theme support across components

Browse Source 
- Added ThemeContext for managing theme state and toggling between light and dark modes.
- Updated components (EntrepreneurshipSection, Footer, HeroSection, LeadershipSection, ReviewSection, TechSection, UniqueSection) to utilize theme context and apply conditional styling based on the current theme.
- Enhanced CSS with custom properties for theming and transitions.
- Configured Tailwind CSS to support dark mode.
- Ensured consistent styling and transitions for text and background colors in dark mode.
This commit is contained in:
Maaz Khokhar
2025-06-25 12:40:38 -04:00
parent 5b7ff93406
commit 7119d7a48d
14 changed files with 640 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/App.tsx
View File

@@ -1,9 +1,7 @@
import { useState, type JSX, useEffect } from "react"; import { useState, type JSX, useEffect } from "react";
import { import { Star, X, Sun, Moon } from "lucide-react";
Star,
X,
} from "lucide-react";
import { addReview, fetchReviews, type Review } from "./reviewsApi"; import { addReview, fetchReviews, type Review } from "./reviewsApi";
import { useTheme } from "./contexts/ThemeContext";
import HeroSection from "./components/HeroSection"; import HeroSection from "./components/HeroSection";
import UniqueSection from "./components/UniqueSection"; import UniqueSection from "./components/UniqueSection";
import AcademicSTEMHighlights from "./components/AcademicStemHighlights"; import AcademicSTEMHighlights from "./components/AcademicStemHighlights";
@@ -15,6 +13,7 @@ import ReviewSection from "./components/ReviewSection";
import Footer from "./components/Footer"; import Footer from "./components/Footer";
const App = () => { const App = () => {
const { theme, toggleTheme } = useTheme();
const [showModal, setShowModal] = useState(false); const [showModal, setShowModal] = useState(false);
const [reviews, setReviews] = useState<Review[]>([]); const [reviews, setReviews] = useState<Review[]>([]);
const [newReview, setNewReview] = useState<Review>({ const [newReview, setNewReview] = useState<Review>({
@@ -69,11 +68,34 @@ 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 transition-all duration-300 ${
theme === "dark"
? "bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900"
: "bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100"
}`}
>
{/* Theme Toggle Button */}
<button
onClick={toggleTheme}
className={`fixed top-4 right-4 z-50 p-3 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 border ${
theme === "dark"
? "bg-slate-800 text-white border-slate-700 hover:bg-slate-700"
: "bg-white text-slate-800 border-slate-200 hover:bg-slate-50"
}`}
aria-label="Toggle theme"
>
{theme === "light" ? (
<Moon className="w-5 h-5" />
) : (
<Sun className="w-5 h-5" />
)}
</button>
{/* Hero Section */} {/* Hero Section */}
<HeroSection /> <HeroSection />
<div className="max-w-6xl mx-auto px-6 py-12"> <div className="max-w-6xl px-6 py-12 mx-auto">
<UniqueSection /> <UniqueSection />
{/* Academic & STEM Highlights */} {/* Academic & STEM Highlights */}
@@ -85,7 +107,6 @@ const App = () => {
{/* Leadership, Service, & School */} {/* Leadership, Service, & School */}
<LeadershipSection /> <LeadershipSection />
{/* Athletics & Competitions */} {/* Athletics & Competitions */}
<AthleticSection /> <AthleticSection />
@@ -93,7 +114,11 @@ const App = () => {
<EntrepreuneurshipSection /> <EntrepreuneurshipSection />
{/* Reviews Section */} {/* Reviews Section */}
<ReviewSection setShowModal={setShowModal} reviews={reviews} renderStars={renderStars} /> <ReviewSection
setShowModal={setShowModal}
reviews={reviews}
renderStars={renderStars}
/>
{/* Footer */} {/* Footer */}
<Footer /> <Footer />
@@ -101,23 +126,39 @@ const App = () => {
{/* Modal */} {/* Modal */}
{showModal && ( {showModal && (
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50"> <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-md"> <div
className={`rounded-2xl shadow-2xl w-full max-w-md ${
theme === "dark" ? "bg-slate-800" : "bg-white"
}`}
>
<div className="p-6"> <div className="p-6">
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<h3 className="text-xl font-semibold text-slate-800"> <h3
className={`text-xl font-semibold ${
theme === "dark" ? "text-white" : "text-slate-800"
}`}
>
Add a Review Add a Review
</h3> </h3>
<button <button
onClick={() => setShowModal(false)} onClick={() => setShowModal(false)}
className="text-slate-400 hover:text-slate-600 transition-colors" className={`transition-colors ${
theme === "dark"
? "text-slate-500 hover:text-slate-300"
: "text-slate-400 hover:text-slate-600"
}`}
> >
<X className="w-6 h-6" /> <X className="w-6 h-6" />
</button> </button>
</div> </div>
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<label className="block text-sm font-medium text-slate-700 mb-1"> <label
className={`block text-sm font-medium mb-1 ${
theme === "dark" ? "text-slate-300" : "text-slate-700"
}`}
>
Name Name
</label> </label>
<input <input
@@ -126,12 +167,20 @@ const App = () => {
onChange={(e) => onChange={(e) =>
setNewReview({ ...newReview, name: e.target.value }) setNewReview({ ...newReview, name: e.target.value })
} }
className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 ${
theme === "dark"
? "border-slate-600 bg-slate-700 text-white"
: "border-slate-300 bg-white text-slate-900"
}`}
placeholder="Your full name" placeholder="Your full name"
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-slate-700 mb-1"> <label
className={`block text-sm font-medium mb-1 ${
theme === "dark" ? "text-slate-300" : "text-slate-700"
}`}
>
Position Position
</label> </label>
<input <input
@@ -140,12 +189,20 @@ const App = () => {
onChange={(e) => onChange={(e) =>
setNewReview({ ...newReview, position: e.target.value }) setNewReview({ ...newReview, position: e.target.value })
} }
className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 ${
theme === "dark"
? "border-slate-600 bg-slate-700 text-white"
: "border-slate-300 bg-white text-slate-900"
}`}
placeholder="Your job title and company" placeholder="Your job title and company"
/> />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-slate-700 mb-1"> <label
className={`block text-sm font-medium mb-1 ${
theme === "dark" ? "text-slate-300" : "text-slate-700"
}`}
>
Rating Rating
</label> </label>
<div className="flex gap-1"> <div className="flex gap-1">
@@ -155,12 +212,14 @@ const App = () => {
onClick={() => onClick={() =>
setNewReview({ ...newReview, rating: star }) setNewReview({ ...newReview, rating: star })
} }
className="text-2xl hover:scale-110 transition-transform" className="text-2xl transition-transform hover:scale-110"
> >
<Star <Star
className={`w-6 h-6 ${ className={`w-6 h-6 ${
star <= newReview.rating star <= newReview.rating
? "fill-yellow-400 text-yellow-400" ? "fill-yellow-400 text-yellow-400"
: theme === "dark"
? "text-gray-600"
: "text-gray-300" : "text-gray-300"
}`} }`}
/> />
@@ -169,7 +228,11 @@ const App = () => {
</div> </div>
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-slate-700 mb-1"> <label
className={`block text-sm font-medium mb-1 ${
theme === "dark" ? "text-slate-300" : "text-slate-700"
}`}
>
Review Review
</label> </label>
<textarea <textarea
@@ -177,7 +240,11 @@ const App = () => {
onChange={(e) => onChange={(e) =>
setNewReview({ ...newReview, text: e.target.value }) setNewReview({ ...newReview, text: e.target.value })
} }
className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 ${
theme === "dark"
? "border-slate-600 bg-slate-700 text-white"
: "border-slate-300 bg-white text-slate-900"
}`}
rows={4} rows={4}
placeholder="Share your experience working with Maaz..." placeholder="Share your experience working with Maaz..."
/> />
@@ -186,13 +253,17 @@ const App = () => {
<div className="flex gap-3 mt-6"> <div className="flex gap-3 mt-6">
<button <button
onClick={() => setShowModal(false)} onClick={() => setShowModal(false)}
className="flex-1 px-4 py-2 border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50 transition-colors" className={`flex-1 px-4 py-2 border rounded-lg transition-colors ${
theme === "dark"
? "border-slate-600 text-slate-300 bg-slate-700 hover:bg-slate-600"
: "border-slate-300 text-slate-700 bg-white hover:bg-slate-50"
}`}
> >
Cancel Cancel
</button> </button>
<button <button
onClick={handleAddReview} onClick={handleAddReview}
className="flex-1 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors" className="flex-1 px-4 py-2 text-white transition-colors bg-indigo-600 rounded-lg hover:bg-indigo-700"
> >
Add Review Add Review
</button> </button>

181
src/components/AcademicStemHighlights.tsx
View File

@@ -1,71 +1,132 @@
import { GraduationCap, Award } from "lucide-react"; import { GraduationCap, Award } from "lucide-react";
import { useTheme } from "../contexts/ThemeContext";
interface AcademicSTEMHighlightsProps { interface AcademicSTEMHighlightsProps {
isOutOfCollege?: boolean; isOutOfCollege?: boolean;
} }
const AcademicSTEMHighlights: React.FC<AcademicSTEMHighlightsProps> = ({ isOutOfCollege = false }) => { const AcademicSTEMHighlights: React.FC<AcademicSTEMHighlightsProps> = ({
return ( isOutOfCollege = false,
<section className="mb-16"> }) => {
<div className="flex items-center gap-3 mb-8"> const { theme } = useTheme();
<GraduationCap className="w-8 h-8 text-indigo-600" />
<h2 className="text-3xl font-bold text-slate-800"> return (
Academic & STEM Excellence <section className="mb-16">
</h2> <div className="flex items-center gap-3 mb-8">
</div> <GraduationCap
<div className="grid md:grid-cols-2 gap-6"> className={`w-8 h-8 transition-colors duration-300 ${
{isOutOfCollege && ( theme === "dark" ? "text-indigo-400" : "text-indigo-600"
<div className="bg-white rounded-2xl shadow-lg p-6"> }`}
<h3 className="text-xl font-semibold text-slate-800 mb-4"> />
Education <h2
</h3> className={`text-3xl font-bold transition-colors duration-300 ${
<div className="space-y-4"> theme === "dark" ? "text-white" : "text-slate-800"
<div> }`}
<h4 className="font-semibold text-slate-700"> >
Master of Science in Computer Science Academic & STEM Excellence
</h4> </h2>
<p className="text-slate-600"> </div>
Stanford University • GPA: 3.9/4.0 <div className="grid md:grid-cols-2 gap-6">
</p> {isOutOfCollege && (
<p className="text-sm text-slate-500"> <div
Specialization: AI & Machine Learning className={`rounded-2xl shadow-lg p-6 transition-all duration-300 ${
</p> theme === "dark" ? "bg-slate-800" : "bg-white"
</div> }`}
<div> >
<h4 className="font-semibold text-slate-700"> <h3
Bachelor of Science in Engineering className={`text-xl font-semibold mb-4 transition-colors duration-300 ${
</h4> theme === "dark" ? "text-white" : "text-slate-800"
<p className="text-slate-600"> }`}
MIT • Summa Cum Laude • GPA: 3.95/4.0 >
</p> Education
<p className="text-sm text-slate-500"> </h3>
Double Major: Computer Science & Mathematics <div className="space-y-4">
</p> <div>
</div> <h4
</div> className={`font-semibold transition-colors duration-300 ${
theme === "dark" ? "text-slate-200" : "text-slate-700"
}`}
>
Master of Science in Computer Science
</h4>
<p
className={`transition-colors duration-300 ${
theme === "dark" ? "text-slate-300" : "text-slate-600"
}`}
>
Stanford University • GPA: 3.9/4.0
</p>
<p
className={`text-sm transition-colors duration-300 ${
theme === "dark" ? "text-slate-400" : "text-slate-500"
}`}
>
Specialization: AI & Machine Learning
</p>
</div>
<div>
<h4
className={`font-semibold transition-colors duration-300 ${
theme === "dark" ? "text-slate-200" : "text-slate-700"
}`}
>
Bachelor of Science in Engineering
</h4>
<p
className={`transition-colors duration-300 ${
theme === "dark" ? "text-slate-300" : "text-slate-600"
}`}
>
MIT • Summa Cum Laude • GPA: 3.95/4.0
</p>
<p
className={`text-sm transition-colors duration-300 ${
theme === "dark" ? "text-slate-400" : "text-slate-500"
}`}
>
Double Major: Computer Science & Mathematics
</p>
</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>
</div> </div>
</section> )}
); <div
className={`rounded-2xl shadow-lg p-6 transition-all duration-300 ${
theme === "dark" ? "bg-slate-800" : "bg-white"
}`}
>
<h3
className={`text-xl font-semibold mb-4 transition-colors duration-300 ${
theme === "dark" ? "text-white" : "text-slate-800"
}`}
>
STEM Achievements
</h3>
<ul
className={`space-y-3 transition-colors duration-300 ${
theme === "dark" ? "text-slate-200" : "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 mt-0.5 flex-shrink-0 ${
theme === "dark" ? "text-yellow-400" : "text-yellow-500"
}`}
/>
<span>{achievement}</span>
</li>
))}
</ul>
</div>
</div>
</section>
);
}; };
export default AcademicSTEMHighlights; export default AcademicSTEMHighlights;

42
src/components/AthleticsSection.tsx
View File

@@ -10,79 +10,79 @@ const AthleticSection: React.FC<AthleticSectionProps> = ({ isOutOfCollege = fals
{isOutOfCollege && ( {isOutOfCollege && (
<section className="mb-16"> <section className="mb-16">
<div className="flex items-center gap-3 mb-8"> <div className="flex items-center gap-3 mb-8">
<Trophy className="w-8 h-8 text-indigo-600" /> <Trophy className="w-8 h-8 text-indigo-600 dark:text-indigo-400" />
<h2 className="text-3xl font-bold text-slate-800"> <h2 className="text-3xl font-bold transition-colors duration-300 text-slate-800 dark:text-white">
Athletics & Competitions Athletics & Competitions
</h2> </h2>
</div> </div>
<div className="grid md:grid-cols-3 gap-6"> <div className="grid gap-6 md:grid-cols-3">
<div className="bg-white rounded-2xl shadow-lg p-6"> <div className="p-6 transition-colors duration-300 bg-white shadow-lg dark:bg-slate-800 rounded-2xl">
<h3 className="text-xl font-semibold text-slate-800 mb-4"> <h3 className="mb-4 text-xl font-semibold transition-colors duration-300 text-slate-800 dark:text-white">
Competitive Programming Competitive Programming
</h3> </h3>
<ul className="space-y-2 text-slate-700"> <ul className="space-y-2 transition-colors duration-300 text-slate-700 dark:text-slate-200">
<li className="flex items-center gap-2"> <li className="flex items-center gap-2">
<Trophy className="w-4 h-4 text-gold-500" /> <Trophy className="w-4 h-4 text-yellow-500 dark:text-yellow-400" />
<span className="text-sm"> <span className="text-sm">
ACM ICPC World Finals - Top 20 ACM ICPC World Finals - Top 20
</span> </span>
</li> </li>
<li className="flex items-center gap-2"> <li className="flex items-center gap-2">
<Trophy className="w-4 h-4 text-silver-400" /> <Trophy className="w-4 h-4 text-gray-400 dark:text-gray-300" />
<span className="text-sm"> <span className="text-sm">
Google Code Jam - Round 3 Qualifier Google Code Jam - Round 3 Qualifier
</span> </span>
</li> </li>
<li className="flex items-center gap-2"> <li className="flex items-center gap-2">
<Trophy className="w-4 h-4 text-bronze-400" /> <Trophy className="w-4 h-4 text-orange-400 dark:text-orange-300" />
<span className="text-sm"> <span className="text-sm">
Facebook Hacker Cup - Top 100 Facebook Hacker Cup - Top 100
</span> </span>
</li> </li>
</ul> </ul>
</div> </div>
<div className="bg-white rounded-2xl shadow-lg p-6"> <div className="p-6 transition-colors duration-300 bg-white shadow-lg dark:bg-slate-800 rounded-2xl">
<h3 className="text-xl font-semibold text-slate-800 mb-4"> <h3 className="mb-4 text-xl font-semibold transition-colors duration-300 text-slate-800 dark:text-white">
Hackathons Hackathons
</h3> </h3>
<ul className="space-y-2 text-slate-700"> <ul className="space-y-2 transition-colors duration-300 text-slate-700 dark:text-slate-200">
<li className="flex items-center gap-2"> <li className="flex items-center gap-2">
<Trophy className="w-4 h-4 text-gold-500" /> <Trophy className="w-4 h-4 text-yellow-500 dark:text-yellow-400" />
<span className="text-sm"> <span className="text-sm">
TechCrunch Disrupt - 1st Place TechCrunch Disrupt - 1st Place
</span> </span>
</li> </li>
<li className="flex items-center gap-2"> <li className="flex items-center gap-2">
<Trophy className="w-4 h-4 text-gold-500" /> <Trophy className="w-4 h-4 text-yellow-500 dark:text-yellow-400" />
<span className="text-sm">MIT HackMIT - Winner</span> <span className="text-sm">MIT HackMIT - Winner</span>
</li> </li>
<li className="flex items-center gap-2"> <li className="flex items-center gap-2">
<Trophy className="w-4 h-4 text-silver-400" /> <Trophy className="w-4 h-4 text-gray-400 dark:text-gray-300" />
<span className="text-sm"> <span className="text-sm">
Stanford TreeHacks - 2nd Place Stanford TreeHacks - 2nd Place
</span> </span>
</li> </li>
</ul> </ul>
</div> </div>
<div className="bg-white rounded-2xl shadow-lg p-6"> <div className="p-6 transition-colors duration-300 bg-white shadow-lg dark:bg-slate-800 rounded-2xl">
<h3 className="text-xl font-semibold text-slate-800 mb-4"> <h3 className="mb-4 text-xl font-semibold transition-colors duration-300 text-slate-800 dark:text-white">
Athletic Achievements Athletic Achievements
</h3> </h3>
<ul className="space-y-2 text-slate-700"> <ul className="space-y-2 transition-colors duration-300 text-slate-700 dark:text-slate-200">
<li className="flex items-center gap-2"> <li className="flex items-center gap-2">
<Trophy className="w-4 h-4 text-gold-500" /> <Trophy className="w-4 h-4 text-yellow-500 dark:text-yellow-400" />
<span className="text-sm"> <span className="text-sm">
Varsity Tennis - Team Captain Varsity Tennis - Team Captain
</span> </span>
</li> </li>
<li className="flex items-center gap-2"> <li className="flex items-center gap-2">
<Trophy className="w-4 h-4 text-silver-400" /> <Trophy className="w-4 h-4 text-gray-400 dark:text-gray-300" />
<span className="text-sm"> <span className="text-sm">
Marathon Finisher - Sub 3:30 Marathon Finisher - Sub 3:30
</span> </span>
</li> </li>
<li className="flex items-center gap-2"> <li className="flex items-center gap-2">
<Trophy className="w-4 h-4 text-bronze-400" /> <Trophy className="w-4 h-4 text-orange-400 dark:text-orange-300" />
<span className="text-sm"> <span className="text-sm">
Rock Climbing - Advanced Level Rock Climbing - Advanced Level
</span> </span>

56
src/components/EntrepreneurshipSection.tsx
View File

@@ -10,89 +10,89 @@ const EntrepreuneurshipSection: React.FC<AthleticSectionProps> = ({ isOutOfColle
{isOutOfCollege && ( {isOutOfCollege && (
<section className="mb-16"> <section className="mb-16">
<div className="flex items-center gap-3 mb-8"> <div className="flex items-center gap-3 mb-8">
<Zap className="w-8 h-8 text-indigo-600" /> <Zap className="w-8 h-8 text-indigo-600 dark:text-indigo-400" />
<h2 className="text-3xl font-bold text-slate-800"> <h2 className="text-3xl font-bold transition-colors duration-300 text-slate-800 dark:text-white">
Entrepreneurial Ventures Entrepreneurial Ventures
</h2> </h2>
</div> </div>
<div className="grid md:grid-cols-2 gap-6"> <div className="grid gap-6 md:grid-cols-2">
<div className="bg-white rounded-2xl shadow-lg p-6"> <div className="p-6 transition-colors duration-300 bg-white shadow-lg dark:bg-slate-800 rounded-2xl">
<h3 className="text-xl font-semibold text-slate-800 mb-4"> <h3 className="mb-4 text-xl font-semibold transition-colors duration-300 text-slate-800 dark:text-white">
Founded Startups Founded Startups
</h3> </h3>
<div className="space-y-4"> <div className="space-y-4">
<div className="border-l-4 border-emerald-500 pl-4"> <div className="pl-4 border-l-4 border-emerald-500 dark:border-emerald-400">
<h4 className="font-semibold text-slate-700"> <h4 className="font-semibold transition-colors duration-300 text-slate-700 dark:text-slate-200">
EcoTech Solutions EcoTech Solutions
</h4> </h4>
<p className="text-sm text-slate-600 mb-2"> <p className="mb-2 text-sm transition-colors duration-300 text-slate-600 dark:text-slate-400">
Co-Founder & CTO • 2023-Present Co-Founder & CTO • 2023-Present
</p> </p>
<p className="text-slate-600"> <p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
$2M in funding raised, 50+ employees, revolutionizing $2M in funding raised, 50+ employees, revolutionizing
renewable energy storage renewable energy storage
</p> </p>
</div> </div>
<div className="border-l-4 border-blue-500 pl-4"> <div className="pl-4 border-l-4 border-blue-500 dark:border-blue-400">
<h4 className="font-semibold text-slate-700">StudySync</h4> <h4 className="font-semibold transition-colors duration-300 text-slate-700 dark:text-slate-200">StudySync</h4>
<p className="text-sm text-slate-600 mb-2"> <p className="mb-2 text-sm transition-colors duration-300 text-slate-600 dark:text-slate-400">
Founder • 2022-2023 Founder • 2022-2023
</p> </p>
<p className="text-slate-600"> <p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
EdTech platform with 10K+ users, acquired by major EdTech platform with 10K+ users, acquired by major
educational publisher educational publisher
</p> </p>
</div> </div>
<div className="border-l-4 border-purple-500 pl-4"> <div className="pl-4 border-l-4 border-purple-500 dark:border-purple-400">
<h4 className="font-semibold text-slate-700"> <h4 className="font-semibold transition-colors duration-300 text-slate-700 dark:text-slate-200">
DevTools Pro DevTools Pro
</h4> </h4>
<p className="text-sm text-slate-600 mb-2"> <p className="mb-2 text-sm transition-colors duration-300 text-slate-600 dark:text-slate-400">
Co-Founder • 2021-2022 Co-Founder • 2021-2022
</p> </p>
<p className="text-slate-600"> <p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
Developer productivity suite, $500K ARR before successful Developer productivity suite, $500K ARR before successful
exit exit
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div className="bg-white rounded-2xl shadow-lg p-6"> <div className="p-6 transition-colors duration-300 bg-white shadow-lg dark:bg-slate-800 rounded-2xl">
<h3 className="text-xl font-semibold text-slate-800 mb-4"> <h3 className="mb-4 text-xl font-semibold transition-colors duration-300 text-slate-800 dark:text-white">
Investment & Advisory Investment & Advisory
</h3> </h3>
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<h4 className="font-semibold text-slate-700"> <h4 className="font-semibold transition-colors duration-300 text-slate-700 dark:text-slate-200">
Angel Investor Angel Investor
</h4> </h4>
<p className="text-slate-600"> <p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
15+ early-stage investments in AI and sustainability 15+ early-stage investments in AI and sustainability
startups startups
</p> </p>
<p className="text-sm text-slate-600"> <p className="text-sm transition-colors duration-300 text-slate-600 dark:text-slate-400">
3 successful exits, 2 unicorns in portfolio 3 successful exits, 2 unicorns in portfolio
</p> </p>
</div> </div>
<div> <div>
<h4 className="font-semibold text-slate-700"> <h4 className="font-semibold transition-colors duration-300 text-slate-700 dark:text-slate-200">
Startup Accelerator Mentor Startup Accelerator Mentor
</h4> </h4>
<p className="text-slate-600"> <p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
Y Combinator, Techstars, 500 Startups Y Combinator, Techstars, 500 Startups
</p> </p>
<p className="text-sm text-slate-600"> <p className="text-sm transition-colors duration-300 text-slate-600 dark:text-slate-400">
Mentored 50+ startups, $100M+ in follow-on funding Mentored 50+ startups, $100M+ in follow-on funding
</p> </p>
</div> </div>
<div> <div>
<h4 className="font-semibold text-slate-700"> <h4 className="font-semibold transition-colors duration-300 text-slate-700 dark:text-slate-200">
Innovation Consultant Innovation Consultant
</h4> </h4>
<p className="text-slate-600"> <p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
Fortune 500 digital transformation advisor Fortune 500 digital transformation advisor
</p> </p>
<p className="text-sm text-slate-600"> <p className="text-sm transition-colors duration-300 text-slate-600 dark:text-slate-400">
Led innovation workshops for 20+ enterprises Led innovation workshops for 20+ enterprises
</p> </p>
</div> </div>

19
src/components/Footer.tsx
View File

@@ -1,22 +1,29 @@
import { Mail, Linkedin, Github } from 'lucide-react'; import { Mail, Linkedin, Github } from 'lucide-react';
import { useTheme } from '../contexts/ThemeContext';
interface Props { interface Props {
isOutOfCollege?: boolean; isOutOfCollege?: boolean;
} }
const Footer: React.FC<Props> = ({ isOutOfCollege }) => { const Footer: React.FC<Props> = ({ isOutOfCollege }) => {
const { theme } = useTheme();
return ( return (
<section className="mb-16"> <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"> <div className={`rounded-2xl shadow-xl text-white p-12 text-center transition-all duration-300 ${
<h2 className="text-4xl font-bold mb-6">Let's Connect</h2> theme === 'dark'
<p className="text-xl mb-8 opacity-90"> ? 'bg-gradient-to-r from-indigo-700 to-purple-700'
: 'bg-gradient-to-r from-indigo-600 to-purple-600'
}`}>
<h2 className="mb-6 text-4xl font-bold">Let's Connect</h2>
<p className="mb-8 text-xl opacity-90">
Ready to collaborate on something amazing? I'm always excited to Ready to collaborate on something amazing? I'm always excited to
discuss new opportunities and innovative projects. discuss new opportunities and innovative projects.
</p> </p>
<div className="flex flex-wrap justify-center gap-6"> <div className="flex flex-wrap justify-center gap-6">
<a <a
href="khokharmaaz@gmail.com" 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" className="flex items-center gap-2 px-6 py-3 transition-colors rounded-lg bg-white/20 backdrop-blur-sm hover:bg-white/30"
> >
<Mail className="w-5 h-5" /> <Mail className="w-5 h-5" />
Email Me Email Me
@@ -24,7 +31,7 @@ const Footer: React.FC<Props> = ({ isOutOfCollege }) => {
{isOutOfCollege && ( {isOutOfCollege && (
<a <a
href="https://linkedin.com/MyLinkedinProfile" 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" className="flex items-center gap-2 px-6 py-3 transition-colors rounded-lg bg-white/20 backdrop-blur-sm hover:bg-white/30"
> >
<Linkedin className="w-5 h-5" /> <Linkedin className="w-5 h-5" />
LinkedIn LinkedIn
@@ -32,7 +39,7 @@ const Footer: React.FC<Props> = ({ isOutOfCollege }) => {
)} )}
<a <a
href="https://github.com/coolestcoder655" 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" className="flex items-center gap-2 px-6 py-3 transition-colors rounded-lg bg-white/20 backdrop-blur-sm hover:bg-white/30"
> >
<Github className="w-5 h-5" /> <Github className="w-5 h-5" />
GitHub GitHub

31
src/components/HeroSection.tsx
View File

@@ -1,23 +1,40 @@
import { Mail, MapPin, Phone } from 'lucide-react'; import { Mail, MapPin, Phone } from 'lucide-react';
import { useTheme } from '../contexts/ThemeContext';
const HeroSection: React.FC = () => { const HeroSection: React.FC = () => {
const { theme } = useTheme();
return ( return (
<section className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 text-white py-16"> <section className={`py-16 transition-all duration-300 ${
<div className="max-w-6xl mx-auto px-6"> theme === 'dark'
<div className="flex flex-col lg:flex-row items-center gap-8"> ? 'bg-gradient-to-r from-slate-950 via-slate-900 to-slate-950'
: 'bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900'
} text-white`}>
<div className="max-w-6xl px-6 mx-auto">
<div className="flex flex-col items-center gap-8 lg:flex-row">
<img <img
src="/mugshot.jpeg" src="/mugshot.jpeg"
alt="Maaz Khokhar" alt="Maaz Khokhar"
className="w-48 h-48 rounded-full shadow-lg border-4 border-white" className={`w-48 h-48 rounded-full shadow-lg border-4 transition-colors duration-300 ${
theme === 'dark' ? 'border-slate-300' : 'border-white'
}`}
/> />
<div className="text-center lg:text-left"> <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"> <h1 className={`text-5xl font-bold mb-4 bg-gradient-to-r bg-clip-text text-transparent transition-colors duration-300 ${
theme === 'dark'
? 'from-blue-300 to-indigo-300'
: 'from-blue-400 to-indigo-400'
}`}>
Maaz Khokhar Maaz Khokhar
</h1> </h1>
<p className="text-xl text-slate-300 mb-6"> <p className={`text-xl mb-6 transition-colors duration-300 ${
theme === 'dark' ? 'text-slate-200' : 'text-slate-300'
}`}>
Full-Stack Developer Full-Stack Developer
</p> </p>
<div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm"> <div className={`flex flex-wrap justify-center lg:justify-start gap-4 text-sm transition-colors duration-300 ${
theme === 'dark' ? 'text-slate-200' : 'text-slate-300'
}`}>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Mail className="w-4 h-4" /> <Mail className="w-4 h-4" />
khokharmaaz@gmail.com khokharmaaz@gmail.com

47
src/components/LeadershipSection.tsx
View File

@@ -1,57 +1,68 @@
import { Users } from 'lucide-react'; import { Users } from 'lucide-react';
import { useTheme } from '../contexts/ThemeContext';
interface LeadershipSectionProps { interface LeadershipSectionProps {
isOutOfCollege?: boolean; isOutOfCollege?: boolean;
} }
const LeadershipSection: React.FC<LeadershipSectionProps> = ({ isOutOfCollege = false }) => { const LeadershipSection: React.FC<LeadershipSectionProps> = ({ isOutOfCollege = false }) => {
const { theme } = useTheme();
return ( return (
<section className="mb-16"> <section className="mb-16">
<div className="flex items-center gap-3 mb-8"> <div className="flex items-center gap-3 mb-8">
<Users className="w-8 h-8 text-indigo-600" /> <Users className={`w-8 h-8 transition-colors duration-300 ${
<h2 className="text-3xl font-bold text-slate-800"> theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'
}`} />
<h2 className={`text-3xl font-bold transition-colors duration-300 ${
theme === 'dark' ? 'text-white' : 'text-slate-800'
}`}>
Leadership & Service Leadership & Service
</h2> </h2>
</div> </div>
<div className="bg-white rounded-2xl shadow-lg p-8"> <div className={`rounded-2xl shadow-lg p-8 transition-all duration-300 ${
<div className="grid md:grid-cols-2 gap-8"> theme === 'dark' ? 'bg-slate-800' : 'bg-white'
}`}>
<div className="grid gap-8 md:grid-cols-2">
<div> <div>
<h3 className="text-xl font-semibold text-slate-800 mb-6"> <h3 className={`text-xl font-semibold mb-6 transition-colors duration-300 ${
theme === 'dark' ? 'text-white' : 'text-slate-800'
}`}>
Leadership Roles Leadership Roles
</h3> </h3>
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<h4 className="font-semibold text-slate-700"> <h4 className="font-semibold transition-colors duration-300 text-slate-700 dark:text-slate-200">
NJHS Inductee NJHS Inductee
</h4> </h4>
<p className="text-slate-600"> <p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
National Junior Honor Society Inductee • 2024 National Junior Honor Society Inductee • 2024
</p> </p>
<p className="text-sm text-slate-600"> <p className="text-sm transition-colors duration-300 text-slate-600 dark:text-slate-400">
Recognized for academic excellence, leadership, and Recognized for academic excellence, leadership, and
community service in middle school community service in middle school
</p> </p>
</div> </div>
<div> <div>
<h4 className="font-semibold text-slate-700"> <h4 className="font-semibold transition-colors duration-300 text-slate-700 dark:text-slate-200">
"Fabulous Falcon" Award "Fabulous Falcon" Award
</h4> </h4>
<p className="text-slate-600"> <p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
Forestwood Middle School • 2024 Forestwood Middle School • 2024
</p> </p>
<p className="text-sm text-slate-600"> <p className="text-sm transition-colors duration-300 text-slate-600 dark:text-slate-400">
Awarded for outstanding contributions to school community Awarded for outstanding contributions to school community
and leadership in student activities and leadership in student activities
</p> </p>
</div> </div>
<div> <div>
<h4 className="font-semibold text-slate-700"> <h4 className="font-semibold transition-colors duration-300 text-slate-700 dark:text-slate-200">
Peer Learning Mentor Peer Learning Mentor
</h4> </h4>
<p className="text-slate-600"> <p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
Forestwood Middle School • 2023-2024 Forestwood Middle School • 2023-2024
</p> </p>
<p className="text-sm text-slate-600"> <p className="text-sm transition-colors duration-300 text-slate-600 dark:text-slate-400">
Mentored 50+ students in computer science fundamentals, Mentored 50+ students in computer science fundamentals,
fostering a collaborative learning environment fostering a collaborative learning environment
</p> </p>
@@ -60,18 +71,18 @@ const LeadershipSection: React.FC<LeadershipSectionProps> = ({ isOutOfCollege =
</div> </div>
{isOutOfCollege && ( {isOutOfCollege && (
<div> <div>
<h3 className="text-xl font-semibold text-slate-800 mb-6"> <h3 className="mb-6 text-xl font-semibold transition-colors duration-300 text-slate-800 dark:text-white">
Community Service Community Service
</h3> </h3>
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<h4 className="font-semibold text-slate-700"> <h4 className="font-semibold transition-colors duration-300 text-slate-700 dark:text-slate-200">
Code for Good Volunteer Code for Good Volunteer
</h4> </h4>
<p className="text-slate-600"> <p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
2020-Present • 500+ hours 2020-Present • 500+ hours
</p> </p>
<p className="text-sm text-slate-600"> <p className="text-sm transition-colors duration-300 text-slate-600 dark:text-slate-400">
Built digital solutions for 10+ nonprofits, impacting Built digital solutions for 10+ nonprofits, impacting
10,000+ lives 10,000+ lives
</p> </p>

45
src/components/ReviewSection.tsx
View File

@@ -1,6 +1,7 @@
import { Star, Plus } from 'lucide-react'; import { Star, Plus } from 'lucide-react';
import { type JSX } from 'react'; import { type JSX } from 'react';
import { type Review } from '../reviewsApi'; import { type Review } from '../reviewsApi';
import { useTheme } from '../contexts/ThemeContext';
interface Props { interface Props {
setShowModal: (show: boolean) => void; setShowModal: (show: boolean) => void;
@@ -9,39 +10,55 @@ interface Props {
} }
const ReviewSection: React.FC<Props> = ({ setShowModal, renderStars, reviews }) => { const ReviewSection: React.FC<Props> = ({ setShowModal, renderStars, reviews }) => {
const { theme } = useTheme();
return ( return (
<section className="mb-16"> <section className="mb-16">
<div className="flex items-center justify-between mb-8"> <div className="flex items-center justify-between mb-8">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Star className="w-8 h-8 text-indigo-600" /> <Star className={`w-8 h-8 transition-colors duration-300 ${
<h2 className="text-3xl font-bold text-slate-800"> theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'
}`} />
<h2 className={`text-3xl font-bold transition-colors duration-300 ${
theme === 'dark' ? 'text-white' : 'text-slate-800'
}`}>
Professional Reviews Professional Reviews
</h2> </h2>
</div> </div>
<button <button
onClick={() => setShowModal(true)} 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" className="flex items-center gap-2 px-6 py-3 font-medium text-white transition-colors bg-indigo-600 rounded-lg hover:bg-indigo-700"
> >
<Plus className="w-5 h-5" /> <Plus className="w-5 h-5" />
Add Review Add Review
</button> </button>
</div> </div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
{reviews.length > 1 ? ( {reviews.length > 1 ? (
reviews.map((review, index) => ( reviews.map((review, index) => (
<div <div
key={index} key={index}
className="bg-white rounded-2xl shadow-lg p-6 hover:shadow-xl transition-shadow" className={`rounded-2xl shadow-lg p-6 hover:shadow-xl transition-all duration-300 ${
theme === 'dark' ? 'bg-slate-800' : 'bg-white'
}`}
> >
<div className="flex items-center gap-3 mb-4"> <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"> <div className={`w-12 h-12 rounded-full flex items-center justify-center transition-colors duration-300 ${
<Star className="w-8 h-8 text-blue-600" /> theme === 'dark' ? 'bg-blue-900/30' : 'bg-blue-100'
}`}>
<Star className={`w-8 h-8 ${
theme === 'dark' ? 'text-blue-400' : 'text-blue-600'
}`} />
</div> </div>
<div> <div>
<h3 className="text-lg font-semibold text-slate-800"> <h3 className={`text-lg font-semibold transition-colors duration-300 ${
theme === 'dark' ? 'text-white' : 'text-slate-800'
}`}>
{review.name} {review.name}
</h3> </h3>
<p className="text-sm text-slate-600"> <p className={`text-sm transition-colors duration-300 ${
theme === 'dark' ? 'text-slate-400' : 'text-slate-600'
}`}>
{review.position} {review.position}
</p> </p>
</div> </div>
@@ -49,11 +66,17 @@ const ReviewSection: React.FC<Props> = ({ setShowModal, renderStars, reviews })
<div className="flex items-center mb-4"> <div className="flex items-center mb-4">
{renderStars(review.rating)} {renderStars(review.rating)}
</div> </div>
<p className="text-slate-700">{review.text}</p> <p className={`transition-colors duration-300 ${
theme === 'dark' ? 'text-slate-300' : 'text-slate-700'
}`}>{review.text}</p>
</div> </div>
)) ))
) : ( ) : (
<div className="col-span-full text-center text-slate-500 bg-slate-200 outline-1 outline-white rounded-2xl p-6"> <div className={`col-span-full text-center rounded-2xl p-6 transition-colors duration-300 ${
theme === 'dark'
? 'text-slate-400 bg-slate-700'
: 'text-slate-500 bg-slate-100'
}`}>
No reviews yet. Be the first to add one! No reviews yet. Be the first to add one!
</div> </div>
)} )}

111
src/components/TechSection.tsx
View File

@@ -1,35 +1,56 @@
import { Briefcase } from "lucide-react"; import { Briefcase } from "lucide-react";
import { useTheme } from '../contexts/ThemeContext';
interface TechSectionProps { interface TechSectionProps {
isOutOfCollege?: boolean; isOutOfCollege?: boolean;
} }
const TechSection: React.FC<TechSectionProps> = ({ isOutOfCollege = false }) => { const TechSection: React.FC<TechSectionProps> = ({ isOutOfCollege = false }) => {
const { theme } = useTheme();
return ( return (
<section className="mb-16"> <section className="mb-16">
<div className="flex items-center gap-3 mb-8"> <div className="flex items-center gap-3 mb-8">
<Briefcase className="w-8 h-8 text-indigo-600" /> <Briefcase className={`w-8 h-8 transition-colors duration-300 ${
<h2 className="text-3xl font-bold text-slate-800"> theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'
}`} />
<h2 className={`text-3xl font-bold transition-colors duration-300 ${
theme === 'dark' ? 'text-white' : 'text-slate-800'
}`}>
Technology & Innovation Technology & Innovation
</h2> </h2>
</div> </div>
<div className="grid md:grid-cols-2 gap-6"> <div className="grid gap-6 md:grid-cols-2">
<div className="bg-white rounded-2xl shadow-lg p-6"> <div className={`rounded-2xl shadow-lg p-6 transition-all duration-300 ${
<h3 className="text-xl font-semibold text-slate-800 mb-4"> theme === 'dark' ? 'bg-slate-800' : 'bg-white'
}`}>
<h3 className={`text-xl font-semibold mb-4 transition-colors duration-300 ${
theme === 'dark' ? 'text-white' : 'text-slate-800'
}`}>
Featured Projects Featured Projects
</h3> </h3>
<div className="space-y-4"> <div className="space-y-4">
<div className="border-l-4 border-blue-500 pl-4"> <div className={`border-l-4 pl-4 transition-colors duration-300 ${
theme === 'dark' ? 'border-blue-400' : 'border-blue-500'
}`}>
<a <a
href="https://ialfm-attendance.netlify.app" href="https://ialfm-attendance.netlify.app"
className="font-semibold text-slate-700" className={`font-semibold transition-colors duration-300 ${
theme === 'dark'
? 'text-slate-200 hover:text-blue-400'
: 'text-slate-700 hover:text-blue-600'
}`}
> >
Local School Attendance App Local School Attendance App
</a> </a>
<p className="text-sm text-slate-600 mb-2"> <p className={`text-sm mb-2 transition-colors duration-300 ${
theme === 'dark' ? 'text-slate-400' : 'text-slate-600'
}`}>
Lead Developer | 2025 Lead Developer | 2025
</p> </p>
<p className="text-slate-600"> <p className={`transition-colors duration-300 ${
theme === 'dark' ? 'text-slate-300' : 'text-slate-600'
}`}>
Developed and deployed a comprehensive attendance management Developed and deployed a comprehensive attendance management
system for a local educational institution, streamlining system for a local educational institution, streamlining
their administrative processes and improving data accuracy. their administrative processes and improving data accuracy.
@@ -38,28 +59,46 @@ const TechSection: React.FC<TechSectionProps> = ({ isOutOfCollege = false }) =>
</p> </p>
</div> </div>
{isOutOfCollege && ( {isOutOfCollege && (
<div className="border-l-4 border-green-500 pl-4"> <div className={`border-l-4 pl-4 transition-colors duration-300 ${
<h4 className="font-semibold text-slate-700">Sun-Scope</h4> theme === 'dark' ? 'border-green-400' : 'border-green-500'
<p className="text-sm text-slate-600 mb-2"> }`}>
<h4 className={`font-semibold transition-colors duration-300 ${
theme === 'dark' ? 'text-slate-200' : 'text-slate-700'
}`}>Sun-Scope</h4>
<p className={`text-sm mb-2 transition-colors duration-300 ${
theme === 'dark' ? 'text-slate-400' : 'text-slate-600'
}`}>
Full-Stack Engineer | 2025 Full-Stack Engineer | 2025
</p> </p>
<p className="text-slate-600"> <p className={`transition-colors duration-300 ${
theme === 'dark' ? 'text-slate-300' : 'text-slate-600'
}`}>
Built IoT solution reducing energy consumption by 35% Built IoT solution reducing energy consumption by 35%
across 200+ commercial buildings across 200+ commercial buildings
</p> </p>
</div> </div>
)} )}
<div className="border-l-4 border-purple-500 pl-4"> <div className={`border-l-4 pl-4 transition-colors duration-300 ${
theme === 'dark' ? 'border-purple-400' : 'border-purple-500'
}`}>
<a <a
href="https://i-dazzle.netlify.app" href="https://i-dazzle.netlify.app"
className="font-semibold text-slate-700" className={`font-semibold transition-colors duration-300 ${
theme === 'dark'
? 'text-slate-200 hover:text-purple-400'
: 'text-slate-700 hover:text-purple-600'
}`}
> >
I-Dazzle E-Commerce Platform I-Dazzle E-Commerce Platform
</a> </a>
<p className="text-sm text-slate-600 mb-2"> <p className={`text-sm mb-2 transition-colors duration-300 ${
theme === 'dark' ? 'text-slate-400' : 'text-slate-600'
}`}>
Technical Lead | 2025 Technical Lead | 2025
</p> </p>
<p className="text-slate-600"> <p className={`transition-colors duration-300 ${
theme === 'dark' ? 'text-slate-300' : 'text-slate-600'
}`}>
Architected and developed a custom e-commerce platform for a Architected and developed a custom e-commerce platform for a
luxury bag retailer, enabling direct-to-consumer sales and luxury bag retailer, enabling direct-to-consumer sales and
reducing third-party marketplace dependency. Implemented reducing third-party marketplace dependency. Implemented
@@ -70,20 +109,30 @@ const TechSection: React.FC<TechSectionProps> = ({ isOutOfCollege = false }) =>
</div> </div>
</div> </div>
</div> </div>
<div className="bg-white rounded-2xl shadow-lg p-6"> <div className={`rounded-2xl shadow-lg p-6 transition-all duration-300 ${
<h3 className="text-xl font-semibold text-slate-800 mb-4"> theme === 'dark' ? 'bg-slate-800' : 'bg-white'
}`}>
<h3 className={`text-xl font-semibold mb-4 transition-colors duration-300 ${
theme === 'dark' ? 'text-white' : 'text-slate-800'
}`}>
Technical Skills Technical Skills
</h3> </h3>
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<h4 className="font-semibold text-slate-700 mb-2"> <h4 className={`font-semibold mb-2 transition-colors duration-300 ${
theme === 'dark' ? 'text-slate-200' : 'text-slate-700'
}`}>
Programming Languages Programming Languages
</h4> </h4>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{["Python", "JavaScript", "TypeScript"].map((skill) => ( {["Python", "JavaScript", "TypeScript"].map((skill) => (
<span <span
key={skill} key={skill}
className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium" className={`px-3 py-1 rounded-full text-sm font-medium transition-colors duration-300 ${
theme === 'dark'
? 'bg-blue-900/30 text-blue-300'
: 'bg-blue-100 text-blue-800'
}`}
> >
{skill} {skill}
</span> </span>
@@ -91,7 +140,9 @@ const TechSection: React.FC<TechSectionProps> = ({ isOutOfCollege = false }) =>
</div> </div>
</div> </div>
<div> <div>
<h4 className="font-semibold text-slate-700 mb-2"> <h4 className={`font-semibold mb-2 transition-colors duration-300 ${
theme === 'dark' ? 'text-slate-200' : 'text-slate-700'
}`}>
Frameworks & Tools Frameworks & Tools
</h4> </h4>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
@@ -104,7 +155,11 @@ const TechSection: React.FC<TechSectionProps> = ({ isOutOfCollege = false }) =>
].map((skill) => ( ].map((skill) => (
<span <span
key={skill} key={skill}
className="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium" className={`px-3 py-1 rounded-full text-sm font-medium transition-colors duration-300 ${
theme === 'dark'
? 'bg-green-900/30 text-green-300'
: 'bg-green-100 text-green-800'
}`}
> >
{skill} {skill}
</span> </span>
@@ -113,14 +168,20 @@ const TechSection: React.FC<TechSectionProps> = ({ isOutOfCollege = false }) =>
</div> </div>
{isOutOfCollege && ( {isOutOfCollege && (
<div> <div>
<h4 className="font-semibold text-slate-700 mb-2"> <h4 className={`font-semibold mb-2 transition-colors duration-300 ${
theme === 'dark' ? 'text-slate-200' : 'text-slate-700'
}`}>
Specializations Specializations
</h4> </h4>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{["UI/UX Design", ""].map((skill) => ( {["UI/UX Design", ""].map((skill) => (
<span <span
key={skill} key={skill}
className="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm font-medium" className={`px-3 py-1 rounded-full text-sm font-medium transition-colors duration-300 ${
theme === 'dark'
? 'bg-purple-900/30 text-purple-300'
: 'bg-purple-100 text-purple-800'
}`}
> >
{skill} {skill}
</span> </span>

65
src/components/UniqueSection.tsx
View File

@@ -1,51 +1,82 @@
import { Award, Zap, Users, Briefcase } from 'lucide-react'; import { Award, Zap, Users, Briefcase } from 'lucide-react';
import { useTheme } from '../contexts/ThemeContext';
const UniqueSection: React.FC = () => { const UniqueSection: React.FC = () => {
const { theme } = useTheme();
return ( return (
<section className="mb-16"> <section className="mb-16">
<div className="flex items-center gap-3 mb-8"> <div className="flex items-center gap-3 mb-8">
<Zap className="w-8 h-8 text-indigo-600" /> <Zap className={`w-8 h-8 transition-colors duration-300 ${
<h2 className="text-3xl font-bold text-slate-800"> theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'
}`} />
<h2 className={`text-3xl font-bold transition-colors duration-300 ${
theme === 'dark' ? 'text-white' : 'text-slate-800'
}`}>
What Makes Me Unique What Makes Me Unique
</h2> </h2>
</div> </div>
<div className="bg-white rounded-2xl shadow-lg p-8 border-l-4 border-indigo-500"> <div className={`rounded-2xl shadow-lg p-8 border-l-4 transition-all duration-300 ${
<p className="text-lg text-slate-700 leading-relaxed mb-6"> theme === 'dark'
? 'bg-slate-800 border-indigo-400'
: 'bg-white border-indigo-500'
}`}>
<p className={`text-lg leading-relaxed mb-6 transition-colors duration-300 ${
theme === 'dark' ? 'text-slate-200' : 'text-slate-700'
}`}>
I bridge the gap between cutting-edge technology and real-world I bridge the gap between cutting-edge technology and real-world
impact. With a unique combination of technical expertise, impact. With a unique combination of technical expertise,
entrepreneurial mindset, and leadership experience, I transform entrepreneurial mindset, and leadership experience, I transform
complex problems into elegant solutions that drive meaningful complex problems into elegant solutions that drive meaningful
change. change.
</p> </p>
<div className="grid md:grid-cols-3 gap-6"> <div className="grid gap-6 md:grid-cols-3">
<div className="text-center"> <div className="text-center">
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3"> <div className={`w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3 transition-colors duration-300 ${
<Award className="w-8 h-8 text-blue-600" /> theme === 'dark' ? 'bg-blue-900/30' : 'bg-blue-100'
}`}>
<Award className={`w-8 h-8 ${theme === 'dark' ? 'text-blue-400' : 'text-blue-600'}`} />
</div> </div>
<h3 className="font-semibold text-slate-800"> <h3 className={`font-semibold transition-colors duration-300 ${
theme === 'dark' ? 'text-white' : 'text-slate-800'
}`}>
Innovation Driver Innovation Driver
</h3> </h3>
<p className="text-sm text-slate-600"> <p className={`text-sm transition-colors duration-300 ${
theme === 'dark' ? 'text-slate-300' : 'text-slate-600'
}`}>
Transforming ideas into scalable solutions Transforming ideas into scalable solutions
</p> </p>
</div> </div>
<div className="text-center"> <div className="text-center">
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3"> <div className={`w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3 transition-colors duration-300 ${
<Users className="w-8 h-8 text-green-600" /> theme === 'dark' ? 'bg-green-900/30' : 'bg-green-100'
}`}>
<Users className={`w-8 h-8 ${theme === 'dark' ? 'text-green-400' : 'text-green-600'}`} />
</div> </div>
<h3 className="font-semibold text-slate-800">Team Catalyst</h3> <h3 className={`font-semibold transition-colors duration-300 ${
<p className="text-sm text-slate-600"> theme === 'dark' ? 'text-white' : 'text-slate-800'
}`}>Team Catalyst</h3>
<p className={`text-sm transition-colors duration-300 ${
theme === 'dark' ? 'text-slate-300' : 'text-slate-600'
}`}>
Inspiring collaboration and excellence Inspiring collaboration and excellence
</p> </p>
</div> </div>
<div className="text-center"> <div className="text-center">
<div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3"> <div className={`w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3 transition-colors duration-300 ${
<Briefcase className="w-8 h-8 text-purple-600" /> theme === 'dark' ? 'bg-purple-900/30' : 'bg-purple-100'
}`}>
<Briefcase className={`w-8 h-8 ${theme === 'dark' ? 'text-purple-400' : 'text-purple-600'}`} />
</div> </div>
<h3 className="font-semibold text-slate-800"> <h3 className={`font-semibold transition-colors duration-300 ${
theme === 'dark' ? 'text-white' : 'text-slate-800'
}`}>
Results Focused Results Focused
</h3> </h3>
<p className="text-sm text-slate-600"> <p className={`text-sm transition-colors duration-300 ${
theme === 'dark' ? 'text-slate-300' : 'text-slate-600'
}`}>
Delivering measurable impact consistently Delivering measurable impact consistently
</p> </p>
</div> </div>

73
src/contexts/ThemeContext.tsx Normal file
View File

@@ -0,0 +1,73 @@
import React, { createContext, useContext, useState, useEffect } from "react";
type Theme = "light" | "dark";
interface ThemeContextType {
theme: Theme;
toggleTheme: () => void;
}
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
export const useTheme = () => {
const context = useContext(ThemeContext);
if (context === undefined) {
throw new Error("useTheme must be used within a ThemeProvider");
}
return context;
};
interface ThemeProviderProps {
children: React.ReactNode;
}
export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
const [theme, setTheme] = useState<Theme>(() => {
// Check if there's a saved theme in localStorage
const savedTheme = localStorage.getItem("theme") as Theme;
if (savedTheme) {
return savedTheme;
}
// Otherwise, check system preference
return window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
});
useEffect(() => {
// Save theme to localStorage
localStorage.setItem("theme", theme);
// Apply theme CSS custom properties to document
const root = document.documentElement;
if (theme === "dark") {
root.style.setProperty("--bg-primary", "#0f172a"); // slate-900
root.style.setProperty("--bg-secondary", "#1e293b"); // slate-800
root.style.setProperty("--bg-tertiary", "#334155"); // slate-700
root.style.setProperty("--text-primary", "#ffffff");
root.style.setProperty("--text-secondary", "#cbd5e1"); // slate-300
root.style.setProperty("--text-tertiary", "#94a3b8"); // slate-400
root.style.setProperty("--border-color", "#475569"); // slate-600
root.style.setProperty("--accent-color", "#6366f1"); // indigo-500
} else {
root.style.setProperty("--bg-primary", "#f8fafc"); // slate-50
root.style.setProperty("--bg-secondary", "#ffffff");
root.style.setProperty("--bg-tertiary", "#f1f5f9"); // slate-100
root.style.setProperty("--text-primary", "#0f172a"); // slate-900
root.style.setProperty("--text-secondary", "#334155"); // slate-700
root.style.setProperty("--text-tertiary", "#64748b"); // slate-500
root.style.setProperty("--border-color", "#e2e8f0"); // slate-200
root.style.setProperty("--accent-color", "#4f46e5"); // indigo-600
}
}, [theme]);
const toggleTheme = () => {
setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
};

50
src/index.css
View File

@@ -1 +1,51 @@
@import "tailwindcss"; @import "tailwindcss";
/* Theme CSS Variables */
:root {
--bg-primary: #f8fafc;
--bg-secondary: #ffffff;
--bg-tertiary: #f1f5f9;
--text-primary: #0f172a;
--text-secondary: #334155;
--text-tertiary: #64748b;
--border-color: #e2e8f0;
--accent-color: #4f46e5;
transition: all 0.3s ease;
}
/* Custom theme classes */
.theme-bg-primary {
background-color: var(--bg-primary);
}
.theme-bg-secondary {
background-color: var(--bg-secondary);
}
.theme-bg-tertiary {
background-color: var(--bg-tertiary);
}
.theme-text-primary {
color: var(--text-primary);
}
.theme-text-secondary {
color: var(--text-secondary);
}
.theme-text-tertiary {
color: var(--text-tertiary);
}
.theme-border {
border-color: var(--border-color);
}
.theme-accent {
color: var(--accent-color);
}
.theme-bg-accent {
background-color: var(--accent-color);
}

19
src/main.tsx
View File

@@ -1,10 +1,13 @@
import { StrictMode } from 'react' import { StrictMode } from "react";
import { createRoot } from 'react-dom/client' import { createRoot } from "react-dom/client";
import './index.css' import "./index.css";
import App from './App.tsx' import App from "./App.tsx";
import { ThemeProvider } from "./contexts/ThemeContext.tsx";
createRoot(document.getElementById('root')!).render( createRoot(document.getElementById("root")!).render(
<StrictMode> <StrictMode>
<App /> <ThemeProvider>
</StrictMode>, <App />
) </ThemeProvider>
</StrictMode>
);

7
tailwind.config.js Normal file
View File

@@ -0,0 +1,7 @@
export default {
darkMode: 'class',
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
}