Primary technologies I use to deliver production-ready software.
-
- @for (skill of skills; track skill.name) {
-
- {{ skill.name }}
- {{ skill.category }} - {{ skill.level }}
-
- }
+
+
+
+
+ @for (skill of skills; track skill.name) {
+
+
+
+ ![]()
+ {{ skill.fallbackLabel }}
+
+
{{ skill.name }}
+
{{ skill.category }} - {{ skill.level }}
+
+ }
+
+
+
diff --git a/src/pages/home/home.spec.ts b/src/pages/home/home.spec.ts
index 9d17aed..c95018c 100644
--- a/src/pages/home/home.spec.ts
+++ b/src/pages/home/home.spec.ts
@@ -37,4 +37,18 @@ describe('Home', () => {
expect(links.length).toBe(component.projects.length);
expect(links[0]?.getAttribute('href')).toContain('/projects/tasktimer');
});
+
+ it('should render stack carousel with icon badges', () => {
+ const compiled = fixture.nativeElement as HTMLElement;
+ const carousel = compiled.querySelector('#stack .stack-carousel');
+ const icons = compiled.querySelectorAll('#stack .skill-icon');
+ const logos = compiled.querySelectorAll('#stack .skill-logo');
+ const controls = compiled.querySelectorAll('#stack .carousel-btn');
+
+ expect(carousel).toBeTruthy();
+ expect(icons.length).toBe(component.skills.length);
+ expect(logos.length).toBe(component.skills.length);
+ expect(logos[0]?.getAttribute('src')).toContain('/tech-logos/');
+ expect(controls.length).toBe(2);
+ });
});
diff --git a/src/pages/home/home.ts b/src/pages/home/home.ts
index 5ceb9db..ee1bdb1 100644
--- a/src/pages/home/home.ts
+++ b/src/pages/home/home.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
import { RouterLink } from '@angular/router';
import { CardComponent } from '../../components/card/card';
import { PROJECTS, Project } from '../projects/project-data';
@@ -7,6 +7,8 @@ interface Skill {
name: string;
category: 'Frontend' | 'Backend' | 'Mobile' | 'Cloud' | 'Frontend / Backend' | 'Deployment';
level: string;
+ logoUrl: string;
+ fallbackLabel: string;
}
@Component({
@@ -16,6 +18,8 @@ interface Skill {
styleUrl: './home.css',
})
export class Home {
+ @ViewChild('stackCarousel') private readonly stackCarousel?: ElementRef
;
+
readonly hero = {
name: 'Tim Kainz',
role: 'Fullstack Developer from Austria',
@@ -24,19 +28,35 @@ export class Home {
};
readonly skills: Skill[] = [
- { name: 'Angular', category: 'Frontend', level: 'Advanced' },
- { name: 'React', category: 'Frontend', level: 'Advanced' },
- { name: 'Ionic', category: 'Frontend', level: 'Advanced' },
- { name: 'TypeScript', category: 'Frontend / Backend', level: 'Advanced' },
- { name: 'Javascript', category: 'Frontend / Backend', level: 'Advanced' },
- { name: 'Docker', category: 'Deployment', level: 'Advanced' },
- { name: 'C# / .NET', category: 'Frontend / Backend', level: 'Advanced' },
- { name: 'ASP.NET Core', category: 'Backend', level: 'Advanced' },
- { name: 'WPF', category: 'Frontend', level: 'Advanced' },
- { name: 'Java', category: 'Backend', level: 'Advanced' },
- { name: 'Spring Boot', category: 'Backend', level: 'Advanced' },
- { name: 'Flutter', category: 'Mobile', level: 'Advanced' },
+ { name: 'Angular', category: 'Frontend', level: 'Advanced', logoUrl: '/tech-logos/angular.svg', fallbackLabel: 'NG' },
+ { name: 'React', category: 'Frontend', level: 'Advanced', logoUrl: '/tech-logos/react.svg', fallbackLabel: 'RE' },
+ { name: 'Ionic', category: 'Frontend', level: 'Advanced', logoUrl: '/tech-logos/ionic.svg', fallbackLabel: 'IO' },
+ { name: 'TypeScript', category: 'Frontend / Backend', level: 'Advanced', logoUrl: '/tech-logos/typescript.svg', fallbackLabel: 'TS' },
+ { name: 'Javascript', category: 'Frontend / Backend', level: 'Advanced', logoUrl: '/tech-logos/javascript.svg', fallbackLabel: 'JS' },
+ { name: 'Docker', category: 'Deployment', level: 'Advanced', logoUrl: '/tech-logos/docker.svg', fallbackLabel: 'DK' },
+ { name: 'C# / .NET', category: 'Frontend / Backend', level: 'Advanced', logoUrl: '/tech-logos/csharp.svg', fallbackLabel: 'CS' },
+ { name: 'ASP.NET Core', category: 'Backend', level: 'Advanced', logoUrl: '/tech-logos/dotnet.svg', fallbackLabel: 'AS' },
+ { name: 'WPF', category: 'Frontend', level: 'Advanced', logoUrl: '/tech-logos/wpf.svg', fallbackLabel: 'WP' },
+ { name: 'Java', category: 'Backend', level: 'Advanced', logoUrl: '/tech-logos/java.svg', fallbackLabel: 'JV' },
+ { name: 'Spring Boot', category: 'Backend', level: 'Advanced', logoUrl: '/tech-logos/spring.svg', fallbackLabel: 'SB' },
+ { name: 'Flutter', category: 'Mobile', level: 'Advanced', logoUrl: '/tech-logos/flutter.svg', fallbackLabel: 'FL' },
];
readonly projects: Project[] = PROJECTS;
+
+ scrollStack(direction: -1 | 1): void {
+ const carousel = this.stackCarousel?.nativeElement;
+ if (!carousel) {
+ return;
+ }
+
+ const cardWidth = Math.max(carousel.clientWidth * 0.82, 260);
+ carousel.scrollBy({ left: cardWidth * direction, behavior: 'smooth' });
+ }
+
+ onLogoError(event: Event): void {
+ const image = event.target as HTMLImageElement | null;
+ const wrapper = image?.closest('.skill-icon');
+ wrapper?.classList.add('is-fallback');
+ }
}