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
+ // ------------------------------
});