From 782559ac9839326c6818ca22b87a0294ab3ceb7a Mon Sep 17 00:00:00 2001
From: Lucas Cizeron <lucas.cizeron@epita.fr>
Date: Fri, 17 Jan 2025 00:32:30 +0100
Subject: [PATCH] fix: adjustments to language switch button

---
 src/index.html                    |  4 +--
 src/js/javascript_mouse_effect.js | 51 +++++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 src/js/javascript_mouse_effect.js

diff --git a/src/index.html b/src/index.html
index 864dd29..222aa31 100644
--- a/src/index.html
+++ b/src/index.html
@@ -38,8 +38,8 @@
                     <span class="roll-hover-element-two"><i class="fab fa-linkedin roll-hover-element-two"></i></span>
                 </button>
                 <button class="roll-hover">
-                    <span class="roll-hover-element-one" data-i18n="languageSwitch" data-text="EN"></span>
-                    <span id="language-switch" class="roll-hover-element-two" data-i18n="languageSwitch" data-text="EN"></span>
+                    <span class="roll-hover-element-one" data-i18n="languageSwitch" style="font-size: .8em; font-weight: 700;" data-text="EN"></span>
+                    <span id="language-switch" class="roll-hover-element-two" data-i18n="languageSwitch"  style="font-size: .8em; font-weight: 700;" data-text="EN"></span>
                 </button>
             </div>
         </div>
diff --git a/src/js/javascript_mouse_effect.js b/src/js/javascript_mouse_effect.js
new file mode 100644
index 0000000..29af296
--- /dev/null
+++ b/src/js/javascript_mouse_effect.js
@@ -0,0 +1,51 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const blob = document.createElement('div');
+    blob.classList.add('blob');
+    document.body.appendChild(blob);
+
+    let mouseX = 0, mouseY = 0;
+    let blobX = 0, blobY = 0;
+    const speed = 0.78;
+    let isHovering = false;
+
+    document.addEventListener('mousemove', (event) => {
+        if (!isHovering) {
+            mouseX = event.clientX;
+            mouseY = event.clientY;
+        }
+    });
+
+    function animateBlob() {
+        if (!isHovering) {
+            blobX += (mouseX - blobX) * speed;
+            blobY += (mouseY - blobY) * speed;
+
+            blob.style.left = `${blobX}px`;
+            blob.style.top = `${blobY}px`;
+        }
+
+        requestAnimationFrame(animateBlob);
+    }
+
+    animateBlob();
+
+    const clickableElements = document.querySelectorAll('a, button, .clickable');
+    clickableElements.forEach(element => {
+        element.addEventListener('mouseenter', () => {
+            isHovering = true;
+            const rect = element.getBoundingClientRect();
+            const maxDimension = Math.max(rect.width, rect.height) + 10;
+            blob.style.width = `${maxDimension}px`;
+            blob.style.height = `${maxDimension}px`;
+            blob.style.left = `${rect.left + rect.width / 2}px`;
+            blob.style.top = `${rect.top + rect.height / 2}px`;
+            blob.classList.add('transition');
+        });
+        element.addEventListener('mouseleave', () => {
+            isHovering = false;
+            blob.style.width = '30px'; // Revert to initial small size
+            blob.style.height = '30px'; // Revert to initial small size
+            blob.classList.remove('transition');
+        });
+    });
+});