From 1bf6f85de9bb278825f4eb1e35ea6fc9e99d4259 Mon Sep 17 00:00:00 2001
From: FernandoJVideira <03.pleaser-minster@icloud.com>
Date: Fri, 15 Aug 2025 01:20:23 +0100
Subject: [PATCH] Fix:Images not showing

---
 src/components/Projects.vue | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/Projects.vue b/src/components/Projects.vue
index 781629e..4f7817c 100644
--- a/src/components/Projects.vue
+++ b/src/components/Projects.vue
@@ -8,7 +8,7 @@
             class="hover:text-primary z-10 cursor-pointer"
             v-for="cat in ['All', 'Academic', 'Personal']"
             :key="cat"
-            @click="() => (selectedCategory = cat)"
+            @click="selectedCategory = cat"
           >
             {{ cat }}
           </button>
@@ -168,12 +168,22 @@
 </template>
 <script setup>
 import { ref, computed } from "vue";
+// Import assets so Vite includes them in the production build (rather than using raw 'src/assets/...' paths)
+import stuffandgoWeb from "@/assets/stuffandgo_web.jpg";
+import stuffngoMobile from "@/assets/stuffngo_mobile.jpg";
+import restGest from "@/assets/RestGest.png";
+import sgi from "@/assets/sgi.png";
+import chat from "@/assets/chat.png";
+import veloxBot from "@/assets/velox_bot.png";
+import veloxWeb from "@/assets/velox_web.jpg";
+import portfolioImg from "@/assets/portfolio.png";
+import lk from "@/assets/Lk.png";
 
 const projects = ref([
   {
     id: 1,
     category: "Academic",
-    image: "src/assets/stuffandgo_web.jpg",
+    image: stuffandgoWeb,
     title: "Stuff&Go Web Store",
     description: "Supermarket e-commerce platform",
     technologies: ["PHP", "JavaScript", "MySQL"],
@@ -183,7 +193,7 @@ const projects = ref([
   {
     id: 2,
     category: "Academic",
-    image: "src/assets/stuffngo_mobile.jpg",
+    image: stuffngoMobile,
     title: "Stuff&Go Mobile App",
     description: "Mobile application for supermarket shopping.",
     technologies: ["Java", "MQTT", "Android"],
@@ -193,7 +203,7 @@ const projects = ref([
   {
     id: 3,
     category: "Academic",
-    image: "src/assets/RestGest.png",
+    image: restGest,
     title: "RestGest",
     description: "Restaurant POS system.",
     technologies: ["C#", ".Net", "SQL Server"],
@@ -203,7 +213,7 @@ const projects = ref([
   {
     id: 4,
     category: "Academic",
-    image: "src/assets/sgi.png",
+    image: sgi,
     title: "La Redoute Product Page UI",
     description: "UI design for a La Redoute product page.",
     technologies: ["HTML", "Bootstrap", "Three.js"],
@@ -213,7 +223,7 @@ const projects = ref([
   {
     id: 5,
     category: "Academic",
-    image: "src/assets/chat.png",
+    image: chat,
     title: "Secure Chat",
     description: "End-to-End Encrypted Multi-Client Chat Application.",
     technologies: ["C#", ".Net", "Encryption Algorithms"],
@@ -223,7 +233,7 @@ const projects = ref([
   {
     id: 6,
     category: "Personal",
-    image: "src/assets/velox_bot.png",
+    image: veloxBot,
     title: "Velox Discord Bot",
     description: "Multi-purpose Discord bot built in Python.",
     technologies: ["Python", "PostgreSQL", "Discord.py"],
@@ -233,7 +243,7 @@ const projects = ref([
   {
     id: 7,
     category: "Personal",
-    image: "src/assets/velox_web.jpg",
+    image: veloxWeb,
     title: "Velox Web Framework",
     description: "Fullstack laravel like web framework built with Go.",
     technologies: ["Go"],
@@ -243,7 +253,7 @@ const projects = ref([
   {
     id: 8,
     category: "Personal",
-    image: "src/assets/portfolio.png",
+    image: portfolioImg,
     title: "My Portfolio",
     description: "Showcase of my projects and skills built in Vue 3.",
     technologies: ["Vue.js", "Tailwind CSS"],
@@ -253,7 +263,7 @@ const projects = ref([
   {
     id: 9,
     category: "Personal",
-    image: "src/assets/Lk.png",
+    image: lk,
     title: "LK Results Website",
     description: "Landing Page for my Company.",
     technologies: ["React.js", "Typescript"],