feat: Main page cover

src/routes/+layout.svelte

@@ -1,22 +1,27 @@
 <script lang="ts">
 	import '../app.css';
+	import { page } from '$app/stores';
 	import { Separator } from "$lib/components/ui/separator/index.js";
-
+	import { routes } from "./sitemap.ts"
-	const routes: { route: string, name: string }[] = [
-		{ route:  "/", name: "Home" },
-		{ route:  "/post", name: "Blog" },
-		{ route:  "/about", name: "About" },
-	];
 </script>
 
-<div>
+<!-- Homepage has its own navbar with animations -->
+{#if $page.url.pathname != "/"}
+	<div>
 		<div class="flex h-5 items-center space-x-4 text-sm">
 			{#each routes as item, i}
 				{#if i > 0}
 					<Separator orientation="vertical" />
 				{/if}
-		<a href={item.route}>{item.name}</a>
+				<a class:active-link={item.route === $page.url.pathname} href={item.route}>{item.name}</a>
 			{/each}
 		</div>
-</div>
+	</div>
+{/if}
 <slot />
+
+<style>
+	.active-link {
+		@apply text-emerald-300;
+	}
+</style>

src/routes/+page.svelte

@@ -1,2 +1,84 @@
-<h1>Home Page</h1>
+<script lang="ts">
-<p>This is the home page</p>
+	import { routes } from "./sitemap.ts"
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	let scrollPosition: number = .5;
+	let scrollHeight: number = 1;
+	let progress: number = 0;
+
+	function onScroll(p) {
+		if (scrollHeight > 1) {
+			progress = Math.min(1, scrollPosition / scrollHeight);
+		}
+	}
+</script>
+
+<div
+	id="background"
+	style="opacity: {1 - progress}"
+>
+</div>
+
+<div id="front">
+	<div id="floater">
+		<p class="floater-elem" style="color: #888">This is a very long description</p>
+		<div
+			class="floater-elem"
+				 style="padding-bottom: {(1 - progress) * 50}vh"
+		>
+			<div class="flex h-5 items-center space-x-4 text-sm">
+				<a href="#bio">Bio</a>
+				{#each routes as item}
+					{#if item.route !== "/"}
+						<Separator orientation="vertical" />
+						<a href={item.route}>{item.name}</a>
+					{/if}
+				{/each}
+			</div>
+		</div>
+	</div>
+</div>
+<div id="bio" class="bg-white dark:bg-gray-900" style="">
+	<h1>Home Page</h1>
+	<p>This is the home page. You have scrolled {scrollPosition} / {scrollHeight}, progress: {progress}</p>
+</div>
+
+
+<svelte:window
+	bind:scrollY={scrollPosition}
+	bind:innerHeight={scrollHeight}
+	on:scroll={onScroll}
+/>
+
+<style>
+	#background {
+		background-image: url('/favicon.svg');
+		background-attachment: fixed;
+		background-size: 100%;
+		background-position: center;
+		z-index: -10;
+		position: absolute;
+		min-width: 100vw;
+		min-height: 100vh;
+	}
+	#bio {
+		width: 100vw;
+		min-height: 100vh;
+	}
+	#front {
+		height: 100vh;
+		display: flex;
+		flex-direction: column;
+	}
+	#floater {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		margin-top: auto;
+		margin-left: auto;
+		margin-right: auto;
+	}
+	.floater-elem {
+		margin-left: auto;
+		margin-right: auto;
+	}
+</style>

src/routes/sitemap.ts

@@ -0,0 +1,5 @@
+export const routes: { route: string, name: string }[] = [
+	{ route: "/", name: "Home" },
+	{ route: "/post", name: "Blog" },
+	{ route: "/about", name: "About" },
+];