extract carousel to component

src/components/tech-stack-carousel/tech-stack-carousel.html

@@ -0,0 +1,49 @@
+<section class="section" id="stack">
+  <div class="section-title-row">
+    <h2>Tech Stack</h2>
+    <p>Primary technologies I use to deliver production-ready software.</p>
+  </div>
+  <div
+    class="stack-carousel-shell"
+    data-disable-bg-pointer
+    (mouseenter)="pauseAutoScroll()"
+    (mouseleave)="resumeAutoScroll()"
+    (focusin)="pauseAutoScroll()"
+    (focusout)="onCarouselFocusOut($event)"
+    (touchstart)="pauseAutoScroll()"
+    (touchend)="resumeAutoScroll()"
+  >
+    <button class="carousel-btn" type="button" aria-label="Previous technologies" (click)="scrollStack(-1)">
+      <span aria-hidden="true">&larr;</span>
+    </button>
+
+    <div class="stack-carousel-column">
+      <div class="stack-carousel" #stackCarousel role="region" aria-label="Tech stack carousel">
+        @for (skill of skills; track skill.name) {
+          <app-card cardClass="skill-card stack-slide">
+            <div class="skill-heading">
+              <span class="skill-icon" role="img" [attr.aria-label]="skill.name + ' logo'">
+                <img
+                  class="skill-logo"
+                  [src]="skill.logoUrl"
+                  [alt]="skill.name + ' logo'"
+                  loading="lazy"
+                  decoding="async"
+                  (error)="onLogoError($event)"
+                />
+                <span class="skill-fallback" aria-hidden="true">{{ skill.fallbackLabel }}</span>
+              </span>
+              <h3>{{ skill.name }}</h3>
+            </div>
+            <p class="meta">{{ skill.category }} - {{ skill.level }}</p>
+          </app-card>
+        }
+      </div>
+    </div>
+
+    <button class="carousel-btn" type="button" aria-label="Next technologies" (click)="scrollStack(1)">
+      <span aria-hidden="true">&rarr;</span>
+    </button>
+  </div>
+</section>
+