about is home

src/lib/components/Navbar.svelte

@@ -8,7 +8,7 @@
 	let { title, pages, route }: Props = $props();
 </script>
 
-<nav class="navbar px-12">
+<nav class="navbar">
 	<div class="flex flex-1 items-center gap-4">
 		<a href="/">
 			<div class="avatar avatar-placeholder w-12">

src/lib/components/WIP.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { TriangleAlertIcon } from 'lucide-svelte';
 
-	const messages = ['Under Construction', 'Caution', 'Work In Progress'];
+	const messages = ['Under Construction', 'Caution', 'Work In Progress', 'Hard-hats required!'];
 </script>
 
 {#snippet Banner(messages: string[], backwards: boolean)}

src/routes/+layout.svelte

@@ -7,7 +7,7 @@
 	let { children } = $props();
 
 	const pages = [
-		{ slug: '/about', name: 'About Me' },
+		{ slug: '/', name: 'About Me' },
 		{ slug: '/resume', name: 'Resume' },
 		{ slug: '/blog', name: 'Blog' },
 		{ slug: '/projects', name: 'Projects' },
@@ -20,13 +20,23 @@
 		{ name: 'Itch.io', href: 'https://baobeld.itch.io/' },
 		{ name: 'Ko-fi', href: 'https://ko-fi.com/baobeld' }
 	];
+	let current = $derived(pages.find((p) => p.slug === page.route.id));
 </script>
 
 <div class="h-screen w-screen p-12">
-	<div class="bg-base-200 flex min-h-full flex-col rounded-4xl p-8">
+	<div class="bg-base-200 flex min-h-full flex-col rounded-4xl">
+		<div class="p-8">
 			<Navbar title="Benjamin Palko" {pages} route={page.route} />
-		<div class="flex flex-1 items-stretch justify-center p-8">{@render children()}</div>
+		</div>
-		<div>
+		{#if current && current.slug !== '/'}
+			<div class="bg-base-300 w-full px-12 py-8">
+				<h1 class="text-4xl font-light">{current.name}</h1>
+			</div>
+		{/if}
+		<div class="flex flex-1 items-stretch justify-center p-8">
+			{@render children()}
+		</div>
+		<div class="p-8">
 			<Footer links={socialLinks} />
 		</div>
 	</div>

src/routes/about/+page.svelte

@@ -1,5 +0,0 @@
-<script lang="ts">
-	import Wip from '$lib/components/WIP.svelte';
-</script>
-
-<Wip />

src/routes/contact/+page.svelte

@@ -1,27 +1,18 @@
 <script>
 	import { enhance } from '$app/forms';
-	import { Croissant, Mail, Send, UserRound } from 'lucide-svelte';
+	import { Croissant, Mail, UserRound } from 'lucide-svelte';
 </script>
 
-<div class="flex w-full justify-around">
+<div class="flex flex-col">
-	<div class="flex flex-col gap-4">
+	<div class="flex flex-col items-center">
-		<h1 class="text-4xl">
+		<span class="animate-bounce text-2xl">😁</span>
-			Hello there friend.<br />Want to chat?
+		<h2 class="text-2xl">Hello there friend</h2>
-		</h1>
-		<h5 class="text-lg">Reach out! 🤝</h5>
-		<div class="flex items-center gap-4 rounded-lg bg-base-100 p-4 shadow-lg">
-			<Send size="24" />
-			<div class="flex flex-col font-semibold">
-				Send me an email!
-				<a class="link link-primary" href="mailto:benjaminpalko@hotmail.com">
-					benjaminpalko@hotmail.com
-				</a>
-			</div>
-		</div>
 	</div>
+
 	<form id="contact" use:enhance>
-		<div class="flex flex-col gap-4 bg-base-200">
+		<div class="bg-base-200 flex flex-col gap-4">
-			<h2 class="text-xl font-semibold">Send me a message!</h2>
+			<h1 class="text-4xl">Want to chat?</h1>
+			<h5 class="text-lg">Reach out! 🤝</h5>
 			<label class="input input-bordered flex items-center gap-2">
 				<UserRound />
 				<input name="name" type="text" class="grow" placeholder="What is your name?" />