misc: use svelte 5 syntax

src/lib/Error.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	export let statusCode: number;
-	export let message: string;
+	let { statusCode, message }: { statusCode: number; message: string } = $props();
 </script>
 
 <div class="flex flex-col justify-center items-center h-screen">

src/lib/Navbar.svelte

@@ -4,7 +4,7 @@
 
 	const logo = '/img/logo.svg';
 
-	export let mobileMenu: boolean;
+	let { mobileMenu = $bindable() }: { mobileMenu: boolean } = $props();
 </script>
 
 <div class="flex items-center justify-between py-5">
@@ -35,7 +35,7 @@
 	</div>
 
 	<div class="block lg:hidden mt-2">
-		<button on:click={() => (mobileMenu = true)}>
+		<button onclick={() => (mobileMenu = true)}>
 			<i class="bx bx-menu text-3xl"></i>
 			<Icon icon="bx-menu" class="text-3xl" />
 		</button>
@@ -46,7 +46,10 @@
 	class="pointer-events-none fixed inset-0 min-h-screen bg-black bg-opacity-75 opacity-0 lg:hidden"
 	class:opacity-100={mobileMenu}
 	class:pointer-events-auto={mobileMenu}
-	on:click={() => (mobileMenu = false)}
+	onclick={() => (mobileMenu = false)}
+	onkeypress={() => {}}
+	role="link"
+	tabindex="-1"
 >
 	<div class="absolute right-0 min-h-screen bg-gray-200 py-5 px-10 w-2/3 sm:w-1/3">
 		<button class="absolute top-0 right-0 mt-9 mr-4">

src/lib/data/global.ts

@@ -7,7 +7,7 @@ export const meta = {
 export const firstName = 'Arnaud';
 export const lastName = 'Scheffler';
 
-export const menu = [
+export const menu: MenuItem[] = [
 	{
 		name: 'Compétences',
 		link: '/#skills'

src/lib/data/types.d.ts

@@ -29,3 +29,9 @@ type Testimonial = {
 	name: string;
 	role: string;
 };
+
+type MenuItem = {
+	name: string;
+	link: string;
+	target?: string;
+};

src/lib/landing/Educations.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let educations: Education[];
+	let { educations }: { educations: Education[] } = $props();
 </script>
 
 <div class="-mx-5 grid md:grid-cols-2 gap-7 p-5">

src/lib/landing/Experiences.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let experiences: Experience[];
+	let { experiences }: { experiences: Experience[] } = $props();
 </script>
 
 <div class="relative mx-auto mb-6 md:mt-12 flex w-full flex-col">

src/lib/landing/Projects.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let projects: Project[];
+	let { projects }: { projects: Project[] } = $props();
 </script>
 
 {#each projects as project}

src/lib/landing/Skills.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Icon from '@iconify/svelte';
-	export let skills: Skill[];
+
+	let { skills }: { skills: Skill[] } = $props();
 </script>
 
 <div class="-mx-5 grid md:grid-cols-2 lg:grid-cols-3 gap-7 text-center p-5">

src/lib/landing/Title.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-	export let id: string | undefined = undefined;
+	import type { Snippet } from 'svelte';
+
+	let { children, id }: { children: Snippet; id: string } = $props();
 </script>
 
 <h2
 	class="text-4xl md:text-5xl lg:text-7xl p-5 text-center font-medium font-poppins text-gray-400"
 	{id}
 >
-	<slot />
+	{@render children()}
 </h2>

src/routes/+layout.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { PUBLIC_UMAMI_URL, PUBLIC_UMAMI_WEBSTIE } from '$env/static/public';
 	import { meta, title } from '$lib/data/global';
 	import '../app.css';
+
 	let { children } = $props();
-	import { PUBLIC_UMAMI_URL, PUBLIC_UMAMI_WEBSTIE } from '$env/static/public';
 </script>
 
 {@render children()}