Index: Added chunk splitter for photo canvas.

src/lib/components/carousel-vertical.svelte

@@ -13,7 +13,6 @@
 	}
 
 	function handleKeyDown(event, url) {
-		console.log(event);
 		if (event.key === "Enter" || event.key === " ") {
 			redirectTo(url);
 		}

src/lib/json/hub.json

@@ -1,10 +1,12 @@
 {
     "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.",
+    "cover": "https://share.etheryo.fr/rando/2024.07.28/IMG20240728141949_min.jpg",
     "who": "Qui suis-je ?",
     "person": {
         "name": "Yohan Boujon",
         "pronouns": "il/lui",
+        "picture": "https://share.etheryo.fr/personal/yohan/pfp.jpg",
         "description": "Informatics and electronics engineer",
         "knowme": "Me Connaître"
     },
@@ -53,14 +55,14 @@
             "urlcompressed": "https://cloud.etheryo.fr/s/azb63ct3bGn84Da/download?path=&files=IMG20240728150532_compressed.jpg",
             "url": "https://share.etheryo.fr/rando/2024.07.28/IMG20240728150532.jpg",
             "title": "Tarnished Peak (afterwar)",
-            "localisation": "Ben More, Écosse",
+            "localisation": "Cruach Adrain, Écosse",
             "description": "L'appel à l'aventure était trop fort. Je ne voulais plus m'arrêter, mais comme à mon habitude, mon corps ne pouvait suivre mes pensées. Je me suis posé pendant plusieurs minutes devant cette falaise, me demandant ce qu'il y'avait derrière. Les nuages flottants et changeant de place à la vitesse du vent était un reflet de mes émotions qui changeaient."
         },
         {
             "urlcompressed": "https://cloud.etheryo.fr/s/azb63ct3bGn84Da/download?path=&files=IMG20240728142327_compressed.jpg",
             "url": "https://share.etheryo.fr/rando/2024.07.28/IMG20240728142327.jpg",
             "title": "Whitewashed",
-            "localisation": "Ben More, Écosse",
+            "localisation": "Cruach Adrain, Écosse",
             "description": "Photo modifiée pour ajouter cet effet de brume lointaine. Le ciel était bien bleu mais les nuages cachaient cette lumière et laissait paraître une ambiance blanchâtre."
         },
         {
@@ -69,7 +71,13 @@
             "title": "Compagnons",
             "localisation": "Lac d'Oô, France",
             "description": "Lors de notre petit periple avec quelques camarades de l'INSA nous avons décidé de nous balader vers l'autre bout du lac. Cette photo est une prise de vue de loin par ma part de mes camarades, observant leurs divers déplacements devant le coucher du soleil."
-        
+        },
+        {
+            "urlcompressed": "https://cloud.etheryo.fr/s/azb63ct3bGn84Da/download?path=&files=IMG20240728155726_compressed.jpg",
+            "url": "https://share.etheryo.fr/rando/2024.07.28/IMG20240728155726.jpg",
+            "title": "Replica",
+            "localisation": "Cruach Adrain, Écosse",
+            "description": "'Replca' ou 'Replique' montre la nature fractale des collines écossaises."
         }
     ]
 }

src/lib/ts/photo.ts

@@ -0,0 +1,15 @@
+type Photo = {
+    urlcompressed: string;
+    url: string;
+    title: string;
+    localisation: string,
+    description: string,
+};
+
+export function filterPhotos(photos: Photo[], chunkSize = 3): Photo[][] {
+    const chunks: Photo[][] = [];
+    for (let i = 0; i < photos.length; i += chunkSize) {
+        chunks.push(photos.slice(i, i + chunkSize));
+    }
+    return chunks;
+}

src/routes/+page.svelte

@@ -9,17 +9,43 @@
 	import HoverCard from "$lib/components/hover-card.svelte";
 
 	import topics from "$lib/ts/topic.ts";
+	import { filterPhotos } from "$lib/ts/photo.ts";
 
 	import hubjson from "$lib/json/hub.json";
+	import { onMount } from "svelte";
 
-	let hub_cover =
+	let photoList = filterPhotos(hubjson.photos);
-		"https://share.etheryo.fr/rando/2024.07.28/IMG20240728141949_min.jpg";
+	$: index = 0;
-	let profile_pic = "https://share.etheryo.fr/personal/yohan/pfp.jpg";
+
+	function swipeCanva(event, canva) {
+		const id = index;
+		const width = window.innerWidth / 2;
+		const animTranslate = active > id ? [width, -width] : [-width, width];
+
+		anime({
+			targets: pageDiv,
+			translateX: animTranslate[0],
+			opacity: 0,
+			duration: 300,
+			easing: "easeInQuad",
+			complete: function () {
+				active = id;
+				pageDiv.style.transform = `translateX(${animTranslate[1]}px)`;
+				anime({
+					targets: pageDiv,
+					translateX: 0,
+					opacity: 1,
+					duration: 300,
+					easing: "easeOutQuad",
+				});
+			},
+		});
+	}
 </script>
 
 <div class="main-banner">
 	<CoverImg
-		cover={hub_cover}
+		cover={hubjson.cover}
 		darken={true}
 		title={hubjson.welcomeTitle}
 		subtitle={hubjson.welcomeSubtitle}
@@ -32,7 +58,7 @@
 	<div class="flex w-100 justify-center">
 		<div class="content">
 			<Person
-				picture={profile_pic}
+				picture={hubjson.person.picture}
 				name={hubjson.person.name}
 				pronouns={hubjson.person.pronouns}
 				description={hubjson.person.description}
@@ -69,7 +95,7 @@
 		<p>{hubjson.photo.description}</p>
 	</div>
 	<div class="flex w-100 justify-center">
-		{#each hubjson.photos as photo}
+		{#each photoList[index] as photo}
 			<HoverCard
 				picture={photo.urlcompressed}
 				picturefull={photo.url}
@@ -79,4 +105,16 @@
 			/>
 		{/each}
 	</div>
+	<button
+		on:click={() => {
+			if (index >= 1) index--;
+			
+
+		}}>&lt;</button
+	>
+	<button
+		on:click={() => {
+			if (index < photoList.length - 1) index++;
+		}}>&gt;</button
+	>
 </div>