labguage and colormode support

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

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>

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

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

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>