labguage and colormode support

2025-01-14 19:29:00 +01:00
parent f88524ff0e
commit 347229a9cd
29 changed files with 431 additions and 154 deletions
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -1,21 +1,29 @@
 import React, { useState } from "react";
 import "../css/Hero.css";
 import "animate.css";
+import { useTheme } from "../Context/ThemeContext";
+import { useLang } from "../Context/LangContext";

 const Hero = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
  const [animation, setAnimation] = useState(initialAnimation);
-
+  const { colormode } = useTheme();
+  const { language } = useLang();
  return (
    <div
-      className={`hero container animate__animated ${animation}`}
+      className={`hero container animate__animated ${animation} ${colormode}`}
      onMouseEnter={() => onMouseEnter(setAnimation)}
      onAnimationEnd={() => onAnimationEnd(setAnimation)}
    >
      <p>
        <span>
-          Hi, I'm Yousif. <br />
+          {language === "en-GB" ? "Hi, I'm Yousif." : "Hi, ich bin Yousif."}{" "}
+          <br />
        </span>{" "}
-        I'm a Full-Stack Developer from <span>Germany</span>.
+        {language === "en-GB"
+          ? "I'm a Full-Stack Developer from"
+          : "Ich bin ein Full-Stack Entwickler aus"}{" "}
+        <br />
+        <span>{language === "en-GB" ? "Germany" : "Köln"}</span>.
      </p>
    </div>
  );
--- a/src/components/LangSelect.jsx
+++ b/src/components/LangSelect.jsx
@@ -2,18 +2,23 @@ import React from "react";
 import "../css/LangSelect.css";
 import { useState } from "react";
 import Toggle from "./subComponents/Toggle";
+import { useTheme } from "../Context/ThemeContext";
+import { useLang } from "../Context/LangContext";

 const LangSelect = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
  const [animation, setAnimation] = useState(initialAnimation);
+
+  const { colormode } = useTheme();
+  const { language, toggleLanguage } = useLang();
+
  return (
    <div
-      className={`langSelect container animate__animated ${animation}`}
-     /*  onMouseEnter={() => onMouseEnter(setAnimation)} */
+      className={`langSelect container animate__animated ${animation} ${colormode}`}
+      /*  onMouseEnter={() => onMouseEnter(setAnimation)} */
      onAnimationEnd={() => onAnimationEnd(setAnimation)}
    >
      <div className="eng">🇬🇧</div>
-      <Toggle />
-      <div className="ger">🇩🇪</div>
+      <Toggle toggled={language === "de-DE"} onToggle={toggleLanguage} />      <div className="ger">🇩🇪</div>
    </div>
  );
 };
--- a/src/components/Location.jsx
+++ b/src/components/Location.jsx
@@ -1,13 +1,19 @@
 import React from "react";
 import "../css/Location.css";
 import LocationPin from "../assets/icons/navIcons/location-pin.svg?react";
+import { useTheme } from "../Context/ThemeContext";
+import { useLang } from "../Context/LangContext";

 const Location = () => {
+  const { colormode } = useTheme();
+  const { language } = useLang();
+
  return (
-    <div className="location container">
+    <div className={`location container ${colormode}`}>
      <LocationPin className="navIcon" />
      <p>
-        <strong>Cologne</strong>, Germany
+        <strong>{`${language === "en-GB" ? "Cologne" : "Köln"}`}</strong>,{" "}
+        {`${language === "en-GB" ? "Germany" : "Deutschland"}`}
      </p>
    </div>
  );
--- a/src/components/Mail.jsx
+++ b/src/components/Mail.jsx
@@ -2,15 +2,19 @@ import React from "react";
 import "../css/Mail.css";
 import { useState } from "react";
 import EnvelopeIcon from "../assets/icons/navIcons/envelope.svg?react";
+import { useTheme } from "../Context/ThemeContext";

 const Mail = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
  const [animation, setAnimation] = useState(initialAnimation);
  const emailUser = "yousif.paulus";
  const domain = "hotmail.de";
+
+  const { colormode } = useTheme();
+
  return (
    <div
-      className={`eMail container animate__animated ${animation}`}
-   /*    onMouseEnter={() => onMouseEnter(setAnimation)} */
+      className={`eMail container animate__animated ${animation} ${colormode}`}
+      /*    onMouseEnter={() => onMouseEnter(setAnimation)} */
      onAnimationEnd={() => onAnimationEnd(setAnimation)}
    >
      <a
--- a/src/components/Navigation.jsx
+++ b/src/components/Navigation.jsx
@@ -9,21 +9,52 @@ import SuitcaseIcon from "../assets/icons/navIcons/suitcase.svg?react";
 import DownloadIcon from "../assets/icons/navIcons/download.svg?react";
 import { NavLink } from "react-router-dom";
 import clsx from "clsx";
+import { useTheme } from "../Context/ThemeContext";
+import { useLang } from "../Context/LangContext";

 const Navigation = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
  const [animation, setAnimation] = useState(initialAnimation);

+  const { colormode } = useTheme();
+
  const navItems = [
-    { name: "Home", to: "/", icon: HouseIcon, id: 1 },
-    { name: "About", to: "/about", icon: AddressCardIcon, id: 2 },
-    { name: "Experience", to: "/workExp", icon: SuitcaseIcon, id: 3 },
-    { name: "Projects", to: "/projects", icon: CodeIcon, id: 4 },
-    { name: "Contact", to: "/contact", icon: EnvelopeIcon, id: 5 },
-    { name: "CV", to: "", icon: DownloadIcon, id: 6 },
+    { name: { enGB: "Home", deDE: "Start" }, to: "/", icon: HouseIcon, id: 1 },
+    {
+      name: { enGB: "About", deDE: "Über Mich" },
+      to: "/about",
+      icon: AddressCardIcon,
+      id: 2,
+    },
+    {
+      name: { enGB: "Experience", deDE: "Erfahrung" },
+      to: "/workExp",
+      icon: SuitcaseIcon,
+      id: 3,
+    },
+    {
+      name: { enGB: "Projects", deDE: "Projekte" },
+      to: "/projects",
+      icon: CodeIcon,
+      id: 4,
+    },
+    {
+      name: { enGB: "Contact", deDE: "Kontakt" },
+      to: "/contact",
+      icon: EnvelopeIcon,
+      id: 5,
+    },
+    {
+      name: { enGB: "CV", deDE: "Lebenslauf" },
+      to: "",
+      icon: DownloadIcon,
+      id: 6,
+    },
  ];
+
+  const { language } = useLang();
  return (
    <div
-      className={`navigation container animate__animated ${animation}`}
+      className={`navigation container animate__animated ${animation} ${colormode}`}
      /* onMouseEnter={() => onMouseEnter(setAnimation)} */
      onAnimationEnd={() => onAnimationEnd(setAnimation)}
    >
@@ -38,11 +69,14 @@ const Navigation = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
                  clsx(
                    "navLink",
                    { active: isActive },
-                    item.name === "CV" && "cv" // Add "cv" class if item.name is "CV"
+                    item.name.enGB === "CV" && "cv" // Add "cv" class if item.name is "CV"
                  )
                }
              >
-                <span>{item.name}</span> <IconComponent className="navIcon" />
+                <span>
+                  {language === "en-GB" ? item.name.enGB : item.name.deDE}
+                </span>{" "}
+                <IconComponent className="navIcon" />
              </NavLink>
            </li>
          );
--- a/src/components/Switch.jsx
+++ b/src/components/Switch.jsx
@@ -4,6 +4,7 @@ import "animate.css";
 import styled from "styled-components";
 import SunIcon from "../assets/icons/colorModeToggle/sun.svg?react";
 import MoonIcon from "../assets/icons/colorModeToggle/moon.svg?react";
+import { useTheme } from "../Context/ThemeContext";

 const SwitchBtn = styled.button`
  background-color: ${(props) =>
@@ -20,8 +21,8 @@ const SwitchBtn = styled.button`
 `;

 const SwitchContainer = styled.div`
-  transition: background-color 1s ease;
  grid-area: 8 / 4 / 10 / 5;
+  transition: background-color 1s ease;
  background-color: ${(props) =>
    props.colormode === "dark" ? "#131862" : "#69d0ff"};
  display: flex;
@@ -46,28 +47,19 @@ const PlanetsContainer = styled.div`
 `;

 const Switch = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
-  const [animation, setAnimation] = useState(initialAnimation);
-  const [colormode, setcolormode] = useState(() => {
-    // Retrieve initial color mode from localStorage or default to "dark"
-    return localStorage.getItem("colormode") || "dark";
-  });
+  const { colormode, toggleColorMode } = useTheme();
  const [rotation, setRotation] = useState(0);

-  useEffect(() => {
-    // Save the current color mode to localStorage whenever it changes
-    localStorage.setItem("colormode", colormode);
-  }, [colormode]);
-
-  const toggleColorMode = () => {
-    setcolormode((prevMode) => (prevMode === "dark" ? "light" : "dark"));
+  const handleClick = () => {
+    toggleColorMode();
    setRotation((prevRotation) => prevRotation + 90);
  };

  return (
    <SwitchContainer
      colormode={colormode}
-      className={`container animate__animated ${animation}`}
-      onAnimationEnd={() => onAnimationEnd(setAnimation)}
+      className={`container animate__animated ${initialAnimation}`}
+      onAnimationEnd={() => onAnimationEnd && onAnimationEnd()}
    >
      <div className="wrapper">
        <PlanetsContainer rotation={rotation} className="planets">
@@ -100,7 +92,7 @@ const Switch = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
      <SwitchBtn
        colormode={colormode}
        className={`colormodeBtn ${colormode}Btn`}
-        onClick={toggleColorMode}
+        onClick={handleClick}
      >
        <div className={`colorToggleThumb ${colormode}`}></div>
      </SwitchBtn>
--- a/src/components/TallContent.jsx
+++ b/src/components/TallContent.jsx
@@ -1,12 +1,16 @@
 import React, { useState } from "react";
 import "../css/TallContent.css";
+import { useTheme } from "../Context/ThemeContext";
+import { useLang } from "../Context/LangContext";

 const TallContent = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
  const [animation, setAnimation] = useState(initialAnimation);
+  const { colormode } = useTheme();
+  const { language } = useLang();

  return (
    <div
-      className={`container tallContent animate__animated ${animation}`}
+      className={`container tallContent animate__animated ${animation} ${colormode}`}
      onMouseEnter={() => onMouseEnter(setAnimation)}
      onAnimationEnd={() => onAnimationEnd(setAnimation)}
    >
--- a/src/components/TechStack.jsx
+++ b/src/components/TechStack.jsx
@@ -18,6 +18,8 @@ import Linux from "../assets/icons/skill-icons/icons/Linux-Dark.svg?react";
 import "../css/TechStack.css";
 import { Link } from "react-router-dom";
 import "animate.css";
+import { useTheme } from "../Context/ThemeContext";
+import { useLang } from "../Context/LangContext";

 const TechStack = ({
  initialAnimation,
@@ -95,17 +97,19 @@ const TechStack = ({
  ];

  const [animation, setAnimation] = useState(initialAnimation);
-
+  const { colormode } = useTheme();
+  const { language } = useLang();
  return (
    <div
      className={clsx(
        "techStackContainer",
        "container",
+        colormode === "light" ? "light" : "dark",
        "animate__animated",
        animation,
        { expanded: isExpanded } // Conditional class
      )}
-    /*   onMouseEnter={() => onMouseEnter(setAnimation)} */
+      /*   onMouseEnter={() => onMouseEnter(setAnimation)} */
      onAnimationEnd={() => onAnimationEnd(setAnimation)}
    >
      <h2>Tech Stack</h2>
@@ -125,11 +129,13 @@ const TechStack = ({
        to="#"
        className="techStackShowMore"
        onClick={(e) => {
-          e.preventDefault(); // Prevent default link behavior
-          onExpandToggle(); // Toggle the expanded state
+          e.preventDefault();
+          onExpandToggle();
        }}
      >
-        {isExpanded ? "Show Less" : "Show More"} {/* Toggle link text */}
+        {isExpanded
+          ? `${language === "en-GB" ? "Show Less" : "Weniger"}`
+          : `${language === "en-GB" ? "Show More" : "Mehr"}`}
      </Link>
    </div>
  );
--- a/src/components/mainViews/Projects.jsx
+++ b/src/components/mainViews/Projects.jsx
@@ -18,15 +18,18 @@ import animedbImg1 from "../../assets/img/projects/animedb1.png";
 import animedbImg2 from "../../assets/img/projects/animedb2.png";
 import animedbImg3 from "../../assets/img/projects/animedb3.png";
 import strogasoImg from "../../assets/img/projects/strogaso.png";
+import { useLang } from "../../Context/LangContext";

 const Projects = () => {
+const {language} = useLang()
+
  const projectArr = [
    {
      name: "inkspire.",
      urls: { ghUrl: "https://github.com/yousifpa98/inkspire" },
      year: "2024",
-      job: "freelance",
-      imgs: [inkspireImg],
+      job: language === "en-GB" ? "freelance" : "freiberuflich",
+      imgs: [inkspireImg], 
      id: 1,
    },
    {
@@ -36,7 +39,7 @@ const Projects = () => {
        liveUrl: "https://druckerei-eberwein.de/",
      },
      year: "2024",
-      job: "freelance",
+      job: language === "en-GB" ? "freelance" : "freiberuflich",
      imgs: [debImg],
      id: 2,
    },
@@ -47,7 +50,7 @@ const Projects = () => {
        liveUrl: "https://otakucritics.netlify.app/",
      },
      year: "2024",
-      job: "personal project",
+      job: language === "en-GB" ? "personal project" : "pers. Projekt",
      imgs: [animeDBImg],
      id: 3,
    },
@@ -76,6 +79,7 @@ const Projects = () => {
  const handleAnimationEnd = (setAnimation) => {
    setAnimation(""); // Clear animation to prevent re-triggering
  };
+  
  return (
    <div className="gridContainer">
      <Navigation />
--- a/src/components/subComponents/About/Specialties.jsx
+++ b/src/components/subComponents/About/Specialties.jsx
@@ -1,21 +1,25 @@
 import React from "react";
 import "../../../css/Specialties.css";
 import { useState } from "react";
+import { useTheme } from "../../../Context/ThemeContext";
+import { useLang } from "../../../Context/LangContext";

 const Specialties = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
  const [animation, setAnimation] = useState(initialAnimation);
+  const { colormode } = useTheme();
+  const { language } = useLang();
  return (
    <div
-      className={`specialties container animate__animated ${animation}`}
+      className={`specialties container animate__animated ${animation} ${colormode}`}
      onMouseEnter={() => onMouseEnter(setAnimation)}
      onAnimationEnd={() => onAnimationEnd(setAnimation)}
    >
      <p className="specialtyText">
-        I’m a fullstack developer who loves creating web applications that are
-        functional and easy to use. My go-to tools are React, Node.js, and
-        TypeScript, and I enjoy working on both the front-end and back-end. I
-        focus on clean, practical solutions that work in the real world and
-        approach every project with curiosity and attention to detail.
+        {`${
+          language === "en-GB"
+            ? "I'm a fullstack developer who loves creating web applications that are functional and easy to use. My go-to tools are React, Node.js, and TypeScript, and I enjoy working on both the front-end and back-end. I focus on clean, practical solutions that work in the real world and approach every project with curiosity and attention to detail."
+            : "Ich liebe es, funktionale und einfach zu bedienende Webanwendungen zu erstellen. Meine bevorzugten Tools sind React, Node.js und TypeScript, und ich arbeite gerne sowohl am Frontend als auch am Backend. Ich konzentriere mich auf saubere, praktische Lösungen, die in der realen Welt funktionieren, und gehe jedes Projekt mit Neugier und Liebe zum Detail an."
+        }`}
      </p>
    </div>
  );
--- a/src/components/subComponents/About/TallContentAbout.jsx
+++ b/src/components/subComponents/About/TallContentAbout.jsx
@@ -1,6 +1,8 @@
 import React from "react";
 import { useState } from "react";
 import "../../../css/TallContentAbout.css";
+import { useTheme } from "../../../Context/ThemeContext";
+import { useLang } from "../../../Context/LangContext";

 const TallContentAbout = ({
  initialAnimation,
@@ -9,51 +11,86 @@ const TallContentAbout = ({
 }) => {
  const [animation, setAnimation] = useState(initialAnimation);

+  const { colormode } = useTheme();
+  const { language } = useLang();
+
  return (
    <div
-      className={`container tallContentAbout animate__animated ${animation}`}
+      className={`container tallContentAbout animate__animated ${animation} ${colormode}`}
      onMouseEnter={() => onMouseEnter(setAnimation)}
      onAnimationEnd={() => onAnimationEnd(setAnimation)}
    >
      <div className="funFacts">
-        <h2>Some Fun-Facts about me:</h2>
+        <h2>{`${
+          language === "en-GB"
+            ? "Some Fun-Facts about me:"
+            : "Ein paar Fun-Facts über mich:"
+        }`}</h2>
        <ul className="funFactList">
          <li>
            <p>
-              2300+ Chess.com blitz rating and a lifelong love for strategy.
+              {`${
+                language === "en-GB"
+                  ? "2300+ Chess.com blitz rating and a lifelong love for strategy."
+                  : "2300+ Blitz-Rating auf Chess.com und eine lange Liebe für Strategie"
+              }`}
            </p>
          </li>
          <li>
            <p>
-              Big fan of tycoon simulation games—I could spend hours building
-              and managing virtual worlds.
+              {`${
+                language === "en-GB"
+                  ? "Big fan of tycoon simulation games—I could spend hours building and managing virtual worlds."
+                  : "Großer Fan von Tycoon-Sim Spielen—Ich könnte Stunden damit verbringen, virtuelle Welten zu managen."
+              }`}
            </p>
          </li>
          <li>
            <p>
-              I love Asian food, especially Japanese cuisine, and enjoy trying
-              new recipes.
+              {`${
+                language === "en-GB"
+                  ? "I love Asian food, especially Japanese cuisine, and enjoy trying new recipes."
+                  : "Ich liebe asiatische Küche, besonders die japanische, und probiere gern neue Rezepte aus."
+              }`}
            </p>
          </li>
          <li>
-            <p>Football is my passion (and no, I won’t call it soccer).</p>
+            <p>
+              {`${
+                language === "en-GB"
+                  ? "Football is my passion (and no, I won't call it soccer)."
+                  : "Fußball ist eine meiner liebsten Leidenschaften."
+              }`}
+            </p>
          </li>
          <li>
            <p>
-              I have a guilty pleasure for sitcoms like The Big Bang Theory and
-              can’t resist a good Taylor Swift track.
+              {`${
+                language === "en-GB"
+                  ? "I have a guilty pleasure for sitcoms like The Big Bang Theory and can't resist a good Taylor Swift track."
+                  : "Ich habe eine Schwäche für Sitcoms wie 'The Big Bang Theory' und kann einem guten Taylor Swift Song nicht wiederstehen."
+              }`}
            </p>
          </li>
          {/* <li>
            <p>Hiking is one of my favorite ways to relax and recharge.</p>
          </li> */}
          <li>
-            <p>I enjoy baking, especially experimenting with new desserts.</p>
+            <p>
+              {`${
+                language === "en-GB"
+                  ? "I enjoy baking, especially experimenting with new desserts.."
+                  : "Ich backe gern und experimentiere gerne mit neuen Desserts."
+              }`}
+            </p>
          </li>
          <li>
            <p>
-              I’ve been drawing and painting since I was young, and it’s still
-              one of my favorite creative outlets.
+              {`${
+                language === "en-GB"
+                  ? "I've been drawing and painting since I was young, and it's still one of my favorite creative outlets."
+                  : "Ich zeichne und male seit meiner Kindheit - es ist bis heute eines meiner liebsten kreativen Hobbies."
+              }`}
            </p>
          </li>
        </ul>
--- a/src/components/subComponents/Projects/ProjectCard.jsx
+++ b/src/components/subComponents/Projects/ProjectCard.jsx
@@ -2,10 +2,13 @@ import React from "react";
 import "../../../css/ProjectCard.css";
 import GitHubIcon from "../../../assets/icons/socials/square-github.svg?react";
 import GlobeIcon from "../../../assets/icons/socials/globe.svg?react";
+import { useTheme } from "../../../Context/ThemeContext";

 const ProjectCard = ({ project }) => {
+  const { colormode } = useTheme();
+
  return (
-    <div className="projectCard">
+    <div className={`projectCard ${colormode}`}>
      <div className={project.imgs.length > 1 ? "imgs" : "img"}>
        {project.imgs.map((img, index) => (
          <img
@@ -27,7 +30,7 @@ const ProjectCard = ({ project }) => {
        </h3>
        <p className="projectJob">{project.job}</p>
        <div className="projectLinks">
-        {Object.entries(project.urls).map(([key, value]) => {
+          {Object.entries(project.urls).map(([key, value]) => {
            // Determine the correct icon to render based on the key
            const Icon = key === "ghUrl" ? GitHubIcon : GlobeIcon;

@@ -39,7 +42,7 @@ const ProjectCard = ({ project }) => {
                rel="noopener noreferrer"
                href={value}
              >
-                <Icon className="socialIcon"/>
+                <Icon className="socialIcon" />
              </a>
            );
          })}
--- a/src/components/subComponents/Projects/ProjectsMain.jsx
+++ b/src/components/subComponents/Projects/ProjectsMain.jsx
@@ -2,6 +2,8 @@ import React from "react";
 import "../../../css/ProjectsMain.css";
 import { useState } from "react";
 import ProjectCard from "./ProjectCard";
+import { useTheme } from "../../../Context/ThemeContext";
+import { useLang } from "../../../Context/LangContext";

 const ProjectsMain = ({
  initialAnimation,
@@ -11,17 +13,24 @@ const ProjectsMain = ({
 }) => {
  const [animation, setAnimation] = useState(initialAnimation);

+  const { colormode } = useTheme();
+  const { language } = useLang();
+
  return (
    <div
-      className={`projectsMain container animate__animated ${animation}`}
+      className={`projectsMain container animate__animated ${animation} ${colormode}`}
      /* onMouseEnter={() => onMouseEnter(setAnimation)} */
      onAnimationEnd={() => onAnimationEnd(setAnimation)}
    >
-      <h2>Some of my latest projects:</h2>
+      <h2>{`${
+        language === "en-GB"
+          ? "Some of my latest projects:"
+          : "Ein paar meiner letzten Projekte:"
+      }`}</h2>
      <div className="projectsDiv">
-          {projects.map((project) => (
-            <ProjectCard key={project.id} project={project} />
-          ))}
+        {projects.map((project) => (
+          <ProjectCard key={project.id} project={project} />
+        ))}
      </div>
    </div>
  );
--- a/src/components/subComponents/Toggle.jsx
+++ b/src/components/subComponents/Toggle.jsx
@@ -1,12 +1,11 @@
-import React, { useState } from "react";
+import React from "react";
 import "../../css/Toggle.css";

-const Toggle = () => {
-  const [toggled, setToggled] = useState(false);
+const Toggle = ({ toggled, onToggle }) => {
  return (
    <button
      className={`toggle-btn ${toggled ? "toggled" : ""}`}
-      onClick={() => setToggled(!toggled)}
+      onClick={onToggle}
    >
      <div className="thumb"></div>
    </button>