fix images

package-lock.json

@@ -23,7 +23,8 @@
         "postcss": "^8.4.38",
         "tailwindcss": "^3.4.3",
         "tailwindcss-3d": "^1.0.6",
-        "vite": "^5.2.0"
+        "vite": "^5.2.0",
+        "vite-plugin-dynamic-import": "^1.5.0"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -917,6 +918,18 @@
       "integrity": "sha512-LEKfNj57djZAucQ1itu/zinRkYnkhzNjAMhz8DkbguTyBcTDHF1R6CuXO536BFE/YGyHDCYd7tDF5ghSrViUgQ==",
       "dev": true
     },
+    "node_modules/acorn": {
+      "version": "8.11.3",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
@@ -1736,6 +1749,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-module-lexer": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.2.tgz",
+      "integrity": "sha512-l60ETUTmLqbVbVHv1J4/qj+M8nq7AwMzEcg3kmJDt9dCNrTk+yHcYFf/Kw75pMDwd9mPcIGCG5LcS20SxYRzFA==",
+      "dev": true
+    },
     "node_modules/es-object-atoms": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
@@ -3825,6 +3844,18 @@
         }
       }
     },
+    "node_modules/vite-plugin-dynamic-import": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-dynamic-import/-/vite-plugin-dynamic-import-1.5.0.tgz",
+      "integrity": "sha512-Qp85c+AVJmLa8MLni74U4BDiWpUeFNx7NJqbGZyR2XJOU7mgW0cb7nwlAMucFyM4arEd92Nfxp4j44xPi6Fu7g==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.8.2",
+        "es-module-lexer": "^1.2.1",
+        "fast-glob": "^3.2.12",
+        "magic-string": "^0.30.1"
+      }
+    },
     "node_modules/vite-svg-loader": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-5.1.0.tgz",

package.json

@@ -24,6 +24,7 @@
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
     "tailwindcss-3d": "^1.0.6",
-    "vite": "^5.2.0"
+    "vite": "^5.2.0",
+    "vite-plugin-dynamic-import": "^1.5.0"
   }
 }

src/components/GridSkill.vue

@@ -46,7 +46,7 @@ const skills = [
 <template>
   <div class="grid gap-5 xl:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 grid-cols-1">
     <SkillCell v-for="(skill, index) in skills" :key="index" :title="skill.title" :text="skill.text" class="group">
-      <img :src="`/images/${skill.image}`" :height="60" :width="60"
+      <img :src="`./images/${skill.image}`" :height="60" :width="60"
            class="h-7 w-7 group-hover:scale-110 transition-all ease-in duration-500 group-hover:brightness-200"
            :alt="skill.alt">
     </SkillCell>

vite.config.js

@@ -1,7 +1,6 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import svgLoader from 'vite-svg-loader'
-import { fileURLToPath, URL } from 'node:url'
 
 // https://vitejs.dev/config/
 export default defineConfig({