Tweak name audio button placement and reliability

Author: Bikram Gole

script.js

@@ -1614,13 +1614,22 @@ function initNamePronounce() {
 
   const synth = window.speechSynthesis;
   let currentUtterance = null;
+  let cachedVoices = [];
+
+  const syncVoices = () => {
+    cachedVoices = synth.getVoices?.() || [];
+  };
+
+  syncVoices();
+  if (typeof synth.addEventListener === "function") {
+    synth.addEventListener("voiceschanged", syncVoices);
+  }
 
   const pickVoice = () => {
-    const voices = synth.getVoices?.() || [];
-    if (!voices.length) return null;
+    if (!cachedVoices.length) return null;
     return (
-      voices.find((voice) => voice.lang?.toLowerCase() === "en-us") ||
-      voices.find((voice) => voice.lang?.toLowerCase().startsWith("en")) ||
+      cachedVoices.find((voice) => voice.lang?.toLowerCase() === "en-us") ||
+      cachedVoices.find((voice) => voice.lang?.toLowerCase().startsWith("en")) ||
       null
     );
   };
@@ -1640,6 +1649,13 @@ function initNamePronounce() {
 
   const speakName = () => {
     stopSpeech();
+    if (synth.paused) {
+      try {
+        synth.resume();
+      } catch (error) {
+        // ignore
+      }
+    }
     const text = heroName?.dataset.name || heroName?.textContent || "Bikram Gole";
     const utterance = new SpeechSynthesisUtterance(text);
     utterance.lang = "en-US";
@@ -1660,6 +1676,9 @@ function initNamePronounce() {
       stopSpeech();
       return;
     }
+    if (!cachedVoices.length) {
+      syncVoices();
+    }
     speakName();
   });
 

styles.css

@@ -1359,26 +1359,31 @@ h1 {
 }
 
 .hero-name-row {
-  display: flex;
-  align-items: baseline;
+  display: inline-flex;
+  align-items: flex-end;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: 0.35rem;
+  position: relative;
 }
 
 .name-speak {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: clamp(1.5rem, 2.4vw, 2rem);
-  height: clamp(1.5rem, 2.4vw, 2rem);
-  border-radius: 999px;
-  border: 1px solid var(--border);
+  width: clamp(1.25rem, 2vw, 1.6rem);
+  height: clamp(1.25rem, 2vw, 1.6rem);
+  border-radius: 6px;
+  border: 1px solid rgba(120, 190, 255, 0.55);
   background:
-    radial-gradient(60% 60% at 30% 30%, rgba(120, 200, 255, 0.25), transparent 70%),
+    linear-gradient(160deg, rgba(105, 190, 255, 0.32), rgba(12, 16, 28, 0.9)),
     var(--card);
   color: var(--blue-2);
-  box-shadow: 0 10px 22px rgba(10, 20, 40, 0.25);
+  box-shadow: 0 8px 18px rgba(8, 16, 32, 0.3);
   cursor: pointer;
+  margin-left: -0.12rem;
+  transform: translateY(-0.52em) rotate(-12deg);
+  transform-origin: left bottom;
+  z-index: 3;
   transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-base) var(--ease-out),
     border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out),
     background var(--motion-fast) var(--ease-out);
@@ -1391,10 +1396,10 @@ h1 {
 }
 
 .name-speak:hover {
-  transform: translateY(-1px) scale(1.03);
-  border-color: rgba(143, 204, 255, 0.7);
+  transform: translateY(-0.6em) rotate(-12deg) scale(1.04);
+  border-color: rgba(143, 204, 255, 0.85);
   color: var(--orange-2);
-  box-shadow: 0 12px 26px rgba(64, 150, 255, 0.22), 0 0 18px rgba(110, 186, 255, 0.32);
+  box-shadow: 0 12px 22px rgba(64, 150, 255, 0.22), 0 0 18px rgba(110, 186, 255, 0.32);
 }
 
 .name-speak:focus-visible {
@@ -1403,7 +1408,7 @@ h1 {
 }
 
 .name-speak:active {
-  transform: translateY(0) scale(0.98);
+  transform: translateY(-0.46em) rotate(-12deg) scale(0.98);
 }
 
 .name-speak.speaking {
@@ -1430,6 +1435,20 @@ h1 {
   }
 }
 
+@media (max-width: 520px) {
+  .name-speak {
+    transform: translateY(-0.4em) rotate(-10deg);
+  }
+
+  .name-speak:hover {
+    transform: translateY(-0.45em) rotate(-10deg) scale(1.03);
+  }
+
+  .name-speak:active {
+    transform: translateY(-0.34em) rotate(-10deg) scale(0.98);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .name-speak {
     transition: none;