src/lib/BottomNavigation.svelte

@@ -0,0 +1,66 @@
+<script>
+	import { page } from '$app/stores';
+	import {
+		BottomNav,
+		BottomNavItem,
+		BottomNavHeader,
+		BottomNavHeaderItem,
+		Tooltip,
+		Skeleton,
+		ImagePlaceholder
+	} from 'flowbite-svelte';
+	import {
+		HomeSolid,
+		BookmarkSolid,
+		PlusOutline,
+		SearchOutline,
+		AdjustmentsVerticalOutline
+	} from 'flowbite-svelte-icons';
+	let activeBtn = 'home';
+	function handleNavItemClick(btnName) {
+		activeBtn = btnName;
+	}
+
+	$: isHidden = activeBtn === 'projects';
+</script>
+
+<p>{isHidden}</p>
+<BottomNav position="absolute" navType="group" classInner="grid-cols-5">
+	<BottomNavHeader hidden slot="header">
+		<BottomNavHeaderItem itemName="New" />
+		<BottomNavHeaderItem itemName="Popular" active={true} />
+		<BottomNavHeaderItem itemName="Following" />
+	</BottomNavHeader>
+	<BottomNavItem on:click={() => handleNavItemClick('home')} btnName="home" id="group-home">
+		<HomeSolid
+			class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
+		/>
+		<Tooltip arrow={false}>Home</Tooltip>
+	</BottomNavItem>
+	<BottomNavItem on:click={() => handleNavItemClick('whoami')} btnName="whoami" id="group-whoami">
+		<BookmarkSolid
+			class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
+		/>
+		<Tooltip arrow={false}>whoami</Tooltip>
+	</BottomNavItem>
+	<BottomNavItem
+		on:click={() => handleNavItemClick('projects')}
+		btnName="projects"
+		id="group-projects"
+	>
+		<PlusOutline
+			class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
+		/>
+		<Tooltip arrow={false}>projects</Tooltip>
+	</BottomNavItem>
+	<BottomNavItem
+		on:click={() => handleNavItemClick('contact')}
+		btnName="contact"
+		id="group-contact"
+	>
+		<SearchOutline
+			class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
+		/>
+		<Tooltip arrow={false}>contact</Tooltip>
+	</BottomNavItem>
+</BottomNav>

src/lib/Landing/VendorMarquee.svelte

@@ -0,0 +1,15 @@
+<script>
+	import { Marquee } from 'flowbite-svelte';
+	import { projects } from '$lib/projects.js';
+	const allVendors = Array.from(
+		new Map(
+			projects.flatMap((project) => project.vendors).map((vendor) => [vendor.name, vendor])
+		).values()
+	);
+</script>
+
+<Marquee speed={0.5} hoverSpeed={0.25} class="py-6 bg-stone-200 gradi">
+	{#each allVendors as vendor}
+		<img class="w-16 h-16" alt={vendor.name} src={vendor.img} />
+	{/each}
+</Marquee>

src/routes/+layout.svelte

@@ -9,11 +9,12 @@
 		DropdownItem,
 		DarkMode
 	} from 'flowbite-svelte';
-	import { ChevronDownOutline, HomeOutline } from 'flowbite-svelte-icons';
+	import { ChevronDownOutline } from 'flowbite-svelte-icons';
 	import '../app.css';
 	import CloudflareAnalytics from '$lib/CloudflareAnalytics.svelte';
 	import logo from '$lib/logo.png';
 	import { page } from '$app/stores';
+	import BottomNavigation from '../lib/BottomNavigation.svelte';
 
 	$: activeUrl = $page.url.pathname;
 </script>
@@ -28,15 +29,18 @@
 	</NavBrand>
 	<div class="flex">
 		<DarkMode btnClass="block sm:hidden" />
-		<NavHamburger />
 	</div>
-	<NavUl {activeUrl}>
+	<NavUl class="md:flex-row" {activeUrl}>
 		<NavLi href="/">home</NavLi>
 		<NavLi href="/about">whoami</NavLi>
 		<NavLi class="cursor-pointer">
 			projects<ChevronDownOutline class="w-6 h-6  text-primary-800 dark:text-stone-200 inline" />
 		</NavLi>
-		<Dropdown class="w-44 z-20">
+		<Dropdown
+			{activeUrl}
+			activeClass="font-bold text-primary-800 dark:text-stone-200"
+			class="w-44 z-20"
+		>
 			<DropdownItem href="/projects/svelte">svelte</DropdownItem>
 			<DropdownItem href="/projects/nextjs">nextjs</DropdownItem>
 			<DropdownItem href="/projects/homelab">homelab</DropdownItem>
@@ -50,6 +54,9 @@
 <div class="px-2 sm:px-0 mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center">
 	<slot />
 </div>
-<footer class="mt-12 text-center">
+<footer>
-	<p class="text-sm text-stone-400">built by christian rannes 2024</p>
+	<div class="text-sm text-stone-400 mt-12 text-center">
+		<p>built by christian rannes 2024</p>
+	</div>
 </footer>
+<BottomNavigation />

src/routes/+page.svelte

@@ -1,5 +1,10 @@
+<script>
+	import VendorMarquee from '$lib/Landing/VendorMarquee.svelte';
+</script>
+
 <div class="main-container text-center">
 	<h1 class="text-xl mb-2">Welcome to my corner of the internet</h1>
+	<VendorMarquee />
 	<p>
 		You most likely ended up here after listening to me rambling about the wonders of self hosted
 		services, and how life would be much easier if we could just containerize everything.

src/routes/about/+page.svelte

@@ -1,17 +1,36 @@
 <script>
-    import migImg from "$lib/images/mig.jpg"
+	import migImg from '$lib/images/mig.jpg';
-    import osImg from "$lib/images/os.webp"
+	import osImg from '$lib/images/os.webp';
-	import { fade } from "svelte/transition";
+	import { fade } from 'svelte/transition';
+	import PageHeader from '$lib/PageHeader.svelte';
+	const title = 'Life is good in Copenhagen';
 </script>
 
 <div class="page-container" in:fade>
-    <h1 class="text-xl mb-4">Life is good in Copenhagen</h1>
+	<PageHeader {title} />
 	<div class="article-container md:flex mb-4 items-center text-left">
-        <p class="">I live in Copenhagen with my partner and children near the water. We love going on expeditions around the city in our cargo bike, or on my electrical skateboard.
+		<p class="">
-            When we're not outside I spend a lot of time fiddling around with my homelab, and development projects. You can read more about my projects and homelab under the homelab and portfolio nav.
+			I live in Copenhagen with my partner and children near the water. We love going on expeditions
+			around the city in our cargo bike, or on my electrical skateboard. When we're not outside I
+			spend a lot of time fiddling around with my homelab, and development projects. You can read
+			more about my projects and homelab under the homelab and portfolio nav.
 		</p>
-        <img class="rounded-2xl xl:ml-4 md:w-auto md:h-52 md:ml-0 md:mt-4 sm:ml-0 sm:mt-4 sm:w-full" src={migImg} alt="crazy man"/>
+		<img
+			class="rounded-2xl xl:ml-4 md:w-auto md:h-52 md:ml-0 md:mt-4 sm:ml-0 sm:mt-4 sm:w-full"
+			src={migImg}
+			alt="crazy man"
+		/>
 	</div>
-    <p class="mb-4 ">I work in recruitment, and I specialise in building product teams for start ups and scale ups for a small recruitment agency called <a class="underline font-semibold" href="https://www.adveniopeople.com">Advenio People</a></p>
+	<p class="mb-4">
-    <img src={osImg} alt="A happy man and a beautiful woman both wearing facemasks." class="rounded-full w-1/2 h-auto m-auto">
+		I work in recruitment, and I specialise in building product teams for start ups and scale ups
+		for a small recruitment agency called <a
+			class="underline font-semibold"
+			href="https://www.adveniopeople.com">Advenio People</a
+		>
+	</p>
+	<img
+		src={osImg}
+		alt="A happy man and a beautiful woman both wearing facemasks."
+		class="rounded-full w-1/2 h-auto m-auto"
+	/>
 </div>

src/routes/projects/homelab/+page.svelte

@@ -3,10 +3,12 @@
 	import asrockImg from '$lib/images/asrock.webp';
 	import rackImg from '$lib/images/rack.webp';
 	import { fade } from 'svelte/transition';
+	import PageHeader from '$lib/PageHeader.svelte';
+	const title = 'Homelab';
 </script>
 
-<div in:fade >
+<div in:fade>
-	<h1 class="text-2xl mb-4">Homelab</h1>
+	<PageHeader {title} />
 
 	<div class="content text-left">
 		<article>
@@ -24,9 +26,9 @@
 				maker-culture.
 			</p>
 			<p>
-				My lab started in 2020, when I wanted to set up my own DNS server at home, to add
+				My lab started in 2020, when I wanted to set up my own DNS server at home, to add network
-				network wide ad-block (Pihole). As I learned more about Linux and containerization I quickly
+				wide ad-block (Pihole). As I learned more about Linux and containerization I quickly got
-				got drawn into the hobby of self-hosting web-services.
+				drawn into the hobby of self-hosting web-services.
 			</p>
 			<p>
 				Raspberry Pi's are great, but but the computing resources are limited compared to a x86, so
@@ -80,9 +82,11 @@
 			<p>
 				The homelab is also connected to two 3D printers, that are running open source custom
 				firmware (klipper) and controlled through a web interface (Mainsail) from any device in the
-				local network. I started with a Ender3, and during my parental leave last year I built <a class="underline" href="https://vorondesign.com/voron0.2">Voron 0.2</a>. The parts are all sourced, and the
+				local network. I started with a Ender3, and during my parental leave last year I built <a
-				rest of the parts are 3D printed in ABS+. It took me roughly 40 hours to build it and
+					class="underline"
-				calibrate it.
+					href="https://vorondesign.com/voron0.2">Voron 0.2</a
+				>. The parts are all sourced, and the rest of the parts are 3D printed in ABS+. It took me
+				roughly 40 hours to build it and calibrate it.
 			</p>
 			<h2 class="text-xl text-center mt-4">OS</h2>
 			<p>
@@ -116,8 +120,7 @@
 				<li>Portfolio web page</li>
 				<p class="italic pl-4">
 					This is my portfolio page, which will soon be available at rannes.dev. I'm using
-					svelte/sveltekit. It is
+					svelte/sveltekit. It is currently not exposed to the internet as I am still building it.
-					currently not exposed to the internet as I am still building it.
 				</p>
 				<li>Crowdsec Security Engine</li>
 				<li>Prometheus</li>
@@ -152,9 +155,16 @@
 			</p>
 			<p>This VM has the SATA controller passed through, for full control of the HDD's.</p>
 			<h3 class="text-lg text-center mt-4">Development server</h3>
-			<p>This vm is my development server. It's running a act_runner paired up with Gitea to build my portfolio project, dockerize it and push it to my container registry. The application then deployed in the staging environment for a last check.</p>
+			<p>
+				This vm is my development server. It's running a act_runner paired up with Gitea to build my
+				portfolio project, dockerize it and push it to my container registry. The application then
+				deployed in the staging environment for a last check.
+			</p>
 			<h2 class="text-xl text-center mt-4">CI/CD</h2>
-			<p>I use Gitea Actions which is similar to Github Actions. I will post a guide soon how to set up CI for your svelte-docker project with Gitea Actions.</p>
+			<p>
+				I use Gitea Actions which is similar to Github Actions. I will post a guide soon how to set
+				up CI for your svelte-docker project with Gitea Actions.
+			</p>
 		</article>
 	</div>
 </div>