feat: Implement dark mode theme support across components
- 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:
115
src/App.tsx
115
src/App.tsx
@@ -1,9 +1,7 @@
|
||||
import { useState, type JSX, useEffect } from "react";
|
||||
import {
|
||||
Star,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { Star, X, Sun, Moon } from "lucide-react";
|
||||
import { addReview, fetchReviews, type Review } from "./reviewsApi";
|
||||
import { useTheme } from "./contexts/ThemeContext";
|
||||
import HeroSection from "./components/HeroSection";
|
||||
import UniqueSection from "./components/UniqueSection";
|
||||
import AcademicSTEMHighlights from "./components/AcademicStemHighlights";
|
||||
@@ -15,6 +13,7 @@ import ReviewSection from "./components/ReviewSection";
|
||||
import Footer from "./components/Footer";
|
||||
|
||||
const App = () => {
|
||||
const { theme, toggleTheme } = useTheme();
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [reviews, setReviews] = useState<Review[]>([]);
|
||||
const [newReview, setNewReview] = useState<Review>({
|
||||
@@ -69,11 +68,34 @@ const App = () => {
|
||||
};
|
||||
|
||||
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 */}
|
||||
<HeroSection />
|
||||
|
||||
<div className="max-w-6xl mx-auto px-6 py-12">
|
||||
<div className="max-w-6xl px-6 py-12 mx-auto">
|
||||
<UniqueSection />
|
||||
|
||||
{/* Academic & STEM Highlights */}
|
||||
@@ -85,7 +107,6 @@ const App = () => {
|
||||
{/* Leadership, Service, & School */}
|
||||
<LeadershipSection />
|
||||
|
||||
|
||||
{/* Athletics & Competitions */}
|
||||
<AthleticSection />
|
||||
|
||||
@@ -93,7 +114,11 @@ const App = () => {
|
||||
<EntrepreuneurshipSection />
|
||||
|
||||
{/* Reviews Section */}
|
||||
<ReviewSection setShowModal={setShowModal} reviews={reviews} renderStars={renderStars} />
|
||||
<ReviewSection
|
||||
setShowModal={setShowModal}
|
||||
reviews={reviews}
|
||||
renderStars={renderStars}
|
||||
/>
|
||||
|
||||
{/* Footer */}
|
||||
<Footer />
|
||||
@@ -101,23 +126,39 @@ const App = () => {
|
||||
|
||||
{/* Modal */}
|
||||
{showModal && (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-md">
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
|
||||
<div
|
||||
className={`rounded-2xl shadow-2xl w-full max-w-md ${
|
||||
theme === "dark" ? "bg-slate-800" : "bg-white"
|
||||
}`}
|
||||
>
|
||||
<div className="p-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
|
||||
</h3>
|
||||
<button
|
||||
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" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<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
|
||||
</label>
|
||||
<input
|
||||
@@ -126,12 +167,20 @@ const App = () => {
|
||||
onChange={(e) =>
|
||||
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"
|
||||
/>
|
||||
</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
|
||||
</label>
|
||||
<input
|
||||
@@ -140,12 +189,20 @@ const App = () => {
|
||||
onChange={(e) =>
|
||||
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"
|
||||
/>
|
||||
</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
|
||||
</label>
|
||||
<div className="flex gap-1">
|
||||
@@ -155,12 +212,14 @@ const App = () => {
|
||||
onClick={() =>
|
||||
setNewReview({ ...newReview, rating: star })
|
||||
}
|
||||
className="text-2xl hover:scale-110 transition-transform"
|
||||
className="text-2xl transition-transform hover:scale-110"
|
||||
>
|
||||
<Star
|
||||
className={`w-6 h-6 ${
|
||||
star <= newReview.rating
|
||||
? "fill-yellow-400 text-yellow-400"
|
||||
: theme === "dark"
|
||||
? "text-gray-600"
|
||||
: "text-gray-300"
|
||||
}`}
|
||||
/>
|
||||
@@ -169,7 +228,11 @@ const App = () => {
|
||||
</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
|
||||
</label>
|
||||
<textarea
|
||||
@@ -177,7 +240,11 @@ const App = () => {
|
||||
onChange={(e) =>
|
||||
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}
|
||||
placeholder="Share your experience working with Maaz..."
|
||||
/>
|
||||
@@ -186,13 +253,17 @@ const App = () => {
|
||||
<div className="flex gap-3 mt-6">
|
||||
<button
|
||||
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
|
||||
</button>
|
||||
<button
|
||||
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
|
||||
</button>
|
||||
|
||||
@@ -1,71 +1,132 @@
|
||||
import { GraduationCap, Award } from "lucide-react";
|
||||
import { useTheme } from "../contexts/ThemeContext";
|
||||
|
||||
interface AcademicSTEMHighlightsProps {
|
||||
isOutOfCollege?: boolean;
|
||||
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>
|
||||
const AcademicSTEMHighlights: React.FC<AcademicSTEMHighlightsProps> = ({
|
||||
isOutOfCollege = false,
|
||||
}) => {
|
||||
const { theme } = useTheme();
|
||||
|
||||
return (
|
||||
<section className="mb-16">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<GraduationCap
|
||||
className={`w-8 h-8 transition-colors duration-300 ${
|
||||
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"
|
||||
}`}
|
||||
>
|
||||
Academic & STEM Excellence
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{isOutOfCollege && (
|
||||
<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"
|
||||
}`}
|
||||
>
|
||||
Education
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4
|
||||
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 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>
|
||||
);
|
||||
)}
|
||||
<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;
|
||||
|
||||
@@ -10,79 +10,79 @@ const AthleticSection: React.FC<AthleticSectionProps> = ({ isOutOfCollege = fals
|
||||
{isOutOfCollege && (
|
||||
<section className="mb-16">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<Trophy className="w-8 h-8 text-indigo-600" />
|
||||
<h2 className="text-3xl font-bold text-slate-800">
|
||||
<Trophy className="w-8 h-8 text-indigo-600 dark:text-indigo-400" />
|
||||
<h2 className="text-3xl font-bold transition-colors duration-300 text-slate-800 dark:text-white">
|
||||
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">
|
||||
<div className="grid gap-6 md:grid-cols-3">
|
||||
<div className="p-6 transition-colors duration-300 bg-white shadow-lg dark:bg-slate-800 rounded-2xl">
|
||||
<h3 className="mb-4 text-xl font-semibold transition-colors duration-300 text-slate-800 dark:text-white">
|
||||
Competitive Programming
|
||||
</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">
|
||||
<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">
|
||||
ACM ICPC World Finals - Top 20
|
||||
</span>
|
||||
</li>
|
||||
<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">
|
||||
Google Code Jam - Round 3 Qualifier
|
||||
</span>
|
||||
</li>
|
||||
<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">
|
||||
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">
|
||||
<div className="p-6 transition-colors duration-300 bg-white shadow-lg dark:bg-slate-800 rounded-2xl">
|
||||
<h3 className="mb-4 text-xl font-semibold transition-colors duration-300 text-slate-800 dark:text-white">
|
||||
Hackathons
|
||||
</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">
|
||||
<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">
|
||||
TechCrunch Disrupt - 1st Place
|
||||
</span>
|
||||
</li>
|
||||
<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>
|
||||
</li>
|
||||
<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">
|
||||
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">
|
||||
<div className="p-6 transition-colors duration-300 bg-white shadow-lg dark:bg-slate-800 rounded-2xl">
|
||||
<h3 className="mb-4 text-xl font-semibold transition-colors duration-300 text-slate-800 dark:text-white">
|
||||
Athletic Achievements
|
||||
</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">
|
||||
<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">
|
||||
Varsity Tennis - Team Captain
|
||||
</span>
|
||||
</li>
|
||||
<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">
|
||||
Marathon Finisher - Sub 3:30
|
||||
</span>
|
||||
</li>
|
||||
<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">
|
||||
Rock Climbing - Advanced Level
|
||||
</span>
|
||||
|
||||
@@ -10,89 +10,89 @@ const EntrepreuneurshipSection: React.FC<AthleticSectionProps> = ({ isOutOfColle
|
||||
{isOutOfCollege && (
|
||||
<section className="mb-16">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<Zap className="w-8 h-8 text-indigo-600" />
|
||||
<h2 className="text-3xl font-bold text-slate-800">
|
||||
<Zap className="w-8 h-8 text-indigo-600 dark:text-indigo-400" />
|
||||
<h2 className="text-3xl font-bold transition-colors duration-300 text-slate-800 dark:text-white">
|
||||
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">
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="p-6 transition-colors duration-300 bg-white shadow-lg dark:bg-slate-800 rounded-2xl">
|
||||
<h3 className="mb-4 text-xl font-semibold transition-colors duration-300 text-slate-800 dark:text-white">
|
||||
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">
|
||||
<div className="pl-4 border-l-4 border-emerald-500 dark:border-emerald-400">
|
||||
<h4 className="font-semibold transition-colors duration-300 text-slate-700 dark:text-slate-200">
|
||||
EcoTech Solutions
|
||||
</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
|
||||
</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
|
||||
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">
|
||||
<div className="pl-4 border-l-4 border-blue-500 dark:border-blue-400">
|
||||
<h4 className="font-semibold transition-colors duration-300 text-slate-700 dark:text-slate-200">StudySync</h4>
|
||||
<p className="mb-2 text-sm transition-colors duration-300 text-slate-600 dark:text-slate-400">
|
||||
Founder • 2022-2023
|
||||
</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
|
||||
educational publisher
|
||||
</p>
|
||||
</div>
|
||||
<div className="border-l-4 border-purple-500 pl-4">
|
||||
<h4 className="font-semibold text-slate-700">
|
||||
<div className="pl-4 border-l-4 border-purple-500 dark:border-purple-400">
|
||||
<h4 className="font-semibold transition-colors duration-300 text-slate-700 dark:text-slate-200">
|
||||
DevTools Pro
|
||||
</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
|
||||
</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
|
||||
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">
|
||||
<div className="p-6 transition-colors duration-300 bg-white shadow-lg dark:bg-slate-800 rounded-2xl">
|
||||
<h3 className="mb-4 text-xl font-semibold transition-colors duration-300 text-slate-800 dark:text-white">
|
||||
Investment & Advisory
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<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
|
||||
</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
|
||||
startups
|
||||
</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
|
||||
</p>
|
||||
</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
|
||||
</h4>
|
||||
<p className="text-slate-600">
|
||||
<p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
|
||||
Y Combinator, Techstars, 500 Startups
|
||||
</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
|
||||
</p>
|
||||
</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
|
||||
</h4>
|
||||
<p className="text-slate-600">
|
||||
<p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
|
||||
Fortune 500 digital transformation advisor
|
||||
</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
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -1,22 +1,29 @@
|
||||
import { Mail, Linkedin, Github } from 'lucide-react';
|
||||
import { useTheme } from '../contexts/ThemeContext';
|
||||
|
||||
interface Props {
|
||||
isOutOfCollege?: boolean;
|
||||
}
|
||||
|
||||
const Footer: React.FC<Props> = ({ isOutOfCollege }) => {
|
||||
const { theme } = useTheme();
|
||||
|
||||
return (
|
||||
<section className="mb-16">
|
||||
<div className="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl shadow-xl text-white p-12 text-center">
|
||||
<h2 className="text-4xl font-bold mb-6">Let's Connect</h2>
|
||||
<p className="text-xl mb-8 opacity-90">
|
||||
<div className={`rounded-2xl shadow-xl text-white p-12 text-center transition-all duration-300 ${
|
||||
theme === 'dark'
|
||||
? '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
|
||||
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"
|
||||
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" />
|
||||
Email Me
|
||||
@@ -24,7 +31,7 @@ const Footer: React.FC<Props> = ({ isOutOfCollege }) => {
|
||||
{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"
|
||||
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
|
||||
@@ -32,7 +39,7 @@ const Footer: React.FC<Props> = ({ isOutOfCollege }) => {
|
||||
)}
|
||||
<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"
|
||||
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
|
||||
|
||||
@@ -1,23 +1,40 @@
|
||||
import { Mail, MapPin, Phone } from 'lucide-react';
|
||||
import { useTheme } from '../contexts/ThemeContext';
|
||||
|
||||
const HeroSection: React.FC = () => {
|
||||
const { theme } = useTheme();
|
||||
|
||||
return (
|
||||
<section className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 text-white py-16">
|
||||
<div className="max-w-6xl mx-auto px-6">
|
||||
<div className="flex flex-col lg:flex-row items-center gap-8">
|
||||
<section className={`py-16 transition-all duration-300 ${
|
||||
theme === 'dark'
|
||||
? '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
|
||||
src="/mugshot.jpeg"
|
||||
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">
|
||||
<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
|
||||
</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
|
||||
</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">
|
||||
<Mail className="w-4 h-4" />
|
||||
khokharmaaz@gmail.com
|
||||
|
||||
@@ -1,57 +1,68 @@
|
||||
import { Users } from 'lucide-react';
|
||||
import { useTheme } from '../contexts/ThemeContext';
|
||||
|
||||
interface LeadershipSectionProps {
|
||||
isOutOfCollege?: boolean;
|
||||
}
|
||||
|
||||
const LeadershipSection: React.FC<LeadershipSectionProps> = ({ isOutOfCollege = false }) => {
|
||||
const { theme } = useTheme();
|
||||
|
||||
return (
|
||||
<section className="mb-16">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<Users className="w-8 h-8 text-indigo-600" />
|
||||
<h2 className="text-3xl font-bold text-slate-800">
|
||||
<Users className={`w-8 h-8 transition-colors duration-300 ${
|
||||
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
|
||||
</h2>
|
||||
</div>
|
||||
<div className="bg-white rounded-2xl shadow-lg p-8">
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div className={`rounded-2xl shadow-lg p-8 transition-all duration-300 ${
|
||||
theme === 'dark' ? 'bg-slate-800' : 'bg-white'
|
||||
}`}>
|
||||
<div className="grid gap-8 md:grid-cols-2">
|
||||
<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
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<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
|
||||
</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
|
||||
</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
|
||||
community service in middle school
|
||||
</p>
|
||||
</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
|
||||
</h4>
|
||||
<p className="text-slate-600">
|
||||
<p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
|
||||
Forestwood Middle School • 2024
|
||||
</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
|
||||
and leadership in student activities
|
||||
</p>
|
||||
</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
|
||||
</h4>
|
||||
<p className="text-slate-600">
|
||||
<p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
|
||||
Forestwood Middle School • 2023-2024
|
||||
</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,
|
||||
fostering a collaborative learning environment
|
||||
</p>
|
||||
@@ -60,18 +71,18 @@ const LeadershipSection: React.FC<LeadershipSectionProps> = ({ isOutOfCollege =
|
||||
</div>
|
||||
{isOutOfCollege && (
|
||||
<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
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<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
|
||||
</h4>
|
||||
<p className="text-slate-600">
|
||||
<p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
|
||||
2020-Present • 500+ hours
|
||||
</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
|
||||
10,000+ lives
|
||||
</p>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Star, Plus } from 'lucide-react';
|
||||
import { type JSX } from 'react';
|
||||
import { type Review } from '../reviewsApi';
|
||||
import { useTheme } from '../contexts/ThemeContext';
|
||||
|
||||
interface Props {
|
||||
setShowModal: (show: boolean) => void;
|
||||
@@ -9,39 +10,55 @@ interface Props {
|
||||
}
|
||||
|
||||
const ReviewSection: React.FC<Props> = ({ setShowModal, renderStars, reviews }) => {
|
||||
const { theme } = useTheme();
|
||||
|
||||
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">
|
||||
<Star className={`w-8 h-8 transition-colors duration-300 ${
|
||||
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
|
||||
</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"
|
||||
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" />
|
||||
Add Review
|
||||
</button>
|
||||
</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.map((review, index) => (
|
||||
<div
|
||||
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="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<Star className="w-8 h-8 text-blue-600" />
|
||||
<div className={`w-12 h-12 rounded-full flex items-center justify-center transition-colors duration-300 ${
|
||||
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>
|
||||
<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}
|
||||
</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}
|
||||
</p>
|
||||
</div>
|
||||
@@ -49,11 +66,17 @@ const ReviewSection: React.FC<Props> = ({ setShowModal, renderStars, reviews })
|
||||
<div className="flex items-center mb-4">
|
||||
{renderStars(review.rating)}
|
||||
</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 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!
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -1,35 +1,56 @@
|
||||
import { Briefcase } from "lucide-react";
|
||||
import { useTheme } from '../contexts/ThemeContext';
|
||||
|
||||
interface TechSectionProps {
|
||||
isOutOfCollege?: boolean;
|
||||
}
|
||||
|
||||
const TechSection: React.FC<TechSectionProps> = ({ isOutOfCollege = false }) => {
|
||||
const { theme } = useTheme();
|
||||
|
||||
return (
|
||||
<section className="mb-16">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<Briefcase className="w-8 h-8 text-indigo-600" />
|
||||
<h2 className="text-3xl font-bold text-slate-800">
|
||||
<Briefcase className={`w-8 h-8 transition-colors duration-300 ${
|
||||
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
|
||||
</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">
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<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'
|
||||
}`}>
|
||||
Featured Projects
|
||||
</h3>
|
||||
<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
|
||||
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
|
||||
</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
|
||||
</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
|
||||
system for a local educational institution, streamlining
|
||||
their administrative processes and improving data accuracy.
|
||||
@@ -38,28 +59,46 @@ const TechSection: React.FC<TechSectionProps> = ({ isOutOfCollege = false }) =>
|
||||
</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">
|
||||
<div className={`border-l-4 pl-4 transition-colors duration-300 ${
|
||||
theme === 'dark' ? 'border-green-400' : 'border-green-500'
|
||||
}`}>
|
||||
<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
|
||||
</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%
|
||||
across 200+ commercial buildings
|
||||
</p>
|
||||
</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
|
||||
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
|
||||
</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
|
||||
</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
|
||||
luxury bag retailer, enabling direct-to-consumer sales and
|
||||
reducing third-party marketplace dependency. Implemented
|
||||
@@ -70,20 +109,30 @@ const TechSection: React.FC<TechSectionProps> = ({ isOutOfCollege = false }) =>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6">
|
||||
<h3 className="text-xl font-semibold text-slate-800 mb-4">
|
||||
<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'
|
||||
}`}>
|
||||
Technical Skills
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<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
|
||||
</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"
|
||||
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}
|
||||
</span>
|
||||
@@ -91,7 +140,9 @@ const TechSection: React.FC<TechSectionProps> = ({ isOutOfCollege = false }) =>
|
||||
</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
|
||||
</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
@@ -104,7 +155,11 @@ const TechSection: React.FC<TechSectionProps> = ({ isOutOfCollege = false }) =>
|
||||
].map((skill) => (
|
||||
<span
|
||||
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}
|
||||
</span>
|
||||
@@ -113,14 +168,20 @@ const TechSection: React.FC<TechSectionProps> = ({ isOutOfCollege = false }) =>
|
||||
</div>
|
||||
{isOutOfCollege && (
|
||||
<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
|
||||
</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"
|
||||
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}
|
||||
</span>
|
||||
|
||||
@@ -1,51 +1,82 @@
|
||||
import { Award, Zap, Users, Briefcase } from 'lucide-react';
|
||||
import { useTheme } from '../contexts/ThemeContext';
|
||||
|
||||
const UniqueSection: React.FC = () => {
|
||||
const { theme } = useTheme();
|
||||
|
||||
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">
|
||||
<Zap className={`w-8 h-8 transition-colors duration-300 ${
|
||||
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
|
||||
</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">
|
||||
<div className={`rounded-2xl shadow-lg p-8 border-l-4 transition-all duration-300 ${
|
||||
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
|
||||
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="grid gap-6 md:grid-cols-3">
|
||||
<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 className={`w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3 transition-colors duration-300 ${
|
||||
theme === 'dark' ? 'bg-blue-900/30' : 'bg-blue-100'
|
||||
}`}>
|
||||
<Award className={`w-8 h-8 ${theme === 'dark' ? 'text-blue-400' : 'text-blue-600'}`} />
|
||||
</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
|
||||
</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
|
||||
</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 className={`w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3 transition-colors duration-300 ${
|
||||
theme === 'dark' ? 'bg-green-900/30' : 'bg-green-100'
|
||||
}`}>
|
||||
<Users className={`w-8 h-8 ${theme === 'dark' ? 'text-green-400' : 'text-green-600'}`} />
|
||||
</div>
|
||||
<h3 className="font-semibold text-slate-800">Team Catalyst</h3>
|
||||
<p className="text-sm text-slate-600">
|
||||
<h3 className={`font-semibold transition-colors duration-300 ${
|
||||
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
|
||||
</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 className={`w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3 transition-colors duration-300 ${
|
||||
theme === 'dark' ? 'bg-purple-900/30' : 'bg-purple-100'
|
||||
}`}>
|
||||
<Briefcase className={`w-8 h-8 ${theme === 'dark' ? 'text-purple-400' : 'text-purple-600'}`} />
|
||||
</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
|
||||
</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
|
||||
</p>
|
||||
</div>
|
||||
|
||||
73
src/contexts/ThemeContext.tsx
Normal file
73
src/contexts/ThemeContext.tsx
Normal 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>
|
||||
);
|
||||
};
|
||||
@@ -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
19
src/main.tsx
@@ -1,10 +1,13 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import "./index.css";
|
||||
import App from "./App.tsx";
|
||||
import { ThemeProvider } from "./contexts/ThemeContext.tsx";
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
<ThemeProvider>
|
||||
<App />
|
||||
</ThemeProvider>
|
||||
</StrictMode>
|
||||
);
|
||||
|
||||
7
tailwind.config.js
Normal file
7
tailwind.config.js
Normal file
@@ -0,0 +1,7 @@
|
||||
export default {
|
||||
darkMode: 'class',
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
}
|
||||
Reference in New Issue
Block a user