Adds footer

src/lib/components/Footer.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	const currentYear = new Date().getFullYear()
+	
+	const socialLinks = [
+		{ name: 'Bluesky', url: 'https://bsky.app/profile/jedmund.com' },
+		{ name: 'Mastodon', url: 'https://fireplace.cafe/@jedmund' },
+		{ name: 'Github', url: 'https://github.com/jedmund' },
+		{ name: 'Glass', url: 'https://glass.photo/jedmund' }
+	]
+</script>
+
+<footer class="site-footer">
+	<div class="footer-content">
+		<p class="copyright">&copy; {currentYear} Justin Edmund</p>
+		<nav class="social-links">
+			{#each socialLinks as link, index}
+				<a href={link.url} target="_blank" rel="noopener noreferrer">{link.name}</a>
+				{#if index < socialLinks.length - 1}
+					<span class="separator">/</span>
+				{/if}
+			{/each}
+		</nav>
+	</div>
+</footer>
+
+<style lang="scss">
+	.site-footer {
+		width: 100%;
+		padding: $unit-5x 0;
+		margin-top: $unit-6x;
+	}
+
+	.footer-content {
+		max-width: 700px;
+		margin: 0 auto;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0 $unit-3x;
+
+		@include breakpoint('phone') {
+			flex-direction: column;
+			gap: $unit-2x;
+			text-align: center;
+		}
+	}
+
+	.copyright {
+		margin: 0;
+		font-size: 0.875rem; // 14px
+		color: $grey-40; // #999
+	}
+
+	.social-links {
+		display: flex;
+		align-items: center;
+		gap: $unit;
+		font-size: 0.875rem; // 14px
+
+		a {
+			color: $grey-40;
+			text-decoration: none;
+			transition: color 0.2s ease;
+
+			&:hover {
+				color: $red-60;
+			}
+		}
+
+		.separator {
+			color: $grey-40;
+		}
+	}
+</style>

src/routes/+layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Header from '$components/Header.svelte'
+	import Footer from '$components/Footer.svelte'
 </script>
 
 <svelte:head>
@@ -18,6 +19,8 @@ user-scalable=no"
 	<slot />
 </main>
 
+<Footer />
+
 <style lang="scss">
 	@import '../assets/styles/reset.css';
 	@import '../assets/styles/globals.scss';

src/routes/about/+page.svelte

@@ -68,10 +68,6 @@
 	</section> -->
 </Page>
 
-<footer>
-	<p>&copy; 2024 Justin Edmund</p>
-</footer>
-
 <style lang="scss">
 	a,
 	em {
@@ -106,10 +102,4 @@
 			margin-bottom: 0;
 		}
 	}
-
-	footer {
-		font-size: 0.85rem;
-		color: $grey-40;
-		text-align: center;
-	}
 </style>