Merge pull request #1 from coolestcoder655/Overhaul

Overhaul

src/App.tsx

@@ -1,253 +1,277 @@
-import { useState, useEffect } from "react";
+import { useState, type JSX, useEffect } from "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 LeadershipSection from "./components/LeadershipSection";
+import UniqueSection from "./components/UniqueSection";
-import EntrepreneurshipSection from "./components/EntrepreneurshipSection";
+import AcademicSTEMHighlights from "./components/AcademicStemHighlights";
-import AcademicSection from "./components/AcademicSection";
 import TechSection from "./components/TechSection";
-import AboutSection from "./components/AboutSection";
+import LeadershipSection from "./components/LeadershipSection";
-import AthleticsSection from "./components/AthleticsSection";
+import AthleticSection from "./components/AthleticsSection";
-import ReviewsSection from "./components/ReviewsSection";
+import EntrepreuneurshipSection from "./components/EntrepreneurshipSection";
+import ReviewSection from "./components/ReviewSection";
 import Footer from "./components/Footer";
-import { Sun, Moon } from "lucide-react";
 
 const App = () => {
-  const [, setActiveSection] = useState("hero");
+  const { theme, toggleTheme } = useTheme();
-  const [, setIsVisible] = useState({});
+  const [showModal, setShowModal] = useState(false);
-  const [isDarkMode, setIsDarkMode] = useState(true);
+  const [reviews, setReviews] = useState<Review[]>([]);
+  const [newReview, setNewReview] = useState<Review>({
+    name: "",
+    rating: -1,
+    position: "",
+    text: "",
+  });
 
   useEffect(() => {
-    const observer = new IntersectionObserver(
+    fetchReviews().then(setReviews);
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            setIsVisible((prev) => ({ ...prev, [entry.target.id]: true }));
-            setActiveSection(entry.target.id);
-          }
-        });
-      },
-      { threshold: 0.3 }
-    );
-
-    document.querySelectorAll("section[id]").forEach((section) => {
-      observer.observe(section);
-    });
-
-    return () => observer.disconnect();
   }, []);
 
-  const scrollToSection = (sectionId: string) => {
+  const handleAddReview = () => {
-    document.getElementById(sectionId)?.scrollIntoView({ behavior: "smooth" });
+    if (
+      !newReview.name ||
+      newReview.rating < 1 ||
+      newReview.rating > 5 ||
+      !newReview.position ||
+      !newReview.text
+    ) {
+      alert("Please fill out all fields correctly.");
+      return;
+    }
+
+    // Add the new review to the state
+    addReview(newReview)
+      .then(() => {
+        fetchReviews().then(setReviews);
+        alert("Review added successfully!");
+        setNewReview({ name: "", rating: -1, position: "", text: "" });
+        setShowModal(false);
+      })
+      .catch((error) => {
+        console.error("Error adding review:", error);
+        alert("Failed to add review. Please try again later.");
+        setShowModal(false);
+      });
   };
 
-  const toggleDarkMode = () => {
+  const renderStars = (rating: number): JSX.Element[] => {
-    setIsDarkMode(!isDarkMode);
+    return Array(5)
+      .fill(0)
+      .map((_, i) => (
+        <Star
+          key={i}
+          className={`w-4 h-4 ${
+            i < rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300"
+          }`}
+        />
+      ));
   };
 
-  const themeClasses = isDarkMode
-    ? "min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white overflow-x-hidden transition-all duration-1000"
-    : "min-h-screen bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 text-gray-900 overflow-x-hidden transition-all duration-1000";
-
-  const cardClasses = isDarkMode
-    ? "bg-white/5 backdrop-blur-lg border-white/10"
-    : "bg-white/90 backdrop-blur-lg border-gray-200/60 shadow-xl";
-
-  const navClasses = isDarkMode
-    ? "bg-black/20 backdrop-blur-lg border-white/10"
-    : "bg-white/80 backdrop-blur-lg border-gray-200/30";
-
-  const textClasses = isDarkMode ? "text-gray-300" : "text-gray-700";
-
   return (
-    <div className={themeClasses}>
+    <div
-      <style>{`
+      className={`min-h-screen transition-all duration-300 ${
-        @keyframes float {
+        theme === "dark"
-          0%, 100% { transform: translateY(0px); }
+          ? "bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900"
-          50% { transform: translateY(-20px); }
+          : "bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100"
-        }
+      }`}
-        
+    >
-        @keyframes float-delayed {
+      {/* Theme Toggle Button */}
-          0%, 100% { transform: translateY(0px); }
+      <button
-          50% { transform: translateY(-15px); }
+        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"
-        @keyframes float-particle {
+            ? "bg-slate-800 text-white border-slate-700 hover:bg-slate-700"
-          0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.3; }
+            : "bg-white text-slate-800 border-slate-200 hover:bg-slate-50"
-          50% { transform: translateY(-30px) translateX(10px); opacity: 0.8; }
+        }`}
-        }
+        aria-label="Toggle theme"
-
-        @keyframes gradient-text {
-          0%, 100% { background-position: 0% 50%; }
-          50% { background-position: 100% 50%; }
-        }
-
-        @keyframes fade-in-up {
-          0% { opacity: 0; transform: translateY(30px); }
-          100% { opacity: 1; transform: translateY(0); }
-        }
-
-        @keyframes slide-in-left {
-          0% { opacity: 0; transform: translateX(-50px); }
-          100% { opacity: 1; transform: translateX(0); }
-        }
-
-        @keyframes slide-in-right {
-          0% { opacity: 0; transform: translateX(50px); }
-          100% { opacity: 1; transform: translateX(0); }
-        }
-
-        @keyframes slide-in-up {
-          0% { opacity: 0; transform: translateY(50px); }
-          100% { opacity: 1; transform: translateY(0); }
-        }
-
-        @keyframes bounce-subtle {
-          0%, 100% { transform: translateY(0); }
-          50% { transform: translateY(-5px); }
-        }
-
-        @keyframes spin-slow {
-          0% { transform: rotate(0deg); }
-          100% { transform: rotate(360deg); }
-        }
-        
-        .animate-float {
-          animation: float 6s ease-in-out infinite;
-        }
-        
-        .animate-float-delayed {
-          animation: float-delayed 8s ease-in-out infinite;
-        }
-
-        .animate-float-particle {
-          animation: float-particle 4s ease-in-out infinite;
-        }
-
-        .animate-gradient-text {
-          background-size: 200% 200%;
-          animation: gradient-text 3s ease infinite;
-        }
-
-        .animate-fade-in-up {
-          animation: fade-in-up 1s ease-out;
-        }
-
-        .animate-slide-in-left {
-          animation: slide-in-left 0.8s ease-out;
-        }
-
-        .animate-slide-in-right {
-          animation: slide-in-right 0.8s ease-out;
-        }
-
-        .animate-slide-in-up {
-          animation: slide-in-up 0.8s ease-out;
-        }
-
-        .animate-bounce-subtle {
-          animation: bounce-subtle 2s ease-in-out infinite;
-        }
-
-        .animate-spin-slow {
-          animation: spin-slow 8s linear infinite;
-        }
-      `}</style>
-      {/* Navigation */}
-      <nav
-        className={`fixed top-0 w-full z-40 ${navClasses} border-b transition-all duration-500`}
       >
-        <div className="px-6 py-4 mx-auto max-w-7xl">
+        {theme === "light" ? (
-          <div className="flex items-center justify-between">
+          <Moon className="w-5 h-5" />
-            <div className="text-2xl font-bold text-transparent bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text animate-pulse" />{" "}
+        ) : (
-            <div className="flex items-center space-x-6">
+          <Sun className="w-5 h-5" />
-              {" "}
+        )}
-              <div className="hidden space-x-8 md:flex">
+      </button>
-                {[
+
-                  "About",
+      {/* Hero Section */}
-                  "Academic",
+      <HeroSection />
-                  "Tech",
+
-                  "Leadership",
+      <div className="max-w-6xl px-6 py-12 mx-auto">
-                  "Athletics",
+        <UniqueSection />
-                  "Entrepreneurship",
+
-                  "Reviews",
+        {/* Academic & STEM Highlights */}
-                ].map((item) => (
+        <AcademicSTEMHighlights />
-                  <button
+
-                    key={item}
+        {/* Tech, Innovation, and Projects */}
-                    onClick={() => scrollToSection(item.toLowerCase())}
+        <TechSection />
-                    className={`transition-all duration-300 transform hover:scale-110 ${
+
-                      isDarkMode
+        {/* Leadership, Service, & School */}
-                        ? "hover:text-cyan-400"
+        <LeadershipSection />
-                        : "hover:text-purple-600 text-gray-800 font-medium"
+
+        {/* Athletics & Competitions */}
+        <AthleticSection />
+
+        {/* Entrepreneurship and Drive */}
+        <EntrepreuneurshipSection />
+
+        {/* Reviews Section */}
+        <ReviewSection
+          setShowModal={setShowModal}
+          reviews={reviews}
+          renderStars={renderStars}
+        />
+
+        {/* Footer */}
+        <Footer />
+      </div>
+
+      {/* Modal */}
+      {showModal && (
+        <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 ${
+                    theme === "dark" ? "text-white" : "text-slate-800"
+                  }`}
+                >
+                  Add a Review
+                </h3>
+                <button
+                  onClick={() => setShowModal(false)}
+                  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 mb-1 ${
+                      theme === "dark" ? "text-slate-300" : "text-slate-700"
                     }`}
                   >
-                    {item}
+                    Name
-                  </button>
+                  </label>
-                ))}
+                  <input
+                    type="text"
+                    value={newReview.name}
+                    onChange={(e) =>
+                      setNewReview({ ...newReview, name: e.target.value })
+                    }
+                    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 mb-1 ${
+                      theme === "dark" ? "text-slate-300" : "text-slate-700"
+                    }`}
+                  >
+                    Position
+                  </label>
+                  <input
+                    type="text"
+                    value={newReview.position}
+                    onChange={(e) =>
+                      setNewReview({ ...newReview, position: e.target.value })
+                    }
+                    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 mb-1 ${
+                      theme === "dark" ? "text-slate-300" : "text-slate-700"
+                    }`}
+                  >
+                    Rating
+                  </label>
+                  <div className="flex gap-1">
+                    {[1, 2, 3, 4, 5].map((star) => (
+                      <button
+                        key={star}
+                        onClick={() =>
+                          setNewReview({ ...newReview, rating: star })
+                        }
+                        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"
+                          }`}
+                        />
+                      </button>
+                    ))}
+                  </div>
+                </div>
+                <div>
+                  <label
+                    className={`block text-sm font-medium mb-1 ${
+                      theme === "dark" ? "text-slate-300" : "text-slate-700"
+                    }`}
+                  >
+                    Review
+                  </label>
+                  <textarea
+                    value={newReview.text}
+                    onChange={(e) =>
+                      setNewReview({ ...newReview, text: e.target.value })
+                    }
+                    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..."
+                  />
+                </div>
+              </div>
+              <div className="flex gap-3 mt-6">
+                <button
+                  onClick={() => setShowModal(false)}
+                  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 text-white transition-colors bg-indigo-600 rounded-lg hover:bg-indigo-700"
+                >
+                  Add Review
+                </button>
               </div>
-              <button
-                onClick={toggleDarkMode}
-                className={`p-2 rounded-full transition-all duration-300 transform hover:scale-110 ${
-                  isDarkMode
-                    ? "bg-white/10 hover:bg-white/20 text-yellow-400"
-                    : "bg-gray-900/10 hover:bg-gray-900/20 text-purple-600"
-                }`}
-              >
-                {isDarkMode ? <Sun size={20} /> : <Moon size={20} />}
-              </button>
             </div>
           </div>
         </div>
-      </nav>
+      )}
-
-      {/* Hero Section */}
-      <HeroSection
-        isDarkMode={isDarkMode}
-        scrollToSection={scrollToSection}
-        textClasses={textClasses}
-      />
-
-      {/* About Section */}
-      <AboutSection textClasses={textClasses} cardClasses={cardClasses} />
-
-      {/* Academic Section */}
-      <AcademicSection
-        isDarkMode={isDarkMode}
-        textClasses={textClasses}
-        cardClasses={cardClasses}
-      />
-
-      {/* Tech Section */}
-      <TechSection
-        isDarkMode={isDarkMode}
-        textClasses={textClasses}
-        cardClasses={cardClasses}
-      />
-
-      {/* Leadership Section */}
-      <LeadershipSection
-        isDarkMode={isDarkMode}
-        textClasses={textClasses}
-        cardClasses={cardClasses}
-      />
-
-      {/* Athletics Section */}
-      <AthleticsSection isDarkMode={isDarkMode} textClasses={textClasses} />
-
-      {/* Entrepreneurship Section */}
-      <EntrepreneurshipSection
-        isDarkMode={isDarkMode}
-        textClasses={textClasses}
-        cardClasses={cardClasses}
-      />
-
-      {/* Reviews Section */}
-      <ReviewsSection
-        cardClasses={cardClasses}
-        textClasses={textClasses}
-        isDarkMode={isDarkMode}
-      />
-
-      {/* Footer */}
-      <Footer isDarkMode={isDarkMode} textClasses={textClasses} />
     </div>
   );
 };

src/components/AboutSection.tsx

@@ -1,66 +0,0 @@
-import { Zap, Users, Rocket } from "lucide-react";
-
-interface AboutSectionProps {
-  textClasses: string;
-  cardClasses: string;
-}
-
-const AboutSection = ({ textClasses, cardClasses }: AboutSectionProps) => {
-  return (
-    <section id="about" className="relative py-20">
-      <div className="max-w-6xl px-6 mx-auto">
-        <div className="mb-16 text-center">
-          <h2 className="mb-4 text-4xl font-bold text-transparent bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text">
-            Why I Stand Out
-          </h2>
-          <div className="w-24 h-1 mx-auto bg-gradient-to-r from-cyan-400 to-purple-400"></div>
-        </div>
-
-        <div className="grid gap-8 md:grid-cols-3">
-          <div
-            className={`${cardClasses} rounded-xl p-6 border hover:border-cyan-400/50 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2 animate-slide-in-left`}
-          >
-            <Zap className="mb-4 text-cyan-400 animate-pulse" size={40} />
-            <h3 className="mb-3 text-xl font-bold text-cyan-400">
-              Unique Blend
-            </h3>
-            <p className={textClasses}>
-              Academic excellence, technological fluency, creative innovation in
-              robotics and software, leadership through service, and athletic
-              resilience.
-            </p>
-          </div>
-
-          <div
-            className={`${cardClasses} rounded-xl p-6 border hover:border-purple-400/50 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2 animate-slide-in-up`}
-          >
-            <Users className="mb-4 text-purple-400 animate-pulse" size={40} />
-            <h3 className="mb-3 text-xl font-bold text-purple-400">
-              Team Player
-            </h3>
-            <p className={textClasses}>
-              I thrive in team environments, whether coaching classmates,
-              collaborating in science competitions, or building apps with
-              peers.
-            </p>
-          </div>
-
-          <div
-            className={`${cardClasses} rounded-xl p-6 border hover:border-pink-400/50 transition-all duration-500 transform hover:scale-105 hover:-translate-y-2 animate-slide-in-right`}
-          >
-            <Rocket className="mb-4 text-pink-400 animate-pulse" size={40} />
-            <h3 className="mb-3 text-xl font-bold text-pink-400">
-              Self-Driven
-            </h3>
-            <p className={textClasses}>
-              Consistently pursuing excellence—from earning honors and awards to
-              shipping production-level apps and standing tall on the podium.
-            </p>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default AboutSection;

src/components/AcademicSection.tsx

@@ -1,101 +0,0 @@
-import { Trophy, Award, Star } from "lucide-react";
-
-interface AcademicSectionProps {
-  isDarkMode: boolean;
-  textClasses: string;
-  cardClasses: string;
-}
-
-const AcademicSection = ({
-  isDarkMode,
-  textClasses,
-  cardClasses,
-}: AcademicSectionProps) => {
-  return (
-    <section
-      id="academic"
-      className={`py-20 transition-all duration-1000 ${
-        isDarkMode
-          ? "bg-gradient-to-r from-blue-900/20 to-purple-900/20"
-          : "bg-gradient-to-r from-blue-100/60 to-purple-100/60"
-      }`}
-    >
-      <div className="max-w-6xl px-6 mx-auto">
-        <div className="mb-16 text-center">
-          <h2 className="mb-4 text-4xl font-bold text-transparent bg-gradient-to-r from-yellow-400 to-orange-400 bg-clip-text">
-            🏆 Academic & STEM Highlights
-          </h2>
-          <div className="w-24 h-1 mx-auto bg-gradient-to-r from-yellow-400 to-orange-400"></div>
-        </div>
-
-        <div className="grid gap-8 md:grid-cols-2">
-          <div
-            className={`${cardClasses} rounded-xl p-6 border hover:border-yellow-400/50 transition-all duration-500 transform hover:scale-105 hover:rotate-1 animate-slide-in-left`}
-          >
-            <div className="flex items-center mb-4">
-              <Trophy
-                className="mr-3 text-yellow-400 animate-bounce"
-                size={30}
-              />
-              <h3 className="text-xl font-bold text-yellow-400">
-                UIL Science 1st Place
-              </h3>
-            </div>
-            <p className={textClasses}>
-              Showcased analytical rigor and creative problem-solving in a
-              highly competitive academic environment.
-            </p>
-          </div>
-
-          <div
-            className={`${cardClasses} rounded-xl p-6 border hover:border-green-400/50 transition-all duration-500 transform hover:scale-105 hover:-rotate-1 animate-slide-in-right`}
-          >
-            <div className="flex items-center mb-4">
-              <Award className="mr-3 text-green-400 animate-pulse" size={30} />
-              <h3 className="text-xl font-bold text-green-400">
-                Science Olympiad
-              </h3>
-            </div>
-            <p className={textClasses}>
-              Regular participant developing strong teamwork, precise
-              experimentation, and rapid on-your-feet thinking.
-            </p>
-          </div>
-
-          <div
-            className={`${cardClasses} rounded-xl p-6 border hover:border-purple-400/50 transition-all duration-500 transform hover:scale-105 hover:rotate-1 animate-slide-in-left`}
-          >
-            <div className="flex items-center mb-4">
-              <Star
-                className="mr-3 text-purple-400 animate-spin-slow"
-                size={30}
-              />
-              <h3 className="text-xl font-bold text-purple-400">
-                Gifted and Talented Program
-              </h3>
-            </div>
-            <p className={textClasses}>
-              Advanced coursework that cultivated deeper critical thinking and
-              an enriched love for learning.
-            </p>
-          </div>
-
-          <div
-            className={`${cardClasses} rounded-xl p-6 border hover:border-cyan-400/50 transition-all duration-500 transform hover:scale-105 hover:-rotate-1 animate-slide-in-right`}
-          >
-            <div className="flex items-center mb-4">
-              <Award className="mr-3 text-cyan-400 animate-bounce" size={30} />
-              <h3 className="text-xl font-bold text-cyan-400">Honor Roll</h3>
-            </div>
-            <p className={textClasses}>
-              Full schedule of honors classes, consistently challenging myself
-              to excel in every subject.
-            </p>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default AcademicSection;

src/components/AcademicStemHighlights.tsx

@@ -0,0 +1,132 @@
+import { GraduationCap, Award } from "lucide-react";
+import { useTheme } from "../contexts/ThemeContext";
+
+interface AcademicSTEMHighlightsProps {
+  isOutOfCollege?: boolean;
+}
+
+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>
+          </div>
+        )}
+        <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;

src/components/AthleticsSection.tsx

@@ -1,60 +1,99 @@
-interface AthleticsSectionProps {
+import { Trophy } from 'lucide-react';
-  isDarkMode: boolean;
+
-  textClasses: string;
+interface AthleticSectionProps {
+    isOutOfCollege?: boolean;
 }
 
-const AthleticsSection = ({
+const AthleticSection: React.FC<AthleticSectionProps> = ({ isOutOfCollege = false }) => {
-  isDarkMode,
+    return (
-  textClasses,
+        <>
-}: AthleticsSectionProps) => {
+            {isOutOfCollege && (
-  return (
+                <section className="mb-16">
-    <section id="athletics" className="py-20">
+                    <div className="flex items-center gap-3 mb-8">
-      <div className="max-w-6xl px-6 mx-auto">
+                        <Trophy className="w-8 h-8 text-indigo-600 dark:text-indigo-400" />
-        <div className="mb-16 text-center">
+                        <h2 className="text-3xl font-bold transition-colors duration-300 text-slate-800 dark:text-white">
-          <h2 className="mb-4 text-4xl font-bold text-transparent bg-gradient-to-r from-blue-400 to-green-400 bg-clip-text">
+                            Athletics & Competitions
-            🏊‍♂️🏸 Athletics & Competitions
+                        </h2>
-          </h2>
+                    </div>
-          <div className="w-24 h-1 mx-auto bg-gradient-to-r from-blue-400 to-green-400"></div>
+                    <div className="grid gap-6 md:grid-cols-3">
-        </div>
+                        <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">
-        <div className="grid gap-8 md:grid-cols-2">
+                                Competitive Programming
-          <div
+                            </h3>
-            className={`$${
+                            <ul className="space-y-2 transition-colors duration-300 text-slate-700 dark:text-slate-200">
-              isDarkMode
+                                <li className="flex items-center gap-2">
-                ? "bg-gradient-to-br from-blue-900/20 to-cyan-900/20 border-blue-900"
+                                    <Trophy className="w-4 h-4 text-yellow-500 dark:text-yellow-400" />
-                : "bg-gradient-to-br from-blue-100/40 to-cyan-100/40 border-blue-200"
+                                    <span className="text-sm">
-            } backdrop-blur-lg rounded-xl p-8 border-2 transition-all duration-300 transform hover:scale-105 hover:border-blue-400/70 hover:shadow-lg`}
+                                        ACM ICPC World Finals - Top 20
-          >
+                                    </span>
-            <div className="mb-4 text-4xl group-hover:animate-bounce">🏊‍♂️</div>
+                                </li>
-            <h3 className="mb-4 text-2xl font-bold text-blue-400">
+                                <li className="flex items-center gap-2">
-              Swimming Competitions
+                                    <Trophy className="w-4 h-4 text-gray-400 dark:text-gray-300" />
-            </h3>
+                                    <span className="text-sm">
-            <p className={textClasses}>
+                                        Google Code Jam - Round 3 Qualifier
-              Competed across multiple events, honing discipline, mental
+                                    </span>
-              toughness, and an enduring competitive spirit.
+                                </li>
-            </p>
+                                <li className="flex items-center gap-2">
-          </div>
+                                    <Trophy className="w-4 h-4 text-orange-400 dark:text-orange-300" />
-
+                                    <span className="text-sm">
-          <div
+                                        Facebook Hacker Cup - Top 100
-            className={`$${
+                                    </span>
-              isDarkMode
+                                </li>
-                ? "bg-gradient-to-br from-green-900/20 to-emerald-900/20 border-green-900"
+                            </ul>
-                : "bg-gradient-to-br from-green-100/40 to-emerald-100/40 border-green-200"
+                        </div>
-            } backdrop-blur-lg rounded-xl p-8 border-2 transition-all duration-300 transform hover:scale-105 hover:border-green-400/70 hover:shadow-lg`}
+                        <div className="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">
-            <div className="mb-4 text-4xl group-hover:animate-bounce">🏸</div>
+                                Hackathons
-            <h3 className="mb-4 text-2xl font-bold text-green-400">
+                            </h3>
-              Badminton Competitions
+                            <ul className="space-y-2 transition-colors duration-300 text-slate-700 dark:text-slate-200">
-            </h3>
+                                <li className="flex items-center gap-2">
-            <p className={textClasses}>
+                                    <Trophy className="w-4 h-4 text-yellow-500 dark:text-yellow-400" />
-              Sharpened hand-eye coordination, strategic thinking, and graceful
+                                    <span className="text-sm">
-              sportsmanship on the court.
+                                        TechCrunch Disrupt - 1st Place
-            </p>
+                                    </span>
-          </div>
+                                </li>
-        </div>
+                                <li className="flex items-center gap-2">
-      </div>
+                                    <Trophy className="w-4 h-4 text-yellow-500 dark:text-yellow-400" />
-    </section>
+                                    <span className="text-sm">MIT HackMIT - Winner</span>
-  );
+                                </li>
+                                <li className="flex items-center gap-2">
+                                    <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="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 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-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-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-orange-400 dark:text-orange-300" />
+                                    <span className="text-sm">
+                                        Rock Climbing - Advanced Level
+                                    </span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </section>
+            )}
+        </>
+    );
 };
 
-export default AthleticsSection;
+export default AthleticSection;

src/components/EntrepreneurshipSection.tsx

@@ -1,69 +1,108 @@
-import { Rocket, Zap } from "lucide-react";
+import { Zap } from 'lucide-react';
 
-interface EntrepreneurshipSectionProps {
+interface AthleticSectionProps {
-  isDarkMode: boolean;
+    isOutOfCollege?: boolean;
-  textClasses: string;
-  cardClasses: string;
 }
 
-const EntrepreneurshipSection = ({
+const EntrepreuneurshipSection: React.FC<AthleticSectionProps> = ({ isOutOfCollege = false }) => {
-  isDarkMode,
+    return (
-  textClasses,
+        <>
-  cardClasses,
+            {isOutOfCollege && (
-}: EntrepreneurshipSectionProps) => {
+          <section className="mb-16">
-  return (
+            <div className="flex items-center gap-3 mb-8">
-    <section
+              <Zap className="w-8 h-8 text-indigo-600 dark:text-indigo-400" />
-      id="entrepreneurship"
+              <h2 className="text-3xl font-bold transition-colors duration-300 text-slate-800 dark:text-white">
-      className={`py-20 ${
+                Entrepreneurial Ventures
-        isDarkMode
+              </h2>
-          ? "bg-gradient-to-r from-orange-900/20 to-red-900/20"
+            </div>
-          : "bg-gradient-to-r from-orange-100/60 to-red-100/60"
+            <div className="grid 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">
-      <div className="max-w-6xl px-6 mx-auto">
+                  Founded Startups
-        <div className="mb-16 text-center">
+                </h3>
-          <h2 className="mb-4 text-4xl font-bold text-transparent bg-gradient-to-r from-orange-400 to-red-400 bg-clip-text">
+                <div className="space-y-4">
-            💡 Entrepreneurship & Drive
+                  <div className="pl-4 border-l-4 border-emerald-500 dark:border-emerald-400">
-          </h2>
+                    <h4 className="font-semibold transition-colors duration-300 text-slate-700 dark:text-slate-200">
-          <div className="w-24 h-1 mx-auto bg-gradient-to-r from-orange-400 to-red-400"></div>
+                      EcoTech Solutions
-        </div>
+                    </h4>
-
+                    <p className="mb-2 text-sm transition-colors duration-300 text-slate-600 dark:text-slate-400">
-        <div className="grid gap-8 md:grid-cols-2">
+                      Co-Founder & CTO • 2023-Present
-          <div
+                    </p>
-            className={`${cardClasses} rounded-xl p-8 border border-white/10 transition-all duration-300 transform hover:scale-105 hover:border-orange-400/70 hover:shadow-lg`}
+                    <p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
-          >
+                      $2M in funding raised, 50+ employees, revolutionizing
-            <Rocket
+                      renewable energy storage
-              className="mb-4 text-orange-400 group-hover:animate-bounce"
+                    </p>
-              size={40}
+                  </div>
-            />
+                  <div className="pl-4 border-l-4 border-blue-500 dark:border-blue-400">
-            <h3 className="mb-4 text-2xl font-bold text-orange-400">
+                    <h4 className="font-semibold transition-colors duration-300 text-slate-700 dark:text-slate-200">StudySync</h4>
-              Entrepreneurial Spirit
+                    <p className="mb-2 text-sm transition-colors duration-300 text-slate-600 dark:text-slate-400">
-            </h3>
+                      Founder • 2022-2023
-            <p className={textClasses}>
+                    </p>
-              Always on the lookout for new opportunities—whether launching
+                    <p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
-              small ventures, leading peer projects, or exploring tech startups.
+                      EdTech platform with 10K+ users, acquired by major
-            </p>
+                      educational publisher
-          </div>
+                    </p>
-
+                  </div>
-          <div
+                  <div className="pl-4 border-l-4 border-purple-500 dark:border-purple-400">
-            className={`${cardClasses} rounded-xl p-8 border border-white/10 transition-all duration-300 transform hover:scale-105 hover:border-red-400/70 hover:shadow-lg`}
+                    <h4 className="font-semibold transition-colors duration-300 text-slate-700 dark:text-slate-200">
-          >
+                      DevTools Pro
-            <Zap
+                    </h4>
-              className="mb-4 text-red-400 group-hover:animate-pulse"
+                    <p className="mb-2 text-sm transition-colors duration-300 text-slate-600 dark:text-slate-400">
-              size={40}
+                      Co-Founder • 2021-2022
-            />
+                    </p>
-            <h3 className="mb-4 text-2xl font-bold text-red-400">
+                    <p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
-              Growth Mindset
+                      Developer productivity suite, $500K ARR before successful
-            </h3>
+                      exit
-            <p className={textClasses}>
+                    </p>
-              I love to learn—whether it be a new programming framework,
+                  </div>
-              exploring scientific research, or mastering a new athletic skill.
+                </div>
-            </p>
+              </div>
-          </div>
+              <div className="p-6 transition-colors duration-300 bg-white shadow-lg dark:bg-slate-800 rounded-2xl">
-        </div>
+                <h3 className="mb-4 text-xl font-semibold transition-colors duration-300 text-slate-800 dark:text-white">
-      </div>
+                  Investment & Advisory
-    </section>
+                </h3>
-  );
+                <div className="space-y-4">
+                  <div>
+                    <h4 className="font-semibold transition-colors duration-300 text-slate-700 dark:text-slate-200">
+                      Angel Investor
+                    </h4>
+                    <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 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 transition-colors duration-300 text-slate-700 dark:text-slate-200">
+                      Startup Accelerator Mentor
+                    </h4>
+                    <p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
+                      Y Combinator, Techstars, 500 Startups
+                    </p>
+                    <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 transition-colors duration-300 text-slate-700 dark:text-slate-200">
+                      Innovation Consultant
+                    </h4>
+                    <p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
+                      Fortune 500 digital transformation advisor
+                    </p>
+                    <p className="text-sm transition-colors duration-300 text-slate-600 dark:text-slate-400">
+                      Led innovation workshops for 20+ enterprises
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+        )}
+        </>
+    );
 };
 
-export default EntrepreneurshipSection;
+export default EntrepreuneurshipSection;

src/components/Footer.tsx

@@ -1,43 +1,53 @@
-interface FooterProps {
+import { Mail, Linkedin, Github } from 'lucide-react';
-  isDarkMode: boolean;
+import { useTheme } from '../contexts/ThemeContext';
-  textClasses: string;
+
+interface Props {
+    isOutOfCollege?: boolean;
 }
 
-const Footer = ({ isDarkMode, textClasses }: FooterProps) => {
+const Footer: React.FC<Props> = ({ isOutOfCollege }) => {
-  return (
+    const { theme } = useTheme();
-    <footer
-      className={`py-12 ${
-        isDarkMode ? "bg-black/40" : "bg-gray-900/10"
-      } backdrop-blur-lg border-t ${
-        isDarkMode ? "border-white/10" : "border-gray-300/30"
-      }`}
-    >
-      <div className="max-w-6xl px-6 mx-auto text-center">
-        <div className="mb-8">
-          <h3 className="mb-4 text-2xl font-bold text-transparent bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text">
-            Let's Connect
-          </h3>
-          <p className={`${textClasses} mb-6`}>
-            Ready to collaborate on exciting projects or discuss opportunities?
-          </p>
-        </div>
     
-        <div className="text-center">
+    return (
-          <p className={isDarkMode ? "text-gray-400" : "text-gray-600"}>
+        <section className="mb-16">
-            © 2025 Maaz Khokhar. All rights reserved.
+          <div className={`rounded-2xl shadow-xl text-white p-12 text-center transition-all duration-300 ${
-          </p>
+            theme === 'dark' 
-          <a
+              ? 'bg-gradient-to-r from-indigo-700 to-purple-700' 
-            href="mailto:khokharmaaz@gmail.com"
+              : 'bg-gradient-to-r from-indigo-600 to-purple-600'
-            className={`block mt-2 underline hover:text-cyan-400 transition-colors duration-200 ${
+          }`}>
-              isDarkMode ? "text-gray-300" : "text-gray-700"
+            <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
-            khokharmaaz@gmail.com
+              discuss new opportunities and innovative projects.
-          </a>
+            </p>
-        </div>
+            <div className="flex flex-wrap justify-center gap-6">
-      </div>
+              <a
-    </footer>
+                href="khokharmaaz@gmail.com"
-  );
+                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
+              </a>
+              {isOutOfCollege && (
+                <a
+                  href="https://linkedin.com/MyLinkedinProfile"
+                  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
+                </a>
+              )}
+              <a
+                href="https://github.com/coolestcoder655"
+                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
+              </a>
+            </div>
+          </div>
+        </section>
+    );
 };
 
 export default Footer;

src/components/HeroSection.tsx

@@ -1,108 +1,58 @@
-import { ChevronDown, Trophy, Code, Rocket } from "lucide-react";
+import { Mail, MapPin, Phone } from 'lucide-react';
+import { useTheme } from '../contexts/ThemeContext';
 
-interface HeroSectionProps {
+const HeroSection: React.FC = () => {
-  isDarkMode: boolean;
+  const { theme } = useTheme();
-  scrollToSection: (sectionId: string) => void;
-  textClasses: string;
-}
   
-const HeroSection = ({
-  isDarkMode,
-  scrollToSection,
-  textClasses,
-}: HeroSectionProps) => {
   return (
-    <section
+    <section className={`py-16 transition-all duration-300 ${
-      id="hero"
+      theme === 'dark' 
-      className="relative flex items-center justify-center min-h-screen overflow-hidden"
+        ? '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'
-      <div
+    } text-white`}>
-        className={`absolute inset-0 transition-all duration-1000 ${
+        <div className="max-w-6xl px-6 mx-auto">
-          isDarkMode
+          <div className="flex flex-col items-center gap-8 lg:flex-row">
-            ? "bg-gradient-to-r from-blue-600/20 to-purple-600/20"
+            <img
-            : "bg-gradient-to-r from-blue-400/10 to-purple-400/10"
+              src="/mugshot.jpeg"
-        }`}
+              alt="Maaz Khokhar"
-      ></div>
+              className={`w-48 h-48 rounded-full shadow-lg border-4 transition-colors duration-300 ${
-
+                theme === 'dark' ? 'border-slate-300' : 'border-white'
-      {/* Animated background particles */}
-      <div className="absolute inset-0 overflow-hidden">
-        {[...Array(20)].map((_, i) => (
-          <div
-            key={i}
-            className={`absolute w-2 h-2 rounded-full animate-float-particle opacity-30 ${
-              isDarkMode ? "bg-cyan-400" : "bg-purple-500"
-            }`}
-            style={{
-              left: `${Math.random() * 100}%`,
-              top: `${Math.random() * 100}%`,
-              animationDelay: `${Math.random() * 5}s`,
-              animationDuration: `${3 + Math.random() * 4}s`,
-            }}
-          />
-        ))}
-      </div>
-
-      <div className="relative z-10 max-w-4xl px-6 mx-auto text-center">
-        <div className="mb-8">
-          <div className="w-32 h-32 p-1 mx-auto mb-6 rounded-full bg-gradient-to-r from-cyan-400 to-purple-600">
-            <div
-              className={`w-full h-full rounded-full flex items-center justify-center ${
-                isDarkMode ? "bg-slate-900" : "bg-white"
               }`}
-            >
+            />
-              <img
+            <div className="text-center lg:text-left">
-                src="/mugshot.jpeg"
+              <h1 className={`text-5xl font-bold mb-4 bg-gradient-to-r bg-clip-text text-transparent transition-colors duration-300 ${
-                alt="Maaz's Avatar"
+                theme === 'dark' 
-                className="rounded-full"
+                  ? 'from-blue-300 to-indigo-300' 
-              />
+                  : 'from-blue-400 to-indigo-400'
+              }`}>
+                Maaz Khokhar
+              </h1>
+              <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 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
+                </div>
+                <div className="flex items-center gap-2">
+                  <Phone className="w-4 h-4" />
+                  (214) 732-2569
+                </div>
+                <div className="flex items-center gap-2">
+                  <MapPin className="w-4 h-4" />
+                  Dallas, TX
+                </div>
+              </div>
             </div>
           </div>
         </div>
-        <h1 className="mb-6 text-5xl font-bold text-transparent md:text-7xl bg-gradient-to-r from-cyan-400 via-purple-400 to-pink-400 bg-clip-text animate-gradient-text">
+      </section>
-          Hi! I'm Maaz
+  )
-        </h1>
-        <p
-          className={`text-xl md:text-2xl mb-8 leading-relaxed animate-fade-in-up ${textClasses}`}
-        >
-          A curious, ambitious, and multidisciplinary student passionate about
-          <span className="text-cyan-500 animate-pulse"> science</span>,
-          <span className="text-purple-500 animate-pulse"> technology</span>,
-          <span className="text-pink-500 animate-pulse"> leadership</span>, and
-          <span className="text-green-500 animate-pulse"> athletics</span>
-        </p>
-        <button
-          onClick={() => scrollToSection("about")}
-          className="px-8 py-4 font-medium text-white transition-all duration-300 transform rounded-full group bg-gradient-to-r from-cyan-500 to-purple-600 hover:from-cyan-600 hover:to-purple-700 hover:scale-105 hover:shadow-2xl hover:shadow-purple-500/25 animate-bounce-subtle"
-        >
-          Explore My Journey
-          <ChevronDown
-            className="inline ml-2 group-hover:animate-bounce"
-            size={20}
-          />
-        </button>
-      </div>
-
-      {/* Floating Elements */}
-      <div className="absolute top-20 left-10 animate-float">
-        <Code
-          className={isDarkMode ? "text-cyan-400" : "text-purple-600"}
-          size={40}
-        />
-      </div>
-      <div className="absolute top-40 right-20 animate-float-delayed">
-        <Trophy
-          className={isDarkMode ? "text-yellow-400" : "text-orange-500"}
-          size={35}
-        />
-      </div>
-      <div className="absolute bottom-20 left-20 animate-float">
-        <Rocket
-          className={isDarkMode ? "text-pink-400" : "text-purple-500"}
-          size={30}
-        />
-      </div>
-    </section>
-  );
 };
 
 export default HeroSection;

src/components/LeadershipSection.tsx

@@ -1,74 +1,99 @@
-import { Award, Star, Users } from "lucide-react";
+import { Users } from 'lucide-react';
+import { useTheme } from '../contexts/ThemeContext';
 
 interface LeadershipSectionProps {
-  isDarkMode: boolean;
+    isOutOfCollege?: boolean;
-  textClasses: string;
-  cardClasses: string;
 }
 
-const LeadershipSection = ({
+const LeadershipSection: React.FC<LeadershipSectionProps> = ({ isOutOfCollege = false }) => {
-  isDarkMode,
+    const { theme } = useTheme();
-  textClasses,
-  cardClasses,
-}: LeadershipSectionProps) => {
-  return (
-    <section
-      id="leadership"
-      className={`py-20 ${
-        isDarkMode
-          ? "bg-gradient-to-r from-purple-900/20 to-pink-900/20"
-          : "bg-gradient-to-r from-purple-100/60 to-pink-100/60"
-      }`}
-    >
-      <div className="max-w-6xl px-6 mx-auto">
-        <div className="mb-16 text-center">
-          <h2 className="mb-4 text-4xl font-bold text-transparent bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text">
-            📚 Leadership, Service & School
-          </h2>
-          <div className="w-24 h-1 mx-auto bg-gradient-to-r from-purple-400 to-pink-400"></div>
-        </div>
     
-        <div className="grid gap-8 md:grid-cols-3">
+    return (
-          <div
+        <section className="mb-16">
-            className={`${cardClasses} rounded-xl p-6 border border-white/10 hover:border-purple-400/50 transition-all duration-300 transform hover:scale-105`}
+          <div className="flex items-center gap-3 mb-8">
-          >
+            <Users className={`w-8 h-8 transition-colors duration-300 ${
-            <Award className="mb-4 text-purple-400" size={40} />
+              theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'
-            <h3 className="mb-3 text-xl font-bold text-purple-400">
+            }`} />
-              NJHS Inductee
+            <h2 className={`text-3xl font-bold transition-colors duration-300 ${
-            </h3>
+              theme === 'dark' ? 'text-white' : 'text-slate-800'
-            <p className={textClasses}>
+            }`}>
-              National Junior Honor Society recognition for academic excellence,
+              Leadership & Service
-              leadership, and community commitment.
+            </h2>
-            </p>
           </div>
-
+          <div className={`rounded-2xl shadow-lg p-8 transition-all duration-300 ${
-          <div
+            theme === 'dark' ? 'bg-slate-800' : 'bg-white'
-            className={`${cardClasses} rounded-xl p-6 border border-white/10 hover:border-pink-400/50 transition-all duration-300 transform hover:scale-105`}
+          }`}>
-          >
+            <div className="grid gap-8 md:grid-cols-2">
-            <Users className="mb-4 text-pink-400" size={40} />
+              <div>
-            <h3 className="mb-3 text-xl font-bold text-pink-400">Tutoring</h3>
+                <h3 className={`text-xl font-semibold mb-6 transition-colors duration-300 ${
-            <p className={textClasses}>
+                  theme === 'dark' ? 'text-white' : 'text-slate-800'
-              Volunteered regularly to tutor peers in math, science, and
+                }`}>
-              programming—fostering academic growth in others.
+                  Leadership Roles
-            </p>
+                </h3>
+                <div className="space-y-4">
+                  <div>
+                    <h4 className="font-semibold transition-colors duration-300 text-slate-700 dark:text-slate-200">
+                      NJHS Inductee
+                    </h4>
+                    <p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
+                      National Junior Honor Society Inductee • 2024
+                    </p>
+                    <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 transition-colors duration-300 text-slate-700 dark:text-slate-200">
+                      "Fabulous Falcon" Award
+                    </h4>
+                    <p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
+                      Forestwood Middle School • 2024
+                    </p>
+                    <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 transition-colors duration-300 text-slate-700 dark:text-slate-200">
+                      Peer Learning Mentor
+                    </h4>
+                    <p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
+                      Forestwood Middle School • 2023-2024
+                    </p>
+                    <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>
+                  </div>
+                </div>
+              </div>
+              {isOutOfCollege && (
+                <div>
+                  <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 transition-colors duration-300 text-slate-700 dark:text-slate-200">
+                        Code for Good Volunteer
+                      </h4>
+                      <p className="transition-colors duration-300 text-slate-600 dark:text-slate-300">
+                        2020-Present • 500+ hours
+                      </p>
+                      <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>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
           </div>
-
+        </section>
-          <div
+    );
-            className={`${cardClasses} rounded-xl p-6 border border-white/10 hover:border-yellow-400/50 transition-all duration-300 transform hover:scale-105`}
-          >
-            <Star className="mb-4 text-yellow-400" size={40} />
-            <h3 className="mb-3 text-xl font-bold text-yellow-400">
-              Fabulous Falcon Award
-            </h3>
-            <p className={textClasses}>
-              Honored for outstanding school spirit, positive contributions to
-              campus life, and consistent character.
-            </p>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
 };
 
 export default LeadershipSection;

src/components/ReviewSection.tsx

@@ -0,0 +1,88 @@
+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;
+    reviews: Review[];
+    renderStars: (rating: number) => JSX.Element[];
+}
+
+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 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 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 gap-6 md:grid-cols-2 lg:grid-cols-3">
+            {reviews.length > 1 ? (
+              reviews.map((review, index) => (
+                <div
+                  key={index}
+                  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 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 transition-colors duration-300 ${
+                        theme === 'dark' ? 'text-white' : 'text-slate-800'
+                      }`}>
+                        {review.name}
+                      </h3>
+                      <p className={`text-sm transition-colors duration-300 ${
+                        theme === 'dark' ? 'text-slate-400' : 'text-slate-600'
+                      }`}>
+                        {review.position}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center mb-4">
+                    {renderStars(review.rating)}
+                  </div>
+                  <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 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>
+            )}
+          </div>
+        </section>
+    );
+};
+
+export default ReviewSection;

src/components/ReviewsSection.tsx

@@ -1,207 +0,0 @@
-import { useEffect, useState } from "react";
-import { fetchReviews, addReview } from "../reviewsApi";
-import type { Review } from "../reviewsApi";
-import { Star } from "lucide-react";
-
-const ReviewsSection = ({
-  cardClasses,
-  textClasses,
-  isDarkMode,
-}: {
-  cardClasses: string;
-  textClasses: string;
-  isDarkMode: boolean;
-}) => {
-  const [reviews, setReviews] = useState<Review[]>([]);
-  const [name, setName] = useState("");
-  const [message, setMessage] = useState("");
-  const [rating, setRating] = useState(5);
-  const [hoverRating, setHoverRating] = useState(0);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-  const [success, setSuccess] = useState("");
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
-  useEffect(() => {
-    fetchReviews().then(setReviews);
-  }, []);
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setLoading(true);
-    setError("");
-    setSuccess("");
-    try {
-      await addReview({ name, message, rating });
-      setSuccess("Review submitted!");
-      setName("");
-      setMessage("");
-      setRating(5);
-      setReviews(await fetchReviews());
-      // Close modal immediately after successful submission
-      setIsModalOpen(false);
-    } catch (err) {
-      setError("Failed to submit review.");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const openModal = () => {
-    setIsModalOpen(true);
-    setError("");
-    setSuccess("");
-  };
-
-  return (
-    <section id="reviews" className="py-20">
-      <div className="max-w-3xl mx-auto px-4">
-        <h2 className="text-3xl font-bold mb-8 text-center text-transparent bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text">
-          Reviews
-        </h2>
-
-        <div className="flex justify-center mb-8">
-          <button
-            onClick={openModal}
-            className="px-6 py-3 rounded-lg bg-gradient-to-r from-cyan-400 to-purple-400 text-white font-semibold shadow-lg hover:from-purple-400 hover:to-cyan-400 transition-colors transform hover:scale-105 duration-500"
-          >
-            Add Your Review
-          </button>
-        </div>
-
-        {/* Review Modal */}
-        {isModalOpen && (
-          <div className="fixed inset-0 flex items-center justify-center z-50 bg-black/50 backdrop-blur-sm">
-            <div
-              className={`relative w-full max-w-md p-6 rounded-xl border ${cardClasses} animate-fade-in-up`}
-            >
-              <button
-                onClick={() => setIsModalOpen(false)}
-                className="absolute top-4 right-4 text-gray-400 hover:text-gray-600"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <line x1="18" y1="6" x2="6" y2="18"></line>
-                  <line x1="6" y1="6" x2="18" y2="18"></line>
-                </svg>
-              </button>
-              <h3 className="text-xl font-bold mb-4 text-transparent bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text">
-                Share Your Review
-              </h3>{" "}
-              <form onSubmit={handleSubmit} className="flex flex-col gap-4">
-                <input
-                  className={`p-3 rounded border focus:outline-none ${
-                    isDarkMode
-                      ? "bg-slate-800 text-white border-white/10"
-                      : "bg-white text-gray-900 border-gray-300"
-                  }`}
-                  placeholder="Your Name"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  required
-                />
-                <div className="mb-2">
-                  <label className="block text-sm mb-1">Your Rating</label>
-                  <div className="flex gap-1">
-                    {[1, 2, 3, 4, 5].map((star) => (
-                      <button
-                        key={star}
-                        type="button"
-                        onClick={() => setRating(star)}
-                        onMouseEnter={() => setHoverRating(star)}
-                        onMouseLeave={() => setHoverRating(0)}
-                        className="transition-transform hover:scale-110"
-                      >
-                        <Star
-                          size={24}
-                          fill={
-                            (hoverRating || rating) >= star ? "#38BDF8" : "none"
-                          }
-                          color={
-                            (hoverRating || rating) >= star
-                              ? "#38BDF8"
-                              : "#9CA3AF"
-                          }
-                          className="transition-colors duration-200"
-                        />
-                      </button>
-                    ))}
-                  </div>
-                </div>
-                <textarea
-                  className={`p-3 rounded border focus:outline-none ${
-                    isDarkMode
-                      ? "bg-slate-800 text-white border-white/10"
-                      : "bg-white text-gray-900 border-gray-300"
-                  }`}
-                  placeholder="Your Review"
-                  value={message}
-                  onChange={(e) => setMessage(e.target.value)}
-                  required
-                  rows={3}
-                />
-                <button
-                  type="submit"
-                  className="px-6 py-2 rounded bg-gradient-to-r from-cyan-400 to-purple-400 text-white font-semibold shadow-md hover:from-purple-400 hover:to-cyan-400 transition-colors duration-500"
-                  disabled={loading}
-                >
-                  {loading ? "Submitting..." : "Submit Review"}
-                </button>
-                {error && <p className="text-red-500 text-sm mt-2">{error}</p>}
-                {success && (
-                  <p className="text-green-500 text-sm mt-2">{success}</p>
-                )}
-              </form>
-            </div>
-          </div>
-        )}
-
-        <div className="space-y-6">
-          {reviews.length === 0 && (
-            <p className={textClasses + " text-center"}>
-              No reviews yet. Be the first!
-            </p>
-          )}
-          {reviews.map((review) => (
-            <div
-              key={review.id}
-              className={`p-5 rounded-xl border ${cardClasses} transition-all duration-300 transform hover:scale-105 hover:shadow-xl hover:border-cyan-400/70`}
-            >
-              <div className="flex items-center justify-between mb-2">
-                <div className="flex items-center">
-                  <span className="font-semibold mr-2 text-cyan-400">
-                    {review.name}
-                  </span>
-                  <span className="text-xs text-gray-400">
-                    {review.createdAt?.toDate?.().toLocaleString?.() || ""}
-                  </span>
-                </div>
-                <div className="flex">
-                  {Array.from({ length: 5 }, (_, i) => (
-                    <Star
-                      key={i}
-                      size={16}
-                      fill={i < (review.rating || 5) ? "#38BDF8" : "none"}
-                      color={i < (review.rating || 5) ? "#38BDF8" : "#9CA3AF"}
-                    />
-                  ))}
-                </div>
-              </div>
-              <p className={textClasses}>{review.message}</p>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default ReviewsSection;

src/components/TechSection.tsx

@@ -1,166 +1,199 @@
-import { Code, Trophy, Cloud } from "lucide-react";
+import { Briefcase } from "lucide-react";
+import { useTheme } from '../contexts/ThemeContext';
 
 interface TechSectionProps {
-  isDarkMode: boolean;
+    isOutOfCollege?: boolean;
-  textClasses: string;
-  cardClasses: string;
 }
 
-const TechSection = ({
+const TechSection: React.FC<TechSectionProps> = ({ isOutOfCollege = false }) => {
-  isDarkMode,
+    const { theme } = useTheme();
-  textClasses,
-  cardClasses,
-}: TechSectionProps) => {
-  return (
-    <section id="tech" className="py-20">
-      <div className="max-w-6xl px-6 mx-auto">
-        <div className="mb-16 text-center">
-          <h2 className="mb-4 text-4xl font-bold text-transparent bg-gradient-to-r from-cyan-400 to-green-400 bg-clip-text">
-            ⚙️ Tech, Innovation & Projects
-          </h2>
-          <div className="w-24 h-1 mx-auto bg-gradient-to-r from-cyan-400 to-green-400"></div>
-        </div>
     
-        <div className="space-y-8">
+    return (
-          {" "}
+        <section className="mb-16">
-          <div
+          <div className="flex items-center gap-3 mb-8">
-            className={`${
+            <Briefcase className={`w-8 h-8 transition-colors duration-300 ${
-              isDarkMode
+              theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'
-                ? "bg-gradient-to-r from-cyan-900/20 to-blue-900/20"
+            }`} />
-                : "bg-gradient-to-r from-cyan-100/40 to-blue-100/40"
+            <h2 className={`text-3xl font-bold transition-colors duration-300 ${
-            } backdrop-blur-lg rounded-xl p-8 border ${
+              theme === 'dark' ? 'text-white' : 'text-slate-800'
-              isDarkMode ? "border-cyan-400/30" : "border-cyan-300/50"
+            }`}>
-            } transition-all duration-300 transform hover:scale-105 hover:shadow-xl hover:border-cyan-400/70`}
+              Technology & Innovation
-          >
+            </h2>
-            <div className="flex items-center mb-4">
-              <Code className="mr-3 text-cyan-400" size={30} />
-              <a
-                className="text-2xl font-bold text-cyan-400"
-                href="https://ialfm-attendance.netlify.app/"
-              >
-                Sunday School Attendance App
-              </a>
-              <span className="px-3 py-1 ml-3 text-sm text-green-400 rounded-full bg-green-500/20">
-                In Production
-              </span>
-            </div>
-            <p className={`${textClasses} mb-4`}>
-              Architecting and building a fully functional, community-oriented
-              app, designed for a local community center. Handling everything
-              from UI/UX design to back-end integration.
-            </p>
-            <div className="flex flex-wrap gap-2">
-              {["React Native", "UI/UX Design", "Backend Integration"].map(
-                (tech) => (
-                  <span
-                    key={tech}
-                    className="px-3 py-1 text-sm rounded-full bg-cyan-400/20 text-cyan-400"
-                  >
-                    {tech}
-                  </span>
-                )
-              )}
-            </div>
-          </div>
-          <div
-            className={`${
-              isDarkMode
-                ? "bg-gradient-to-r from-blue-900/20 to-indigo-900/20"
-                : "bg-gradient-to-r from-blue-100/40 to-indigo-100/40"
-            } backdrop-blur-lg rounded-xl p-8 border ${
-              isDarkMode ? "border-blue-400/30" : "border-blue-300/50"
-            } transition-all duration-300 transform hover:scale-105 hover:shadow-xl hover:border-blue-400/70`}
-          >
-            <div className="flex items-center mb-4">
-              <Cloud className="mr-3 text-blue-400" size={30} />
-              <a
-                className="text-2xl font-bold text-blue-400"
-                href="https://sunscope.netlify.app"
-              >
-                Sunscope
-              </a>
-              <span className="px-3 py-1 ml-3 text-sm text-blue-400 rounded-full bg-blue-500/20">
-                Weather Application
-              </span>
-            </div>
-            <p className={`${textClasses} mb-4`}>
-              Developed a weather application that provides real-time weather
-              updates, forecasts, and alerts using WeatherAPI's API, showcasing
-              my skills in API integration and responsive design.
-            </p>
-          </div>
-          <div
-            className={`${
-              isDarkMode
-                ? "bg-gradient-to-r from-purple-900/20 to-pink-900/20"
-                : "bg-gradient-to-r from-purple-100/40 to-pink-100/40"
-            } backdrop-blur-lg rounded-xl p-8 border ${
-              isDarkMode ? "border-purple-400/30" : "border-purple-300/50"
-            } transition-all duration-300 transform hover:scale-105 hover:shadow-xl hover:border-purple-400/70`}
-          >
-            <div className="flex items-center mb-4">
-              <Trophy className="mr-3 text-purple-400" size={30} />
-              <h3 className="text-2xl font-bold text-purple-400">
-                Competitive Robotics
-              </h3>
-              <span className="px-3 py-1 ml-3 text-sm text-yellow-400 rounded-full bg-yellow-500/20">
-                Award Winner
-              </span>
-            </div>{" "}
-            <p className={`${textClasses} mb-4`}>
-              Core contributor on an RC Robotics Team, earned the "Plethora of
-              Features" award by integrating remarkable range of
-              capabilities—demonstrating versatility and innovation.
-            </p>
           </div>
           <div className="grid gap-6 md:grid-cols-2">
-            {" "}
+            <div className={`rounded-2xl shadow-lg p-6 transition-all duration-300 ${
-            <div
+              theme === 'dark' ? 'bg-slate-800' : 'bg-white'
-              className={`${cardClasses} rounded-xl p-6 border border-white/10 transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:border-green-400/70`}
+            }`}>
-            >
+              <h3 className={`text-xl font-semibold mb-4 transition-colors duration-300 ${
-              <h4 className="mb-3 text-lg font-bold text-green-400">
+                theme === 'dark' ? 'text-white' : 'text-slate-800'
-                Programming Skills
+              }`}>
-              </h4>
+                Featured Projects
-              <div className="flex flex-wrap gap-2">
+              </h3>
-                {[
+              <div className="space-y-4">
-                  "Python",
+                <div className={`border-l-4 pl-4 transition-colors duration-300 ${
-                  "React",
+                  theme === 'dark' ? 'border-blue-400' : 'border-blue-500'
-                  "React Native",
+                }`}>
-                  "Tailwind CSS",
+                  <a
-                  "Javascript",
+                    href="https://ialfm-attendance.netlify.app"
-                  "APIs",
+                    className={`font-semibold transition-colors duration-300 ${
-                  "AI Integration",
+                      theme === 'dark' 
-                  "UI/UX Design",
+                        ? 'text-slate-200 hover:text-blue-400' 
-                  "Docker Containers",
+                        : 'text-slate-700 hover:text-blue-600'
-                  "Git",
+                    }`}
-                  "Virtualization",
-                ].map((skill) => (
-                  <span
-                    key={skill}
-                    className="px-3 py-1 text-sm text-green-400 rounded-full bg-green-400/20 transition-all duration-300 hover:bg-green-400/40 hover:scale-105 inline-block"
                   >
-                    {skill}
+                    Local School Attendance App
-                  </span>
+                  </a>
-                ))}
+                  <p className={`text-sm mb-2 transition-colors duration-300 ${
+                    theme === 'dark' ? 'text-slate-400' : 'text-slate-600'
+                  }`}>
+                    Lead Developer | 2025
+                  </p>
+                  <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.
+                    The application continues to serve the organization daily,
+                    demonstrating successful long-term solution delivery.
+                  </p>
+                </div>
+                {isOutOfCollege && (
+                  <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={`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 pl-4 transition-colors duration-300 ${
+                  theme === 'dark' ? 'border-purple-400' : 'border-purple-500'
+                }`}>
+                  <a
+                    href="https://i-dazzle.netlify.app"
+                    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 mb-2 transition-colors duration-300 ${
+                    theme === 'dark' ? 'text-slate-400' : 'text-slate-600'
+                  }`}>
+                    Technical Lead | 2025
+                  </p>
+                  <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
+                    responsive design, secure payment processing, and inventory
+                    management features to support business growth and brand
+                    independence.
+                  </p>
+                </div>
+              </div>
+            </div>
+            <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 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 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>
+                    ))}
+                  </div>
+                </div>
+                <div>
+                  <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">
+                    {[
+                      "React",
+                      "React Native",
+                      "Docker",
+                      "React Native",
+                      "TailwindCSS",
+                    ].map((skill) => (
+                      <span
+                        key={skill}
+                        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>
+                    ))}
+                  </div>
+                </div>
+                {isOutOfCollege && (
+                  <div>
+                    <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 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>
+                      ))}
+                    </div>
+                  </div>
+                )}
               </div>
-            </div>{" "}
-            <div
-              className={`${cardClasses} rounded-xl p-6 border border-white/10 transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:border-orange-400/70`}
-            >
-              <h4 className="mb-3 text-lg font-bold text-orange-400">
-                Striker Competition
-              </h4>
-              <p className={`${textClasses}`}>
-                Engineered a realistic operating room prototype showcased at the
-                Stryker Competition, demonstrating advanced surgical workflow
-                design and innovation.
-              </p>
             </div>
           </div>
-        </div>
+        </section>
-      </div>
+    );
-    </section>
-  );
 };
 
 export default TechSection;

src/components/UniqueSection.tsx

@@ -0,0 +1,89 @@
+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 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={`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 gap-6 md:grid-cols-3">
+              <div className="text-center">
+                <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 transition-colors duration-300 ${
+                  theme === 'dark' ? 'text-white' : 'text-slate-800'
+                }`}>
+                  Innovation Driver
+                </h3>
+                <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 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 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 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 transition-colors duration-300 ${
+                  theme === 'dark' ? 'text-white' : 'text-slate-800'
+                }`}>
+                  Results Focused
+                </h3>
+                <p className={`text-sm transition-colors duration-300 ${
+                  theme === 'dark' ? 'text-slate-300' : 'text-slate-600'
+                }`}>
+                  Delivering measurable impact consistently
+                </p>
+              </div>
+            </div>
+          </div>
+        </section>
+    );
+};
+
+export default UniqueSection;

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>
+  );
+};

src/index.css

@@ -1 +1,51 @@
 @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);
+}

src/main.tsx

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

src/reviewsApi.ts

@@ -1,24 +1,20 @@
 import { db } from '../firebase';
-import { collection, getDocs, addDoc, Timestamp } from 'firebase/firestore';
+import { collection, getDocs, addDoc } from 'firebase/firestore';
 
 export type Review = {
-  id?: string;
   name: string;
-  message: string;
   rating: number;
-  createdAt?: Timestamp;
+  position: string;
+  text: string;
 };
 
 const reviewsCollection = collection(db, 'reviews');
 
 export async function fetchReviews(): Promise<Review[]> {
   const snapshot = await getDocs(reviewsCollection);
-  return snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() } as Review));
+  return snapshot.docs.map(doc => doc.data() as Review);
 }
 
-export async function addReview(review: Omit<Review, 'id' | 'createdAt'>): Promise<void> {
+export async function addReview(review: Review): Promise<void> {
-  await addDoc(reviewsCollection, {
+  await addDoc(reviewsCollection, review);
-    ...review,
-    createdAt: Timestamp.now(),
-  });
 }

tailwind.config.js

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