From 9b6880d64c79f55a3969250a3a2cfdd0ddb6a25b Mon Sep 17 00:00:00 2001
From: Francisco Cunha <francisccdn@gmail.com>
Date: Thu, 16 Jan 2025 11:38:20 +0100
Subject: [PATCH 1/2] Improve layout on mobile devices

---
 src/lib/project_card.svelte                   |  5 ++-
 src/routes/+layout.svelte                     |  8 ++--
 src/routes/+page.svelte                       |  4 +-
 src/routes/looping_strings.svelte             |  2 +-
 src/routes/navigation.svelte                  |  6 +--
 src/routes/portfolio/[[filters]]/+page.svelte | 38 ++++++++++---------
 src/routes/project/[slug]/+page.svelte        | 15 ++++----
 7 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/src/lib/project_card.svelte b/src/lib/project_card.svelte
index 22e71fb..c8fc217 100644
--- a/src/lib/project_card.svelte
+++ b/src/lib/project_card.svelte
@@ -8,7 +8,10 @@
 
 <a href={'/project/' + id}>
 	<div
-		class="flex h-[30rem] w-[26rem] gap-4 rounded-lg border-2 border-bordercolor max-md:flex-col max-md:pb-2 md:h-[16rem] md:w-[36rem] md:pr-4 lg:w-[34vw]"
+		class={[
+			'flex gap-4 rounded-lg border-2 border-bordercolor max-md:flex-col max-md:pb-2',
+			'max-sm:h-[24rem] max-sm:w-[90vw] sm:h-[30rem] sm:w-[26rem] md:h-[16rem] md:w-[36rem] md:pr-4 lg:w-[34vw]'
+		]}
 	>
 		{#await data}
 			<div class="flex h-full w-full items-center justify-center">
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8603643..a50c123 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -13,7 +13,7 @@
 	<div class="flex h-full w-full items-center justify-between md:w-3/4">
 		<!-- Title -->
 		<div>
-			<h1 class="text-4xl">Francisco Cunha</h1>
+			<h1 class="max-sm:text-3xl sm:text-4xl">Francisco Cunha</h1>
 			<LoopingStrings strings={['Game developer', 'Graphics programmer', 'Web developer']} />
 		</div>
 
@@ -22,10 +22,8 @@
 </div>
 
 <!-- Contents -->
-<div
-	class="min-w-screen flex min-h-screen justify-center border-bordercolor bg-bgcolor px-4 pb-12 pt-40 text-fontcolor"
->
-	<div class="w-full md:w-3/4">
+<div class="flex justify-center border-bordercolor bg-bgcolor px-4 pb-12 pt-40 text-fontcolor">
+	<div class="w-screen md:w-3/4">
 		{@render children()}
 	</div>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9242ebf..651221e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -28,7 +28,7 @@
 </script>
 
 <div
-	class="flex w-full place-items-center gap-24 max-md:flex-col-reverse md:flex-row md:justify-center"
+	class="flex w-full place-items-center gap-24 max-lg:flex-col-reverse lg:flex-row lg:justify-center"
 >
 	<div class="max-md:flex max-md:flex-col-reverse">
 		<img
@@ -55,7 +55,7 @@
 
 		<h2 class="my-8 mt-14">
 			<span class="font-semibold">Highlighted projects</span> |
-			<a href="/portfolio" class="underline">All projects</a>
+			<a href="/portfolio" class="underline max-sm:text-base">All projects</a>
 		</h2>
 
 		<div class="w-max max-md:self-center">
diff --git a/src/routes/looping_strings.svelte b/src/routes/looping_strings.svelte
index be5f867..3ff91da 100644
--- a/src/routes/looping_strings.svelte
+++ b/src/routes/looping_strings.svelte
@@ -18,5 +18,5 @@
 </script>
 
 {#key i}
-	<h2 class="text-2xl" in:fly={{ x: 20 }}>{strings[i] || ''}</h2>
+	<h2 class="max-sm:text-xl sm:text-2xl" in:fly={{ x: 20 }}>{strings[i] || ''}</h2>
 {/key}
diff --git a/src/routes/navigation.svelte b/src/routes/navigation.svelte
index 9f2ed89..69a6c71 100644
--- a/src/routes/navigation.svelte
+++ b/src/routes/navigation.svelte
@@ -9,7 +9,7 @@
 	];
 </script>
 
-<div class="text-2xl">
+<div class="w-1/4 text-right text-2xl">
 	{#each navigation_items as item, i}
 		<a
 			href={item.route}
@@ -20,9 +20,9 @@
 		</a>
 		{#if i + 1 != navigation_items.length}
 			<!-- on large screens: pipe character -->
-			<span class="max-md:hidden">|</span>
+			<span class="max-lg:hidden">|</span>
 			<!-- on small screens: new line -->
-			<span class="md:hidden"><br /></span>
+			<span class="lg:hidden"><br /></span>
 		{/if}
 	{/each}
 </div>
diff --git a/src/routes/portfolio/[[filters]]/+page.svelte b/src/routes/portfolio/[[filters]]/+page.svelte
index 0a99f75..30fa7f0 100644
--- a/src/routes/portfolio/[[filters]]/+page.svelte
+++ b/src/routes/portfolio/[[filters]]/+page.svelte
@@ -31,7 +31,7 @@
 </script>
 
 <!-- Tag filters -->
-<div class="flex h-[2rem] flex-row flex-wrap items-center gap-2">
+<div class="flex min-h-[2rem] flex-row flex-wrap items-center gap-2">
 	<!-- Selected tags -->
 	<button onclick={filter_icon_onclick}>
 		{#if unselected_tags.length === 0}
@@ -51,24 +51,28 @@
 		</button>
 	{/each}
 </div>
-<div class="mb-8 flex h-[2rem] flex-row flex-wrap items-center gap-2">
-	<!-- Unselected tags -->
-	<div class="w-[1.5rem]"></div>
-	{#each unselected_tags as tag (tag)}
-		<button
-			onclick={() => tag_onclick(tag)}
-			class="opacity-50"
-			in:receive={{ key: tag }}
-			out:send={{ key: tag }}
-			animate:flip={{ duration: 20 }}
-		>
-			<Tag>{tag}</Tag>
-		</button>
-	{/each}
-</div>
+{#if unselected_tags.length > 0}
+	<div class="mt-2 flex min-h-[2rem] flex-row flex-wrap items-center gap-2">
+		<!-- Unselected tags -->
+		{#each unselected_tags as tag (tag)}
+			<button
+				onclick={() => tag_onclick(tag)}
+				class="opacity-50"
+				in:receive={{ key: tag }}
+				out:send={{ key: tag }}
+				animate:flip={{ duration: 20 }}
+			>
+				<Tag>{tag}</Tag>
+			</button>
+		{/each}
+	</div>
+{/if}
+<div class="my-8"></div>
 
 <!-- Project cards -->
-<div class="flex flex-row flex-wrap gap-12 max-md:justify-center md:justify-between">
+<div
+	class="flex flex-row flex-wrap max-md:justify-center max-sm:gap-8 sm:gap-12 md:justify-between"
+>
 	{#each projects as project}
 		{#if selected_tags.some((tag) => project.tags.includes(tag))}
 			<ProjectCard id={project.id} />
diff --git a/src/routes/project/[slug]/+page.svelte b/src/routes/project/[slug]/+page.svelte
index a6d14fa..6875098 100644
--- a/src/routes/project/[slug]/+page.svelte
+++ b/src/routes/project/[slug]/+page.svelte
@@ -6,10 +6,10 @@
 	let has_sidebar = data.meta.sidebar && data.meta.sidebar.length > 0;
 </script>
 
-<div class={'border-bordercolor md:rounded-lg md:border-2 md:p-8'}>
-	<div class="mb-12 flex justify-between max-md:flex-col md:flex-row">
+<div class={'border-bordercolor lg:rounded-lg lg:border-2 lg:p-8'}>
+	<div class="mb-12 flex justify-between max-lg:flex-col lg:flex-row">
 		<h1 class="mr-8 font-bold">{data.meta.name}</h1>
-		<div class="flex flex-row flex-wrap gap-2 max-md:mt-4 md:justify-end">
+		<div class="flex flex-row flex-wrap gap-2 max-lg:mt-4 lg:justify-end">
 			{#each data.meta.tags as tag}
 				<a href={'/portfolio/' + tag}>
 					<Tag>{tag}</Tag>
@@ -20,12 +20,12 @@
 	</div>
 
 	<div class="flex gap-8 max-lg:flex-col lg:flex-row">
-		<div class={['project-wrapper flex flex-col gap-4', has_sidebar && 'md:w-2/3']}>
+		<div class={['project-wrapper flex flex-col gap-4', has_sidebar && 'lg:w-2/3']}>
 			<data.content class="project-wrapper" />
 		</div>
 
 		{#if has_sidebar}
-			<div class="flex flex-col gap-8 md:w-1/3">
+			<div class="flex flex-col gap-8 lg:w-1/3">
 				{#each data.meta.sidebar as src, i}
 					<img {src} alt={'Showcase of ' + data.meta.name + ' #' + i} />
 				{/each}
@@ -41,14 +41,13 @@
 
 	.project-wrapper :global(iframe) {
 		@apply self-center;
-		@apply max-md:w-full;
+		@apply max-lg:w-full;
 	}
 
 	.project-wrapper :global(iframe.video) {
 		@apply aspect-video;
 		@apply h-auto;
-		@apply md:w-4/5;
-		@apply max-md:w-full;
+		@apply lg:w-4/5;
 	}
 
 	.project-wrapper :global(img) {

From 686508dbc962c3548a3471bb3416d07afb791d82 Mon Sep 17 00:00:00 2001
From: Francisco Cunha <francisccdn@gmail.com>
Date: Thu, 16 Jan 2025 12:25:42 +0100
Subject: [PATCH 2/2] Add footer with socials

---
 src/lib/socials.svelte    | 33 +++++++++++++++++++++++++++++++++
 src/routes/+layout.svelte | 11 +++++++++++
 src/routes/+page.svelte   | 24 ++----------------------
 3 files changed, 46 insertions(+), 22 deletions(-)
 create mode 100644 src/lib/socials.svelte

diff --git a/src/lib/socials.svelte b/src/lib/socials.svelte
new file mode 100644
index 0000000..46142ca
--- /dev/null
+++ 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
index a50c123..fe2725a 100644
--- 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
index 651221e..dd078da 100644
--- 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">