feat: add skills component

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

src/lib/components/ProjectEntry.svelte

@@ -70,7 +70,7 @@
             transition: box-shadow ease-in-out 0.1s, transform ease-in-out 0.3s 0.5s;
 
             transform: translateY(-0.5rem);
-            box-shadow: var(--color-project-card-box-shadow);
+            box-shadow: var(--color-card-box-shadow);
         }
     }
 

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>

src/lib/components/Skills.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import type { Skills } from '$lib/types/data';
+	import SkillEntry from '$lib/components/SkillEntry.svelte';
+
+	let { anchorId,title, subtitle, entries }: Skills = $props()
+</script>
+
+<section id={anchorId}>
+	<h2>{title}</h2>
+	{#if (subtitle)}
+		<p>{subtitle}</p>
+	{/if}
+	<div>
+		{#each entries as entry, i (i)}
+			<SkillEntry {...entry} />
+		{/each}
+	</div>
+</section>
+
+<style>
+    section {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        justify-content: center;
+        gap: 1rem;
+        padding: 5rem 1rem;
+
+        @media (min-width: 768px) {
+            padding: 6rem 2.5rem;
+        }
+    }
+
+    h2 {
+        margin: unset;
+
+        font-size: 1.875rem;
+        text-align: center;
+
+        color: transparent;
+        background-image: var(--color-headline-background-image);
+        background-clip: text;
+
+
+        @media (min-width: 768px) {
+            font-size: 3rem;
+        }
+    }
+
+    p {
+        margin: unset;
+        margin-bottom: 2rem;
+
+        font-size: 1.125rem;
+        text-align: center;
+
+        color: var(--color-text-secondary);
+
+        @media (min-width: 768px) {
+            font-size: 1.25rem;
+        }
+    }
+
+    div {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-auto-rows: auto;
+        gap: 2rem;
+        justify-content: center;
+
+        @media (min-width: 768px) {
+            grid-template-columns: repeat(2, minmax(0, 25rem));
+						grid-auto-rows: auto auto;
+        }
+
+        @media (min-width: 1024px) {
+            grid-template-columns: repeat(3, minmax(0, 25rem));
+        }
+    }
+</style>

src/lib/data/data.json

@@ -35,7 +35,7 @@
 	"projects": {
 		"title": "Projekte",
 		"anchorId": "projects",
-		"subtitle": "Aktuelle und Vergangenne Projekte and denen ich erfolgreich mitgewirkt habe",
+		"subtitle": "Projekte and denen ich erfolgreich mitgewirkt habe",
 		"entries": [
 			{
 				"title": "Custom Frontend für GPT-Anwendung mit Dokumentenverwaltung",
@@ -114,5 +114,75 @@
 				]
 			}
 		]
+	},
+	"skills": {
+		"title": "Skills & Tools",
+		"anchorId": "skills",
+		"subtitle": "Meine Fähigkeiten und Werkzeuge zur Lösung individueller Probleme",
+		"entries": [
+			{
+				"title": "Programmiersprachen",
+				"icon": "language",
+				"items": ["Java", "JavaScript", "TypeScript", "Visual Basic", "C#", "SQL", "HTML", "CSS"]
+			},
+			{
+				"title": "Frameworks",
+				"icon": "language",
+				"items": [
+					"Spring Boot",
+					"NodeJs",
+					"React",
+					"Angular",
+					"Svelte",
+					"WPF .Net",
+					"Sap Commerce Cloud"
+				]
+			},
+			{
+				"title": "Meta-Frameworks",
+				"icon": "language",
+				"items": ["Next.JS", "SvelteKit", "Express", "Fastify", "Sap Composable Storefront"]
+			},
+			{
+				"title": "Datenbanken",
+				"icon": "language",
+				"items": ["PostgreSQL", "MariaDB", "MySQL", "SQLite", "MongoDB", "Oracle", "MS SQL"]
+			},
+			{
+				"title": "CMS",
+				"icon": "language",
+				"items": ["Contentful", "Strapi", "Smartedit"]
+			},
+			{
+				"title": "Testing",
+				"icon": "language",
+				"items": ["JUnit", "Playwright", "Cypres"]
+			},
+			{
+				"title": "Sicherheitslösungen",
+				"icon": "language",
+				"items": ["Keycloak", "JWT", "OAuth2"]
+			},
+			{
+				"title": "Entwicklungs Tools",
+				"icon": "language",
+				"items": ["Git", "Podman", "Docker", "WSL", "IntelliJ Idea", "Figma"]
+			},
+			{
+				"title": "Restful APIs und Dokumentation",
+				"icon": "language",
+				"items": ["OpenAPI", "Swagger", "Confluence"]
+			},
+			{
+				"title": "Methoden",
+				"icon": "language",
+				"items": ["Scrum", "Kanban", "Jira"]
+			},
+			{
+				"title": "Sonstiges",
+				"icon": "language",
+				"items": ["SEO", "Accessibility", "KI-basierte Tools"]
+			}
+		]
 	}
 }

src/lib/styles/app.css

@@ -31,7 +31,21 @@
     --color-project-card-front-background-secondary: oklch(0.373 0.034 259.733);
     --color-project-card-back-background-primary: oklch(0.379 0.146 265.522);
     --color-project-card-back-background-secondary: oklch(0.359 0.144 278.697);
-    --color-project-card-box-shadow: 0 0 0 0 rgba(0,0,0,0), oklab(0.623 -0.0378409 -0.210628 / 0.5) 0 25px 50px -12px;
+
+    --color-skill-card-background: oklab(0.278 -0.00750867 -0.0321344 / 0.6);
+    --color-skill-card-border: oklab(0.373 -0.00606001 -0.0334556 / 0.5);
+    --color-skill-card-header-border: oklab(0.379 -0.0113992 -0.145554 / 0.3);
+    --color-skill-card-item-background: oklab(0.21 -0.00316128 -0.0338527 / 0.5);
+    --color-skill-card-item-hover-background: oklab(0.623 -0.0378409 -0.210628 / 0.1);
+    --color-skill-card-item-border: oklab(0.373 -0.00606001 -0.0334556 / 0.5);
+    --color-skill-card-item-hover-border: oklab(0.707 -0.0437502 -0.159094 / 0.5);
+    --color-skill-card-header-background-image: linear-gradient(
+            to right bottom,
+            oklab(0.623 -0.0378409 -0.210628 / 0.8) 0%,
+            oklch(0.511 0.262 276.966) 100%
+    );
+
+    --color-card-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), oklab(0.623 -0.0378409 -0.210628 / 0.5) 0 25px 50px -12px;
 
     --z-index-header: 50;
 }
@@ -54,6 +68,7 @@ html, body {
 }
 
 .icon {
+    display: block;
     width: 1em;
     height: 1em;
 }

src/lib/types/data.ts

@@ -1,8 +1,11 @@
+import type { icons } from '@lucide/svelte';
+
 export type Data = {
 	header: Header;
 	footer: Footer;
 	profile: Profile;
 	projects: Projects;
+	skills: Skills;
 };
 
 export type Header = {
@@ -30,7 +33,7 @@ export type Profile = {
 	title: string;
 	anchorId: string;
 	text: string;
-}
+};
 
 export type Projects = {
 	title: string;
@@ -46,4 +49,19 @@ export type ProjectEntry = {
 	tasks: string;
 	toolsHeadline: string;
 	tools: string[];
-}
+};
+
+export type Skills = {
+	title: string;
+	subtitle: string;
+	anchorId: string;
+	entries: SkillEntry[];
+};
+
+export type SkillEntry = {
+	title: string;
+	icon: LucideIconName;
+	items: string[];
+};
+
+export type LucideIconName = keyof typeof icons;

src/routes/+page.svelte

@@ -3,9 +3,11 @@
 	import type { Data } from '$lib/types/data';
 	import Profile from '$lib/components/Profile.svelte';
 	import Projects from '$lib/components/Projects.svelte';
+	import Skills from '$lib/components/Skills.svelte';
 
 	let data: Data = content;
 </script>
 
 <Profile {...data.profile} />
 <Projects {...data.projects} />
+<Skills {...data.skills} />