<script lang="ts">
	import NavBar from '$lib/components/NavBar.svelte';
	import Hero from '$lib/components/Hero.svelte';
	import OpenSourceProjects from '$lib/components/OpenSourceProjects.svelte';
	import Writing from '$lib/components/Writing.svelte';
	import AsSeenOn from '$lib/components/AsSeenOn.svelte';
	import FreeTime from '$lib/components/FreeTime.svelte';
	import Services from '$lib/components/Services.svelte';
	import Sponsors from '$lib/components/Sponsors.svelte';
	import Contact from '$lib/components/Contact.svelte';
	import me from '$lib/assets/og_me.webp';
	import type { PageProps } from './$types';

	let { data }: PageProps = $props();
	const { sponsors, publications, latestPosts, subscriberCounts, currentlyReading, nowPlaying } =
		data;
</script>

<svelte:head>
	<title>Bailey Townsend | Software Developer</title>
	<meta name="description" content="Bandaid Engineer and open source software developer." />
	<meta name="og:title" content="Bailey Townsend | Software Developer" />
	<meta name="og:description" content="Bandaid Engineer and open source software developer." />
	<meta name="og:image" content={me} />
</svelte:head>

<div class="p-2 md:px-10">
	<NavBar />
	<Hero />
	<OpenSourceProjects />
	<Writing {publications} {latestPosts} {subscriberCounts} />
	<AsSeenOn />
	<FreeTime {currentlyReading} {nowPlaying} />
	<Sponsors {sponsors} />
</div>
