feat: add footer component

- add lucide svelte icon library
- add footer section to data.json
- add footer types
- add css variables
- update header position mobile

src/lib/components/Footer.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import type { Footer } from '$lib/types/data';
+	import { Github, Linkedin } from '@lucide/svelte';
+
+	let { links, copyright }: Footer = $props();
+</script>
+
+<footer>
+	<ul>
+		{#if (links.linkedin)}
+			<li>
+				<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+				<a href={links.linkedin} target="_blank">
+					<Linkedin class="icon" />
+				</a>
+			</li>
+		{/if}
+		{#if (links.git)}
+			<li>
+				<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+				<a href={links.git} target="_blank">
+					<Github class="icon" />
+				</a>
+			</li>
+		{/if}
+	</ul>
+	<div>{copyright}</div>
+</footer>
+
+<style>
+    footer {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+				gap: 1rem;
+				margin-top: 5rem;
+				padding: 2rem;
+        background-color: var(--color-footer-background);
+    }
+
+    ul {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 0.5rem;
+
+        margin: unset;
+        padding: unset;
+        list-style: none;
+
+        @media (min-width: 768px) {
+            gap: 2rem;
+        }
+    }
+
+    li {
+        display: contents;
+    }
+
+    a {
+        padding: 0.5rem;
+        text-decoration: none;
+
+				&:visited {
+						color: inherit;
+				}
+    }
+
+		.icon {
+				width: 1em;
+				height: 1em;
+		}
+
+		div {
+				font-size: 0.875rem;
+				color: var(--color-text-secondary);
+				text-align: center;
+		}
+</style>

src/lib/components/Header.svelte

@@ -21,7 +21,7 @@
     header {
         position: fixed;
 				inset-inline: 0;
-        bottom: 5rem;
+        bottom: 2rem;
         z-index: var(--z-index-header);
 
         width: fit-content;

src/lib/data/data.json

@@ -18,5 +18,12 @@
 				"href": "#contact"
 			}
 		]
+	},
+	"footer": {
+		"links": {
+			"git": "https://gitea.fennert.org",
+			"linkedin": "https://www.linkedin.com/in/adrian-fennert-b3148920a/"
+		},
+		"copyright": "© 2026 Adrian Fennert. Alle Rechte vorbehalten."
 	}
 }

src/lib/styles/app.css

@@ -1,8 +1,13 @@
 :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);
 

src/lib/types/data.ts

@@ -1,12 +1,24 @@
 export type Data = {
 	header: Header;
-}
+	footer: Footer;
+};
 
 export type Header = {
 	links: HeaderLink[];
-}
+};
 
 export type HeaderLink = {
 	label: string;
 	href: string;
-}
+};
+
+export type Footer = {
+	links: FooterLink;
+	copyright: string;
+};
+
+export type FooterLink = {
+	[key in FooterLinkKey]: string;
+};
+
+export type FooterLinkKey = 'git' | 'linkedin';

src/routes/+layout.svelte

@@ -5,6 +5,7 @@
 	import Header from '$lib/components/Header.svelte';
 	import content from '$lib/data/data.json';
 	import type { Data } from '$lib/types/data';
+	import Footer from '$lib/components/Footer.svelte';
 
 	let { children } = $props();
 	let data: Data = content;
@@ -16,3 +17,4 @@
 
 <Header {...data.header} />
 {@render children()}
+<Footer {...data.footer} />