Fixed the text scramble errors, few changes, added animation, testimonial responsive fix.

public/scripts/text-scramble.js

@@ -1,6 +1,9 @@
 function applyScrambleEffect() {
 	const glitchTextOnceElements = document.querySelectorAll('.glitch-text');
 	const glitchTextRepeatElements = document.querySelectorAll('.glitch-text-interval');
+	const glitchTextHoverElements = document.querySelectorAll('.glitch-text-hover');
+  
+	const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
 
 	function animateScramble(element, text, duration = 1000) {
 		const chars = [];
@@ -25,7 +28,7 @@ function applyScrambleEffect() {
 			const kk = k * text.length;
 			for (let i = 0; i < text.length; i++) {
 				if (kk < i) {
-			chars[i].innerHTML = String.fromCharCode(~~(65 + rand() * 26));
+					chars[i].innerHTML = charset[Math.floor(rand() * charset.length)];
 				} else {
 					chars[i].innerHTML = text[i] === ' ' ? '&nbsp;' : text[i];
 				}
@@ -53,6 +56,7 @@ function applyScrambleEffect() {
 		animate();
 	}
 
+	// Use IntersectionObserver for once-only animation
 	const observer = new IntersectionObserver((entries, observer) => {
 		entries.forEach(entry => {
 			if (entry.isIntersecting) {
@@ -80,20 +84,22 @@ function applyScrambleEffect() {
 				animateScramble(element, text);
 			}
 		}, 5000);
+	});
+
+	// Hover functionality for `.glitch-text-hover` elements
+	glitchTextHoverElements.forEach((element) => {
+		const text = element.innerText;
 
 		element.addEventListener('mouseenter', () => {
+			// Only start the animation if it isn't already in progress
 			if (!element.isAnimating) {
-		  clearInterval(intervalId);
-		  animateScramble(element, text, 800);
 				element.isAnimating = true;
-  
-		  setTimeout(() => {
-			element.isAnimating = false;
-		  }, 1000);
+				animateScramble(element, text, 800);
 			}
 		});
+
+		// No need for 'mouseleave' as the animation will complete even if the mouse leaves
 	});
 }
 
 document.addEventListener('DOMContentLoaded', applyScrambleEffect);
-  

src/components/AboutFooter.astro

@@ -111,7 +111,7 @@ const sortedSections = sectionsConfig
       {section.name === "contributors" && (
         <div class="middle-pane-medium">
           <h1 class="my-6 glitch-text">Contributors</h1>
-          <div class="flex gap-3 flex-wrap mb-4 items-center">
+          <div class="flex gap-3 flex-wrap mb-4 items-center justify-center md:justify-start">
             {contributors.items.map((contrib) => (
               <div>
                 <a

src/components/SliderTestimonial.astro

@@ -21,8 +21,10 @@ let currentTestimonial = 0;
 ---
 
 <div class="w-full mx-auto px-8 border-2 border-[#202020]">
-  <div class="relative testimonial-fade active" id="testimonial-container">
-    <div class="flex items-center justify-center overflow-hidden">
+  <div class="relative" id="testimonial-container">
+    <div
+      class="flex flex-col md:flex-row my-4 md:my-0 items-center justify-center testimonial-fade active overflow-hidden"
+    >
       <div>
         <img
           src={testimonials[currentTestimonial].imageUrl}

src/components/SpeakerGrid.astro

@@ -28,7 +28,7 @@ function personLink(person) {
 ---
 
 <div
-  class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4"
+  class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4 place-items-center md:place-items-start"
 >
   {
     filteredPeople.map((person) => (

src/pages/index.astro

@@ -58,7 +58,7 @@ for (const e of upcomingEvents) {
       class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 w3pn-hp-grid gap-2 mt-2"
     >
       <div class="bg-events" data-url="/events">
-        <div class="title">Events</div>
+        <div class="title glitch-text">Events</div>
         <div class="numbers">
           <div>
             <div class="big">{eventsUpcoming}</div>
@@ -80,6 +80,7 @@ for (const e of upcomingEvents) {
             <div class="text-white mt-1 ml-1.5">
               <a
                 href="https://github.com/web3privacy/web3privacy/blob/main/README.md#contents"
+                class="glitch-text"
                 >Web3 Privacy Database</a
               >
             </div>
@@ -104,7 +105,7 @@ for (const e of upcomingEvents) {
         </div>
       </div>
       <div class="bg-talks" data-url="/research">
-        <div class="title">Research</div>
+        <div class="title glitch-text">Research</div>
         <div class="numbers">
           <div>
             <div class="big">{core.research.length} research projects →</div>
@@ -115,12 +116,9 @@ for (const e of upcomingEvents) {
   </div>
 
   <div class="middle-pane-medium mt-10">
-    <!--div class="mt-10">
-			<h1>Our Projects</h1>
-		</div-->
 
     <div class="mt-16">
-      <h1>Featured Events</h1>
+      <h1 class="glitch-text">Featured Events</h1>
     </div>
 
     <div class="text-left">
@@ -149,7 +147,7 @@ for (const e of upcomingEvents) {
     </div>
 
     <div class="mt-16">
-      <h1>Latest Articles</h1>
+      <h1 class="glitch-text">Latest Articles</h1>
     </div>
 
     <div class="w3pn-articles grid md:grid-cols-2 gap-6">
@@ -180,7 +178,7 @@ for (const e of upcomingEvents) {
     </div>
 
     <div class="mt-16">
-      <h1>Latest Talks</h1>
+      <h1 class="glitch-text">Latest Talks</h1>
     </div>
 
     <div class="grid md:grid-cols-2 gap-6">

src/styles/base.css

@@ -33,6 +33,25 @@
     U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
+.glitch-text {
+  font-family: Major Mono Display, ui-monospace, SFMono-Regular, Menlo, Monaco,
+    Consolas, "Liberation Mono", "Courier New", monospace;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 500ms;
+  text-transform: lowercase!important;
+  flex-wrap: nowrap;
+}
+
+.testimonial-fade {
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.testimonial-fade.active {
+  opacity: 1;
+}
+
 @tailwind components;
 
 @layer components {
@@ -86,7 +105,6 @@
   a.button button {
     fill: #fff;
     stroke: #fff;
-
   }
 
   a.button button::after {