feat: add skills component

- update css
- update some styles
- update data.json
- update types

src/lib/components/SkillEntry.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+	import type { SkillEntry } from '$lib/types/data';
+	import { Languages } from '@lucide/svelte';
+
+	let { icon, title, items }: SkillEntry = $props();
+
+	let subtitle = $derived.by(() => {
+		return `${items.length} Einräge`;
+	});
+</script>
+
+<article>
+	<div class="header">
+		<div class="header-icon">
+			<span class="icon">
+				<Languages class="icon" />
+			</span>
+		</div>
+		<div class="headline">
+			<span class="title">{title}</span>
+			<span class="sub-title">{subtitle}</span>
+		</div>
+	</div>
+	<ul class="item-tags">
+		{#each items as item, i (i)}
+			<li class="item-tags-tag">
+				<div>
+					{item}
+				</div>
+			</li>
+		{/each}
+	</ul>
+</article>
+
+<style>
+    article {
+				grid-row: span 2;
+				display: grid;
+				grid-template-rows: subgrid;
+        gap: 1.5rem;
+
+        padding: 1.5rem;
+        border: 1px solid var(--color-skill-card-border);
+        border-radius: 1rem;
+        background-color: var(--color-skill-card-background);
+
+        transition: box-shadow ease-in-out 0.1s, transform ease-in-out 0.3s;
+
+        @media (min-width: 768px) {
+            gap: 2rem;
+            padding: 2.5rem;
+        }
+
+        &:hover {
+            transform: translateY(-0.5rem);
+            box-shadow: var(--color-card-box-shadow);
+        }
+    }
+
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 1.25rem;
+
+        padding-bottom: 1.5rem;
+        border-bottom: 1px solid var(--color-skill-card-header-border);
+    }
+
+    .header-icon {
+        padding: 0.875rem;
+        border-radius: 1rem;
+        background-image: var(--color-skill-card-header-background-image);
+
+        transition: box-shadow ease-in-out 0.1s;
+    }
+
+    article:hover .header-icon {
+        box-shadow: var(--color-card-box-shadow);
+    }
+
+    .icon {
+        font-size: 2rem;
+    }
+
+    .headline {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+        gap: 0.25rem;
+    }
+
+    .title {
+        font-size: 1.25rem;
+        font-weight: bold;
+
+        @media (min-width: 768px) {
+            font-size: 1.5rem;
+        }
+    }
+
+    .sub-title {
+        font-size: 0.875rem;
+        color: var(--color-headline-primary);
+    }
+
+    .item-tags {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+				align-content: start;
+        justify-items: stretch;
+        align-items: center;
+        gap: 0.5rem;
+
+        margin: unset;
+        padding: unset;
+        list-style: none;
+    }
+
+    .item-tags-tag {
+        padding: 0.5rem 0.75rem;
+
+        border-radius: 0.75rem;
+        border: 1px solid var(--color-skill-card-item-border);
+        background-color: var(--color-skill-card-item-background);
+
+        font-size: 0.875rem;
+				font-weight: bold;
+        text-align: center;
+        color: white;
+
+        transition: ease-in-out 0.2s;
+
+        @media (min-width: 786px) {
+            padding: 0.75rem 1rem;
+						font-size: 1rem;
+        }
+
+        &:hover {
+            border: 1px solid var(--color-skill-card-item-hover-border);
+            background-color: var(--color-skill-card-item-hover-background);
+
+        }
+    }
+
+    .item-tags-tag div {
+        transition: scale ease-in-out 0.2s;
+    }
+
+		.item-tags-tag:hover div {
+        scale: 1.05;
+    }
+</style>