From 0a82a449f67d8b3e1b49b00d6b63bf934b2d21c1 Mon Sep 17 00:00:00 2001 From: Amit Yehoshaphat <133045227+Amityst12@users.noreply.github.com> Date: Wed, 18 Jun 2025 16:42:59 +0300 Subject: [PATCH] Add theme toggle and accessibility improvements --- my-portfolio/src/App.jsx | 54 ++++++--- my-portfolio/src/components/LoadingScreen.jsx | 2 +- my-portfolio/src/components/MobileMenu.jsx | 16 ++- my-portfolio/src/components/Navbar.jsx | 104 ++++++++++-------- .../src/components/sections/About.jsx | 6 +- .../src/components/sections/Contact.jsx | 6 +- my-portfolio/src/components/sections/Home.jsx | 2 +- .../src/components/sections/Projects.jsx | 8 +- my-portfolio/src/index.css | 14 ++- my-portfolio/tailwind.config.js | 11 ++ 10 files changed, 139 insertions(+), 84 deletions(-) create mode 100644 my-portfolio/tailwind.config.js diff --git a/my-portfolio/src/App.jsx b/my-portfolio/src/App.jsx index 914d244..8acac23 100644 --- a/my-portfolio/src/App.jsx +++ b/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 && setIsLoaded(true)}/>} -
- - - - - - + 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 && setIsLoaded(true)} />} +
+
+ + +
+
+ + + + +
- + ); } diff --git a/my-portfolio/src/components/LoadingScreen.jsx b/my-portfolio/src/components/LoadingScreen.jsx index f649f0f..787a2f9 100644 --- a/my-portfolio/src/components/LoadingScreen.jsx +++ b/my-portfolio/src/components/LoadingScreen.jsx @@ -26,7 +26,7 @@ export const LoadingScreen = ( {onComplete} ) => { //Make loading animation return( //LOADING BAR SETTINGS: -
+
{text} |
diff --git a/my-portfolio/src/components/MobileMenu.jsx b/my-portfolio/src/components/MobileMenu.jsx index 0b5c738..7c13288 100644 --- a/my-portfolio/src/components/MobileMenu.jsx +++ b/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: -
{ 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}) =>{ 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}) =>{ 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}) =>{ 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" diff --git a/my-portfolio/src/components/Navbar.jsx b/my-portfolio/src/components/Navbar.jsx index aa82403..d1196cc 100644 --- a/my-portfolio/src/components/Navbar.jsx +++ b/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 ( + -} \ No newline at end of file + ); +}; diff --git a/my-portfolio/src/components/sections/About.jsx b/my-portfolio/src/components/sections/About.jsx index 325680e..f4484c2 100644 --- a/my-portfolio/src/components/sections/About.jsx +++ b/my-portfolio/src/components/sections/About.jsx @@ -16,7 +16,7 @@ export const About = () =>{ Just a bit more:
-

+

Less noise, more purpose — that's my motto.

@@ -108,7 +108,7 @@ export const About = () =>{

🎓Education:

-
    +
    • Working towards B.Sc in Computer Science - Holon Institute of Technology (2023 - 2026)
      • @@ -123,7 +123,7 @@ export const About = () =>{

      📂Experience:

      -
      +

      Operational Digital Communication Specialist(2020 - Reserves)

      diff --git a/my-portfolio/src/components/sections/Contact.jsx b/my-portfolio/src/components/sections/Contact.jsx index 1489535..336bd8f 100644 --- a/my-portfolio/src/components/sections/Contact.jsx +++ b/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})}/>

      @@ -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})}/>
      @@ -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})}/>
      diff --git a/my-portfolio/src/components/sections/Home.jsx b/my-portfolio/src/components/sections/Home.jsx index 99be21e..aa1be9e 100644 --- a/my-portfolio/src/components/sections/Home.jsx +++ b/my-portfolio/src/components/sections/Home.jsx @@ -19,7 +19,7 @@ export const Home = () => { Hi, I'm Amit Yehoshaphat -

      +

      I'm a full-stack developer and computer science student who loves building impactful software. diff --git a/my-portfolio/src/components/sections/Projects.jsx b/my-portfolio/src/components/sections/Projects.jsx index b7ce6e3..d826885 100644 --- a/my-portfolio/src/components/sections/Projects.jsx +++ b/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">

      🤖 Self analyzing Discord bot:

      -

      A Discord bot that fetches and analyzes personal TFT match data using Riot’s API. +

      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.

      @@ -47,7 +47,7 @@ export const Projects = () => { hover:shadow-[0_2px_8px_rgba(59,130,246,0.2)] transition-all duration-300">

      🎮 2D shooting game:

      -

      A 2D top-down shooter game built with Python and Pygame. +

      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.

      @@ -77,7 +77,7 @@ export const Projects = () => { hover:shadow-[0_2px_8px_rgba(59,130,246,0.2)] transition-all duration-300">

      🖥 Portfolio website:

      -

      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. +

      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.

      {["React", "TailwindCSS", "EmailJS", "JS","Vite" ].map((items,key)=>( @@ -107,7 +107,7 @@ export const Projects = () => {

      💡 Promptify:

      -

      +

      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.

      diff --git a/my-portfolio/src/index.css b/my-portfolio/src/index.css index 131eefb..374d89e 100644 --- a/my-portfolio/src/index.css +++ b/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{ diff --git a/my-portfolio/tailwind.config.js b/my-portfolio/tailwind.config.js new file mode 100644 index 0000000..5f3b86d --- /dev/null +++ b/my-portfolio/tailwind.config.js @@ -0,0 +1,11 @@ +module.exports = { + darkMode: 'class', + content: [ + './index.html', + './src/**/*.{js,jsx,ts,tsx}' + ], + theme: { + extend: {}, + }, + plugins: [], +};