images

src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import Header from './components/Header.vue'
+import Header from './components/HeaderContainer.vue'
 import HeroContainer from './components/HeroContainer.vue';
 import ShowcaseBanner from "./components/ShowcaseBanner.vue";
 import GridSkill from "./components/GridSkill.vue";
@@ -133,9 +133,9 @@ onUnmounted(() => {
 
 <template>
   <div class=" absolute pointer-events-none w-full h-full overflow-clip">
-    <img src="./assets/images/camera-effect.png" class="top-10 right-10 w-full h-full object-cover z-0 scale-110"
+    <img src="/src/assets/images/camera-effect.png" class="top-10 right-10 w-full h-full object-cover z-0 scale-110"
          alt="" width="1512" height="1071">
-    <img src="./assets/images/filter.png" class="fixed bottom-0 right-0 w-full h-full object-cover z-50"
+    <img src="/src/assets/images/filter.png" class="fixed bottom-0 right-0 w-full h-full object-cover z-50"
          alt="" width="1508" height="1376">
   </div>
   <Header id="about"></Header>
@@ -159,7 +159,7 @@ onUnmounted(() => {
     <GridSkill class="mx-8 sm:mx-28 py-28"/>
   </div>
   <ShowcaseBanner>
-      <img v-for="langage in langages" :src="`images/${ langage.image}`"
+      <img v-for="langage in langages" :src="`/src/assets/images/${ langage.image}`"
            class="w-18 h-18 hover:-translate-y-1 transition-all duration-300 ease-in-out hover:rotate-12 origin-center"
            :alt="langage.name" width="64" height="64"/>
   </ShowcaseBanner>

src/components/ExperienceCell.vue

@@ -19,7 +19,7 @@ const props = defineProps({
       <InfoBuble>{{ props.year }}</InfoBuble>
       <InfoBuble>{{ props.duration }}</InfoBuble>
     </div>
-    <img :src="`images/${ props.image }`" class="object-contain mb-6"
+    <img :src="`/src/assets/images/${ props.image }`" class="object-contain mb-6"
          :class=" props.important === true ? 'h-24' : 'h-10'" :alt="`logo de l'entreprise ${props.company}`">
     <p class="text-xl text-gray-500" v-html="props.description"/>
 

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="`/src/assets/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>

src/components/ProjectShow.vue

@@ -29,7 +29,7 @@ watch(() => props.progress, (progress) => {
       </div>
     </div>
     <div class="flex h-[70vh] lg:h-screen flex-1 justify-center lg:items-center p-4 transform-container-2">
-      <img :src="`images/${ props.image}`" class="w-full h-full object-contain p-20"
+      <img :src="`/src/assets/images/${ props.image}`" class="w-full h-full object-contain p-20"
            :alt="`screenshot de ${props.application}`">
     </div>
   </div>