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-header-border: oklab(0.623 -0.0378409 -0.210628 / 0.3);
-    --color-accent-secondary:oklch(0.585 0.233 277.117);
+    --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;
+}

src/routes/+page.svelte

@@ -1,172 +1,9 @@
-<h1>Welcome to SvelteKit</h1>
+<script lang="ts">
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+	import content from '$lib/data/data.json';
-<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem debitis dicta distinctio dolores dolorum ea eum
+	import type { Data } from '$lib/types/data';
-	facilis ipsum itaque labore maxime odio, qui vel vero voluptas? Debitis ea praesentium quibusdam!
+	import Intro from '$lib/components/Intro.svelte';
-</div>
+
-<div>Cumque enim eos facere magnam vero! A autem, delectus dignissimos distinctio enim inventore laudantium natus nihil
+	let data: Data = content;
-	non omnis quisquam repudiandae sequi ullam veritatis vitae voluptas voluptates voluptatibus. Doloribus perspiciatis,
+</script>
-	velit.
+
-</div>
+<Intro {...data.intro} />
-<div>Ab aliquid consectetur cum ea enim, est fugit, hic iure modi necessitatibus nobis non obcaecati odio officiis quam
-	quia, quibusdam reprehenderit sunt suscipit tenetur vel vitae voluptas! Eos, impedit, quidem?
-</div>
-<div>Consequuntur facere fuga neque nulla praesentium vero vitae! A aliquam aperiam, commodi doloremque et harum maiores
-	suscipit unde. Ad architecto dicta fugiat impedit molestias quae qui quod sint? Consequatur, ipsam?
-</div>
-<div>Blanditiis consectetur dolore eum mollitia voluptatibus. Eveniet expedita facilis minima nisi quisquam? Id quasi,
-	soluta! A atque, deserunt dolores eveniet magni molestiae nulla quas quisquam repudiandae similique velit vero
-	voluptatum.
-</div>
-<div>Accusamus accusantium ad adipisci alias animi eos et eveniet hic, incidunt inventore iste itaque laboriosam
-	laudantium molestias necessitatibus nesciunt nisi nobis odio, officia porro possimus, praesentium rem rerum similique
-	totam.
-</div>
-<div>Autem culpa cumque fugiat hic natus reiciendis tenetur. Aperiam aspernatur atque debitis, dignissimos doloremque
-	ducimus fuga illo impedit itaque magnam minima nostrum numquam odio quos repudiandae unde voluptate. Ipsam, pariatur!
-</div>
-<div>Alias aspernatur, assumenda commodi delectus doloremque excepturi exercitationem fugiat inventore ipsam iste
-	necessitatibus numquam perferendis tempora veniam voluptatem. Accusamus dolor doloribus ducimus est nam, nobis officia
-	placeat reiciendis rem totam.
-</div>
-<div>Ad commodi culpa delectus ea, eius ex ipsam iusto magnam recusandae rem repellat saepe sed voluptatum? At
-	consequatur dolor, esse incidunt minima nulla officiis veritatis. Cum ipsum iure similique temporibus!
-</div>
-<div>Accusamus alias animi architecto atque blanditiis consequuntur dolorum, eligendi eum ex facilis hic ipsa iste nemo,
-	nobis omnis provident qui quia quis rem sunt tempore ullam unde. Id, magnam, quam.
-</div>
-<div>Accusantium atque consectetur dignissimos dolor doloribus dolorum ea et labore magni mollitia necessitatibus neque
-	omnis, porro quaerat qui quidem quod quos ratione rerum tempora veniam, vero vitae voluptatem? Animi, fugiat.
-</div>
-<div>Consectetur, debitis dolores doloribus ea minima pariatur placeat quidem tenetur veniam. Ab, beatae cumque deserunt
-	ducimus enim eum ex illum incidunt labore modi, natus nemo nihil omnis quasi quia voluptates!
-</div>
-<div>Alias asperiores autem blanditiis dolorem ea error illum iure, laborum necessitatibus quia quibusdam quidem,
-	reiciendis vel. Beatae corporis est laudantium libero quidem sed vero! Adipisci in iusto officiis ratione
-	reprehenderit.
-</div>
-<div>A animi dolorum id perspiciatis sequi tenetur voluptas? Accusantium beatae commodi dicta distinctio doloribus eos
-	odio provident quasi, quia rem reprehenderit sit, voluptates. Aliquid asperiores cumque inventore nulla quibusdam?
-	Natus.
-</div>
-<div>A animi architecto aut autem eius eum eveniet facere ipsam nulla odio quam quidem quis quos ratione, sit soluta
-	tempora tempore velit. Cum, dolorem hic illum quam rem tenetur vero!
-</div>
-<div>Accusantium ad adipisci aspernatur ea est eum ipsa nam porro. Accusantium architecto autem consequuntur cupiditate
-	deserunt doloribus dolorum error ex explicabo itaque iusto praesentium qui, repellendus sint sunt, velit veniam!
-</div>
-<div>Adipisci consequatur cum dicta et ex harum illum laudantium magni maxime nisi perferendis porro quasi quod,
-	recusandae reprehenderit rerum sint tempore vero vitae voluptas? Ad delectus libero nesciunt quod totam.
-</div>
-<div>Culpa dignissimos facere quam? Aliquid, atque deserunt dignissimos dolorem eius eos eveniet, fugiat iusto magnam
-	magni maxime nulla obcaecati sunt tenetur veniam voluptas voluptatibus. Adipisci consectetur corporis ducimus fugiat
-	incidunt?
-</div>
-<div>Dolorem explicabo minima odio quis recusandae. Accusantium amet earum fugit illo nostrum quasi sit voluptatibus!
-	Accusantium aliquam aspernatur blanditiis commodi debitis, doloremque inventore laboriosam molestias nesciunt, nulla
-	ratione, recusandae temporibus?
-</div>
-<div>Aperiam dicta dolor error ipsam iusto nostrum quas sint. Eius hic itaque sequi. Accusantium blanditiis, error
-	impedit, itaque laboriosam minima molestiae nisi possimus repellendus sequi sit soluta veniam? Quas, repudiandae!
-</div>
-<div>Ab aut beatae blanditiis, deleniti, dolor ducimus esse illo praesentium repellat repellendus, reprehenderit sed
-	similique velit. Aliquid aspernatur eligendi ex ipsam necessitatibus numquam, odit omnis, optio quisquam quod suscipit
-	unde.
-</div>
-<div>Animi consectetur consequatur delectus, enim eveniet illum recusandae unde. Accusantium amet autem, deserunt dolore
-	esse illo impedit magnam magni nobis quae repellat sapiente ut vitae! Esse modi natus optio quas?
-</div>
-<div>Aliquam aliquid est excepturi fuga illum inventore nostrum provident, similique soluta! Alias aperiam, consequuntur
-	corporis est eum id, illum in magnam, molestiae nisi quisquam sapiente soluta voluptate. Maxime quaerat, soluta.
-</div>
-<div>Accusantium aliquam aliquid autem consequatur culpa eaque et, facere fugiat iste minima necessitatibus quia
-	quisquam quo rem vitae! Aspernatur cum cumque est fuga, illum ipsa ipsam nostrum officia perspiciatis ullam!
-</div>
-<div>A impedit in iste, officiis pariatur porro quasi saepe. A adipisci atque aut dicta ducimus fuga nam neque nulla
-	pariatur perspiciatis sapiente, tempora velit vitae! Architecto doloribus et nihil voluptatibus!
-</div>
-<div>Eligendi eos magnam temporibus! Excepturi facere itaque vel! Ad amet autem beatae doloribus, harum ipsa ipsum
-	labore nisi nobis nostrum placeat, saepe sapiente sed sunt vel, veritatis voluptates! Minus, vel.
-</div>
-<div>A adipisci animi ducimus esse in minima mollitia, nihil quaerat ratione voluptatum! Accusantium assumenda aut
-	beatae eveniet fugiat incidunt nam necessitatibus nesciunt placeat, quis rerum, sed tenetur? Aspernatur, nihil,
-	veniam.
-</div>
-<div>Aliquam asperiores consequatur corporis debitis deleniti facilis impedit ipsum labore nemo odio porro, possimus
-	quam quia quos, similique sint voluptates! Ab accusamus amet consequatur eius illo impedit quidem veritatis
-	voluptatem.
-</div>
-<div>Aperiam consequatur dignissimos eius illum itaque obcaecati placeat recusandae sed. Aperiam aspernatur at
-	blanditiis deserunt ducimus eius excepturi fuga id impedit, modi, nam praesentium quod quos repellendus rerum sint
-	voluptatibus.
-</div>
-<div>Animi architecto aut autem corporis cum debitis dignissimos expedita facere ipsa magni molestiae molestias officia
-	optio, possimus quaerat repellendus reprehenderit unde vero! Cumque et eum fugiat maiores totam voluptate voluptatum!
-</div>
-<div>Accusantium alias amet autem, consequuntur, corporis cum doloremque ducimus eveniet excepturi hic magnam magni
-	maxime modi quam quia quibusdam quos recusandae repellat reprehenderit rerum sed similique tenetur velit? Omnis,
-	reprehenderit!
-</div>
-<div>Alias deserunt illum incidunt laborum maiores molestiae, quae quisquam sapiente veritatis voluptatem? Ab, aut
-	distinctio dolores enim hic nesciunt odio repudiandae temporibus velit voluptatem. Corporis doloremque expedita nisi
-	nulla qui.
-</div>
-<div>Magnam quae quo sint? Et facilis itaque magni nobis voluptatum? Atque delectus dolore dolorem dolores, dolorum
-	eligendi enim esse et harum in ipsam iste minus, nostrum quis recusandae unde ut.
-</div>
-<div>Accusantium distinctio eaque error id iure rem tenetur. Accusamus aperiam cumque hic id, iste laborum libero nihil
-	nobis praesentium quas quis reiciendis similique ut. Accusantium cumque cupiditate est fugit iste!
-</div>
-<div>Ab cumque dicta dolore exercitationem laboriosam nobis nostrum perferendis qui saepe vitae! Accusamus accusantium
-	aperiam, at autem culpa cumque ea eaque fuga ipsam rem, reprehenderit soluta veniam voluptate? Consequatur, cum.
-</div>
-<div>Libero, officiis, totam. A, asperiores atque dicta error eveniet ipsam labore laboriosam libero omnis. Aliquid ea
-	quidem tenetur totam voluptas? Ea exercitationem nulla perferendis. Debitis explicabo fuga laboriosam recusandae
-	tenetur?
-</div>
-<div>Atque error illo itaque necessitatibus numquam, perspiciatis quaerat qui quos tempore voluptates! Doloremque ea
-	quis tenetur unde. Accusantium dignissimos est ex exercitationem facere, fugit illo laborum quasi qui sapiente
-	voluptates!
-</div>
-<div>Aperiam assumenda culpa fugit harum, incidunt non, nostrum quidem ratione, sequi tempore voluptas voluptate
-	voluptates. Est expedita facilis harum illo magnam quam sed tenetur totam. Cum nihil quia quo vel!
-</div>
-<div>Corporis cumque enim eveniet, itaque perferendis repellat sit. Culpa fugiat officia saepe sit velit. Architecto
-	atque error fugit. Beatae consectetur cumque est ex laudantium, molestiae nobis officia rerum vero voluptas!
-</div>
-<div>Adipisci, architecto at commodi culpa dolor dolorem doloribus ducimus earum eligendi ex facilis illo magnam minima
-	nesciunt, officia perferendis praesentium quibusdam quisquam rerum, saepe sapiente sequi suscipit totam unde
-	voluptatum.
-</div>
-<div>Aperiam consectetur corporis cumque dolore error est eum inventore laboriosam magni molestias nisi, officiis quam
-	quasi, repellat repudiandae tempore totam? Accusamus cum eligendi, esse obcaecati officia similique? Sapiente, tempore
-	voluptate.
-</div>
-<div>Alias assumenda consectetur eligendi ipsa natus non odit optio rerum, tempore voluptates! Aut debitis magni maxime
-	minima qui. Cupiditate distinctio, doloribus fugiat laudantium maiores neque officiis rerum sed sit tempore?
-</div>
-<div>Accusantium adipisci alias amet animi atque, corporis cumque eaque esse et eum facilis fugit, minus nemo nihil
-	nobis officiis quos veniam veritatis, vero voluptatum. Consequatur cum dignissimos exercitationem nulla sunt!
-</div>
-<div>Ad aperiam cum cupiditate delectus dignissimos doloribus, ex facere fugit hic illum ipsa ipsum, iusto labore
-	laboriosam, laborum omnis quidem sapiente tempore totam vel. Consequuntur dignissimos dolores neque quisquam
-	repellendus.
-</div>
-<div>A cum, exercitationem id neque nobis omnis. Minima nihil pariatur sit? Adipisci aliquam aliquid assumenda delectus
-	deleniti est excepturi labore minima necessitatibus placeat quaerat quasi, quod recusandae repellendus saepe voluptas.
-</div>
-<div>Ad animi dolorem ea, iusto magnam quas reiciendis voluptatum. Ad alias blanditiis corporis cumque deleniti id
-	laborum molestias, nobis, perspiciatis porro, possimus qui rem reprehenderit repudiandae rerum! Aliquam, deserunt,
-	fugiat.
-</div>
-<div>Autem consectetur debitis deserunt ducimus illum mollitia reprehenderit soluta tempora tempore voluptatibus? Culpa
-	cumque dolor est illo iste itaque magni, minima omnis, pariatur quam qui sit ullam velit vitae voluptatibus!
-</div>
-<div>Accusamus consectetur cumque ea fugit id itaque iure, magnam nesciunt pariatur quisquam, quos ut. Aliquid deleniti
-	expedita, ipsam magnam maiores nulla officiis, quia, quidem rem repellat sed tempora temporibus voluptatem!
-</div>
-<div>Aspernatur dolorum error fuga inventore nam quo reprehenderit veniam. Accusamus aliquid, asperiores deleniti dolor
-	dolore dolores ea facere incidunt inventore, iure molestiae nihil odio odit officiis optio, qui vitae voluptate?
-</div>
-<div>Deleniti eveniet laboriosam molestiae nisi odio omnis pariatur, perspiciatis tempora? Architecto culpa cumque
-	delectus distinctio doloremque dolorum hic incidunt ipsa ipsum labore laborum, odio quam sint sit tempore veniam vero?
-</div>