colorTheme toggle done.

src/assets/icons/colorModeToggle/moon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/></svg>

src/assets/icons/colorModeToggle/sun.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"/></svg>

src/components/Switch.jsx

@@ -1,17 +1,110 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import "../css/Switch.css";
-import { useState } from "react";
 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";
+
+const SwitchBtn = styled.button`
+  background-color: ${(props) =>
+    props.colormode === "dark" ? "#000767" : "#009d28"};
+  border: 1px solid
+    ${(props) => (props.colormode === "dark" ? "#f6f1d5" : "#fff145")};
+  border-radius: 99px;
+  width: 50px;
+  height: 28px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.748);
+  position: relative;
+`;
+
+const SwitchContainer = styled.div`
+  transition: background-color 1s ease;
+  grid-area: 8 / 4 / 10 / 5;
+  background-color: ${(props) =>
+    props.colormode === "dark" ? "#131862" : "#69d0ff"};
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  border: 1px solid
+    ${(props) => (props.colormode === "dark" ? "#1e2be0" : "#9bdfff")};
+  position: relative;
+`;
+
+const StyledSunIcon = styled(SunIcon)`
+  fill: #fff145;
+`;
+
+const StyledMoonIcon = styled(MoonIcon)`
+  fill: #f6f1d5;
+`;
+
+const PlanetsContainer = styled.div`
+  transition: transform 0.5s ease-in-out;
+  transform: ${(props) => `rotate(${props.rotation}deg)`};
+`;
 
 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 [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"));
+    setRotation((prevRotation) => prevRotation + 90);
+  };
+
   return (
-    <div
-      className={`switch container animate__animated ${animation}`}
+    <SwitchContainer
+      colormode={colormode}
+      className={`container animate__animated ${animation}`}
       onAnimationEnd={() => onAnimationEnd(setAnimation)}
     >
-      switch
-    </div>
+      <div className="wrapper">
+        <PlanetsContainer rotation={rotation} className="planets">
+          <StyledSunIcon
+            colormode={colormode}
+            className={`sun1 toggleIcon ${
+              colormode === "dark" ? "setting" : "rising"
+            }`}
+          />
+          <StyledMoonIcon
+            colormode={colormode}
+            className={`moon1 toggleIcon ${
+              colormode === "dark" ? "rising" : "setting"
+            }`}
+          />
+          <StyledSunIcon
+            colormode={colormode}
+            className={`sun2 toggleIcon ${
+              colormode === "dark" ? "setting" : "rising"
+            }`}
+          />
+          <StyledMoonIcon
+            colormode={colormode}
+            className={`moon2 toggleIcon ${
+              colormode === "dark" ? "rising" : "setting"
+            }`}
+          />
+        </PlanetsContainer>
+      </div>
+      <SwitchBtn
+        colormode={colormode}
+        className={`colormodeBtn ${colormode}Btn`}
+        onClick={toggleColorMode}
+      >
+        <div className={`colorToggleThumb ${colormode}`}></div>
+      </SwitchBtn>
+    </SwitchContainer>
   );
 };
 

src/css/ProjectCard.css

@@ -10,8 +10,24 @@
   justify-content: center;
 }
 
+.imgs img:first-child {
+  border-radius: 8px 0 0 8px;
+}
+
+.imgs img:last-child {
+  border-radius: 0 8px 8px 0;
+}
+
+.imgs img {
+  height: 55%;
+  object-fit: contain;
+}
+
 .img img {
   width: 100%;
+  border-radius: 8px;
+  height: 55%;
+  object-fit: contain;
 }
 
 .img img,

src/css/Switch.css

@@ -1,38 +1,70 @@
-.switch {
-  grid-area: 8 / 4 / 10 / 5;
-}
-
-.switch-container {
-  display: inline-block;
-  position: relative;
-}
-
-.switch-checkbox {
-  display: none;
-}
-
-.switch-label {
-  display: block;
-  width: 50px;
-  height: 24px;
-  border-radius: 34px;
-  position: relative;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.switch-label .switch-button {
-  display: block;
-  width: 20px;
-  height: 20px;
-  background: #fff;
-  border-radius: 50%;
+.wrapper {
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
   position: absolute;
-  top: 2px;
-  left: 2px;
-  transition: transform 0.2s;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
 }
 
-.switch-checkbox:checked + .switch-label .switch-button {
-  transform: translateX(26px);
+.toggleIcon {
+  position: absolute;
+  width: 2rem;
+  height: auto;
+}
+
+.colorToggleThumb {
+  height: 20px;
+  width: 20px;
+  background-color: #fff;
+  border-radius: 99px;
+  transform: translateX(0);
+  transition: left 0.3s ease;
+  position: absolute;
+  left: 3px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.colorToggleThumb.dark {
+  left: calc(50px - 25px);
+}
+
+.planets {
+  position: absolute;
+  /* border: 1px solid white; */
+  width: 300px;
+  height: 300px;
+  top: 0;
+  left: -80%;
+}
+
+/* Top corner */
+.moon1 {
+  top: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* Right corner */
+.sun2 {
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  fill: aqua;
+}
+
+/* Bottom corner */
+.moon2 {
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* Left corner */
+.sun1 {
+  top: 50%;
+  left: 10px;
+  transform: translateY(-50%);
 }