Add srcset attribute to images

components/Project.vue

@@ -5,7 +5,7 @@
             class="project__image"
             :title="title"
             :url="url"
-            :screenshot="screenshot"
+            :image="image"
         />
         <ProjectData
             class="project__data"
@@ -27,7 +27,7 @@
     defineProps({
         title: String,
         url: String,
-        screenshot: String,
+        image: Object,
         description: String,
         keywords: Array
     });

components/ProjectImage.vue

@@ -2,7 +2,7 @@
 
     <div aria-hidden="true" class="project-image">
         <a tabindex="-1" :href="url" target="_blank" :title="`Accéder au site web de ${title}`">
-            <img :src="screenshot" :alt="`Page d'accueil du site web de ${title}`">
+            <img :src="image.large" :srcset="`${image.small} 640w, ${image.medium} 1280w, ${image.large} 1920w`" :alt="`Page d'accueil du site web de ${title}`">
         </a>
     </div>
 
@@ -17,7 +17,7 @@
     defineProps({
         title: String,
         url: String,
-        screenshot: String
+        image: Object
     });
 
 </script>

components/ProjectsSection.vue

@@ -8,7 +8,7 @@
                 :key="project.title"
                 :title="project.title"
                 :url="project.url"
-                :screenshot="project.screenshot"
+                :image="project.image"
                 :description="project.description"
                 :keywords="project.keywords"
             />
@@ -27,21 +27,33 @@
         {
             title: 'Xiao Wang',
             url: 'https://xiaowang.fr',
-            screenshot: '/images/xiao-wang-screenshot-01.png',
+            image: {
+                'small': '/images/xiao-wang-screenshot-640px.png',
+                'medium': '/images/xiao-wang-screenshot-1280px.png',
+                'large': '/images/xiao-wang-screenshot-1920px.png',
+            },
             description: `Conception d'un site portfolio doté d'une interface d'administration pour l'artiste plasticienne et performeuse Xiao Wang. Définition de l'expérience de navigation et de la charte graphique en concertation avec l'artiste. Développement front-end et back-end.`,
             keywords: ['HTML', 'CSS', 'Javascript', 'PHP', 'Kirby']
         },
         {
             title: 'Danao',
             url: 'https://www.danao.fr',
-            screenshot: '/images/danao-screenshot-01.png',
+            image: {
+                'small': '/images/danao-screenshot-640px.png',
+                'medium': '/images/danao-screenshot-1280px.png',
+                'large': '/images/danao-screenshot-1920px.png',
+            },
             description: `Refonte partielle du site web de la marque Danao pour le compte de l'<a href="https://148.fr" target="_blank">agence de communication digitale 148</a>. Intégration web et développement front-end à partir des maquettes graphiques réalisées par l'agence et dans le respect de l'identité visuelle de la marque.`,
             keywords: ['HTML', 'CSS', 'Javascript', 'Wordpress']
         },
         {
             title: 'LibreAudio',
             url: 'https://libreaudio.fr',
-            screenshot: '/images/libreaudio-screenshot-01.png',
+            image: {
+                'small': '/images/libreaudio-screenshot-640px.png',
+                'medium': '/images/libreaudio-screenshot-1280px.png',
+                'large': '/images/libreaudio-screenshot-1920px.png',
+            },
             description: `Création d'une bibliothèque de livres audio gratuite, libre et se voulant accessible aux personnes en situation de handicap. Définition de l'expérience de navigation et de la charte graphique, développement front-end et back-end, enrichissement de la base de données.`,
             keywords: ['HTML', 'CSS', 'Javascript', 'PHP', 'Symfony', 'Open source']
         }