Add name for competences in experience part

src/components/ExperienceView.vue

@@ -11,9 +11,12 @@
       <div class="text-h6" v-for="content in experience.content" :key="content">
         <div class="q-mb-lg q-mx-xl">{{content}}</div>
       </div>
-      <div class="q-mx-lg q-mb-xl">
-        <div class="row justify-between q-my-lg q-mx-xl" style="row-gap: 80px; column-gap: 25px">
-          <img v-for="competence in experience.comptences" :key="competence" class="col-3 non-selectable" :src="'/clement.franckelemon.etu/portfolio-2025/spa/'+competence" />
+      <div class="q-mx-lg q-pt-sm" style="margin-bottom: 125px">
+        <div class="row justify-evenly q-my-lg" style="row-gap: 80px; column-gap: 25px">
+          <div v-for="competence in experience.comptences" :key="competence.name" class="non-selectable column items-center" :class=" $q.screen.lt.md ? 'col-4' : 'col-3'">
+            <img class="full-width" :src="'/clement.franckelemon.etu/portfolio-2025/spa/'+competence.src" />
+            <span class="q-ma-xs text-h6 text-bold sub-title text-uppercase" style="line-height: 1.2rem" :style="$q.screen.lt.md && 'font-size: 15px;'" >{{competence.name}}</span>
+          </div>
         </div>
       </div>
     </div>

src/components/experiences.ts

@@ -10,10 +10,22 @@ export default [
       'À tout cela j’ai eu l’occasion de contribuer au choix de conception des autres parties tel que le côté BACK pour le choix d’architecture à utiliser, et la BDD pour sa modélisation au travers d’un MVC.'
     ],
     comptences: [
-      '/images/Competences/Vue.png',
-      '/images/Competences/Spring.png',
-      '/images/Competences/Postgres.png',
-      '/images/Competences/ElasticSearch.png'
+      {
+        src: '/images/Competences/Vue.png',
+        name: 'Vue'
+      },
+      {
+        src: '/images/Competences/Spring.png',
+        name: 'Spring'
+      },
+      {
+        src: '/images/Competences/Postgres.png',
+        name: 'Postgres'
+      },
+      {
+        src: '/images/Competences/ElasticSearch.png',
+        name: 'ElasticSearch'
+      },
     ]
   },
   {
@@ -26,10 +38,22 @@ export default [
       'J’ai eu l’occasion de réaliser de nombreuses tâches très variées allant du simple ajustement Front-End à l’ajout de nouvelles fonctionnalités, mais aussi de correctifs de bugs. Le tout sans oublier les tests autant dans le Back-End que dans le Front-End. Un projet plutôt Front-End, en ayant tout de même sa complexité au niveau Back-End notamment comme par exemple avec les nombreux services reliés à l’application, mais aussi au fait que celle-ci possède deux bases de données pouvant parfois avoir des données communes (SQL et NoSQL).'
     ],
     comptences: [
-      '/images/Competences/Vue.png',
-      '/images/Competences/Nuxt.png',
-      '/images/Competences/Spring.png',
-      '/images/Competences/Postgres.png'
+      {
+        src: '/images/Competences/Vue.png',
+        name: 'Vue'
+      },
+      {
+        src: '/images/Competences/Nuxt.png',
+        name: 'Nuxt'
+      },
+      {
+        src: '/images/Competences/Spring.png',
+        name: 'Spring'
+      },
+      {
+        src: '/images/Competences/Postgres.png',
+        name: 'Postgres'
+      },
     ]
   },
 ]