Implement theme toggle and accessibility updates

my-portfolio/src/App.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import './App.css'
 import { LoadingScreen}  from "./components/LoadingScreen.jsx";
 import "./index.css"
@@ -10,23 +10,43 @@ import { Projects } from './components/sections/Projects.jsx';
 import { Contact } from './components/sections/Contact.jsx';
 
 function App() {
-  const [isLoaded, setIsLoaded] = useState(false); 
-  const [menuOpen, setMenuOpen] = useState(false); 
-  return( 
-  <>
-    {!isLoaded && <LoadingScreen onComplete={()=> setIsLoaded(true)}/>}
-      <div 
-      className={`min-h-screen transition-opacity duration-700 ${
-        isLoaded ? "opacity-100" : "opacity-0" } bg-black text-gray-100`}
-        >
-          <Navbar menuOpen ={menuOpen} setMenuOpen ={setMenuOpen}/>
-          <MobileMenu menuOpen ={menuOpen} setMenuOpen ={setMenuOpen}/>
-          <Home/>
-          <About/>
-          <Projects/>
-          <Contact/>
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [theme, setTheme] = useState('dark');
+
+  useEffect(() => {
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [theme]);
+
+  return (
+    <>
+      {!isLoaded && <LoadingScreen onComplete={() => setIsLoaded(true)} />}
+      <div
+        className={`min-h-screen transition-opacity duration-700 ${
+          isLoaded ? 'opacity-100' : 'opacity-0'
+        } bg-white text-gray-800 dark:bg-black dark:text-gray-100`}
+      >
+        <header>
+          <Navbar
+            menuOpen={menuOpen}
+            setMenuOpen={setMenuOpen}
+            theme={theme}
+            setTheme={setTheme}
+          />
+          <MobileMenu menuOpen={menuOpen} setMenuOpen={setMenuOpen} />
+        </header>
+        <main>
+          <Home />
+          <About />
+          <Projects />
+          <Contact />
+        </main>
       </div>
-  </>
+    </>
   );
 }
 

my-portfolio/src/components/LoadingScreen.jsx

@@ -26,7 +26,7 @@ export const LoadingScreen = ( {onComplete} ) => { //Make loading animation
     return(
 
         //LOADING BAR SETTINGS:
-     <div className="fixed inset-0 z-50 bg-black text-gray-100 flex flex-col items-center justify-center">
+     <div className="fixed inset-0 z-50 bg-white text-gray-800 dark:bg-black dark:text-gray-100 flex flex-col items-center justify-center">
         <div className="mb-4 text-[2.125rem] font-mono font-bold mx-auto">
             {text} <span className="animate-blink ml-1">| </span> 
         </div>

my-portfolio/src/components/MobileMenu.jsx

@@ -1,11 +1,9 @@
-import { useEffect } from "react"
-
-export const MobileMenu= ({menuOpen, setMenuOpen}) =>{
+export const MobileMenu = ({ menuOpen, setMenuOpen }) => {
 
     return (
         //This is the "Burger" menu tab:
 
-        <div className={`fixed top-0 left-0 w-full bg-[rgba(10,10,10,0.8)] z-40 flex flex-col items-center justify-center
+        <div className={`fixed top-0 left-0 w-full bg-white/90 dark:bg-[rgba(10,10,10,0.8)] z-40 flex flex-col items-center justify-center
                         transition-all duration-300 ease-in-out
 
                         ${
@@ -17,14 +15,14 @@ export const MobileMenu= ({menuOpen, setMenuOpen}) =>{
 
             <button 
                 onClick={() => setMenuOpen(false)} 
-                className="absolute top-6 right-6 text-white text-3xl focus:outline-none cursor-pointer"
+                className="absolute top-6 right-6 text-black dark:text-white text-3xl focus:outline-none cursor-pointer"
                 aria-label ="Close Menu"
                 >
                 &times;
             </button>
                 <a href="#home"
                 onClick={() => setMenuOpen(false)}
-                 className={`text-2xl font-semibold text-white my-4 transform transition-all duration-300 delay-100
+                 className={`text-2xl font-semibold text-black dark:text-white my-4 transform transition-all duration-300 delay-100
                             ${menuOpen 
                                 ? "opacity-100 translate-y-0"
                                 : "opacity-0 translate-y-5" 
@@ -35,7 +33,7 @@ export const MobileMenu= ({menuOpen, setMenuOpen}) =>{
 
                 <a href="#about"
                 onClick={() => setMenuOpen(false)}
-                className={`text-2xl font-semibold text-white my-4 transform transition-all duration-300 delay-100
+                className={`text-2xl font-semibold text-black dark:text-white my-4 transform transition-all duration-300 delay-100
                     ${menuOpen 
                         ? "opacity-100 translate-y-0"
                         : "opacity-0 translate-y-5" 
@@ -46,7 +44,7 @@ export const MobileMenu= ({menuOpen, setMenuOpen}) =>{
 
                 <a href="#projects"
                 onClick={() => setMenuOpen(false)}
-                className={`text-2xl font-semibold text-white my-4 transform transition-all duration-300 delay-100
+                className={`text-2xl font-semibold text-black dark:text-white my-4 transform transition-all duration-300 delay-100
                     ${menuOpen 
                         ? "opacity-100 translate-y-0"
                         : "opacity-0 translate-y-5" 
@@ -57,7 +55,7 @@ export const MobileMenu= ({menuOpen, setMenuOpen}) =>{
 
                 <a href="#contact"
                 onClick={() => setMenuOpen(false)}
-                className={`text-2xl font-semibold text-white my-4 transform transition-all duration-300 delay-100
+                className={`text-2xl font-semibold text-black dark:text-white my-4 transform transition-all duration-300 delay-100
                     ${menuOpen 
                         ? "opacity-100 translate-y-0"
                         : "opacity-0 translate-y-5" 

my-portfolio/src/components/Navbar.jsx

@@ -1,51 +1,67 @@
-import { useEffect } from "react"
+import { useEffect } from "react";
 
-export const Navbar= ({menuOpen, setMenuOpen}) =>{
+export const Navbar = ({ menuOpen, setMenuOpen, theme, setTheme }) => {
+  useEffect(() => {
+    document.body.style.overflow = menuOpen ? "hidden" : "";
+  }, [menuOpen]);
 
-    useEffect(() =>{
-        document.body.style.overflow = menuOpen ? "hidden" : ""
-    }, [menuOpen]); //If state of menu changes
+  return (
+    <nav className="fixed top-0 w-full z-40 bg-white/80 dark:bg-[rgba(10,10,10,0.8)] backdrop-blur-lg border-b border-gray-200 dark:border-white/10 shadow-lg">
+      <div className="max-w-5xl mx-auto px-4">
+        <div className="flex justify-between items-center h-16">
+          <a
+            href="#home"
+            className="font-mono text-xl font-bold text-black dark:text-white hover:scale-105 transition-transform duration-300"
+          >
+            {"<"}Amit<span className="text-blue-500">.Yehoshaphat{" >"}</span>
+          </a>
 
-    return <nav className="fixed top-0 w-full z-40 bg-[rgba(10,10,10,0.8)]
-    backdrop-blur-lg border-b border-white/10 shadow-lg">
-        <div className="max-w-5xl mx-auto px-4">
-            <div className="flex justify-between items-center h-16">
-                <a href="#home" className="font-mono text-xl font-bold text-white hover:scale-105 transition-transform duration-300">
-                    {" "}
-                    {"<"}Amit<span className="text-blue-500">.Yehoshaphat{">"}</span> 
-                    </a>
+          <div className="flex items-center">
+            <button
+              className="w-7 h-5 relative cursor-pointer z-40 md:hidden text-black dark:text-white text-2xl"
+              aria-label="Toggle menu"
+              onClick={() => setMenuOpen((prev) => !prev)}
+            >
+              &#9776;
+            </button>
 
-                    <button
-                        className="w-7 h-5 relative cursor-pointer z-40 md:hidden text-white text-2xl"
-                        aria-label="Toggle menu"
-                        onClick={() => setMenuOpen((prev) => !prev)}
-                        >
-                         &#9776;
-                    </button>
+            <button
+              onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+              className="ml-4 text-xl text-black dark:text-white"
+              aria-label="Toggle theme"
+            >
+              {theme === "dark" ? "☀️" : "🌙"}
+            </button>
+          </div>
 
-
-                    <div className="hidden md:flex items-center space-x-8">
-                        <a href="#home"
-                         className="text-gray-300 hover:text-white transition-colors hover:scale-110 transition-transform duration-300 ">
-                            Home
-                        </a>
-
-                        <a href="#about"
-                         className="text-gray-300 hover:text-white transition-colors hover:scale-110 transition-transform duration-300 ">
-                            About
-                        </a>
-
-                        <a href="#projects"
-                         className="text-gray-300 hover:text-white transition-colors hover:scale-110 transition-transform duration-300 ">
-                            Projects
-                        </a>
-
-                        <a href="#contact"
-                         className="text-gray-300 hover:text-white transition-colors hover:scale-110 transition-transform duration-300 ">
-                            Contact
-                        </a>
-                    </div>
-            </div>
+          <div className="hidden md:flex items-center space-x-8">
+            <a
+              href="#home"
+              className="text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white transition-colors hover:scale-110 transition-transform duration-300"
+            >
+              Home
+            </a>
+            <a
+              href="#about"
+              className="text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white transition-colors hover:scale-110 transition-transform duration-300"
+            >
+              About
+            </a>
+            <a
+              href="#projects"
+              className="text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white transition-colors hover:scale-110 transition-transform duration-300"
+            >
+              Projects
+            </a>
+            <a
+              href="#contact"
+              className="text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white transition-colors hover:scale-110 transition-transform duration-300"
+            >
+              Contact
+            </a>
+          </div>
         </div>
+      </div>
     </nav>
-}
+  );
+};

my-portfolio/src/components/sections/About.jsx

@@ -16,7 +16,7 @@ export const About = () =>{
                     Just a bit more:
                 </h2>
                 <div className="glass rounded-xl p-8 border-white/10 border hover:-translate-y-1 transition-all">
-                    <p className="text-gray-200 mb-5 text-3xl text-center font-bold">
+                    <p className="text-gray-700 dark:text-gray-200 mb-5 text-3xl text-center font-bold">
                         Less noise, more purpose — that's my motto.
                     </p>
 
@@ -108,7 +108,7 @@ export const About = () =>{
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
                             <div className="p-6 rounded-xl border border-white/10 hover:-translate-y-1 hover:border-blue-500/30 hover:shadow-[0_2px_8px_rgba(59,130,246,0.2)] transition">
                                 <h3 className="text-xl font-bold mb-4">🎓Education:</h3>
-                                    <ul className="list-disc list-inside text-gray-300 space-y-2">
+                                    <ul className="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2">
                                         <li>
                                             <strong>Working towards B.Sc in Computer Science</strong> - Holon Institute of Technology (2023 - 2026)
                                         </li>
@@ -123,7 +123,7 @@ export const About = () =>{
 
                             <div className="p-6 rounded-xl border border-white/10 hover:-translate-y-1 hover:border-blue-500/30 hover:shadow-[0_2px_8px_rgba(59,130,246,0.2)] transition">
                                 <h3 className="text-xl font-bold mb-4">📂Experience:</h3>
-                                    <div className="space-y-4 text-gray-300">
+                                    <div className="space-y-4 text-gray-700 dark:text-gray-300">
                                         <div>
                                             <h4 className="font-bold"> Operational Digital Communication Specialist(2020 - Reserves)</h4>
                                             <p>

my-portfolio/src/components/sections/Contact.jsx

@@ -51,7 +51,7 @@ export const Contact =() =>{
                             autoComplete="name"
                             aria-label="Your Name"
                             value ={formData.name}
-                            className="w-full bg-white/5 border border-white/10 rounded px-4 py-3 text-white transition focus:outline-none focus:border-blue-500 focus:bg-blue-500/5"
+                            className="w-full bg-black/5 dark:bg-white/5 border border-gray-300 dark:border-white/10 rounded px-4 py-3 text-gray-800 dark:text-white transition focus:outline-none focus:border-blue-500 focus:bg-blue-500/5"
                             placeholder="Your name"
                             onChange ={(e) => setFormData({ ...formData, name: e.target.value})}/>
                         </div>
@@ -63,7 +63,7 @@ export const Contact =() =>{
                             autoComplete="email"
                             aria-label="Your Email"
                             value ={formData.email}
-                            className="w-full bg-white/5 border border-white/10 rounded px-4 py-3 text-white transition focus:outline-none focus:border-blue-500 focus:bg-blue-500/5"
+                            className="w-full bg-black/5 dark:bg-white/5 border border-gray-300 dark:border-white/10 rounded px-4 py-3 text-gray-800 dark:text-white transition focus:outline-none focus:border-blue-500 focus:bg-blue-500/5"
                             placeholder="example@gmail.com"
                             onChange ={(e) => setFormData({ ...formData, email: e.target.value})}/>
                         </div>
@@ -77,7 +77,7 @@ export const Contact =() =>{
                             aria-label="Your Message"
                             value ={formData.message}
                             rows={4}
-                            className="w-full bg-white/5 border border-white/10 rounded px-4 py-3 text-white transition focus:outline-none focus:border-blue-500 focus:bg-blue-500/5"
+                            className="w-full bg-black/5 dark:bg-white/5 border border-gray-300 dark:border-white/10 rounded px-4 py-3 text-gray-800 dark:text-white transition focus:outline-none focus:border-blue-500 focus:bg-blue-500/5"
                             placeholder="Your Message here"
                             onChange ={(e) => setFormData({ ...formData, message: e.target.value})}/>
                         </div>

my-portfolio/src/components/sections/Home.jsx

@@ -19,7 +19,7 @@ export const Home = () => {
                     Hi, I'm Amit Yehoshaphat
                 </h1>
 
-                <p className="text-gray-100 text-lg max-w-2xl mx-auto text-center mb-8">
+                <p className="text-gray-700 dark:text-gray-100 text-lg max-w-2xl mx-auto text-center mb-8">
                     I'm a <span className="text-blue-400 font-semibold"> full-stack developer</span> and 
                     <span className="text-blue-400 font-semibold"> computer science student</span> who loves building 
                     <span className="text-blue-400 font-semibold"> impactful software</span>.

my-portfolio/src/components/sections/Projects.jsx

@@ -17,7 +17,7 @@ export const Projects = () => {
                         hover:shadow-[0_2px_8px_rgba(59,130,246,0.2)] transition-all duration-300">
                 <RevealOnScroll>
                 <h3 className="text-xl font-bold mb-2 group-hover:text-blue-400 transition-colors">🤖 Self analyzing Discord bot:</h3>
-                    <p className="text-gray-400 mb-4 break-words">A Discord bot that fetches and analyzes personal TFT match data using Riot’s API.  
+                    <p className="text-gray-700 dark:text-gray-400 mb-4 break-words">A Discord bot that fetches and analyzes personal TFT match data using Riot’s API.
                         Built with Python and Requests for API integration, and leverages machine learning logic to detect patterns in player performance.  
                         Includes a user-friendly interface within Discord for real-time feedback, insights, and match history summaries.
                         </p>
@@ -47,7 +47,7 @@ export const Projects = () => {
                             hover:shadow-[0_2px_8px_rgba(59,130,246,0.2)] transition-all duration-300">
                 <RevealOnScroll>
                 <h3 className="text-xl font-bold mb-2 group-hover:text-blue-400 transition-colors">🎮 2D shooting game:</h3>
-                    <p className="text-gray-400 mb-4 break-words">A 2D top-down shooter game built with Python and Pygame.  
+                    <p className="text-gray-700 dark:text-gray-400 mb-4 break-words">A 2D top-down shooter game built with Python and Pygame.
                         Designed using Object-Oriented Programming to manage player movement, enemy logic, bullet physics, and vector-based aiming.  
                         The game features custom UI elements, sprite animations, and responsive controls for a smooth arcade-style experience.
                     </p>
@@ -77,7 +77,7 @@ export const Projects = () => {
                             hover:shadow-[0_2px_8px_rgba(59,130,246,0.2)] transition-all duration-300">
                 <RevealOnScroll>
                 <h3 className="text-xl font-bold mb-2 group-hover:text-blue-400 transition-colors">🖥 Portfolio website:</h3>
-                    <p className="text-gray-400 mb-4 break-words">A modern and responsive portfolio website built to showcase my skills, projects, and experience as a developer. Designed with a focus on clean aesthetics and smooth animations, the site highlights my proficiency in React, TailwindCSS, and integration with services like EmailJS.
+                    <p className="text-gray-700 dark:text-gray-400 mb-4 break-words">A modern and responsive portfolio website built to showcase my skills, projects, and experience as a developer. Designed with a focus on clean aesthetics and smooth animations, the site highlights my proficiency in React, TailwindCSS, and integration with services like EmailJS.
                     </p>
                     <div className="flex flex-wrap gap-2 mb-4">
                         {["React", "TailwindCSS", "EmailJS", "JS","Vite" ].map((items,key)=>(
@@ -107,7 +107,7 @@ export const Projects = () => {
                     <h3 className="text-xl font-bold mb-2 group-hover:text-blue-400 transition-colors">
                     💡 Promptify:
                     </h3>
-                    <p className="text-gray-400 mb-4 break-words">
+                    <p className="text-gray-700 dark:text-gray-400 mb-4 break-words">
                     A smart prompt enhancer web app that helps users turn simple or vague inputs into clear, structured, and detailed prompts for better AI results. Built with React and OpenAI API, Promptify features live prompt improvements, copy-to-clipboard, prompt history with local storage, and full responsiveness.
                     </p>
                     <div className="flex flex-wrap gap-2 mb-4">

my-portfolio/src/index.css

@@ -1,12 +1,22 @@
 @import "tailwindcss";
 
+html {
+  font-size: 18px;
+}
+
 html,body{
   margin: 0;
   padding: 0;
   font-family: "Space Grotesk", sans-serif;
-  background: #0a0a0a;
+  background: #ffffff;
   scroll-behavior: smooth;
-  color: #f3f4f6
+  color: #1f2937;
+}
+
+/* Dark theme overrides */
+.dark body {
+  background: #0a0a0a;
+  color: #f3f4f6;
 }
 
 @layer utilities{