add fade to carousel

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

@@ -23,6 +23,8 @@ export class TechStackCarousel implements AfterViewInit, OnDestroy {
   private virtualScrollLeft = 0;
   private readonly autoScrollSpeedPxPerSecond = 72;
   isAutoScrolling = false;
+  showLeftFade = false;
+  showRightFade = false;
 
   readonly skills: Skill[] = [
     { name: 'Angular', category: 'Frontend', level: 'Advanced', logoUrl: '/tech-logos/angular.svg', fallbackLabel: 'NG' },
@@ -46,12 +48,14 @@ export class TechStackCarousel implements AfterViewInit, OnDestroy {
       typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
     if (prefersReducedMotion) {
+      this.updateFadeState();
       return;
     }
 
     // Defer start to the next task to avoid NG0100 in dev mode.
     this.startAutoScrollTimeout = setTimeout(() => {
       this.startAutoScrollTimeout = null;
+      this.updateFadeState();
       this.resumeAutoScroll();
     }, 0);
   }
@@ -73,6 +77,11 @@ export class TechStackCarousel implements AfterViewInit, OnDestroy {
     }
 
     carousel.scrollBy({ left: this.getScrollStep(carousel) * direction, behavior: 'smooth' });
+    requestAnimationFrame(() => this.updateFadeState(carousel));
+  }
+
+  onCarouselScroll(): void {
+    this.updateFadeState();
   }
 
   pauseAutoScroll(): void {
@@ -111,6 +120,7 @@ export class TechStackCarousel implements AfterViewInit, OnDestroy {
       this.lastAutoScrollTime = timestamp;
 
       this.autoAdvanceStack(carousel, deltaMs);
+      this.updateFadeState(carousel);
       this.autoScrollFrameId = requestAnimationFrame(step);
     };
 
@@ -150,6 +160,25 @@ export class TechStackCarousel implements AfterViewInit, OnDestroy {
     return carousel.scrollWidth / 2;
   }
 
+  private updateFadeState(carousel = this.stackCarousel?.nativeElement): void {
+    if (!carousel) {
+      this.showLeftFade = false;
+      this.showRightFade = false;
+      return;
+    }
+
+    const maxScroll = Math.max(carousel.scrollWidth - carousel.clientWidth, 0);
+    if (maxScroll <= 1) {
+      this.showLeftFade = false;
+      this.showRightFade = false;
+      return;
+    }
+
+    const left = carousel.scrollLeft;
+    this.showLeftFade = left > 1;
+    this.showRightFade = left < maxScroll - 1;
+  }
+
   private getScrollStep(carousel: HTMLElement): number {
     return Math.max(carousel.clientWidth * 0.82, 260);
   }