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

package-lock.json

@@ -10,6 +10,7 @@
 			"devDependencies": {
 				"@eslint/compat": "^1.4.0",
 				"@eslint/js": "^9.39.1",
+				"@lucide/svelte": "^0.563.1",
 				"@sveltejs/adapter-auto": "^7.0.0",
 				"@sveltejs/kit": "^2.49.1",
 				"@sveltejs/vite-plugin-svelte": "^6.2.1",
@@ -749,6 +750,16 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@lucide/svelte": {
+			"version": "0.563.1",
+			"resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-0.563.1.tgz",
+			"integrity": "sha512-Kt+MbnE5D9RsuI/csmf7M+HWxALe57x3A0DhQ8pPnnUpneh7zuldrYjlT+veWtk+tVnp5doQtaAAxLujzIlhBw==",
+			"dev": true,
+			"license": "ISC",
+			"peerDependencies": {
+				"svelte": "^5"
+			}
+		},
 		"node_modules/@polka/url": {
 			"version": "1.0.0-next.29",
 			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
@@ -3251,24 +3262,6 @@
 				"node": ">=0.10.0"
 			}
 		},
-		"node_modules/yaml": {
-			"version": "2.8.2",
-			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
-			"integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
-			"dev": true,
-			"license": "ISC",
-			"optional": true,
-			"peer": true,
-			"bin": {
-				"yaml": "bin.mjs"
-			},
-			"engines": {
-				"node": ">= 14.6"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/eemeli"
-			}
-		},
 		"node_modules/yocto-queue": {
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

package.json

@@ -16,6 +16,7 @@
 	"devDependencies": {
 		"@eslint/compat": "^1.4.0",
 		"@eslint/js": "^9.39.1",
+		"@lucide/svelte": "^0.563.1",
 		"@sveltejs/adapter-auto": "^7.0.0",
 		"@sveltejs/kit": "^2.49.1",
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",

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} />

svelte.config.js

@@ -1,7 +1,12 @@
 import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
+	// Consult https://svelte.dev/docs/kit/integrations
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
 	kit: {
 		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.