From 7119d7a48dba6e5abffb4e6d355f014bd62ce84b Mon Sep 17 00:00:00 2001
From: Maaz Khokhar <khokharmaaz@gmail.com>
Date: Wed, 25 Jun 2025 12:40:38 -0400
Subject: [PATCH] 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.
---
 src/App.tsx                                | 115 ++++++++++---
 src/components/AcademicStemHighlights.tsx  | 183 ++++++++++++++-------
 src/components/AthleticsSection.tsx        |  42 ++---
 src/components/EntrepreneurshipSection.tsx |  56 +++----
 src/components/Footer.tsx                  |  19 ++-
 src/components/HeroSection.tsx             |  31 +++-
 src/components/LeadershipSection.tsx       |  47 ++++--
 src/components/ReviewSection.tsx           |  45 +++--
 src/components/TechSection.tsx             | 111 ++++++++++---
 src/components/UniqueSection.tsx           |  65 ++++++--
 src/contexts/ThemeContext.tsx              |  73 ++++++++
 src/index.css                              |  52 +++++-
 src/main.tsx                               |  19 ++-
 tailwind.config.js                         |   7 +
 14 files changed, 640 insertions(+), 225 deletions(-)
 create mode 100644 src/contexts/ThemeContext.tsx
 create mode 100644 tailwind.config.js

diff --git a/src/App.tsx b/src/App.tsx
index 895bff4..c6f738d 100644
--- a/src/App.tsx
+++ b/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>
diff --git a/src/components/AcademicStemHighlights.tsx b/src/components/AcademicStemHighlights.tsx
index f9fb347..1666d40 100644
--- a/src/components/AcademicStemHighlights.tsx
+++ b/src/components/AcademicStemHighlights.tsx
@@ -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;
\ No newline at end of file
+export default AcademicSTEMHighlights;
diff --git a/src/components/AthleticsSection.tsx b/src/components/AthleticsSection.tsx
index a7c2b42..597b4fc 100644
--- a/src/components/AthleticsSection.tsx
+++ b/src/components/AthleticsSection.tsx
@@ -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>
diff --git a/src/components/EntrepreneurshipSection.tsx b/src/components/EntrepreneurshipSection.tsx
index 9f40688..0a718f6 100644
--- a/src/components/EntrepreneurshipSection.tsx
+++ b/src/components/EntrepreneurshipSection.tsx
@@ -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>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 043c25c..dec5b8a 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -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
diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx
index e28474e..9ad098a 100644
--- a/src/components/HeroSection.tsx
+++ b/src/components/HeroSection.tsx
@@ -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
diff --git a/src/components/LeadershipSection.tsx b/src/components/LeadershipSection.tsx
index 6659711..fd1d7d6 100644
--- a/src/components/LeadershipSection.tsx
+++ b/src/components/LeadershipSection.tsx
@@ -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>
diff --git a/src/components/ReviewSection.tsx b/src/components/ReviewSection.tsx
index 6902d5e..9cc2a6d 100644
--- a/src/components/ReviewSection.tsx
+++ b/src/components/ReviewSection.tsx
@@ -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>
             )}
diff --git a/src/components/TechSection.tsx b/src/components/TechSection.tsx
index d07bd8b..e110273 100644
--- a/src/components/TechSection.tsx
+++ b/src/components/TechSection.tsx
@@ -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>
diff --git a/src/components/UniqueSection.tsx b/src/components/UniqueSection.tsx
index c65f04e..1a0487a 100644
--- a/src/components/UniqueSection.tsx
+++ b/src/components/UniqueSection.tsx
@@ -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>
diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx
new file mode 100644
index 0000000..d0ed809
--- /dev/null
+++ b/src/contexts/ThemeContext.tsx
@@ -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>
+  );
+};
diff --git a/src/index.css b/src/index.css
index a461c50..58901ce 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1 +1,51 @@
-@import "tailwindcss";
\ No newline at end of file
+@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);
+}
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index bef5202..3002038 100644
--- a/src/main.tsx
+++ b/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>
+);
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..e4eaad8
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,7 @@
+export default {
+  darkMode: 'class',
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+}