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>