Building out the registry

src/lib/components/buttons/Button.svelte

@@ -20,10 +20,12 @@
 		@apply h-min w-full;
 		@apply text-clip text-nowrap;
 		@apply select-none;
+		@apply hover:scale-[102%] hover:drop-shadow-lg;
+		@apply active:scale-[100%] active:drop-shadow-md;
 	}
 	.btn-primary {
-		@apply rounded-2xl bg-orange-500 p-4;
-		@apply text-xl font-medium text-gray-100;
+		@apply rounded-3xl bg-orange-500 p-4;
+		@apply text-xl font-bold text-gray-100;
 		@apply hover:bg-amber-500;
 		@apply active:bg-amber-600;
 	}

src/lib/components/cards/ProjectSection.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
 	export let title: string;
-    export let body: string;
+	export let body: string;
 </script>
 
-<div class="p-12 rounded-lg flex flex-col gap-4 h-screen">
-    <h1 class="font-sans text-3xl font-bold text-neutral-800 lg:text-5xl">{title}</h1>
-    <p class="font-sans text-xl font-semibold text-neutral-500 lg:text-2xl">{body}</p>
-</div>
+<div class="flex h-min justify-center">
+	<div class="bg-neutral-100 p-12 rounded-lg flex flex-col gap-4">
+		<h1 class="font-sans text-3xl font-bold text-neutral-800 lg:text-5xl">{title}</h1>
+		<p class="font-sans text-xl font-semibold text-neutral-500 lg:text-2xl">{body}</p>
+        <slot/>
+	</div>
+</div>

src/lib/components/cards/RegistryCard.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	export let title: string = '';
+	export let body: string = '';
+	export let group: string = '';
+</script>
+
+<div class="flex h-min justify-center">
+	<div class="flex flex-col gap-4 rounded-lg bg-neutral-100 p-12">
+		<div class="flex flex-row gap-4 items-center">
+			<h1 class="font-sans text-3xl font-bold text-neutral-800 lg:text-5xl">{title}</h1>
+			<p class="text-lg text-neutral-400 font-mono">{group}</p>
+		</div>
+		<p class="font-sans text-xl font-semibold text-neutral-500 lg:text-2xl">{body}</p>
+		<slot />
+	</div>
+</div>

src/lib/components/inputs/LineEdit.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    export let placeholder: string = "";
+    export let value: string = "";
+</script>
+<input type="text" {placeholder} bind:value class="p-2 rounded-lg  w-full border border-neutral-300 focus:outline-none focus:ring focus:ring-offset-1 focus:ring-orange-300 transition-all"/>

src/lib/components/nav/Navigation.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { draw } from 'svelte/transition';
 
 	const navItems = [
@@ -10,13 +11,33 @@
 
 	let drawerOpen: boolean = false;
 
+	onMount(() => {
+		function typeText(elementId: string, text: string, delay = 50) {
+			const terminalElement = document.getElementById(elementId);
+			let index = 0;
+
+			function type() {
+				if (index < text.length) {
+					terminalElement!.innerHTML += text.charAt(index);
+					index++;
+					setTimeout(type, delay); // Delay between each character
+				}
+			}
+
+			type();
+		}
+
+		const textToType = `Kerosene Labs`;
+		typeText('terminal', textToType, 100); // Adjust delay for typing speed
+	});
 </script>
 
 <!-- Mobile Nav -->
-<div id="mobileNavBar" class="block lg:hidden z-50">
+<div id="mobileNavBar" class="z-50 block lg:hidden">
 	<div class="w-full bg-neutral-100 p-2">
 		<!-- <p class="mr-auto text-3xl font-light text-neutral-300">☰</p> -->
-		<button class="items-center justify-center flex"
+		<button
+			class="flex items-center justify-center"
 			on:click={() => {
 				drawerOpen = !drawerOpen;
 			}}
@@ -34,25 +55,29 @@
 	</div>
 </div>
 
-<div id="mobileNavDrawer" class="block lg:hidden bg-gray-200 transition-all translate-x-[-100%] w-[80%] sm:w-[40%] md:w-[30%] h-full absolute z-40 backdrop-blur-lg" class:drawer-open={drawerOpen}>
+<div
+	id="mobileNavDrawer"
+	class="absolute z-40 block h-full w-[80%] translate-x-[-100%] bg-gray-200 backdrop-blur-lg transition-all sm:w-[40%] md:w-[30%] lg:hidden"
+	class:drawer-open={drawerOpen}
+>
 	<p>Test</p>
 </div>
 
-
 <button
 	id="mobileNavDrawerBg"
-	class="block lg:hidden absolute h-screen w-screen bg-neutral-800 opacity-0 pointer-events-none transition-opacity"
+	class="pointer-events-none absolute block h-screen w-screen bg-neutral-800 opacity-0 transition-opacity lg:hidden"
 	class:drawer-open={drawerOpen}
-	on:click={() => {drawerOpen = !drawerOpen}}
+	on:click={() => {
+		drawerOpen = !drawerOpen;
+	}}
 ></button>
 
 <!-- Desktop Nav -->
 <div id="desktopNavBar" class="hidden lg:block">
 	<div class="flex flex-row">
-		<a href="/" class="flex flex-row items-center justify-center gap-2 p-4 text-xl font-semibold">
-			<img src="kerosene_logo_transparent.png" alt="Kerosene Logo" class="size-8" />
-			Kerosene Labs</a
-		>
+		<a id="terminal" href="/" class="flex flex-row items-center justify-center gap-2 p-4 text-xl font-semibold">
+			<img src="/kerosene_logo_transparent.png" alt="Kerosene Logo" class="size-8" />
+		</a>
 		<div class="ml-auto flex flex-row gap-6 p-4">
 			{#each navItems as item}
 				<a
@@ -67,7 +92,7 @@
 
 <style lang="postcss">
 	#mobileNavDrawerBg.drawer-open {
-		@apply opacity-50 pointer-events-auto;
+		@apply pointer-events-auto opacity-50;
 	}
 
 	#mobileNavDrawer.drawer-open {

src/routes/+layout.svelte

@@ -4,9 +4,9 @@
 	import '../app.css';
 </script>
 
-<div class="flex flex-col page min-h-screen">
+<div id="root" class="flex flex-col page min-h-screen h-full">
 	<Navigation />
-	<div class="h-full px-2 lg:px-0">
+	<div id="contentWrapper" class="flex flex-grow w-full h-full items-center justify-center px-2 lg:px-0">
 		<slot />
 	</div>
 	<Footer />

src/routes/projects/+page.svelte

@@ -1,20 +1,33 @@
 <script>
+	import { goto } from '$app/navigation';
+	import Button from '$lib/components/buttons/Button.svelte';
 	import ProjectSection from '$lib/components/cards/ProjectSection.svelte';
 </script>
 
 <title>Projects - Kerosene Labs</title>
 
-<div class="flex flex-col w-full">
-	<ProjectSection
-		title="Espresso"
-		body="An experimental Java build tool designed for modern development. Espresso is simple, portable and reliable. You wouldn't use a sledgehammer to hang a picture frame, would you?"
-	/>
-	<ProjectSection
-		title="Kindling"
-		body="A programmable TLS HTTP/1.1 server written in modern Java with zero dependencies. No hidden magic, visible control flow, and virtual threads. The fuel that'll ignite your application."
-	/>
-	<ProjectSection
-		title="ATC"
-		body="Air Traffic Controller (ATC); an API gateway designed from the ground up to be vendor independent. Built with Kindling."
-	/>
+<div class="flex w-full max-w-[70rem] flex-col">
+	<div class="flex h-screen items-center">
+		<ProjectSection
+			title="Espresso"
+			body="An experimental Java build tool designed for modern development. Espresso is simple, portable and reliable. You wouldn't use a sledgehammer to hang a picture frame, would you?"
+		>
+			<div class="flex flex-row gap-4">
+				<Button role="secondary" text="Visit Registry" on:click={() => {goto("/projects/espresso/registry")}}/>
+				<Button text="View Code" />
+			</div>
+		</ProjectSection>
+	</div>
+	<div class="flex h-screen items-center">
+		<ProjectSection
+			title="Kindling"
+			body="A programmable TLS HTTP/1.1 server written in modern Java with zero dependencies. No hidden magic, visible control flow, and virtual threads. The fuel that'll ignite your application."
+		/>
+	</div>
+	<div class="flex h-screen items-center">
+		<ProjectSection
+			title="ATC"
+			body="Air Traffic Controller (ATC); an API gateway designed from the ground up to be vendor independent. Built with Kindling."
+		/>
+	</div>
 </div>

src/routes/projects/espresso/registry/+page.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import RegistryCard from '$lib/components/cards/RegistryCard.svelte';
+	import LineEdit from '$lib/components/inputs/LineEdit.svelte';
+
+	let lineEditValue: string = '';
+</script>
+
+<div class="flex h-full max-w-[50rem] flex-col items-center justify-center gap-4">
+	<h1 class="font-sans text-4xl font-bold text-neutral-800 lg:text-7xl">The Espresso Registry</h1>
+	<p class=" font-sans text-xl font-semibold text-neutral-500 lg:max-w-[50rem] lg:text-2xl">
+		Search for packages to use in your next hit project.
+	</p>
+	<div class="flex h-min w-1/2 flex-row">
+		<LineEdit placeholder="Kindling" bind:value={lineEditValue} />
+	</div>
+
+	{#if lineEditValue}
+		<p class="text-sm text-neutral-400">
+			Searching registry at commit: 882be6a7e61d11d33dec508a789f009352a3e328
+		</p>
+		<div class="flex max-h-96 flex-grow-0 flex-col gap-6 overflow-y-scroll">
+			<RegistryCard
+				title="kindling"
+				group="com.kerosenelabs"
+				body="A programmable TLS HTTP/1.1 server written in modern Java with zero dependencies. No hidden magic, visible control flow, and virtual threads. The fuel that'll ignite your application."
+			/>
+			<RegistryCard
+				title="spring-web"
+				group="org.springframework"
+				body="Spring Web provides integration features such as multipart file upload functionality and the initialization of the IoC container using Servlet listeners and a web-oriented application context. It also contains an HTTP client and the web-related parts of Spring remote support."
+			/>
+			<RegistryCard
+				title="lombok"
+				group="org.projectlombok"
+				body="Lombok is a Java library that provides annotations to simplify Java development by automating the generation of boilerplate code. Key features include automatic generation of getters, setters, equals, hashCode, and toString methods, as well as a facility for automatic resource management. It aims to reduce the amount of manual coding, thereby streamlining the codebase and reducing potential for errors. "
+			/>
+		</div>
+	{/if}
+</div>