Feat: Custom glowing cursor

Fix: naming

Author: MDJAmin

Rashed Code 23/index.html

@@ -24,7 +24,7 @@ <h3><a class="home" href="../index.html">Class Repo Projects</a> | Rashed - Code
       <a href="Final JS Project/index.html">07 (Final JS Project)</a>
       <a href="React/1/dist/index.html">08 (React Project)</a>
       <a href="React/2/dist/index.html">09 (React Project)</a>
-      <a href="#">10 (Cannot be opened)</a>
+      <a href="#">10 (React Project)</a>
     </div>
     <footer>© 2025 Class Repo | MDJAmin</footer>
     <script src="../js/script.js"></script>

css/style.css

@@ -50,6 +50,17 @@ h3 {
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }
 
+.links a[href="#"] {
+  opacity: 0.6;
+  cursor: not-allowed;
+  border-style: dashed;
+}
+
+.links a[href="#"]:hover {
+  color: #000000;
+  background: none;
+  transform: none;
+}
 .home {
   color: rgba(255, 255, 255, 0.571);
   transition: color 0.5s;
@@ -140,3 +151,18 @@ footer {
     padding: 0.8rem;
   }
 }
+
+.cursor {
+  width: 30px;
+  height: 30px;
+  border: 2px solid white;
+  border-radius: 50%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+  transition: transform 0.15s ease;
+  mix-blend-mode: difference;
+  z-index: 9999;
+}

js/script.js

@@ -14,3 +14,26 @@ document.body.addEventListener("mousemove", (e) => {
   const y = e.clientY / window.innerHeight;
   document.body.style.background = `radial-gradient(circle at ${x * 100}% ${y * 100}%, #111, #000)`;
 });
+
+// Custom glowing cursor
+document.addEventListener("DOMContentLoaded", () => {
+  const cursor = document.createElement("div");
+  cursor.classList.add("cursor");
+  document.body.appendChild(cursor);
+
+  let x = 0, y = 0;
+  let targetX = 0, targetY = 0;
+
+  document.addEventListener("mousemove", (e) => {
+    targetX = e.clientX;
+    targetY = e.clientY;
+  });
+
+  function animate() {
+    x += (targetX - x) * 0.15;
+    y += (targetY - y) * 0.15;
+    cursor.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+    requestAnimationFrame(animate);
+  }
+  animate();
+});