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,64 +1,174 @@
-{{- $speed := .Get "speed" | default "30s" -}}
+{{- $speed := .Get "speed" | default "30s" -}} {{- $gap := .Get "gap" | default
-{{- $gap := .Get "gap" | default "4rem" -}}
+"4rem" -}} {{- $height := .Get "height" | default "80px" -}}
-{{- $height := .Get "height" | default "80px" -}}
 
-<div class="tech-banner-wrapper" style="overflow: hidden; width: 100%; position: relative; margin: 2rem 0;">
+<div
-  <!-- Gradient overlays for smooth fade effect -->
+    class="tech-banner-wrapper"
-  <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>
+    style="overflow: hidden; width: 100%; position: relative; margin: 2rem 0"
-  <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>
+>
+    <!-- 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>
 
-  <!-- Scrolling container -->
+    <!-- Scrolling container -->
-  <div class="tech-banner-scroll" style="display: flex; gap: {{ $gap }}; animation: scroll-left {{ $speed }} linear infinite; will-change: transform;">
+    <div
-    <!-- First set of logos -->
+        class="tech-banner-scroll"
-    <div style="display: flex; gap: {{ $gap }}; align-items: center; flex-shrink: 0;">
+        style="display: flex; gap: {{ $gap }}; will-change: transform;"
-      <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';" />
+        <!-- First set of logos -->
-      <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';" />
+        <div
-      <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';" />
+            class="tech-banner-track"
-      <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';" />
+            style="display: flex; gap: {{ $gap }}; align-items: center; flex-shrink: 0; animation: scroll-left {{ $speed }} linear infinite;"
-      <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';" />
+        >
+            <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
+            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>
-    <!-- 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>
-  </div>
 </div>
 
 <style>
-  :root {
-    --color-bg: #ffffff;
-  }
-
-  @media (prefers-color-scheme: dark) {
     :root {
-      --color-bg: #111111;
+        --color-bg: #ffffff;
     }
-  }
 
-  [data-theme="dark"] {
+    @media (prefers-color-scheme: dark) {
-    --color-bg: #111111;
+        :root {
-  }
+            --color-bg: #111111;
-
+        }
-  [data-theme="light"] {
-    --color-bg: #ffffff;
-  }
-
-  @keyframes scroll-left {
-    0% {
-      transform: translateX(0);
     }
-    100% {
-      transform: translateX(-50%);
-    }
-  }
 
-  .tech-banner-scroll:hover {
+    [data-theme="dark"] {
-    animation-play-state: paused;
+        --color-bg: #111111;
-  }
+    }
+
+    [data-theme="light"] {
+        --color-bg: #ffffff;
+    }
+
+    @keyframes scroll-left {
+        0% {
+            transform: translateX(0);
+        }
+        100% {
+            transform: translateX(calc(-100% - {{$gap}}));
+        }
+    }
+
+    .tech-banner-track:hover {
+        animation-play-state: paused;
+    }
+
+    .tech-banner-scroll:hover .tech-banner-track {
+        animation-play-state: paused;
+    }
 </style>