Update home page and layout

src/routes/+layout.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import '$lib/styles/reset.css'
+	import Avatar from '$components/Avatar.svelte'
-	import '$lib/styles/fonts.css'
+	import Squiggly from '$components/Squiggly.svelte'
-	import '$lib/styles/globals.scss'
 </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;
+		display: flex;
-		padding: 40px;
+		flex-direction: column;
-		width: 784px;
+		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>

src/routes/+page.svelte

@@ -1,2 +1,5 @@
-<h1>Welcome to SvelteKit</h1>
+<script lang="ts">
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+	import ProjectList from '$components/ProjectList.svelte'
+</script>
+
+<ProjectList />