From afe035a40c3ec4b2d5b3ff80829ff4d5a68c672b Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Sat, 26 Apr 2025 23:18:23 -0400
Subject: [PATCH] setup site and nav

---
 src/lib/components/Navbar.svelte  | 28 ++++++++++++++++++++++++++++
 src/routes/+layout.svelte         | 20 +++++++++++++++++---
 src/routes/blog/+page.svelte      |  0
 src/routes/portfolio/+page.svelte |  0
 4 files changed, 45 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/components/Navbar.svelte
 create mode 100644 src/routes/blog/+page.svelte
 create mode 100644 src/routes/portfolio/+page.svelte

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
new file mode 100644
index 0000000..35d73d4
--- /dev/null
+++ b/src/lib/components/Navbar.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	interface Props {
+		pages: { slug: string; name: string }[];
+		route: { id: string | null };
+	}
+
+	let { pages, route }: Props = $props();
+</script>
+
+<nav class="navbar px-12">
+	<div class="flex flex-1 items-center gap-4">
+		<div class="avatar avatar-placeholder">
+			<div
+				class="ring-accent ring-offset-base-100 bg-base-200 text-neutral-content w-10 rounded-full ring ring-offset-2"
+			>
+				<span>B</span>
+			</div>
+		</div>
+		<h2 class="text-3xl"><b>Benjamin</b> Palko</h2>
+	</div>
+	<div class="flex gap-4 text-lg">
+		{#each pages as page (page.slug)}
+			<a href={page.slug} class="link hover:link-accent" class:link-accent={route.id === page.slug}>
+				{page.name}
+			</a>
+		{/each}
+	</div>
+</nav>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index dbbc6c8..cc9ee5a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,9 +1,23 @@
 <script lang="ts">
+	import { page } from '$app/state';
+	import Navbar from '$lib/components/Navbar.svelte';
 	import '../app.css';
+
 	let { children } = $props();
+
+	const pages = [
+		{ slug: '/about', name: 'About Me' },
+		{ slug: '/portfolio', name: 'Portfolio' },
+		{ slug: '/blog', name: 'Blog' },
+		{ slug: '/projects', name: 'Projects' },
+		{ slug: '/experience', name: 'Experience' },
+		{ slug: '/contact', name: 'Contact' }
+	];
 </script>
 
-<div class="h-screen w-screen">
-	<nav></nav>
-	{@render children()}
+<div class="h-screen w-screen p-12">
+	<div class="bg-base-200 flex min-h-full flex-col gap-8 rounded-4xl p-8">
+		<Navbar {pages} route={page.route} />
+		<div class="px-8">{@render children()}</div>
+	</div>
 </div>
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/portfolio/+page.svelte b/src/routes/portfolio/+page.svelte
new file mode 100644
index 0000000..e69de29