updates and reorganizing projects

src/lib/BottomNavigation.svelte

@@ -17,8 +17,7 @@
 
 {#if $activeBtn === 'projects'}
 	<ButtonGroup class="fixed md:hidden bottom-20 flex justify-center w-full">
-		<Button href="/projects/svelte" outline class="flex-col backdrop-blur ">Svelte</Button>
-		<Button href="/projects/nextjs" outline class="flex-col backdrop-blur">Next.js</Button>
+		<Button href="/projects/web-dev" outline class="flex-col backdrop-blur ">Web-dev</Button>
 		<Button href="/projects/homelab" outline class="flex-col backdrop-blur">Homelab</Button>
 	</ButtonGroup>
 {/if}

src/lib/FeaturedProjects.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { DeviceMockup } from 'flowbite-svelte';
+	import { DesktopPcOutline, MobilePhoneOutline } from 'flowbite-svelte-icons';
+	import Spinner from './Spinner.svelte';
+	let desktop = $state(true);
+	let isLoading = $state(true);
+
+	const deviceSwap = () => {
+		desktop = !desktop;
+		isLoading = true;
+	};
+
+	const handleIFrameLoad = () => {
+		// Wait a small time to ensure the iframe is rendered
+		setTimeout(() => (isLoading = false), 100);
+	};
+</script>
+
+<h2 class="mt-6 mb-2 text-3xl">Featured projects</h2>
+
+<div class="">
+	{#if !desktop}
+		<div class="h-12">
+			<DeviceMockup device="default">
+				{#if isLoading}
+					<div class="w-full h-full flex justify-center items-center">
+						<Spinner />
+					</div>
+				{/if}
+				<iframe
+					src="https://sauer-wine.vercel.app"
+					class="h-[900px] w-[400px] origin-top-left scale-[0.68] {isLoading
+						? 'opacity-0'
+						: 'opacity-100'} transition-opacity duration-500"
+					frameBorder="0"
+					title="Project preview"
+					onload={handleIFrameLoad}
+				>
+				</iframe>
+			</DeviceMockup>
+		</div>
+		<button onclick={deviceSwap}>
+			<DesktopPcOutline class="text-primary-400" />
+		</button>
+	{:else}
+		<div>
+			<DeviceMockup device="laptop" >
+				{#if isLoading}
+					<div class="w-full h-full flex justify-center items-center">
+						<Spinner />
+					</div>
+				{/if}
+				<iframe
+					src="https://sauer-wine.vercel.app"
+					class="h-[768px] w-[1366px] origin-top-left scale-[0.37] {isLoading
+						? 'opacity-0'
+						: 'opacity-100'} transition-opacity duration-500"
+					frameBorder="0"
+					title="Project preview"
+					onload={handleIFrameLoad}
+				>
+				</iframe>
+			</DeviceMockup>
+		</div>
+		<button onclick={deviceSwap}>
+			<MobilePhoneOutline class="text-primary-400" />
+		</button>
+	{/if}
+</div>

src/routes/+page.svelte

@@ -4,6 +4,7 @@
 	import { Heading, Mark } from 'flowbite-svelte';
 	import portfolio from '$lib/images/portfolio.png';
 	import hero from '$lib/images/hero.webp';
+	import FeaturedProjects from '$lib/FeaturedProjects.svelte';
 </script>
 
 <div class="text-xl">