From aa28150c179517dad05c4b762de992eb4d9fb67b Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Mon, 28 Apr 2025 09:55:33 -0400
Subject: [PATCH] about is home

---
 src/lib/components/Navbar.svelte |  2 +-
 src/lib/components/WIP.svelte    |  2 +-
 src/routes/+layout.svelte        | 20 +++++++++++++++-----
 src/routes/about/+page.svelte    |  5 -----
 src/routes/contact/+page.svelte  | 27 +++++++++------------------
 5 files changed, 26 insertions(+), 30 deletions(-)
 delete mode 100644 src/routes/about/+page.svelte

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index bc9ad80..3e6e66b 100644
--- a/src/lib/components/Navbar.svelte
+++ b/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">
diff --git a/src/lib/components/WIP.svelte b/src/lib/components/WIP.svelte
index b7bbd5a..e4ef588 100644
--- a/src/lib/components/WIP.svelte
+++ b/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)}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1f205c6..22521d4 100644
--- a/src/routes/+layout.svelte
+++ b/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">
-		<Navbar title="Benjamin Palko" {pages} route={page.route} />
-		<div class="flex flex-1 items-stretch justify-center p-8">{@render children()}</div>
-		<div>
+	<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>
+		{#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>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
deleted file mode 100644
index b549e10..0000000
--- a/src/routes/about/+page.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script lang="ts">
-	import Wip from '$lib/components/WIP.svelte';
-</script>
-
-<Wip />
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index 4539ddc..6be8ebd 100644
--- a/src/routes/contact/+page.svelte
+++ b/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 gap-4">
-		<h1 class="text-4xl">
-			Hello there friend.<br />Want to chat?
-		</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 class="flex flex-col">
+	<div class="flex flex-col items-center">
+		<span class="animate-bounce text-2xl">😁</span>
+		<h2 class="text-2xl">Hello there friend</h2>
 	</div>
+
 	<form id="contact" use:enhance>
-		<div class="flex flex-col gap-4 bg-base-200">
-			<h2 class="text-xl font-semibold">Send me a message!</h2>
+		<div class="bg-base-200 flex flex-col gap-4">
+			<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?" />