added skill-cards

src/app/components/pages/skills/skills-grid/skills-grid.ts

@@ -0,0 +1,96 @@
+import {Component} from '@angular/core';
+import {SkillCategory} from '../../../../models/skill-category';
+import {SkillCard} from '../skill-card/skill-card';
+
+@Component({
+  selector: 'app-skills-grid',
+  imports: [
+    SkillCard
+  ],
+  templateUrl: './skills-grid.html',
+  styleUrl: './skills-grid.scss',
+})
+export class SkillsGrid {
+  categories: SkillCategory[] = [
+    {
+      title: 'Programming',
+      category: 'programming',
+      gridArea: 'prog',
+      skills: [
+        {name: 'TypeScript', icon: 'typescript', url: 'https://www.typescriptlang.org/'},
+        {name: 'JavaScript', icon: 'javascript', url: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript'},
+        {name: 'Angular', icon: 'angular', url: 'https://angular.dev/'},
+        {name: 'Java', icon: 'java', url: 'https://www.java.com/'},
+        {name: 'Spring', icon: 'java-spring', url: 'https://spring.io/'},
+        {name: 'C#', icon: 'c-sharp', url: 'https://learn.microsoft.com/en-us/dotnet/csharp/'},
+        {name: '.NET', icon: 'c-sharp-net', url: 'https://dotnet.microsoft.com/'},
+        {name: 'Kafka', icon: 'kafka', url: 'https://kafka.apache.org/'},
+        {name: 'Elasticsearch', icon: 'elasticseach', url: 'https://www.elastic.co/'},
+      ],
+    },
+    {
+      title: 'Databases',
+      category: 'db',
+      gridArea: 'db',
+      skills: [
+        {name: 'SQL Server', icon: 'microsoftsqlserver', url: 'https://www.microsoft.com/en-us/sql-server'},
+        {name: 'PostgreSQL', icon: 'postgresql', url: 'https://www.postgresql.org/'},
+        {name: 'MySQL', icon: 'mysql', url: 'https://www.mysql.com/'},
+        {name: 'MariaDB', icon: 'mariadb', url: 'https://mariadb.org/'},
+      ],
+    },
+    {
+      title: 'DevOps',
+      category: 'devops',
+      gridArea: 'devops',
+      skills: [
+        {name: 'Kubernetes', icon: 'kubernetes', url: 'https://kubernetes.io/'},
+        {name: 'Docker', icon: 'docker', url: 'https://www.docker.com/'},
+        {name: 'GitLab', icon: 'gitlab', url: 'https://gitlab.com/'},
+        {name: 'Azure DevOps', icon: 'devops', url: 'https://azure.microsoft.com/en-us/products/devops'},
+        {name: 'Azure', icon: 'azure', url: 'https://azure.microsoft.com/'},
+        {name: 'Hetzner', icon: 'hetzner', url: 'https://www.hetzner.com/'},
+        {name: 'Netcup', icon: 'netcup', url: 'https://www.netcup.eu/'},
+      ],
+    },
+    {
+      title: 'Operating Systems',
+      category: 'os',
+      gridArea: 'os',
+      skills: [
+        {name: 'Arch Linux', icon: 'arch', url: 'https://archlinux.org/'},
+        {name: 'Ubuntu', icon: 'ubuntu', url: 'https://ubuntu.com/'},
+        {name: 'macOS', icon: 'macos', url: 'https://www.apple.com/macos/'},
+        {name: 'Windows', icon: 'windows', url: 'https://www.microsoft.com/windows'},
+      ],
+    },
+    {
+      title: 'Infrastructure as Code',
+      category: 'iac',
+      gridArea: 'iac',
+      skills: [
+        {name: 'Terraform', icon: 'terraform', url: 'https://www.terraform.io/'},
+        {name: 'Ansible', icon: 'ansible', url: 'https://www.ansible.com/'},
+      ],
+    },
+    {
+      title: 'Hypervisors',
+      category: 'hyperviser',
+      gridArea: 'hyper',
+      skills: [
+        {name: 'Proxmox', icon: 'proxmox', url: 'https://www.proxmox.com/'},
+        {name: 'Hyper-V', icon: 'hyperv', url: 'https://learn.microsoft.com/en-us/virtualization/hyper-v-on-windows/'},
+      ],
+    },
+    {
+      title: 'Tools',
+      category: 'tools',
+      gridArea: 'tools',
+      skills: [
+        {name: 'JetBrains', icon: 'jetbrains', url: 'https://www.jetbrains.com/'},
+        {name: 'Visual Studio', icon: 'vs', url: 'https://visualstudio.microsoft.com/'},
+        {name: 'Microsoft Office', icon: 'office', url: 'https://www.microsoft.com/microsoft-365'},
+      ],
+    },
+  ];
+}