Fix horizontal skills overflow, autocomplete chip selection, and add …

static/script.js

@@ -238,17 +238,20 @@ if (clearFiltersBtn) {
       // Prevent the input blur handler from closing the menu before click runs.
       item.addEventListener("mousedown", function (evt) {
         evt.preventDefault();
+        selectSuggestion(skill);
+      });
+
+      // Handle touch devices to select immediately on touchstart without blur delay
+      item.addEventListener("touchstart", function (evt) {
+        evt.preventDefault();
+        selectSuggestion(skill);
       });
 
       item.addEventListener("mouseenter", function () {
         activeSuggestionIndex = index;
         renderActiveSuggestion();
       });
 
-      item.addEventListener("click", function () {
-        selectSuggestion(skill);
-      });
-
       suggestionsDiv.appendChild(item);
     });
     suggestionsDiv.style.display = "block";

static/style.css

@@ -883,6 +883,22 @@ ol {
   flex-shrink: 0;
 }
 
+.skill-strip-marquee {
+  overflow: hidden;
+  width: 100%;
+  position: relative;
+  display: flex;
+  mask-image: linear-gradient(to right, transparent, white 15%, white 85%, transparent);
+  -webkit-mask-image: linear-gradient(to right, transparent, white 15%, white 85%, transparent);
+}
+
+.skill-strip-track {
+  display: flex;
+  width: max-content;
+  animation: skill-strip-marquee 30s linear infinite;
+  gap: 0;
+}
+
 @keyframes skill-strip-marquee {
   from { transform: translateX(0); }
   to { transform: translateX(-50%); }

templates/index.html

@@ -708,7 +708,10 @@ <h4 class="footer-col-title">About Us</h4>
 
 
 
-    <script src="/static/data/skills.js"></script>
+  <!-- Scroll-to-top button -->
+  <button id="scroll-top-btn" aria-label="Back to top" title="Back to top">↑</button>
+
+  <script src="/static/data/skills.js"></script>
   <script src="/static/script.js"></script>
 </body>