Added json for a more generic approach regarding static text. Removed some typos.

src/lib/components/footer.svelte

@@ -7,6 +7,7 @@
 	import Page3 from "$lib/components/footer/page3.svelte";
 	import ButtonSlider from "$lib/components/button-slider.svelte";
 	import anime from "animejs";
+	import mainjson from "$lib/json/main.json";
 
 	let active = 0;
 	let page = [Page1, Page2, Page3];
@@ -50,12 +51,10 @@
 		</div>
 	</div>
 	<div class="footer-slider align-center">
-		<span
+		<span>{new Date().getFullYear()}{mainjson.footer.copyright}</span>
-			>{new Date().getFullYear()} • Tous droits réservés • Yohan Boujon</span
-		>
 		<div class="flex-end">
 			<ButtonSlider
-				keys={["À propos", "Notre Vision", "Contacter"]}
+				keys={[mainjson.footer.about.name, mainjson.footer.vision.name, mainjson.footer.contact.name]}
 				on:click={slideText}
 			/>
 		</div>

src/lib/components/footer/page1.svelte

@@ -3,12 +3,13 @@
 
 	import SvgIcon from "@jamescoyle/svelte-icon";
 	import { mdiFormatQuoteClose, mdiFormatQuoteOpen } from "@mdi/js";
+	import mainjson from "$lib/json/main.json";
 </script>
 
 <div class="page-icon-text">
 	<img alt="github" src="https://cdn.simpleicons.org/github/F8F1F1" />
 	<a target="_blank" href="https://git.etheryo.fr/Etheryo/etheryo"
-		>Code source</a
+		>{mainjson.footer.about.source}</a
 	>
 </div>
 <div class="page-icon-text">
@@ -17,11 +18,11 @@
 		src="https://cdn.simpleicons.org/raspberrypi/F8F1F1"
 	/>
 	<a target="_blank" href="https://fr.wikipedia.org/wiki/Raspberry_Pi"
-		>Hébergé sur Raspberry Pi</a
+		>{mainjson.footer.about.hosted}</a
 	>
 </div>
 <div class="page-icon-text page-special">
 	<SvgIcon type="mdi" path={mdiFormatQuoteOpen} />
-	<span><i>Keep the web free</i></span>
+	<span><i>{mainjson.footer.about.motto}</i></span>
 	<SvgIcon type="mdi" path={mdiFormatQuoteClose} />
 </div>

src/lib/components/footer/page2.svelte

@@ -4,17 +4,15 @@
 
 	import SvgIcon from "@jamescoyle/svelte-icon";
 	import { mdiEye } from "@mdi/js";
+	import mainjson from "$lib/json/main.json";
 </script>
 
 <div class="page-icon-text">
 	<SvgIcon type="mdi" path={mdiEye} />
-	<h1>Notre Vision</h1>
+	<h1>{mainjson.footer.vision.name}</h1>
 </div>
 <div class="page-text">
-	<span class="page-overflow text-justify"
+	<span class="page-overflow text-justify">
-		>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lectus
+		{mainjson.footer.vision.description}
-		ante, porttitor eget massa sit amet, volutpat cursus mauris. Proin et
-		massa dui. Vestibulum eu tempus nisl, vitae bibendum urna. Sed tincidunt
-		est non nulla scelerisque.
 	</span>
 </div>

src/lib/components/footer/page3.svelte

@@ -4,9 +4,10 @@
 
 	import SvgIcon from "@jamescoyle/svelte-icon";
 	import { mdiEmailFast, mdiHelp } from "@mdi/js";
+	import mainjson from "$lib/json/main.json";
 </script>
 
 <div class="page-icon-text">
 	<SvgIcon type="mdi" path={mdiEmailFast} />
-	<a href="mailto:contact@etheryo.fr">Envoyez nous un mail</a>
+	<a href="mailto:contact@etheryo.fr">{mainjson.footer.contact.mail}</a>
 </div>

src/lib/components/navbar.svelte

@@ -4,6 +4,7 @@
 	import "$lib/css/navbar.css";
 	import { page } from "$app/stores";
 	import anime from "animejs";
+	import mainjson from "$lib/json/main.json"
 
 	import Search from "$lib/components/search.svelte";
 
@@ -95,16 +96,16 @@
 	>
 		<div class="content navbar-categories">
 			<div>
-				<a class={isActive("/", pageUrl)} href="/">Hub</a>
+				<a class={isActive("/", pageUrl)} href="/">{mainjson.tab.hub}</a>
 			</div>
 			<div>
-				<a class={isActive("/projects", pageUrl)} href="/projects">Projets</a>
+				<a class={isActive("/projects", pageUrl)} href="/projects">{mainjson.tab.projects}</a>
 			</div>
 			<div>
-				<a href="https://blog.etheryo.fr">Blog</a>
+				<a href="https://blog.etheryo.fr">{mainjson.tab.blog}</a>
 			</div>
 			<div>
-				<a href="https://git.etheryo.fr">Labo</a>
+				<a href="https://git.etheryo.fr">{mainjson.tab.lab}</a>
 			</div>
 		</div>
 		<div class={scrollY < SCROLL ? "navbar-overlay-front" : ""}></div>

src/lib/css/cover-img.css

@@ -52,7 +52,7 @@
 
 .cover-img-darken {
     grid-area: overlay;
-    background-color: rgb(0, 0, 0, 0.25);
+    background-color: rgb(0, 0, 0, 0.35);
     z-index: 0;
 }
 

src/lib/json/hub.json

@@ -0,0 +1,4 @@
+{
+    "welcomeTitle": "Bienvenue sur Etheryo",
+    "welcomeSubtitle": "'Etheryo' provient du mot 'Éther'/'Æther' dans la mythologie grec ainsi que de mon propre prénom. Le but de ce site web est de montrer mes créations. Qu'elles soient artistiques, philosophiques ou scientifiques, elles reflettent tout ce que je veux apporter au monde."
+}

src/lib/json/main.json

@@ -0,0 +1,27 @@
+{
+    "tab":
+    {
+        "hub": "Hub",
+        "projects": "Projets",
+        "blog": "Blog",
+        "lab": "Labo"
+    },
+    "footer":
+    {
+        "copyright": " • Tous droits réservés • Yohan Boujon",
+        "about":{
+            "name": "À propos",
+            "source": "Code Source",
+            "hosted": "Hébérgé sur un Raspberry Pi",
+            "motto": "Keep the web free"
+        },
+        "vision":{
+            "name": "Notre Vision",
+            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lectus ante, porttitor eget massa sit amet, volutpat cursus mauris. Proin et massa dui. Vestibulum eu tempus nisl, vitae bibendum urna. Sed tincidunt est non nulla scelerisque."
+        },
+        "contact":{
+            "name": "Contacter",
+            "mail": "Envoyez nous un mail"
+        }
+    }
+}

src/routes/+page.svelte

@@ -3,6 +3,7 @@
 	import "$lib/css/main.css";
 
 	import CoverImg from "$lib/components/cover-img.svelte";
+	import hubjson from "$lib/json/hub.json";
 
 	let hub_cover =
 		"https://share.etheryo.fr/rando/2024.07.28/IMG20240728141949_min.jpg";
@@ -12,7 +13,7 @@
 	<CoverImg
 		cover={hub_cover}
 		darken={true}
-		title="Bienvenue sur Etheryo"
+		title={hubjson.welcomeTitle}
-		subtitle="'Etheryo' vient du mot 'éternel' et mon propre prénom. Le but de ce site web est de montrer mes créations. Qu'elles soient artisitique, philosophique ou scientifique, elles reflettent toute ce que je veux apporter au monde."
+		subtitle={hubjson.welcomeSubtitle}
 	/>
 </div>