cursor

index.html

@@ -109,6 +109,7 @@ <h2>Index [141]</h2>
           </ul>
         </div>
       </nav>
+      <div id="mouse-circle"></div>
 
       <br>
       <div class="custom-hr">

main.css

@@ -16,6 +16,7 @@
   --color-thirteen: #000000;
   --color-fourteen: #1c1c1c;
   --color-fifteen: rgb(255, 255, 255);
+  --color-sixteen: rgba(242, 242, 242, 0.75);
   overscroll-behavior: contain;
 }
 
@@ -37,6 +38,7 @@ body.dark-mode {
   --color-thirteen: #ffffff;
   --color-fourteen: #e3e3e3;
   --color-fifteen: rgb(0, 0, 0);
+  --color-sixteen: rgba(0, 0, 0, 0.75);
 }
 
 @media (min-width: 601px) {
@@ -644,10 +646,25 @@ body.dark-mode {
     margin-left: 35%;
   }
 
+  .mobile-ascii-art {
+    display: none;
+  }
+
   .endspace {
     margin-left: 3vw;
     margin-right: 3vw;
   }
+
+  #mouse-circle {
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    background-color: var(--color-sixteen);
+    border-radius: 50%;
+    pointer-events: none;
+    transform: translate(-50%, -50%);
+    transition: left 0.1s ease-out, top 0.1s ease-out;
+  }
 }
 
 @media screen and (max-width: 600px) {

script.js

@@ -620,4 +620,24 @@ document.addEventListener("DOMContentLoaded", function () {
   // ------------------------------
   // End of ASCII Cube Animation
   // ------------------------------
+
+  // ------------------------------
+  // Mouse Circle Follow Effect
+  // ------------------------------
+
+  document.addEventListener("mousemove", function (e) {
+    var circle = document.getElementById("mouse-circle");
+    if (circle) {
+      var offsetX = 20; // Adjust the horizontal offset as needed
+      var offsetY = 20; // Adjust the vertical offset as needed
+
+      // Update the position of the circle
+      circle.style.left = e.pageX + offsetX + "px";
+      circle.style.top = e.pageY + offsetY + "px";
+    }
+  });
+
+  // ------------------------------
+  // End of Mouse Circle Follow Effect
+  // ------------------------------
 });