Add footer with socials

franciscunha · Jan 16, 2025 · 686508d · 686508d
1 parent 9b6880d
commit 686508d
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 22 deletions.
diff --git a/src/lib/socials.svelte b/src/lib/socials.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import EmailIcon from '$lib/icons/email_icon.svelte';
+	import GithubIcon from '$lib/icons/github_icon.svelte';
+	import ItchioIcon from '$lib/icons/itchio_icon.svelte';
+	import LinkedinIcon from '$lib/icons/linkedin_icon.svelte';
+
+	let socials = [
+		{ href: 'mailto:hello@franciscunha.com', label: 'hello@franciscunha.com', icon: EmailIcon },
+		{ href: 'https://github.com/franciscunha', label: 'franciscunha', icon: GithubIcon },
+		{
+			href: 'https://www.linkedin.com/in/francunha/',
+			label: '/in/francunha',
+			icon: LinkedinIcon
+		},
+		{ href: 'https://moonsheep.itch.io/', label: 'moonsheep.itch.io', icon: ItchioIcon }
+	];
+
+	let { horizontal }: { horizontal: boolean } = $props();
+</script>
+
+<div
+	class={[
+		'flex max-sm:flex-col max-sm:items-start max-sm:gap-2',
+		!horizontal && 'sm:flex-col sm:items-start sm:gap-2',
+		horizontal && 'sm:w-full sm:flex-row sm:justify-center sm:gap-12'
+	]}
+>
+	{#each socials as social}
+		<a href={social.href} class="flex flex-row items-center gap-2"
+			><social.icon size={2} />{social.label}</a
+		>
+	{/each}
+</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
 	import '../app.css';
+
+	import Socials from '$lib/socials.svelte';
 	import LoopingStrings from './looping_strings.svelte';
 	import Navigation from './navigation.svelte';
 
+	import { page } from '$app/state';
+
 	let { children } = $props();
 </script>
 
@@ -27,3 +31,10 @@
 		{@render children()}
 	</div>
 </div>
+
+<!-- Footer -->
+{#if page.url.pathname !== '/'}
+	<div class="flex w-full justify-center py-4 text-fontcolor">
+		<Socials horizontal={true} />
+	</div>
+{/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,25 +1,11 @@
 <script>
-	import EmailIcon from '$lib/icons/email_icon.svelte';
-	import GithubIcon from '$lib/icons/github_icon.svelte';
-	import ItchioIcon from '$lib/icons/itchio_icon.svelte';
-	import LinkedinIcon from '$lib/icons/linkedin_icon.svelte';
 	import ProjectCard from '$lib/project_card.svelte';
+	import Socials from '$lib/socials.svelte';
 	import AboutMe from './about_me.md';
 
 	import { get_highlighted } from '$lib/load_project';
 	import { fly } from 'svelte/transition';
 
-	let socials = [
-		{ href: 'mailto:hello@franciscunha.com', label: 'hello@franciscunha.com', icon: EmailIcon },
-		{ href: 'https://github.com/franciscunha', label: 'franciscunha', icon: GithubIcon },
-		{
-			href: 'https://www.linkedin.com/in/francunha/',
-			label: '/in/francunha',
-			icon: LinkedinIcon
-		},
-		{ href: 'https://moonsheep.itch.io/', label: 'moonsheep.itch.io', icon: ItchioIcon }
-	];
-
 	let highlighted_projects = get_highlighted();
 
 	let project_index = $state(0);
@@ -38,13 +24,7 @@
 		/>
 		<div class="max-md:-mt-32 max-md:mb-8 md:mt-8">
 			<h1 class="text-bold mb-2">Find me at</h1>
-			<div class="flex flex-col items-start gap-2">
-				{#each socials as social}
-					<a href={social.href} class="flex flex-row items-center gap-2"
-						><social.icon size={2} />{social.label}</a
-					>
-				{/each}
-			</div>
+			<Socials horizontal={false} />
 		</div>
 	</div>
 	<div class="max-w-2xl max-md:flex max-md:flex-col">