consolidated web dev projects in its own page, and update sw jobs

src/lib/Projects.svelte

@@ -1,11 +1,8 @@
 <script>
 	import { projects } from '$lib/projects.js';
 	import ProjectCard from './ProjectCard/ProjectCard.svelte';
-	export let category;
 </script>
 
 {#each projects as project}
-	{#if project.category === category}
 		<ProjectCard {...project} />
-	{/if}
 {/each}

src/lib/TopNav.svelte

@@ -9,10 +9,7 @@
 		DarkMode
 	} from 'flowbite-svelte';
 	import { ChevronDownOutline } from 'flowbite-svelte-icons';
-	import logo from '$lib/logo.png'
+	import logo from '$lib/logo.png';
-	import { page } from '$app/stores';
-
-	$: activeUrl = $page.url.pathname;
 </script>
 
 <Navbar class="bg-transparent dark:bg-transparent">
@@ -25,18 +22,13 @@
 	<div class="flex">
 		<DarkMode btnClass="block sm:hidden" />
 	</div>
-	<NavUl class="md:flex-row" {activeUrl}>
+	<NavUl class="md:flex-row">
 		<NavLi href="/">home</NavLi>
 		<NavLi class="cursor-pointer">
 			projects<ChevronDownOutline class="w-6 h-6  text-primary-800 dark:text-stone-200 inline" />
 		</NavLi>
-		<Dropdown
+		<Dropdown activeClass="font-bold text-primary-800 dark:text-stone-200" class="w-44 z-20">
-			{activeUrl}
+			<DropdownItem href="/projects/web-dev">web-dev</DropdownItem>
-			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>
 		</Dropdown>
 		<NavLi class="hidden sm:block">

src/lib/projects.js

@@ -4,158 +4,106 @@ import vercelIcon from '$lib/images/vendorIcons/vercelIcon.svg';
 import flowbiteSvelteIcon from '$lib/images/vendorIcons/flowbiteSvelteIcon.svg';
 import reactIcon from '$lib/images/vendorIcons/reactIcon.svg';
 import nextjsIcon from '$lib/images/vendorIcons/nextjsIcon.svg';
-import drizzleIcon from '$lib/images/vendorIcons/drizzleIcon.webp';
-import zustandIcon from '$lib/images/vendorIcons/zustandIcon.png';
-import shadcnIcon from '$lib/images/vendorIcons/shadcnIcon.png';
 import goIcon from '$lib/images/vendorIcons/goIcon.svg';
-import awsIcon from '$lib/images/vendorIcons/awsIcon.svg';
+import k8sIcon from '$lib/images/vendorIcons/kubernetes.svg'
 
 export const projects = [
-	{
+  {
-		category: 'nextjs',
+    title: 'Software Jobs',
-		title: 'Software Jobs',
+    url: 'https://jobs.rannes.dev',
-		url: 'https://jobs.rannes.dev',
+    description:
-		description:
+      'I wanted an excuse to try out Go, and I also want to find a job. The scraper is built with Go and the Colly package. The scraper runs as a cron job in kubernetes, and is served as an API deployd to the same cluster. The frontend is built with Next.js which is deployed to Vercel.',
-			'I wanted an excuse to try out Go, and I also want to find a job. The scraper is built with Go and the Colly package. It runs on a AWS EC2 instance, and the frontend is built with Next.js which is deployed to Vercel.',
+    repo: 'https://gitea.rannes.dev/rannes.dev/sw-jobs-frontend',
-		repo: 'https://gitea.rannes.dev/rannes.dev/sw-jobs-frontend',
+    rss: 'https://gitea.rannes.dev/rannes.dev/sw-jobs-frontend.rss',
-		rss: 'https://gitea.rannes.dev/rannes.dev/sw-jobs-frontend.rss',
+    image: '',
-		image: '',
+    vendors: [
-		vendors: [
+      {
-			{
+        name: 'Go',
-				name: 'Go',
+        img: goIcon,
-				img: goIcon,
+        url: 'https://go.dev/'
-				url: 'https://go.dev/'
+      },
-			},
+      {
-			{
+        name: 'Next.js',
-				name: 'Next.js',
+        img: nextjsIcon,
-				img: nextjsIcon,
+        url: 'https://nextjs.org/'
-				url: 'https://nextjs.org/'
+      },
-			},
+      {
-			{
+        name: 'Tailwind',
-				name: 'Tailwind',
+        img: tailwindIcon,
-				img: tailwindIcon,
+        url: 'https://tailwindcss.com/'
-				url: 'https://tailwindcss.com/'
+      },
-			},
+      {
-			{
+        name: 'Vercel',
-				name: 'Vercel',
+        img: vercelIcon,
-				img: vercelIcon,
+        url: 'https://vercel.com/'
-				url: 'https://vercel.com/'
+      },
-			},
+      {
-			{
+        name: 'k8s',
-				name: 'AWS',
+        img: k8sIcon,
-				img: awsIcon,
+        url: 'https://aws.amazon.com/'
-				url: 'https://aws.amazon.com/'
+      }
-			}
+    ]
-		]
+  },
-	},
+  {
-	{
+    title: 'Portfolio',
-		category: 'svelte',
+    url: 'https://rannes.dev',
-		title: 'Portfolio',
+    description:
-		url: 'https://rannes.dev',
+      'This project was initially to get familiar with Svelte and showcase my future projects. I find myself that I keep coming back to expand on it whenever I need a break from React.',
-		description:
+    repo: 'https://gitea.rannes.dev/rannes.dev/my-portfolio',
-			'This project was initially to get familiar with Svelte and showcase my future projects. I find myself that I keep coming back to expand on it whenever I need a break from React.',
+    rss: 'https://gitea.rannes.dev/rannes.dev/my-portfolio.rss',
-		repo: 'https://gitea.rannes.dev/rannes.dev/my-portfolio',
+    image: '',
-		rss: 'https://gitea.rannes.dev/rannes.dev/my-portfolio.rss',
+    vendors: [
-		image: '',
+      {
-		vendors: [
+        name: 'Svelte',
-			{
+        img: svelteIcon,
-				name: 'Svelte',
+        url: 'https://svelte.dev/'
-				img: svelteIcon,
+      },
-				url: 'https://svelte.dev/'
+      {
-			},
+        name: 'Tailwind',
-			{
+        img: tailwindIcon,
-				name: 'Tailwind',
+        url: 'https://tailwindcss.com/'
-				img: tailwindIcon,
+      },
-				url: 'https://tailwindcss.com/'
+      {
-			},
+        name: 'Flowbite',
-			{
+        img: flowbiteSvelteIcon,
-				name: 'Flowbite',
+        url: 'https://flowbite-svelte.com//'
-				img: flowbiteSvelteIcon,
+      },
-				url: 'https://flowbite-svelte.com//'
+      {
-			},
+        name: 'Vercel',
-			{
+        img: vercelIcon,
-				name: 'Vercel',
+        url: 'https://vercel.com/'
-				img: vercelIcon,
+      }
-				url: 'https://vercel.com/'
+    ]
-			}
+  },
-		]
+  {
-	},
+    category: 'nextjs',
-	{
+    title: 'Local weather',
-		category: 'nextjs',
+    url: 'https://weather.rannes.dev',
-		title: 'Online Wine Shop.',
+    description: 'A simple application to fetch a weekly weather forecast.',
-		url: 'https://wine-shop-eta.vercel.app/',
+    repo: 'https://gitea.rannes.dev/rannes.dev/local-weather',
-		description:
+    rss: 'https://gitea.rannes.dev/rannes.dev/local-weather.rss',
-			"To get practical experience with forms, databases, queries and states I want to build a online wine shop for my friend Ketil (that he didn't ask for). Besides the current technologies, I plan to implement Clerk or Auth.js for auth, and Zustand for state management if neccesary (Something tells me it's needed at least for cart) I am doing my best to implement progressive enhancement in forms with cool hooks like <code class='dark:bg-slate-800 bg-stone-300 rounded p-1'>useActionState</code> and explore caching and the prevention of caching in nextjs and vercel. 🤷",
+    image: '',
-		repo: 'https://gitea.rannes.dev/rannes.dev/wine-shop',
+    vendors: [
-		rss: 'https://gitea.rannes.dev/rannes.dev/wine-shop.rss',
+      {
-		image: '',
+        name: 'React',
-		vendors: [
+        img: reactIcon,
-			{
+        url: 'https://react.dev/'
-				name: 'React',
+      },
-				img: reactIcon,
+      {
-				url: 'https://react.dev/'
+        name: 'Next.js',
-			},
+        img: nextjsIcon,
-			{
+        url: 'https://nextjs.org/'
-				name: 'Next.js',
+      },
-				img: nextjsIcon,
+      {
-				url: 'https://nextjs.org/'
+        name: 'Tailwind',
-			},
+        img: tailwindIcon,
-			{
+        url: 'https://tailwindcss.com/'
-				name: 'Tailwind',
+      },
-				img: tailwindIcon,
+      {
-				url: 'https://tailwindcss.com/'
+        name: 'Vercel',
-			},
+        img: vercelIcon,
-			{
+        url: 'https://vercel.com/'
-				name: 'Drizzle',
+      }
-				img: drizzleIcon,
+    ]
-				url: 'https://orm.drizzle.team/'
+  }
-			},
-			{
-				name: 'Zustand',
-				img: zustandIcon,
-				url: 'https://zustand-demo.pmnd.rs/'
-			},
-			{
-				name: 'Shadcn',
-				img: shadcnIcon,
-				url: 'https://ui.shadcn.com/'
-			},
-			{
-				name: 'Vercel',
-				img: vercelIcon,
-				url: 'https://vercel.com/'
-			}
-		]
-	},
-	{
-		category: 'nextjs',
-		title: 'Local weather',
-		url: 'https://weather.rannes.dev',
-		description: 'A simple application to fetch a weekly weather forecast.',
-		repo: 'https://gitea.rannes.dev/rannes.dev/local-weather',
-		rss: 'https://gitea.rannes.dev/rannes.dev/local-weather.rss',
-		image: '',
-		vendors: [
-			{
-				name: 'React',
-				img: reactIcon,
-				url: 'https://react.dev/'
-			},
-			{
-				name: 'Next.js',
-				img: nextjsIcon,
-				url: 'https://nextjs.org/'
-			},
-			{
-				name: 'Tailwind',
-				img: tailwindIcon,
-				url: 'https://tailwindcss.com/'
-			},
-			{
-				name: 'Vercel',
-				img: vercelIcon,
-				url: 'https://vercel.com/'
-			}
-		]
-	}
 ];

src/routes/+layout.svelte

@@ -1,18 +1,10 @@
-<script>
+<script lang="ts">
 	import '../app.css';
 	import CloudflareAnalytics from '$lib/CloudflareAnalytics.svelte';
 	import BottomNavigation from '../lib/BottomNavigation.svelte';
 	import TopNav from '../lib/TopNav.svelte';
-	import { inject } from '@vercel/analytics';
-	let activeBtn = 'home';
-	function handleNavItemClick(btnName) {
-		activeBtn = btnName;
-	}
-	$: activeBtn = activeBtn === 'projects';
-	inject();
 </script>
 
-<CloudflareAnalytics />
 <TopNav />
 <div class="px-2 sm:px-0 mx-auto max-w-xs sm:max-w-md md:max-w-3xl mb-20 md:mb-0">
 	<slot />

src/routes/projects/web-dev/+page.svelte

@@ -2,11 +2,10 @@
 	import { fade } from 'svelte/transition';
 	import Projects from '$lib/Projects.svelte';
 	import PageHeader from '$lib/PageHeader.svelte';
-	const category = 'nextjs';
+	const title = 'Web dev projects';
-	const title = 'Next.js Projects';
 </script>
 
 <div in:fade>
 	<PageHeader {title} />
-	<Projects {category} />
+	<Projects />
 </div>