Pupil fix

vinodjangid07 · Mar 2, 2024 · aacf908 · aacf908
1 parent 7de13e7
commit aacf908
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -392,10 +392,11 @@
     <!-- main ends here -->
 
     <footer id="footer">
+      <button class="fas" id="backtotopbutton" onclick="scrolltoTopfunction()"><article aria-label="Back to top">&#8592;BACK TO TOP</article></button>
         <div class="footer-background">
           <div class="footer-blob"></div>
         </div>
-        <div class="footer-foreground"><button class="fas" id="backtotopbutton" onclick="scrolltoTopfunction()"><article aria-label="Back to top">&#8592;BACK TO TOP</article></button>
+        <div class="footer-foreground">
           <div class="footercontainer">
               <div class="two-words"><article tabindex="0"aria-label="Learning, Living, and Leveling Up, my quote">"Learning, Living, and Leveling Up."</article></div>
               <div class="social-media-container">

diff --git a/main.js b/main.js
@@ -130,12 +130,12 @@ document.addEventListener("contextmenu", function(e){
 
 
 
-let footerPupils = document.getElementsByClassName('footer-pupil');
-let footerpupilsArr = Array.from(footerPupils);
-// console.log(pupils);
+let Pupils = document.getElementsByClassName('footer-pupil');
+let pupilsArr = Array.from(Pupils);
 
-let footerpupilStartPoint = -10;
-let footerpupilRange = 18;
+let pupilStartPoint = -10;
+let pupilRangeX = 20;
+let pupilRangeY = 15;
 
 // mouse X 
 let mouseXStartPoint = 0;
@@ -159,12 +159,12 @@ const mouseMove = (event) => {
     fracYValue = currentYPosition / mouseYEndPoint;
 
     // footer
-    let footerpupilXCurrrentPosition = footerpupilStartPoint + (fracXValue * footerpupilRange);
-    let footerpupilYCurrrentPosition = footerpupilStartPoint + (fracYValue * footerpupilRange);
+    let pupilXCurrrentPosition = pupilStartPoint + (fracXValue * pupilRangeX);
+    let pupilYCurrrentPosition = pupilStartPoint + (fracYValue * pupilRangeY);
 
     // footer
-    footerpupilsArr.forEach((footercurPupil) => {
-      footercurPupil.style.transform= `translate(${footerpupilXCurrrentPosition}px, ${footerpupilYCurrrentPosition}px)`;
+    pupilsArr.forEach((curPupil) => {
+      curPupil.style.transform= `translate(${pupilXCurrrentPosition}px, ${pupilYCurrrentPosition}px)`;
   })
 
 }

diff --git a/style.css b/style.css
@@ -1290,8 +1290,8 @@ footer{
     position: relative;
     height: fit-content;
     border-top: 1px solid var(--tech-stack-box-border-color);
-    border-top-left-radius: 50px;
-    border-top-right-radius: 50px;
+    /* border-top-left-radius: 50px;
+    border-top-right-radius: 50px; */
     overflow: hidden;
 }
 .footer-background{
@@ -1435,6 +1435,7 @@ footer{
 .footer-avatar-img{
     width: 100%;
     z-index:2;
+    /* opacity: .2; */
 }
 .footer-avatar-face{
     position: absolute;
@@ -1455,21 +1456,38 @@ footer{
     display: flex;
     align-items: center;
     justify-content: center;
-    filter: blur(0.6px);
+
 }
 .footer-pupil{
     width: 20px;
     height: 20px;
     background-color: black;
     border-radius: 50%;
     border: 5px solid rgb(65, 51, 51);
+    filter: blur(0.6px);
 }
+
 .footer-right-eye{
-    box-shadow: 15px 15px 5px rgba(0, 0, 0, 0.308) inset,
-    10px 10px 5px rgba(41, 33, 33, 0.548) inset;
+    box-shadow: 15px 15px 5px rgba(0, 0, 0, 0.233) inset,
+    10px 10px 5px rgba(41, 33, 33, 0.644) inset;
+    position: relative;
 }
 .footer-left-eye{
     box-shadow: -10px -15px 5px rgba(0, 0, 0, 0.349) inset;
+    position: relative;
+
+}
+.footer-avatar-eye::before{
+    position: absolute;
+    content: "";
+    width: 2px;
+    height: 5px;
+    border-radius: 50%;
+    background-color: rgba(214, 214, 214, 0.726);
+    z-index: 2;
+    filter: blur(.2px);
+    left: 15px;
+    transform: rotate(45deg);
 }
 .footer-bottom{
     background-color: #0b0b0b;
@@ -1510,9 +1528,6 @@ footer{
     html {
         font-size: 60%;
     }
-    /* .text-content{
-        padding-left: 250px;
-    } */
 
   }
   @media screen and (max-width:1300px) {
@@ -1524,7 +1539,6 @@ footer{
         font-size: 60%;
     }
     .text-content{
-        /* padding-left: 100px; */
         width: 80%;
     }
     .about-section{
@@ -1675,7 +1689,6 @@ transition-duration: 1s;
 }
 
 .mobile-navbar-tabs-ul{
-    /* animation: dropdownlist .3s linear; */
     background-color: var(--color-dark-mode);
     width: 100%;
     height: 100%;