diff --git a/index.html b/index.html index c6d9655..caea8be 100644 --- a/index.html +++ b/index.html @@ -109,6 +109,7 @@

Index [141]

+

diff --git a/main.css b/main.css index 51f93ee..d863655 100644 --- a/main.css +++ b/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) { diff --git a/script.js b/script.js index 953c197..353e8a1 100644 --- a/script.js +++ b/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 + // ------------------------------ });