vosual improv in pfp light&dark

script.js

@@ -21,7 +21,7 @@ modebtn.addEventListener("click", () => {
   const home = document.querySelector(".home");
 
   if (currmode === "light") {
-    modebtn.style.setProperty('transition', 'color 0.5s ease, color 0.5s ease;');
+    // modebtn.style.setProperty('transition', 'color 0.5s ease, color 0.5s ease;');
     modebtn.style.setProperty('--c-color-1', '#C768FA');
     modebtn.style.setProperty('--c-color-2', '#CB67FD');
     modebtn.style.setProperty('--c-color-3', '#e21bda');
@@ -32,17 +32,19 @@ modebtn.addEventListener("click", () => {
     document.querySelector("#About").style.color = "#ffffff";
     document.querySelector("#Resume").style.color = "#ffffff";
     document.querySelector("#Projects").style.color = "#ffffff";
-    pfpimg.style.setProperty('background', 'linear-gradient(to right, #434343, #000000');
-    // image1.classList.toggle("hidden");
+    pfpimg.style.background="linear-gradient(to right, #434343,rgb(160, 154, 154))";
     home.style.backgroundImage = "url('assests/img/dark.jpg')";
-    // pfpimg.src='assests/img/pfp-dark.png';
-    // pfpimg.classList.toggle("hidden");
+    pfpimg.style.backgroundSize = "500% 500%";
+    // pfpimg.style.opacity = "0";
+    // pfpimg.style.backgroundPosition = "0% 100%";
     currmode = "dark";
   } else {
-    pfpimg.style.setProperty('background', 'linear-gradient(to bottom, #fc00ff, #00dbde');
+    pfpimg.style.setProperty('background', 'linear-gradient(to bottom, #fc00ff, #00dbde)');
+    pfpimg.style.backgroundSize = "100% 100%";
+    pfpimg.classList.remove("active");  // Remove the active class to reset the gradient position
+
+    // pfpimg.style.opacity = "1";
 
-    // pfpimg.classList.toggle("hidden");
-    // pfpimg.src='assests/img/pfp-light.png';
     document.querySelector("#Home").style.color = "#000000";
     document.querySelector("#About").style.color = "#000000";
     document.querySelector("#Resume").style.color = "#000000";

style.css

@@ -681,8 +681,13 @@ a{
     color: #EBA6A9;
 }
 #pfp_img{
-    transition: background 0.5s ease-in-out;
+    background-size: 100% 100%; /* Initial background size */
+    /* transition: background-size 0.5s ease-in; */
+    /* transition: background 0.5s ease-in-out; */
     background: linear-gradient(to bottom, #fc00ff, #00dbde);
+    background-position: 100% 0;
+    transition: background-size 1.5s ease-in-out;
+
 
 /* background: linear-gradient(to right, #434343, #000000); */
 
@@ -692,22 +697,24 @@ a{
     animation-timeline: view();
     animation-range: exit -80px; */
     /* filter: blur(1px); */
-    opacity: 1;
+    /* opacity: 0; */
     border-style: solid;
     height: 45vh;
     margin-right: 10vw;
     border-color: #8B80E0;
     border-width: 2px;
     border-radius: 50%;
-    /* transition: opacity 0.5s ease-in-out; */
+    opacity: 1;
+    /* transition: opacity 3s ease-in-out; */
 }
+
 #pfp {
-    transition: background 0.5s ease-in-out;
+    /* transition: background 0.5s ease-in-out; */
 
     /* background-color: #a17fe0; */
   }
 #pfp_img:hover{
-    transition: background 0.5s ease-in-out;
+    /* transition: background 0.5s ease-in-out; */
 
     box-shadow: 0 0 205px var(--clr);
     /* background: var(--clr); */