From 22c477eb139b9bd62f8c4dcda7d45fa3dac15b7d Mon Sep 17 00:00:00 2001
From: Justin Edmund <383021+jedmund@users.noreply.github.com>
Date: Fri, 12 Jul 2024 08:44:51 -0400
Subject: [PATCH] Update home page and layout

---
 src/routes/+layout.svelte | 39 +++++++++++++++++++++++++++++++++------
 src/routes/+page.svelte   |  7 +++++--
 2 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4e369a0..0e4bd11 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-	import '$lib/styles/reset.css'
-	import '$lib/styles/fonts.css'
-	import '$lib/styles/globals.scss'
+	import Avatar from '$components/Avatar.svelte'
+	import Squiggly from '$components/Squiggly.svelte'
 </script>
 
 <svelte:head>
@@ -10,10 +9,18 @@
 		name="description"
 		content="Justin Edmund is a software designer based in San Francisco, California."
 	/>
+	<link href="/assets/styles/reset.css" rel="stylesheet" />
 </svelte:head>
 
 <main>
 	<section class="page">
+		<header>
+			<h1 aria-label="@jedmund">
+				<Avatar />
+			</h1>
+			<Squiggly text="@jedmund is a software designer" />
+		</header>
+
 		<slot />
 	</section>
 </main>
@@ -29,8 +36,28 @@
 		background: var(--page-color);
 		border-radius: 16px;
 		box-sizing: border-box;
-		margin: 48px auto 48px;
-		padding: 40px;
-		width: 784px;
+		display: flex;
+		flex-direction: column;
+		gap: $unit-4x;
+		margin: $unit-6x auto $unit-6x;
+		padding: $unit-5x;
+		width: 100%;
+		max-width: 784px;
+
+		@include breakpoint('phone') {
+			margin-top: $unit-2x;
+			margin-bottom: $unit-3x;
+			padding: $unit-3x;
+		}
+
+		@include breakpoint('small-phone') {
+			padding: $unit-2x;
+		}
+
+		header {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+		}
 	}
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5982b0a..e8b87b2 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,2 +1,5 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script lang="ts">
+	import ProjectList from '$components/ProjectList.svelte'
+</script>
+
+<ProjectList />