update card

src/components/Card.svelte

@@ -16,18 +16,26 @@ export let techno :PropsComponent['techno'];
 
 </script>
 
-<a href={href} class="relative w-[40%] h-[40%] bg-[#D6ECFF] overflow-visible rounded-[20px]">
+<a href={href} class="relative  w-[45%] bg-[#D6ECFF] overflow-visible rounded-[20px] p-4 pt-7 m-2">
 
-    <img src={thumbnail} alt="" class=" absolute bottom-[12px] left-[12px] h-[105%] max-w-[35%] rounded-[10px]">
+    <div class=" flex w-full h-[45vh] overflow-hidden justify-around">
+        <img src={thumbnail} alt="" class=" h-[100%] w-[85%] rounded-[10px] object-cover ">
 
-    <h2 class="absolute top-[10%] left-[40%] font-semibold text-4xl">{title}</h2>
-    <p class="absolute top-[25%] left-[40%] font-normal text-lg ">{description}</p>
+        <div class=" w-[10%] h-[90%] flex flex-col justify-start items-center overflow-visible">
+            {#each techno as currentTechno, index}
+                {#if index < 4}
+                    <img alt=" {currentTechno.img}of techno" src={currentTechno.img} class="w-[100%] rounded-[10px] mb-4"/>
+                {/if}
+            {/each}
+        </div>
+    </div>
+
+    <div class=" flex flex-col w-full overflow-hidden max-w-[90%] m-[5%] ml-[1%]">
 
-    <div class=" absolute -bottom-[5%] right-[5%] w-[40%] h-[20%] flex justify-around items-center overflow-visible">
-        {#each techno as currentTechno, index}
-            {#if index < 3}
-                <img alt="of techno" src={currentTechno.img} class="w-[25%]"/>
-            {/if}
-        {/each}
+        <h2 class=" top-[10%] left-[40%] font-semibold text-4xl">{title}</h2>
+        <p class=" top-[25%] left-[40%] font-normal text-lg ">{description}</p>
     </div>
+
+
+
 </a >

src/pages/index.astro

@@ -11,34 +11,44 @@ import Arrow from '../components/Arrow.svelte'
 import CursorFollower from '../components/CursorFollower.svelte'
 
 const cards = [
-	{ title: "Arcania", body: "Dans Arcania transformer votre telephone en veritable baguette magique et combattez vos amies dans l'arene" ,href: "https://github.com/math-pixel/ARCANIA", thumbnail : "/images/masarus.png",
+	{ title: "Arcania", body: "Dans Arcania transformer votre telephone en veritable baguette magique et combattez vos amies dans l'arene" ,href: "https://github.com/math-pixel/ARCANIA", thumbnail : "/images/arcania.png",
 		techno: [
-			{"img" : "https://skillicons.dev/icons?i=p5js"},
-			{"img" : "https://skillicons.dev/icons?i=nodejs"},
-			{"img" : "https://skillicons.dev/icons?i=html"}
+			{"img" : "/images/languages/html.png"},
+			{"img" : "/images/languages/p5.png"},
+			{"img" : "/images/languages/nodejs.png"},
+			{"img" : "/images/languages/socketio.png"},
 		]
 	},
 	{ title: "Masaru's Adventure", body: "Aidez Masarus à retrouver le shamizen sacré pour sauvez l'île de Kyushu. " ,href: "https://github.com/math-pixel/Masarus-Adventure", thumbnail : "/images/masarus.png",
 		techno: [
-			{"img" : "/images/profile.png"},
-			{"img" : "/images/profile.png"}
+			{"img" : "/images/languages/html.png"},
+			{"img" : "/images/languages/p5.png"},
+			{"img" : "/images/languages/js.png"},
+			{"img" : "/images/languages/css.png"}
 		]
 	},
 	{ title: "Imprimante 3D", body: "En quêtes de savoir, j'ai voulue construire moi meme une imprimante 3D pour connaitre les moindres details de ces machines" ,href: "", thumbnail : "/images/toto.png",
 		techno: [
-			{"img" : "/images/profile.png"},
-			{"img" : "/images/profile.png"},
-			{"img" : "/images/profile.png"},
-			{"img" : "/images/profile.png"}
+			{"img" : "/images/languages/rpi.png"},
+			{"img" : "/images/languages/octo.png"},
+			{"img" : "/images/languages/ia.png"},
+			{"img" : "/images/languages/tool.png"},
 		]
 	},
 	{ title: "Reveil Intelligent", body: "Allo Jarvis ? Reveil 8H demain ! Un reveil fabriquer en python booster a l'ia et structure grace a de la POO " ,href: "", thumbnail : "/images/toto.png",
 		techno: [
-			{"img" : "/images/profile.png"},
-			{"img" : "/images/profile.png"},
-			{"img" : "/images/profile.png"}
+			{"img" : "/images/languages/rpi.png"},
+			{"img" : "/images/languages/python.png"},
+			{"img" : "/images/languages/ia.png"}
 		]
-	},
+	},{ title: "Photo Party", body: "3, 2, 1, cheeez ! Photo Party est une application de soiree pour partager ses photos \n Le principe est simple. Tu prend une photos sur ton telephone via une app web puis tu admires ta photos et celle de tes amis sur le video projecteur de la soiree ! " ,href: "", thumbnail : "/images/toto.png",
+		techno: [
+			{"img" : "/images/languages/html.png"},
+			{"img" : "/images/languages/nodejs.png"},
+			{"img" : "/images/languages/socketio.png"},
+			{"img" : "/images/languages/sql.svg"},
+		]
+	}
 	// { title: "2D Printer", body: "yey" ,href: "" },
 	// { title: "1D Printer", body: "null" ,href: "" }
 ]
@@ -80,7 +90,7 @@ const cards = [
 
 	<h1 id="projectHighlight" class=" w-full my-[5%] font-black text-6xl text-center">Projets à la une !</h1>
 
-	<div class="overflow-visible flex w-full h-screen  flex-wrap justify-around">
+	<div class="overflow-visible flex w-full flex-wrap justify-around">
 
 		{cards.map(currentCard => (
 			<Card title={currentCard.title} description={currentCard.body} href={currentCard.href} thumbnail={currentCard.thumbnail} techno={currentCard.techno}></Card>