189 lines
8.2 KiB
HTML
189 lines
8.2 KiB
HTML
{{- $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"
|
|
>
|
|
<!-- 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 -->
|
|
<div
|
|
class="tech-banner-scroll"
|
|
style="display: flex; gap: {{ $gap }}; will-change: transform;"
|
|
>
|
|
<!-- First set of logos -->
|
|
<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/proxmox-color.svg"
|
|
alt="Proxmox"
|
|
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/proxmox-color.svg"
|
|
alt="Proxmox"
|
|
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>
|
|
|
|
<style>
|
|
:root {
|
|
--color-bg: #ffffff;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--color-bg: #111111;
|
|
}
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--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>
|