Louisp78 · Louisp78 · Jun 8, 2025 · Jun 8, 2025 · Jun 8, 2025 · Jun 8, 2025
diff --git a/components/QuoteForm.vue b/components/QuoteForm.vue
@@ -218,7 +218,7 @@ const emit = defineEmits<{
           </div>
         </form>
       </section>
-      <section class="w-full flex flex-col gap-5">
+      <section class="w-full flex flex-col gap-5 px-0 md:px-5">
         <h3>{{ t("quote.modal.mission-details") }}</h3>
         <button
           type="button"
@@ -249,8 +249,6 @@ const emit = defineEmits<{
                   />
                 </button>
               </div>
-
-              <!-- TODO: Change the ring focus color to burnedSand -->
               <textarea
                 :ref="
                   (el) => {

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -13,6 +13,8 @@ const compat = new FlatCompat({
   allConfig: js.configs.all,
 })
 
+//TODO: Make it work
+//TODO: Add rules about scss format : organise tailwind classes logically + unauthorize style on tag element
 export default defineConfig([
   {
     extends: compat.extends("eslint:recommended", "prettier"),

diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -2,11 +2,7 @@
   "get-my-resume": "Get my resume",
   "hello-im-louis": "👋 Hello, I'm Louis",
   "job-title": "a mobile software engineer",
-  "story-ocean": "Outside of computing, I live for the Ocean. Driven by a growing passion for marine life and oceanography, my readings turn into scientific articles about manta rays. I love scuba diving or just snorkeling to observe the unparalleled calm and serenity of the Ocean!",
-  "to-contact": "To contact me, please reach out here...",
-  "send-me-an-email": "Send me an email",
-  "or": "or",
-  "hire-me-on": "Hire me on",
+  "lets-discuss-project": "Let’s discuss your project",
   "experiences-title": "Experiences",
   "education-title": "Education",
   "projects-title": "Projects",
@@ -64,8 +60,11 @@
     "description": "Welcome to Louis Place's portfolio! As a mobile software engineer, I invite you to explore my innovative projects, technical expertise, and the passions that drive my work. Dive in to discover how I bring ideas to life and connect with me to collaborate or learn more."
   },
   "more-details": "More details",
-  "footer-credits": "A website made with 💚 and a pinch of Nuxt.js",
-  "view-project-on-github": "View project on Github",
+  "footer": {
+    "credits": "A website made with 💚 and a pinch of Nuxt.js",
+    "hire-me-on": "Hire me on",
+    "view-project-on-github": "View project on Github"
+  },
   "sudosumo": {
     "title": "SudoSumo Infrastructure Technical Specifications"
   },

diff --git a/i18n/locales/fr.json b/i18n/locales/fr.json
@@ -2,11 +2,7 @@
   "get-my-resume": "Voir mon cv",
   "hello-im-louis": "👋 Salut, je suis Louis",
   "job-title": "un ingénieur logiciel mobile",
-  "story-ocean": "En dehors de l’informatique, je vis pour l’Océan. Porté par une passion grandissante pour la vie marine et l’océanographie, mes lectures se transforment en articles scientifiques sur les raies manta. J’adore faire de la plongée sous-marine ou simplement du snorkeling pour observer le calme et la sérénité incomparables de l’Océan !",
-  "to-contact": "Pour me contacter, veuillez m’écrire ici…",
-  "send-me-an-email": "Envoyer un email",
-  "or": "ou",
-  "hire-me-on": "Engagez-moi sur",
+  "lets-discuss-project": "Discutons de votre projet",
   "experiences-title": "Expériences",
   "projects-title": "Projets",
   "my-toolkit": "Mes outils",
@@ -28,7 +24,7 @@
     "job-title": "Stagiaire en Analyse de Données"
   },
   "epita-mti": "Spécialité MTI, Multimédia et Technologies de l’Information.",
-  "upec-dual-bachelor": "Double diplôme de Bachelor en Informatique",
+  "upec-dual-bachelor": "Double diplôme Licence d'Informatique",
   "upec": "Université de Paris-Est Créteil, FR",
   "cmas-one-star-diver": "Plongeur CMAS Niveau 1",
   "blue-water-diving-center-mau": "Blue Water Diving, MAU",
@@ -64,8 +60,11 @@
     "description": "Bienvenue sur le portfolio de Louis Place ! En tant que développeur mobile, je vous invite à découvrir mes projets innovants, mon expertise technique et les passions qui animent mon travail. Plongez dans mon univers pour voir comment je donne vie aux idées et contactez-moi pour collaborer ou en savoir plus."
   },
   "more-details": "Voir plus",
-  "footer-credits": "Un site créé avec du 💚 et une pincée de Nuxt.js",
-  "view-project-on-github": "Voir le projet sur Github",
+  "footer": {
+    "credits": "Un site créé avec du 💚 et une pincée de Nuxt.js",
+    "hire-me-on": "Engagez-moi sur",
+    "view-project-on-github": "Voir le projet sur Github"
+  },
   "sudosumo": {
     "title": "Spécifications techniques de l'infrastructure SudoSumo"
   },

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -99,24 +99,48 @@ const navList = computed<MenuItem[]>(() => [
     </nav>
     <slot />
     <footer
-      class="bg-softSand border-t-2 flex items-center py-3 flex-col gap-2"
+      class="flex flex-col items-center gap-2 py-3 bg-softSand border-t-2"
     >
-      <span class="text-sm">{{ $t("footer-credits") }}</span>
-      <NuxtLink
-        to="https://github.com/Louisp78/portfolioV2"
-        target="_blank"
-        class="text-sm underline hover:text-burnedSand"
-      >
-        {{ $t("view-project-on-github") }}
-      </NuxtLink>
+      <div class="flex items-center gap-3">
+        <NuxtLink
+          to="https://github.com/Louisp78/portfolioV2"
+          target="_blank"
+          class="underline hover:text-burnedSand"
+        >
+          {{ $t("footer.view-project-on-github") }}
+        </NuxtLink>
+        <span> | </span>
+        <NuxtLink
+          to="https://www.malt.fr/profile/louisplace"
+          target="_blank"
+          class="max-h-2 flex items-center gap-1 hover:text-burnedSand hover:cursor-pointer"
+        >
+          <span class="underline">
+            {{ $t("footer.hire-me-on") }}
+          </span>
+          <Icon name="simple-icons:malt" size="45" />
+        </NuxtLink>
+      </div>
+      <span class="text-sm">{{ $t("footer.credits") }}</span>
     </footer>
   </div>
 </template>
 
 <style scoped lang="postcss">
 .menu-item {
   a {
-    @apply text-2xl duration-100 select-none flex px-10 py-3 items-center text-moon hover:text-burnedSand hover:cursor-pointer;
+    @apply flex
+      items-center
+      px-10 
+      py-3 
+
+      text-2xl
+      select-none
+      text-moon
+
+      duration-100
+      hover:cursor-pointer
+      hover:text-burnedSand;
   }
 }
 </style>
diff --git a/pages/index.vue b/pages/index.vue
@@ -38,6 +38,7 @@ const allSkillList = [
   "Java",
   "Kotlin",
   "Spring Boot",
+  "TypeScript",
 ]
 </script>
 
@@ -93,15 +94,6 @@ const allSkillList = [
                   </NuxtLink>
                 </li>
               </ul>
-              <NuxtLink
-                to="/cv.pdf"
-                target="_blank"
-                class="btn-primary w-fit"
-                external
-              >
-                <Icon name="mdi:resume" :size="ICON_SIZE" />
-                <span>{{ $t("get-my-resume") }}</span>
-              </NuxtLink>
             </nav>
           </section>
           <section class="mt-10 text-center lg:text-left lg:max-w-3xl">
@@ -189,38 +181,23 @@ const allSkillList = [
                 </template>
               </AccordionComponent>
             </article>
-            <div
-              class="flex flex-col items-center gap-3 text-center lg:text-left lg:items-start"
-            >
-              <div class="flex flex-col md:flex-row items-center gap-3">
-                <NuxtLink :to="`mailto:${CONTACT_EMAIL}`" class="button">
-                  <Icon name="ic:outline-email" :size="ICON_SIZE" />
-                  <span>
-                    {{ $t("send-me-an-email") }}
-                  </span>
-                </NuxtLink>
+            <div class="w-full md:w-auto flex justify-center md:justify-start">
+              <button
+                class="w-fit min-h-12 flex items-center gap-2 px-3 border-2 rounded-md bg-softSand border-burnedSand"
+                @click="quoteModalOpen = !quoteModalOpen"
+              >
+                <div class="w-3 flex justify-center items-center relative">
+                  <span
+                    class="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-darkGreen opacity-80"
+                  />
+                  <span
+                    class="absolute inline-flex h-3 w-3 rounded-full bg-darkGreen"
+                  />
+                </div>
                 <span class="font-inconsolata font-medium">
-                  {{ $t("or") }}
+                  {{ t("lets-discuss-project") }}
                 </span>
-                <NuxtLink
-                  to="https://www.malt.fr/profile/louisplace"
-                  target="_blank"
-                  class="flex flex-row items-center gap-2 px-3 border-2 rounded-md bg-softSand border-burnedSand"
-                >
-                  <span class="relative w-3">
-                    <span
-                      class="animate-ping absolute -top-1 inline-flex h-3 w-3 rounded-full bg-darkGreen opacity-80"
-                    />
-                    <span
-                      class="absolute -top-1 inline-flex h-3 w-3 rounded-full bg-darkGreen"
-                    />
-                  </span>
-                  <span class="font-inconsolata font-medium"
-                    >{{ $t("hire-me-on") }}
-                  </span>
-                  <Icon name="simple-icons:malt" size="45" />
-                </NuxtLink>
-              </div>
+              </button>
             </div>
           </section>
         </div>
@@ -278,28 +255,64 @@ const allSkillList = [
         </div>
       </section>
     </div>
-    <!-- TODO : Afficher un bouton "me contacter" lorsque l'utilisateur arrive à la dernière section de lecture -->
   </div>
 </template>
 
 <style scoped lang="postcss">
 .introduce-section-title {
-  @apply text-center w-full md:w-auto;
+  @apply w-full
+    md:w-auto
+    text-center;
 }
+
 .btn-primary {
-  @apply flex justify-center items-center gap-3 p-2 font-inconsolata font-medium border border-black rounded-md hover:bg-sand hover:text-burnedSand;
+  @apply flex
+    justify-center
+    items-center
+    gap-3
+    p-2
+    rounded-md
+    border
+    border-black
+    font-inconsolata
+    font-medium
+    hover:bg-sand
+    hover:text-burnedSand;
 }
+
 .expList {
-  @apply flex flex-col items-center gap-10 md:px-20 lg:px-0 lg:pl-12 pb-10;
+  @apply flex
+    flex-col
+    items-center
+    gap-10
+    pb-10
+    md:px-20
+    lg:px-0
+    lg:pl-12;
 }
+
 .eduList {
-  @apply flex flex-col items-center lg:items-end lg:text-right gap-10 md:px-20 lg:px-0;
+  @apply flex
+    flex-col
+    items-center
+    gap-10
+    text-center
+    md:px-20
+    lg:px-0
+    lg:items-end
+    lg:text-right;
 }
+
 .projectList {
-  @apply flex flex-col gap-24 md:gap-10;
+  @apply flex
+    flex-col
+    gap-24
+    md:gap-10;
 }
 
 ul {
-  @apply flex flex-row gap-3;
+  @apply flex
+    flex-row
+    gap-3;
 }
 </style>
diff --git a/public/cv.pdf b/public/cv.pdf