Working

src/components/ContactForm.vue

@@ -1,9 +1,9 @@
 <template>
-  <section class="w-full flex items-center justify-center flex-col">
-    <h2 class="text-center mb-10 font-bold text-gray-700 text-2xl md:text-3xl my-4 dark:text-gray-400">
+  <section class="w-full flex justify-center flex-col">
+    <h2 class="mb-10 font-bold text-gray-700 text-2xl md:text-3xl my-4 dark:text-gray-400">
       {{ $t('contact.form.title.main') }} <br class="lg:hidden"/><a class="email text-black dark:text-white" href="mailto:me@arthurdanjou.fr" target="_blank">{{ $t('contact.form.title.email') }}</a> 📬
     </h2>
-    <form class="w-full lg:w-1/2">
+    <form class="w-full">
       <div class="w-full lg:flex justify-center mb-8 lg:mb-12">
         <div class="form-div lg:w-1/2 mb-8 lg:mb-0 lg:mr-4">
           <input

src/components/GuestbookMessage.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "@nuxtjs/composition-api";
+
+export default defineComponent({
+  name: "GuestbookMessage",
+  props: {
+    message: {
+      type: String,
+      default: 'Guestbook Message'
+    },
+    author: {
+      type: String,
+      default: "Guestbook Author"
+    },
+    date: {
+      type: String,
+      default: "Guestbook Date"
+    }
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

src/components/PresentationAbout.vue

@@ -3,7 +3,7 @@
     <div class="lg:mr-12">
       <img class="logo-img rounded-full my-5" src="~/assets/images/memojies/Hey.png" alt="It's me !" />
     </div>
-    <div class="ml-2 text-lg leading-6 xl:w-2/3 text-justify dark:text-gray-400 text-gray-700">
+    <div class="ml-2 text-lg leading-6 text-justify dark:text-gray-400 text-gray-700">
       <p>{{ $t('about.banner.hello') }} <span class="text-indigo-600 font-bold">Arthur DANJOU</span> 👋.</p> <br/>
       <p>{{ $t('about.banner.1')}}</p> <br/>
       <p>{{ $t('about.banner.2') }}</p> <br/>

src/components/icons/CubeIcon.vue

@@ -5,7 +5,8 @@
       stroke="currentColor"
       stroke-width="2"
       stroke-linecap="round"
-      stroke-linejoin="round">
+      stroke-linejoin="round"
+    >
       <path d="M6 17.6l-2-1.1V14"/>
       <path d="M4 10V7.5l2-1.1"/>
       <path d="M10 4.1L12 3l2 1.1"/>

src/components/icons/FireIcon.vue

@@ -13,8 +13,8 @@
         stroke="currentColor"
         stroke-width="2"
         stroke-linecap="round"
-        stroke-linejoin="round">
-      </path>
+        stroke-linejoin="round"
+      />
     </g>
   </svg>
 </template>

src/components/icons/GoogleIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg class="inline" width="1.5em" height="1.5em" viewBox="0 0 24 24" focusable="false">
+    <path
+      d="M21.35 11.1h-9.17v2.73h6.51c-.33 3.81-3.5 5.44-6.5 5.44C8.36 19.27 5 16.25 5 12c0-4.1 3.2-7.27 7.2-7.27c3.09 0 4.9 1.97 4.9 1.97L19 4.72S16.56 2 12.1 2C6.42 2 2.03 6.8 2.03 12c0 5.05 4.13 10 10.22 10c5.35 0 9.25-3.67 9.25-9.09c0-1.15-.15-1.81-.15-1.81z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "GoogleIcon"
+}
+</script>

src/components/icons/NuxtIcon.vue

@@ -10,7 +10,8 @@
     />
     <path
       d="M25.233 25.7l.026-.052l.07-.139a1.278 1.278 0 0 0 .061-.7a2.11 2.11 0 0 0-.27-.724l-6.286-10.9l-.95-1.656h-.017l-.959 1.648l-6.277 10.9a2.18 2.18 0 0 0-.244.715a1.438 1.438 0 0 0 .148.942a1.563 1.563 0 0 0 1.482.7h11.708a1.79 1.79 0 0 0 1.508-.741zm-7.367-10.864L23.62 24.8H12.112z"
-      fill="#2f495e"/>
+      fill="#2f495e"
+    />
   </svg>
 </template>
 

src/components/icons/PresentationIcon.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg class="inline" width="1em" height="1 em" viewBox="0 0 24 24" focusable="false">
+  <svg class="inline" width="1em" height="1em" viewBox="0 0 24 24" focusable="false">
     <g
       fill="none"
       stroke="currentColor"