feat: add intro component

- add intro section to data.json
- add intro types
- add css variables
- update header position desktop

src/lib/components/Footer.svelte

@@ -34,8 +34,10 @@
         align-items: center;
         justify-content: center;
 				gap: 1rem;
+
 				margin-top: 5rem;
 				padding: 2rem;
+
         background-color: var(--color-footer-background);
     }
 

src/lib/components/Header.svelte

@@ -34,17 +34,20 @@
 				font-size: 0.75rem;
 				font-weight: bold;
 
-        background-color: var(--color-dark-blue);
+        background-color: var(--color-header-background);
         backdrop-filter: blur(1rem);
 
 
         @media (min-width: 768px) {
+						position: sticky;
             top: 0;
 						bottom: unset;
 
             width: auto;
             padding: 1rem;
 
+						border: unset;
+            border-bottom: 1px solid var(--color-header-border);
 						border-radius: unset;
 
 						font-size: 1.125rem;

src/lib/components/Intro.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import type { Intro } from '$lib/types/data';
+	import profileImage from '$lib/assets/images/profile_picture.png';
+
+	let { name, title, text }: Intro = $props();
+</script>
+
+<section>
+	<div>
+		<div class="image-wrapper">
+			<img src={profileImage} alt="">
+		</div>
+		<h1>{name}</h1>
+		<h2>{title}</h2>
+		<p>{text}</p>
+	</div>
+</section>
+
+<style>
+    section {
+        padding: 5rem 1rem;
+        text-align: center;
+        background-image: linear-gradient(
+                var(--color-body-background) 0%,
+                var(--color-intro-background-secondary) 100%
+        );
+
+        @media (min-width: 768px) {
+            padding: 5rem;
+        }
+    }
+
+    div {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 1rem;
+
+        margin-inline: auto;
+        max-width: 40rem;
+    }
+
+    .image-wrapper {
+        display: flex;
+        width: 12rem;
+        aspect-ratio: 1 / 1;
+        padding: 0.25rem;
+        border-radius: 100%;
+        background-image: linear-gradient(
+                to right,
+                var(--color-intro-image-background-primary) 0%,
+                var(--color-intro-image-background-secondary) 100%
+        );
+    }
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 100%;
+    }
+
+    h1 {
+        margin: unset;
+        color: transparent;
+        font-size: 2.25rem;
+        background-image: linear-gradient(
+                to right,
+                var(--color-intro-subtitle-text-primary) 0%,
+                var(--color-intro-subtitle-text-secondary) 60%,
+                var(--color-intro-subtitle-text-tertiary) 100%);
+        background-clip: text;
+
+        @media (min-width: 768px) {
+            font-size: 3.75rem;
+        }
+    }
+
+    h2 {
+
+        margin: unset;
+        margin-bottom: 1rem;
+        color: var(--color-intro-title-text);
+        font-size: 1.25rem;
+
+        @media (min-width: 768px) {
+            font-size: 1.5rem;
+        }
+    }
+
+    p {
+        margin: unset;
+        color: var(--color-intro-text);
+        font-size: 1.125rem;
+        line-height: 1.625;
+
+        @media (min-width: 768px) {
+            font-size: 1.25rem;
+        }
+    }
+</style>

src/lib/data/data.json

@@ -25,5 +25,10 @@
 			"linkedin": "https://www.linkedin.com/in/adrian-fennert-b3148920a/"
 		},
 		"copyright": "© 2026 Adrian Fennert. Alle Rechte vorbehalten."
+	},
+	"intro": {
+		"name": "Adrian Fennert",
+		"title": "Senior Fullstack Engineer",
+		"text": "Erfahrener Full-Stack Developer mit Fokus auf moderne Web-Technologien. Spezialisiert auf skalierbare Anwendungen, Teamführung und Integration komplexer Systeme. Leidenschaft für sauberen Code und benutzerzentrierte Lösungen."
 	}
 }

src/lib/styles/app.css

@@ -1,15 +1,24 @@
 :root {
     --color-body-background: oklch(0.21 0.034 264.665);
-    --color-footer-background: oklch(0.13 0.028 261.692);
-
-    --color-header-border: oklab(0.623 -0.0378409 -0.210628 / 0.3);
-    --color-dark-blue: oklab(0.21 -0.00316128 -0.0338527 / 0.95);
 
     --color-text-primary: oklch(0.872 0.01 258.338);
     --color-text-secondary: oklch(0.551 0.027 264.364);
 
-    --color-accent-primary: oklch(70.7% 0.165 254.624);
-    --color-accent-secondary:oklch(0.585 0.233 277.117);
+    --color-header-border: oklab(0.623 -0.0378409 -0.210628 / 0.3);
+    --color-header-background: oklab(0.21 -0.00316128 -0.0338527 / 0.95);
+    --color-header-hover: oklch(70.7% 0.165 254.624);
+
+    --color-footer-background: oklch(0.13 0.028 261.692);
+
+    --color-intro-background-primary: oklab(0.379 -0.0113992 -0.145554 / 0.2);
+    --color-intro-background-secondary: oklab(0.379 -0.0113992 -0.145554 / 0.2);
+    --color-intro-image-background-primary: oklch(0.623 0.214 259.815);
+    --color-intro-image-background-secondary: oklch(0.511 0.262 276.966);
+    --color-intro-text: oklch(0.967 0.003 264.542);
+    --color-intro-title-text: oklch(0.809 0.105 251.813);
+    --color-intro-subtitle-text-primary: oklch(0.707 0.165 254.624);
+    --color-intro-subtitle-text-secondary: oklch(0.673 0.182 276.935);
+    --color-intro-subtitle-text-tertiary: oklch(0.714 0.203 305.504);
 
     --z-index-header: 50;
 }

src/lib/types/data.ts

@@ -1,6 +1,7 @@
 export type Data = {
 	header: Header;
 	footer: Footer;
+	intro: Intro;
 };
 
 export type Header = {
@@ -22,3 +23,9 @@ export type FooterLink = {
 };
 
 export type FooterLinkKey = 'git' | 'linkedin';
+
+export type Intro = {
+	name: string;
+	title: string;
+	text: string;
+}