Change tech banner animation speed

Set animation speed to 60s for the tech banner in French homepage and
the tech-banner shortcode.

content/_index.fr.md

@@ -70,7 +70,7 @@ layout: hextra-home
       Les outils et plateformes avec lesquels je travaille
     </p>
   </div>
-  {{< tech-banner speed="30s" height="80px" gap="4rem" >}}
+  {{< tech-banner speed="60s" height="80px" gap="4rem" >}}
 </div>
 
 <style>

layouts/shortcodes/tech-banner.html

@@ -1,31 +1,137 @@
-{{- $speed := .Get "speed" | default "30s" -}}
-{{- $gap := .Get "gap" | default "4rem" -}}
-{{- $height := .Get "height" | default "80px" -}}
+{{- $speed := .Get "speed" | default "30s" -}} {{- $gap := .Get "gap" | default
+"4rem" -}} {{- $height := .Get "height" | default "80px" -}}
 
-<div class="tech-banner-wrapper" style="overflow: hidden; width: 100%; position: relative; margin: 2rem 0;">
+<div
+    class="tech-banner-wrapper"
+    style="overflow: hidden; width: 100%; position: relative; margin: 2rem 0"
+>
     <!-- Gradient overlays for smooth fade effect -->
-  <div style="position: absolute; top: 0; left: 0; width: 150px; height: 100%; background: linear-gradient(to right, var(--color-bg), transparent); z-index: 2; pointer-events: none;"></div>
-  <div style="position: absolute; top: 0; right: 0; width: 150px; height: 100%; background: linear-gradient(to left, var(--color-bg), transparent); z-index: 2; pointer-events: none;"></div>
+    <div
+        style="
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 150px;
+            height: 100%;
+            background: linear-gradient(to right, var(--color-bg), transparent);
+            z-index: 2;
+            pointer-events: none;
+        "
+    ></div>
+    <div
+        style="
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 150px;
+            height: 100%;
+            background: linear-gradient(to left, var(--color-bg), transparent);
+            z-index: 2;
+            pointer-events: none;
+        "
+    ></div>
 
     <!-- Scrolling container -->
-  <div class="tech-banner-scroll" style="display: flex; gap: {{ $gap }}; animation: scroll-left {{ $speed }} linear infinite; will-change: transform;">
+    <div
+        class="tech-banner-scroll"
+        style="display: flex; gap: {{ $gap }}; will-change: transform;"
+    >
         <!-- First set of logos -->
-    <div style="display: flex; gap: {{ $gap }}; align-items: center; flex-shrink: 0;">
-      <img src="/images/tech-banner/arista-color.svg" alt="Arista" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
-      <img src="/images/tech-banner/aws-color.svg" alt="AWS" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
-      <img src="/images/tech-banner/containerlab-color.svg" alt="ContainerLab" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
-      <img src="/images/tech-banner/k8s-color.svg" alt="Kubernetes" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
-      <img src="/images/tech-banner/nokia-color.svg" alt="Nokia" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
-      <img src="/images/tech-banner/scaleway-color.svg" alt="Scaleway" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
+        <div
+            class="tech-banner-track"
+            style="display: flex; gap: {{ $gap }}; align-items: center; flex-shrink: 0; animation: scroll-left {{ $speed }} linear infinite;"
+        >
+            <img
+                src="/images/tech-banner/arista-color.svg"
+                alt="Arista"
+                style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
+                onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
+                onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
+            />
+            <img
+                src="/images/tech-banner/aws-color.svg"
+                alt="AWS"
+                style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
+                onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
+                onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
+            />
+            <img
+                src="/images/tech-banner/containerlab-color.svg"
+                alt="ContainerLab"
+                style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
+                onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
+                onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
+            />
+            <img
+                src="/images/tech-banner/k8s-color.svg"
+                alt="Kubernetes"
+                style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
+                onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
+                onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
+            />
+            <img
+                src="/images/tech-banner/nokia-color.svg"
+                alt="Nokia"
+                style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
+                onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
+                onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
+            />
+            <img
+                src="/images/tech-banner/scaleway-color.svg"
+                alt="Scaleway"
+                style="height: {{ $height }}; width: 200px; object-fit: contain; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
+                onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
+                onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
+            />
         </div>
         <!-- Duplicate set for seamless loop -->
-    <div style="display: flex; gap: {{ $gap }}; align-items: center; flex-shrink: 0;">
-      <img src="/images/tech-banner/arista-color.svg" alt="Arista" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
-      <img src="/images/tech-banner/aws-color.svg" alt="AWS" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
-      <img src="/images/tech-banner/containerlab-color.svg" alt="ContainerLab" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
-      <img src="/images/tech-banner/k8s-color.svg" alt="Kubernetes" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
-      <img src="/images/tech-banner/nokia-color.svg" alt="Nokia" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
-      <img src="/images/tech-banner/scaleway-color.svg" alt="Scaleway" style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;" onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';" onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';" />
+        <div
+            class="tech-banner-track"
+            style="display: flex; gap: {{ $gap }}; align-items: center; flex-shrink: 0; animation: scroll-left {{ $speed }} linear infinite;"
+            aria-hidden="true"
+        >
+            <img
+                src="/images/tech-banner/arista-color.svg"
+                alt="Arista"
+                style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
+                onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
+                onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
+            />
+            <img
+                src="/images/tech-banner/aws-color.svg"
+                alt="AWS"
+                style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
+                onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
+                onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
+            />
+            <img
+                src="/images/tech-banner/containerlab-color.svg"
+                alt="ContainerLab"
+                style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
+                onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
+                onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
+            />
+            <img
+                src="/images/tech-banner/k8s-color.svg"
+                alt="Kubernetes"
+                style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
+                onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
+                onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
+            />
+            <img
+                src="/images/tech-banner/nokia-color.svg"
+                alt="Nokia"
+                style="height: {{ $height }}; width: auto; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
+                onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
+                onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
+            />
+            <img
+                src="/images/tech-banner/scaleway-color.svg"
+                alt="Scaleway"
+                style="height: {{ $height }}; width: 200px; object-fit: contain; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease;"
+                onmouseover="this.style.filter='grayscale(0%)'; this.style.opacity='1';"
+                onmouseout="this.style.filter='grayscale(100%)'; this.style.opacity='0.7';"
+            />
         </div>
     </div>
 </div>
@@ -54,11 +160,15 @@
             transform: translateX(0);
         }
         100% {
-      transform: translateX(-50%);
+            transform: translateX(calc(-100% - {{$gap}}));
         }
     }
 
-  .tech-banner-scroll:hover {
+    .tech-banner-track:hover {
+        animation-play-state: paused;
+    }
+
+    .tech-banner-scroll:hover .tech-banner-track {
         animation-play-state: paused;
     }
 </style>