Projects now renamed to Project. Each project has a distinct url. <Project> now has a click to the given url.

src/lib/components/navbar.svelte

@@ -4,7 +4,7 @@
 	import "$lib/css/navbar.css";
 	import { page } from "$app/stores";
 	import anime from "animejs";
-	import mainjson from "$lib/json/main.json"
+	import mainjson from "$lib/json/main.json";
 
 	import Search from "$lib/components/search.svelte";
 
@@ -19,8 +19,15 @@
 	let navbar_category;
 
 	function isActive(str, url) {
-		if (url === str) return "navbar-active";
-		else return "";
+		const path = url.split("/");
+		for (const p of path) {
+			if (p === str) return "navbar-active";
+		}
+		return "";
+	}
+
+	function isActiveHome(url) {
+		return url === "/" ? "navbar-active" : "";
 	}
 
 	function isActiveMultiple(strArray, url) {
@@ -96,13 +103,17 @@
 	>
 		<div class="navbar-content navbar-categories">
 			<div>
-				<a class={isActive("/", pageUrl)} href="/">{mainjson.tab.hub}</a>
+				<a class={isActiveHome(pageUrl)} href="/">{mainjson.tab.hub}</a>
 			</div>
 			<div>
-				<a class={isActive("/projects", pageUrl)} href="/projects">{mainjson.tab.projects}</a>
+				<a class={isActive("project", pageUrl)} href="/project"
+					>{mainjson.tab.projects}</a
+				>
 			</div>
 			<div>
-				<a class={isActive("/about", pageUrl)} href="/about">{mainjson.tab.about}</a>
+				<a class={isActive("about", pageUrl)} href="/about"
+					>{mainjson.tab.about}</a
+				>
 			</div>
 			<div>
 				<a href="https://blog.etheryo.fr">{mainjson.tab.blog}</a>

src/lib/components/project.svelte

@@ -13,6 +13,7 @@
 	export let cover =
 		"https://share.etheryo.fr/rando/2024.07.28/IMG20240728142327.jpg";
 	export let title = "Title";
+	export let url = ""
 	export let description =
 		"This is a description, you can add some explaination to your project in here! It can always be interesting to talk about some subtext before going into the subject!";
 	export let topic = topics.embedded;
@@ -61,11 +62,16 @@
 			easing: "easeOutQuad",
 		});
 	}
+
+	function handleClick() {
+		window.location.href = "/project/"+url;
+	}
 </script>
 
 <div
 	role="button"
 	tabindex="0"
+	type="button"
 	class="project-container"
 	on:mousemove={(event) => {
 		update_gradient(event, post_div);
@@ -80,6 +86,8 @@
 		animateChevron(false);
 		title_h1.style.textDecoration = "";
 	}}
+    on:click={handleClick}
+	on:keydown={(e) => e.key === "Enter" && handleClick()} 
 >
 	<div class="project text-justify">
 		<img

src/lib/json/hub.json

@@ -13,18 +13,21 @@
         {
             "cover": "https://share.etheryo.fr/INSA/wal/wal.png",
             "title": "What A Leak!",
+            "url": "what-a-leak",
             "description": "Water leak detection project with INSA Toulouse in 5th year.",
             "topic": "embedded"
         },
         {
             "cover": "https://share.etheryo.fr/projects/shared-memory/config.png",
             "title": "Shared memory cache on multiple kernels",
+            "url": "shared-memory",
             "description": "Using NFS, programmed a kernel driver that can read/write data onto a shared ram.",
             "topic": "kernel"
         },
         {
             "cover": "https://share.etheryo.fr/projects/yoyo_tetris/yoyotetris.png",
             "title": "yoyoTetris",
+            "url": "yoyo-tetris",
             "description": "A simple game in C++ using Raylib.",
             "topic": "videogame"
         }

src/routes/+page.svelte

@@ -47,6 +47,7 @@
 				<Project
 					cover={hubjson.projects[index].cover}
 					title={hubjson.projects[index].title}
+					url={hubjson.projects[index].url}
 					description={hubjson.projects[index].description}
 					topic={topics[hubjson.projects[index].topic]}
 				/>

src/routes/project/+page.ts

@@ -0,0 +1,10 @@
+import type { PageLoad } from "./$types";
+import hubjson from "$lib/json/hub.json";
+import { redirect } from "@sveltejs/kit";
+
+export const load: PageLoad = () => {
+    if (hubjson.projects.length > 0) {
+        throw redirect(302, `/project/${hubjson.projects[0].url}`);
+    }
+    throw redirect(302, "/404");
+};

src/routes/project/[project]/+page.server.js

@@ -0,0 +1,10 @@
+import { error } from '@sveltejs/kit';
+
+export function load({ params }) {
+	const project = params.project;
+
+	return {
+        status: 0,
+		project: project
+	};
+}

src/routes/project/[project]/+page.svelte

@@ -0,0 +1,19 @@
+<script>
+	import "$lib/css/base.css";
+	import "$lib/css/main.css";
+
+    export let data;
+</script>
+
+<div class="main-banner">
+    <div class="main-banner-gradient"></div>
+    <div class="main-banner-content">
+        <div
+            class="flex-col center"
+            style="padding-top: 15rem;padding-bottom: 15rem;"
+        >
+            <h1>Project</h1>
+            <h2>{data.project}</h2>
+        </div>
+    </div>
+</div>

src/routes/projects/+page.svelte

@@ -1,16 +0,0 @@
-<script>
-	import "$lib/css/base.css";
-	import "$lib/css/main.css";
-</script>
-
-<div class="main-banner">
-	<div class="main-banner-gradient"></div>
-	<div class="main-banner-content">
-		<div
-			class="flex-row center"
-			style="padding-top: 15rem;padding-bottom: 15rem;"
-		>
-			<h1>Projects</h1>
-		</div>
-	</div>
-</div>