add layout and home page

src/lib/constants/index.ts

@@ -0,0 +1 @@
+export * from './links';

src/lib/constants/links.ts

@@ -0,0 +1,6 @@
+export const Links = {
+	github: 'https://github.com/BenjaminPalko',
+	itch: 'https://baobeld.itch.io/',
+	kofi: 'https://ko-fi.com/baobeld',
+	linkedin: 'https://www.linkedin.com/in/benjaminpalko/'
+};

src/routes/+layout.svelte

@@ -1,6 +1,32 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
 	import '../app.css';
 	let { children } = $props();
 </script>
 
-{@render children()}
+{#snippet Tab({ route, title }: { route: string; title: string })}
+	<a
+		role="tab"
+		class="tab"
+		class:tab-active={route === page.url.pathname}
+		onclick={() => goto(route)}
+		href={undefined}>{title}</a
+	>
+{/snippet}
+
+<div class="flex h-screen w-screen items-center justify-center">
+	<div class="card max-h-[75%] min-h-96 w-full max-w-5xl bg-base-200">
+		<div class="card-title">
+			<div role="tablist" class="tabs tabs-bordered tabs-lg w-full">
+				{@render Tab({ route: '/', title: 'About' })}
+				{@render Tab({ route: '/experience', title: 'Experience' })}
+				{@render Tab({ route: '/projects', title: 'Projects' })}
+				{@render Tab({ route: '/contact', title: 'Contact' })}
+			</div>
+		</div>
+		<div class="card-body">
+			{@render children()}
+		</div>
+	</div>
+</div>

src/routes/+page.svelte

@@ -1,2 +1,42 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script lang="ts">
+	import { Links } from '$lib/constants';
+</script>
+
+<div class="flex flex-col items-center gap-4 text-center">
+	<div class={'text-center md:hidden'}>
+		<h1 class={'text-4xl'}>Benjamin Palko</h1>
+		<p class={'text-xl text-blue-200'}>Software Engineer</p>
+	</div>
+	<img alt="me" class="h-72 w-2/3 rounded-lg object-cover" src="/waterfall.jpg" />
+	<h3 class={'text-xl md:text-center md:text-2xl'}>Hello there and welcome to my website!</h3>
+
+	<p>
+		My name is Ben, I'm a Canadian 🍁 living out of Ottawa, Ontario (in an Igloo ☃️). I work as a
+		Software Developer full-time and work a pretty wide range of projects in my personal time. Catch
+		me working on C++ building the base for a game engine one day, and practicing my drawing skills
+		another day.
+	</p>
+	<p>
+		I started with an internship at a small company in my hometown which after graduation became a
+		full time position. I wanted to move back to Ottawa so I found myself a job at Mitel and moved
+		back in 2020 just in time for lockdown. My time at Mitel was great and I worked with some
+		amazing people, eventually I was referred to another company by a former colleague and decided
+		to take up the opportunity that presented itself to me.
+	</p>
+	<p>
+		While Software Development is my main career there are many things I love to do in my off time.
+		One such thing has been developing games on the side, So far I have participated in 2 GameJams!
+		You can check out my submissions at my{' '}
+		<a class={'text-blue-400 hover:underline'} href={Links.itch} target={'_blank'}>
+			itch.io page
+		</a>
+		.
+	</p>
+	<img src={'/climber.jpg'} alt={'Climber'} class={'h-72 w-2/3 rounded-lg object-cover'} />
+	<p>
+		I am also an amateur rock climber and been climbing for the past year, I love going to the gym
+		to wind down with some exercise 🧗‍♂️. Another interest I have is dirt biking, I'm still a complete
+		novice getting and my feet wet but it can be quite the rush flying through the forest on narrow
+		trails.
+	</p>
+</div>

src/routes/contact/+page.svelte

@@ -0,0 +1,50 @@
+<script>
+	import { enhance } from '$app/forms';
+	import { Croissant, Mail, Send, 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>
+	<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>
+			<label class="input input-bordered flex items-center gap-2">
+				<UserRound />
+				<input name="name" type="text" class="grow" placeholder="What is your name?" />
+			</label>
+			<label class="input input-bordered flex items-center gap-2">
+				<Mail />
+				<input name="email" type="text" class="grow" placeholder="I'm going to need your email." />
+			</label>
+			<label class="input input-bordered flex items-center gap-2">
+				<Croissant />
+				<input name="name" type="text" class="grow" placeholder="Subject" />
+			</label>
+			<label class="form-control">
+				<div class="label">
+					<span class="label-text">What do you want to say?</span>
+				</div>
+				<textarea
+					name="message"
+					form="contact"
+					class="textarea textarea-bordered h-24"
+					placeholder="Hello friend..."
+				></textarea>
+			</label>
+		</div>
+	</form>
+</div>