Update some project screenshot . .

public/data_user.json

@@ -272,7 +272,7 @@
 				"id": 0,
 				"title": "Personal Website",
 				"slug": "personal-website",
-				"imagesDir": "",
+				"imagesDir": "/img/portfolio/projects/personal.web/",
 				"description": "A personal website that built using Vue.js and Tailwind CSS.",
 				"url": "https://erlankurnia.github.io",
 				"repo": "https://github.com/erlankurnia/erlankurnia.github.io",
@@ -293,29 +293,11 @@
 					"tailwind"
 				]
 			},
-			{
-				"id": 1,
-				"title": "Final Team Project in Progate",
-				"slug": "progate-final-team-project",
-				"imagesDir": "",
-				"description": "Collaborated on a team project to master HTML5 and CSS3 in Progate Platform.",
-				"url": "https://krlan2789.github.io/progate-ceb-e02",
-				"repo": "https://github.com/krlan2789/progate-ceb-e02",
-				"features": [],
-				"technologies": [
-					"HTML5",
-					"CSS3"
-				],
-				"tags": [
-					"html5",
-					"css"
-				]
-			},
 			{
 				"id": 2,
 				"title": "Final Project in Sanbercode Bootcamp",
 				"slug": "android-kotlin-sanbercode",
-				"imagesDir": "",
+				"imagesDir": "/img/portfolio/projects/com.lan.sanbercodefinalproject/",
 				"description": "Final Project Kotlin Compose application in Sanbercode Platform.",
 				"url": "https://github.com/krlan2789/Sanbercode-B48-Final-Project/releases/download/1.0/SanbercodeFinalProject_Erlan_Kurnia-1.0.apk",
 				"repo": "https://github.com/krlan2789/Sanbercode-B48-Final-Project",
@@ -332,50 +314,6 @@
 					"restapi"
 				]
 			},
-			{
-				"id": 3,
-				"title": "Background Location",
-				"slug": "unity-background-location",
-				"imagesDir": "",
-				"description": "Developed Unity Mobile Application with a focus on background location services.",
-				"url": "https://github.com/krlan2789/Unity-Background-Location/releases/download/1.0.3/BackgroundLocation-1.0.3.apk",
-				"repo": "https://github.com/krlan2789/Unity-Background-Location",
-				"features": [],
-				"technologies": [
-					"Unity",
-					"C#",
-					"Live Location"
-				],
-				"tags": [
-					"unity",
-					"csharp",
-					"backgroundservice",
-					"location",
-					"gps"
-				]
-			},
-			{
-				"id": 4,
-				"title": "WebSocket Server",
-				"slug": "websocket-server",
-				"imagesDir": "",
-				"description": "Built using Node, Express.js, and PostgreSQL. Featuring real-time updates via a WebSocket server.",
-				"url": "",
-				"repo": "https://github.com/krlan2789/express-ws-app",
-				"features": [],
-				"technologies": [
-					"JavaScript",
-					"Node.js",
-					"Express.js",
-					"PostgreSQL"
-				],
-				"tags": [
-					"javascript",
-					"node",
-					"express",
-					"postgresql"
-				]
-			},
 			{
 				"id": 5,
 				"title": "Event Invitation",
@@ -404,7 +342,7 @@
 				"id": 6,
 				"title": "Perumahan RT",
 				"slug": "perumahan-rt",
-				"imagesDir": "",
+				"imagesDir": "/img/portfolio/projects/com.anakpintar.perumahanrt/",
 				"description": "Comprehensive app developed with Unity, Google Firebase, Google AdMob, features like GPS tracking and payment processing.",
 				"url": "https://play.google.com/store/apps/details?id=com.anakpintar.perumahan",
 				"repo": "",
@@ -434,7 +372,7 @@
 				"id": 7,
 				"title": "CLC Let's Talk (CLC Speaking App's remake)",
 				"slug": "clc-tels-talk",
-				"imagesDir": "",
+				"imagesDir": "/img/portfolio/projects/com.anakpintar.letstalk/",
 				"description": "A series of educational and functional apps (Reading, Meaning, Teacher, Speaking, Let's Talk) for students in Chinese Language School.<br>Built with Unity and Google Firebase for seamless cross-platform functionality.",
 				"url": "",
 				"repo": "",
@@ -458,7 +396,7 @@
 				"id": 8,
 				"title": "CLC Report App",
 				"slug": "clc-report-app",
-				"imagesDir": "",
+				"imagesDir": "/img/portfolio/projects/com.anakpintar.clcreport/",
 				"description": "A series of educational and functional apps for parent in Chinese Language School, built with Unity and WebView.",
 				"url": "https://play.google.com/store/apps/details?id=com.anakpintar.clcreport",
 				"repo": "",
@@ -482,7 +420,7 @@
 				"id": 9,
 				"title": "CLC Word Explorer",
 				"slug": "clc-world-explorer",
-				"imagesDir": "",
+				"imagesDir": "/img/portfolio/projects/com.anakpintar.clcmeaningforkids/",
 				"description": "A series of educational and functional apps for students in Chinese Language School designed for kids, built with Unity.",
 				"url": "",
 				"repo": "",
@@ -504,7 +442,7 @@
 				"id": 10,
 				"title": "5T Fine Blend (Sales Tracking App)",
 				"slug": "5t-fine-blend",
-				"imagesDir": "",
+				"imagesDir": "/img/portfolio/projects/com.anakpintar.5tfineblend/",
 				"description": "A robust and feature-rich sales tracker application designed for Android platform.<br>This project highlights the seamless integration of advanced technologies to enhance sales tracking and management.",
 				"url": "https://play.google.com/store/apps/details?id=com.AnakPintar.SalesTracker",
 				"repo": "",
@@ -528,6 +466,87 @@
 					"firebase"
 				]
 			},
+			{
+				"id": 16,
+				"title": "Land Estate",
+				"slug": "land-property",
+				"imagesDir": "/img/portfolio/projects/com.lan.destate/",
+				"description": "A project built using .NET MAUI and C#.<br>It's designed to function similarly to real estate apps like Rumah123, Lamudi, or Brighton.<br>The app allows users to browse and manage property listings.",
+				"url": "https://github.com/krlan2789/Land-Property-App/releases/download/1.0.0/com.lan.destate-Signed.apk",
+				"repo": "https://github.com/krlan2789/Land-Property-App",
+				"features": [],
+				"technologies": [
+					".NET",
+					"C#"
+				],
+				"tags": [
+					"dotnet",
+					"csharp",
+					"multiplatform"
+				]
+			},
+			{
+				"id": 1,
+				"title": "Final Team Project in Progate",
+				"slug": "progate-final-team-project",
+				"imagesDir": "",
+				"description": "Collaborated on a team project to master HTML5 and CSS3 in Progate Platform.",
+				"url": "https://krlan2789.github.io/progate-ceb-e02",
+				"repo": "https://github.com/krlan2789/progate-ceb-e02",
+				"features": [],
+				"technologies": [
+					"HTML5",
+					"CSS3"
+				],
+				"tags": [
+					"html5",
+					"css"
+				]
+			},
+			{
+				"id": 3,
+				"title": "Background Location",
+				"slug": "unity-background-location",
+				"imagesDir": "",
+				"description": "Developed Unity Mobile Application with a focus on background location services.",
+				"url": "https://github.com/krlan2789/Unity-Background-Location/releases/download/1.0.3/BackgroundLocation-1.0.3.apk",
+				"repo": "https://github.com/krlan2789/Unity-Background-Location",
+				"features": [],
+				"technologies": [
+					"Unity",
+					"C#",
+					"Live Location"
+				],
+				"tags": [
+					"unity",
+					"csharp",
+					"backgroundservice",
+					"location",
+					"gps"
+				]
+			},
+			{
+				"id": 4,
+				"title": "WebSocket Server",
+				"slug": "websocket-server",
+				"imagesDir": "",
+				"description": "Built using Node, Express.js, and PostgreSQL. Featuring real-time updates via a WebSocket server.",
+				"url": "",
+				"repo": "https://github.com/krlan2789/express-ws-app",
+				"features": [],
+				"technologies": [
+					"JavaScript",
+					"Node.js",
+					"Express.js",
+					"PostgreSQL"
+				],
+				"tags": [
+					"javascript",
+					"node",
+					"express",
+					"postgresql"
+				]
+			},
 			{
 				"id": 11,
 				"title": "Xendit Payment API for Perumahan RT",
@@ -643,25 +662,6 @@
 					"clustering",
 					"k-means"
 				]
-			},
-			{
-				"id": 16,
-				"title": "Land Property",
-				"slug": "land-property",
-				"imagesDir": "",
-				"description": "A project built using .NET MAUI and C#.<br>It's designed to function similarly to real estate apps like Rumah123, Lamudi, or Brighton.<br>The app allows users to browse and manage property listings.",
-				"url": "https://github.com/krlan2789/Land-Property-App/releases/download/1.0.0/com.lan.destate-Signed.apk",
-				"repo": "https://github.com/krlan2789/Land-Property-App",
-				"features": [],
-				"technologies": [
-					".NET",
-					"C#"
-				],
-				"tags": [
-					"dotnet",
-					"csharp",
-					"multiplatform"
-				]
 			}
 		]
 	},

src/components/CardItemComponent.vue

@@ -6,10 +6,11 @@
             'bg-tertiary dark:bg-tertiaryDark': !(reverseTheme ?? false),
             'bg-quaternary dark:bg-quaternaryDark': (reverseTheme ?? false),
         }">
-        <div class="overflow-hidden rounded-md" :class="{ 'shadow-md': imagesPath }">
+        <div class="overflow-hidden rounded-md aspect-[16/9]" :class="{ 'shadow-inner': imagesPath, }">
             <template v-if="imagesPath">
-                <img v-for="(img, index) in (typeof imagesPath === 'string' ? [imagesPath] : imagesPath)" :key="index"
-                    :src="img" :alt="title" :class="{ 'w-full': img != null && img.length > 5 }" />
+                <img :src="imagesPath" :alt="title"
+                    class="transition-transform duration-500 scale-100 group-hover:scale-110"
+                    :class="{ 'w-full': imagesPath != null && imagesPath.length > 5 }" />
             </template>
         </div>
 
@@ -65,7 +66,7 @@ import NewTabIcon from './icons/NewTabIcon.vue';
 const props = defineProps<{
     title: string,
     description: string,
-    imagesPath?: string | string[],
+    imagesPath?: string,
     url?: string,
     urlDemo?: string,
     urlRepo?: string,

src/components/ProjectListComponent.vue

@@ -4,9 +4,9 @@
         <transition-group name="slide-up" appear>
             <CardItemComponent v-for="proj in computedProjectList" :key="proj.slug ?? proj.id"
                 :id="'project-' + proj.id" :title="proj.title" :description="proj.description"
-                :imagesPath="proj.imagesDir" :url="`${route.meta.url.project}/${proj.slug ?? proj.id}`"
-                :urlDemo="proj.url" :urlRepo="proj.repo" :tags="proj.tags" :technologies="proj.technologies"
-                :reverseTheme="reverseTheme"></CardItemComponent>
+                :imagesPath="(proj.imagesDir ? proj.imagesDir + 'sample@0,5x.webp' : '')"
+                :url="`${route.meta.url.project}/${proj.slug ?? proj.id}`" :urlDemo="proj.url" :urlRepo="proj.repo"
+                :tags="proj.tags" :technologies="proj.technologies" :reverseTheme="reverseTheme"></CardItemComponent>
         </transition-group>
     </section>
 </template>