refactor: improve code formatting with prettier

Author: raphbag

src/views/NotFoundView.vue

@@ -20,7 +20,20 @@ const goHome = () => {
       <p>Oups ! La page que vous recherchez n'existe pas ou a été déplacée.</p>
       <div class="actions">
         <button @click="goHome" class="btn-home">
-          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
+            <polyline points="9 22 9 12 15 12 15 22"></polyline>
+          </svg>
           Retour à l'accueil
         </button>
       </div>
@@ -115,7 +128,8 @@ p {
 }
 
 @keyframes pulse {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 1;
   }
   50% {
@@ -124,7 +138,8 @@ p {
 }
 
 @keyframes rotate {
-  0%, 100% {
+  0%,
+  100% {
     transform: rotate(0deg);
   }
   50% {
@@ -166,4 +181,4 @@ p {
     font-size: 1.5rem;
   }
 }
-</style>
+</style>

src/views/ProjectView.vue

@@ -4,54 +4,56 @@ import { ref, onMounted } from 'vue'
 const projets = [
   {
     id: 1,
-    titre: "IoT - Système surveillance température et humidité",
+    titre: 'IoT - Système surveillance température et humidité',
     images: [
       {
-        src: "https://github.com/raphbag/IoT-Home-Weather-Station/raw/main/.github/preview.jpg",
-        alt: "Photo du projet IoT"
+        src: 'https://github.com/raphbag/IoT-Home-Weather-Station/raw/main/.github/preview.jpg',
+        alt: 'Photo du projet IoT',
       },
       {
-        src: "https://github.com/raphbag/IoT-Home-Weather-Station/raw/main/.github/dashboard.jpg",
-        alt: "Dashboard du projet IoT"
-      }     
+        src: 'https://github.com/raphbag/IoT-Home-Weather-Station/raw/main/.github/dashboard.jpg',
+        alt: 'Dashboard du projet IoT',
+      },
     ],
-    description: "Projet IoT de surveillance de la température et de l'humidité dans maison, utilisant un ESP32, un capteur DHT22 et la communication MQTT.",
+    description:
+      "Projet IoT de surveillance de la température et de l'humidité dans maison, utilisant un ESP32, un capteur DHT22 et la communication MQTT.",
     liens: [
       {
-        url: "https://github.com/raphbag/IoT-Home-Weather-Station",
-        label: "Github",
-        icon: "/github.svg",
-        newTab: true
-      }
+        url: 'https://github.com/raphbag/IoT-Home-Weather-Station',
+        label: 'Github',
+        icon: '/github.svg',
+        newTab: true,
+      },
     ],
-    type: "ESME"
+    type: 'ESME',
   },
   {
     id: 2,
-    titre: "WEB - Maquette Omnifood",
+    titre: 'WEB - Maquette Omnifood',
     images: [
       {
-        src: "https://github.com/raphbag/maquette-omnifood/raw/master/.github/preview-omnifood-raphbag.png",
-        alt: "Aperçu de ma version de Omnifood"
-      }
+        src: 'https://github.com/raphbag/maquette-omnifood/raw/master/.github/preview-omnifood-raphbag.png',
+        alt: 'Aperçu de ma version de Omnifood',
+      },
     ],
-    description: "Refonte de la maquette Omnifood (omnifood.dev) en utilisant HTML et CSS pour créer un site web responsive et attrayant.",
+    description:
+      'Refonte de la maquette Omnifood (omnifood.dev) en utilisant HTML et CSS pour créer un site web responsive et attrayant.',
     liens: [
       {
-        url: "https://github.com/raphbag/maquette-omnifood",
-        label: "Github",
-        icon: "/github.svg",
-        newTab: true
+        url: 'https://github.com/raphbag/maquette-omnifood',
+        label: 'Github',
+        icon: '/github.svg',
+        newTab: true,
       },
       {
-        url: "https://raphbag.github.io/maquette-omnifood",
-        label: "Site",
-        icon: "https://github.com/raphbag/maquette-omnifood/raw/master/assets/images/icon.png",
-        newTab: true
-      }
+        url: 'https://raphbag.github.io/maquette-omnifood',
+        label: 'Site',
+        icon: 'https://github.com/raphbag/maquette-omnifood/raw/master/assets/images/icon.png',
+        newTab: true,
+      },
     ],
-    type: "ESME"
-  }
+    type: 'ESME',
+  },
 ]
 
 const visibleProjets = ref([])
@@ -69,29 +71,60 @@ onMounted(() => {
   <main>
     <section class="projets">
       <TransitionGroup name="fade-projet" tag="div">
-        <div
-          class="projet"
-          v-for="projet in visibleProjets"
-          :key="projet.id"
-        >
+        <div class="projet" v-for="projet in visibleProjets" :key="projet.id">
           <h2>{{ projet.titre }}</h2>
           <div class="images">
             <img v-for="img in projet.images" :src="img.src" :alt="img.alt" :key="img.src" />
           </div>
           <p>{{ projet.description }}</p>
           <div class="bottom">
             <div class="liens">
-              <a v-for="lien in projet.liens" :key="lien.url" :href="lien.url" :target="lien.newTab ? '_blank' : '_self'">
+              <a
+                v-for="lien in projet.liens"
+                :key="lien.url"
+                :href="lien.url"
+                :target="lien.newTab ? '_blank' : '_self'"
+              >
                 <img :src="lien.icon" width="26px" :alt="`Icon ${lien.label}`" />
                 {{ lien.label }}
-                <svg v-if="lien.newTab" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#d6d6d6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><g fill="none" fill-rule="evenodd"><path d="M18 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h5M15 3h6v6M10 14L20.2 3.8"/></g></svg>
+                <svg
+                  v-if="lien.newTab"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="#d6d6d6"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <g fill="none" fill-rule="evenodd">
+                    <path
+                      d="M18 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h5M15 3h6v6M10 14L20.2 3.8"
+                    />
+                  </g>
+                </svg>
               </a>
             </div>
             <span v-if="projet.type === 'ESME'">
-              <img src="@/assets/Esme-sudria-logo.png" alt="Logo ESME Sudria"/> ESME
+              <img src="@/assets/Esme-sudria-logo.png" alt="Logo ESME Sudria" /> ESME
             </span>
             <span v-else-if="projet.type === 'Perso'" class="perso">
-              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                <circle cx="12" cy="7" r="4"></circle>
+              </svg>
               Perso
             </span>
             <span v-else class="autre">{{ projet.type }}</span>
@@ -103,7 +136,6 @@ onMounted(() => {
 </template>
 
 <style scoped>
-
 main {
   padding: 0 20px;
 }
@@ -142,15 +174,19 @@ h2 {
   display: inline-block;
   font-weight: 600;
   color: #e0e0e0;
-  transition: background-position 0.3s ease, color 0.3s ease;
+  transition:
+    background-position 0.3s ease,
+    color 0.3s ease;
 }
 
 h2:hover {
   background: linear-gradient(150deg, #4e54c8 60%, #8f94fb 100%);
   background-size: 200% 100%;
   background-position: right center;
   color: #fff;
-  transition: background-position 0.3s ease, color 0.3s ease;
+  transition:
+    background-position 0.3s ease,
+    color 0.3s ease;
 }
 
 .projet:hover {
@@ -195,15 +231,14 @@ h2:hover {
   text-decoration: none;
   border: #797979 0.5px solid;
   border-radius: 10px;
-  margin-top: 10px;
   padding: 5px;
 }
 
 .projet a:hover {
   flex-wrap: wrap;
   gap: 10px;
   background-color: #797979;
-  transition: all 0.3s ease;  
+  transition: all 0.3s ease;
 }
 
 .bottom {
@@ -244,11 +279,10 @@ span img {
   transform: translateY(30px) scale(0.95);
 }
 .fade-projet-enter-active {
-  transition: all 0.6s cubic-bezier(.5,1.5,.5,1);
+  transition: all 0.6s cubic-bezier(0.5, 1.5, 0.5, 1);
 }
 .fade-projet-enter-to {
   opacity: 1;
   transform: translateY(0) scale(1);
 }
-
-</style>
+</style>