50 lines
1.8 KiB
HTML
50 lines
1.8 KiB
HTML
<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">←</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">→</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|