recreate pages and tweak fullname displays

src/lib/components/Hero.svelte

@@ -7,6 +7,8 @@
 	}
 
 	let { photo, titles, name, description }: Props = $props();
+
+	let [first, rest] = $derived([name.split(' ')[0], name.split(' ').slice(1).join(' ')]);
 </script>
 
 <div class="hero bg-base-200">
@@ -15,7 +17,7 @@
 			<div class="flex-0">
 				<div class="avatar">
 					<div
-						class="ring-offset-base-100 ring-base-100 w-56 rounded-full shadow-2xl ring-8 ring-offset-2 dark:shadow-none"
+						class="ring-offset-base-100 ring-base-100 dark:ring-primary w-56 rounded-full shadow-2xl ring-8 ring-offset-2 dark:shadow-none"
 					>
 						<img src={photo} alt="Its me!" />
 					</div>
@@ -23,12 +25,15 @@
 			</div>
 			<div class="flex flex-1 flex-col">
 				<p>{titles.join(', ')}</p>
-				<h1 class="text-5xl font-bold">{name}</h1>
+				<h1 class="text-primary text-5xl font-light">
+					<span class="text-base-content font-semibold">{first}</span>
+					{rest}
+				</h1>
 				<p class="block py-6">
 					{description}
 				</p>
 				<div class="flex justify-end gap-4">
-					<a href="/portfolio" class="btn btn-outline btn-primary btn-wide">Portfolio</a>
+					<a href="/resume" class="btn btn-outline btn-primary btn-wide">Resume</a>
 					<a href="/contact" class="btn btn-primary btn-wide">Contact</a>
 				</div>
 			</div>

src/lib/components/Navbar.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	interface Props {
+		title: string;
 		pages: { slug: string; name: string }[];
 		route: { id: string | null };
 	}
 
-	let { pages, route }: Props = $props();
+	let { title, pages, route }: Props = $props();
 </script>
 
 <nav class="navbar px-12">
@@ -12,13 +13,16 @@
 		<a href="/">
 			<div class="avatar avatar-placeholder w-12">
 				<div
-					class="ring-primary ring-offset-base-100 bg-base-200 text-base-content mx-auto w-10 rounded-full text-xl ring-2 ring-offset-2 transition-all ease-in hover:w-12 hover:text-2xl"
+					class="ring-primary ring-offset-base-100 bg-base-200 text-base-content mx-auto w-10 rounded-full ring-2 ring-offset-2 transition-all ease-in hover:w-12 hover:text-2xl"
 				>
-					<b>B</b>
+					<span class="text-2xl"> {title.at(0)} </span>
 				</div>
 			</div>
 		</a>
-		<h2 class="text-3xl"><b>Benjamin</b> Palko</h2>
+		<h2 class="text-primary text-3xl font-light">
+			<span class="text-base-content font-semibold">Benjamin</span>
+			Palko
+		</h2>
 	</div>
 	<div class="flex gap-4 text-lg">
 		{#each pages as page (page.slug)}

src/routes/+layout.svelte

@@ -8,10 +8,9 @@
 
 	const pages = [
 		{ slug: '/about', name: 'About Me' },
-		{ slug: '/portfolio', name: 'Portfolio' },
+		{ slug: '/resume', name: 'Resume' },
 		{ slug: '/blog', name: 'Blog' },
 		{ slug: '/projects', name: 'Projects' },
-		{ slug: '/experience', name: 'Experience' },
 		{ slug: '/contact', name: 'Contact' }
 	];
 
@@ -25,7 +24,7 @@
 
 <div class="h-screen w-screen p-12">
 	<div class="bg-base-200 flex min-h-full flex-col rounded-4xl p-8">
-		<Navbar {pages} route={page.route} />
+		<Navbar title="Benjamin Palko" {pages} route={page.route} />
 		<div class="flex flex-1 items-stretch p-8">{@render children()}</div>
 		<div>
 			<Footer links={socialLinks} />

src/routes/portfolio/+page.svelte

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