Added custom cursor

NobleExecutor · NobleExecutor · commit bfefed76b701 · 2026-04-09T20:28:07.000+02:00
diff --git a/css/style.css b/css/style.css
@@ -19,11 +19,48 @@ body {
     font-family: "Roboto", sans-serif;
 }
 
+@media (hover: hover) and (pointer: fine) {
+    body,
+    a,
+    button,
+    input,
+    textarea {
+        cursor: none;
+    }
+}
+
 img {
     max-width: 100%;
     height: auto;
 }
 
+.cursor-dot,
+.cursor-ring {
+    position: fixed;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    opacity: 0;
+    z-index: 10002;
+    transform: translate(-50%, -50%);
+}
+
+.cursor-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #ffffff;
+}
+
+.cursor-ring {
+    width: 34px;
+    height: 34px;
+    border-radius: 50%;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    background-color: rgba(255, 255, 255, 0.06);
+    backdrop-filter: blur(3px);
+}
+
 .section-title {
     color: var(--secondary-color);
     text-align: center;
@@ -502,6 +539,12 @@ footer span a {
     transform: translate(-50%, -50%);
 }
 
+.cursor-hover .cursor-ring {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(0);
+}
+
 @media (max-width: 1024px) {
     .about-text,
     .education-container,
@@ -628,4 +671,4 @@ footer span a {
     #submitBtn {
         width: 100%;
     }
-}
+}
diff --git a/index.html b/index.html
@@ -16,6 +16,8 @@
 
 <body>
     <div id="tsparticles"></div>
+    <div class="cursor-dot" aria-hidden="true"></div>
+    <div class="cursor-ring" aria-hidden="true"></div>
     <header>
         <button class="menu-toggle" type="button" aria-label="Ouvrir le menu" aria-expanded="false" aria-controls="site-nav">
             <span></span>
diff --git a/js/anim.js b/js/anim.js
@@ -57,4 +57,84 @@ gsap.from(".contact-container", {
         start: "center 70%"
     },
     ease: "power2.out"
-});
+});
+
+if (window.matchMedia("(hover: hover) and (pointer: fine)").matches) {
+    const cursorDot = document.querySelector(".cursor-dot");
+    const cursorRing = document.querySelector(".cursor-ring");
+    const interactiveElements = document.querySelectorAll("a, button, .project-media, .projects-card");
+
+    gsap.set([cursorDot, cursorRing], { xPercent: -50, yPercent: -50 });
+
+    window.addEventListener("mousemove", (e) => {
+        gsap.to(cursorDot, {
+            x: e.clientX,
+            y: e.clientY,
+            duration: 0.12,
+            opacity: 1,
+            ease: "power2.out",
+            overwrite: "auto"
+        });
+
+        gsap.to(cursorRing, {
+            x: e.clientX,
+            y: e.clientY,
+            duration: 0.8,
+            opacity: 1,
+            ease: "power3.out",
+            overwrite: "auto"
+        });
+    });
+
+    document.addEventListener("mouseleave", () => {
+        gsap.to([cursorDot, cursorRing], {
+            opacity: 0,
+            duration: 0.2,
+            overwrite: "auto"
+        });
+    });
+
+    document.addEventListener("mouseenter", () => {
+        gsap.to([cursorDot, cursorRing], {
+            opacity: 1,
+            duration: 0.2,
+            overwrite: "auto"
+        });
+    });
+
+    interactiveElements.forEach((element) => {
+        element.addEventListener("mouseenter", () => {
+            document.body.classList.add("cursor-hover");
+
+            gsap.to(cursorDot, {
+                scale: 0.6,
+                duration: 0.2,
+                overwrite: "auto"
+            });
+
+            gsap.to(cursorRing, {
+                scale: 1.7,
+                duration: 0.25,
+                ease: "power2.out",
+                overwrite: "auto"
+            });
+        });
+
+        element.addEventListener("mouseleave", () => {
+            document.body.classList.remove("cursor-hover");
+
+            gsap.to(cursorDot, {
+                scale: 1,
+                duration: 0.2,
+                overwrite: "auto"
+            });
+
+            gsap.to(cursorRing, {
+                scale: 1,
+                duration: 0.25,
+                ease: "power2.out",
+                overwrite: "auto"
+            });
+        });
+    });
+}
