add links and logos to introduction

lang/en.json

@@ -4,7 +4,7 @@
   "intro_part_1": "Trained as an engineer, I very early turned towards development, out of passion. My professional, personal and associative journey has allowed me to develop very varied skills from a technical point of view: development, system administration, QA and continuous integration, database management, search engines..., but also from a managerial point of view: supervision, tutoring, agile management, collective intelligence, meeting animation.",
   "intro_part_2": "I have been led to work with various services: water services, waste management, rural works, conservatories and music schools, telecom networks, all in very diverse environments.",
   "intro_part_3": "I place great importance on the development of a team spirit, continuous improvement, and the realization of a thorough, tested, documented work.",
-  "intro_part_4": "I currently maintain the open source libraries Path-PHP and dicex, and have occasionally contributed to some other open source projects.",
+  "intro_part_4": "I currently maintain the open source libraries <a href='https://github.com/olinox14/path-php' target='_blank'>Path-PHP</a> and <a href='https://github.com/olinox14/xdice' target='_blank'>xdice</a>, and have occasionally contributed to some other open source projects.",
   "intro_part_5": "To learn more about my work, find me on :",
   "Find me on Github": "Find me on Github",
   "Find me on Stackoverflow": "Find me on Stackoverflow",

lang/fr.json

@@ -1,10 +1,10 @@
 {
   "Fullstack developer": "Développeur Fullstack",
-  "twelve_years_experience": "12 years d'expérience",
+  "twelve_years_experience": "12 ans d'expérience",
   "intro_part_1": "Ingénieur de formation, je me suis dirigé très tôt vers le développement, par passion. Mon parcours professionnel, personnel et associatif m'a permis de développer des compétences très variées d'un point de vue technique: développement, administration système, QA et intégration continue, gestion de bases de données, moteurs de recherche..., mais aussi d'un point de vue managérial: encadrement, tutorat, management agile, intelligence collective, animation de réunion.",
-  "intro_part_2": "J'ai été amené à travailler avec des services variés: services des eaux, gestion des déchets, travaux ruraux, conservatoires et écoles de musique, réseaux telecom, le tout dans des environnements très divers.",
+  "intro_part_2": "J'ai été amené à travailler avec des services de différentes natures: services des eaux, gestion des déchets, travaux ruraux, conservatoires et écoles de musique, réseaux telecom, le tout dans des environnements très divers.",
   "intro_part_3": "J'accorde beaucoup d'importance au développement d'un esprit d'équipe, à l'amélioration continue, et à la réalisation d'un travail abouti, testé, documenté.",
-  "intro_part_4": "Je maintiens actuellement les librairies opensource Path-PHP et dicex, et ai contribué occasionnellement à certains projets opensource.",
+  "intro_part_4": "Je maintiens actuellement les librairies opensource <a href='https://github.com/olinox14/path-php' target='_blank'>Path-PHP</a> et <a href='https://github.com/olinox14/xdice' target='_blank'>xdice</a>, et ai contribué occasionnellement à certains autres projets opensource.",
   "intro_part_5": "Pour en savoir plus sur mon travail, retrouvez moi sur :",
   "Find me on Github": "Retrouvez moi sur Github",
   "Find me on Stackoverflow": "Retrouvez moi sur Stackoverflow",

nuxt.config.ts

@@ -101,6 +101,9 @@ export default defineNuxtConfig({
         name: 'Français',
       },
     ],
+    compilation: {
+      strictMessage: false,
+    },
     defaultLocale: 'fr',
     detectBrowserLanguage: true,
   },

pages/index.vue

@@ -8,10 +8,10 @@
     <h1>
       {{ $t('Fullstack developer') }}
     </h1>
-    
-    <span>
+
+    <h2>
       {{ $t('twelve_years_experience') }}
-    </span>
+    </h2>
 
     <div class="introduction">
       <div>
@@ -26,20 +26,58 @@
         {{ $t('intro_part_3') }}
       </div>
 
-      <div>
-        {{ $t('intro_part_4') }}
-      </div>
+      <div v-html="$t('intro_part_4')" />
 
       <div>
         {{ $t('intro_part_5') }}
       </div>
+
+      <div class="logos">
+        <nuxt-link
+          href="https://github.com/olinox14"
+          target="_blank"
+        >
+          <v-img
+            src="/images/logos/github_large_dark.png"
+          />
+        </nuxt-link>
+
+        <nuxt-link
+          href="https://stackoverflow.com/users/4279120/olinox14"
+          target="_blank"
+        >
+          <v-img
+            src="/images/logos/stackoverflow.svg"
+            class="so-logo"
+          />
+        </nuxt-link>
+
+        <nuxt-link
+          href="https://www.linkedin.com/in/olivier-massot-60b87b181"
+          target="_blank"
+        >
+          <v-img
+            src="/images/logos/linkedin.png"
+          />
+        </nuxt-link>
+
+        <nuxt-link
+          href="https://www.codingame.com/profile/75dcc329745def530c02ddb4485f22235683081"
+          target="_blank"
+        >
+          <v-img
+            src="/images/logos/codingame.svg"
+          />
+        </nuxt-link>
+
+      </div>
     </div>
   </div>
 
   <div class="badges">
     <h2>Languages</h2>
     <div class="badges-section">
-      <Badge title="Python" img="images/logos/python.svg" />
+      <Badge title="Python" img="/images/logos/python.svg" />
       <Badge title="PHP" img="/images/logos/php.svg" />
       <Badge title="Node.js" img="/images/logos/node-light.svg" />
       <Badge title="C#" img="/images/logos/csharp.png" />
@@ -93,13 +131,54 @@
 
 <style scoped lang="scss">
 .banner {
-  height: 480px;
+  height: 640px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   padding: 20px;
+
+  h2 {
+    margin: 18px 0;
+    border-bottom: none;
+  }
+
+  .introduction {
+    max-width: 800px;
+    text-align: justify;
+    padding: 36px;
+    border: solid 1px rgba(var(--v-theme-on-neutral), 0.4);
+    border-radius: 16px;
+    background: rgba(var(--v-theme-primary-alt), 0.1);
+
+    > div {
+      margin-bottom: 16px;
+    }
+
+    :deep(a) {
+      color: var(--v-theme-on-neutral);
+      font-weight: 700;
+      text-decoration: none;
+    }
+
+    .logos {
+      display: flex;
+      flex-direction: row;
+
+      :deep(a) {
+        width: 20%;
+        margin: 0 auto;
+        max-width: 140px;
+        padding: 16px;
+      }
+
+      .so-logo {
+        background: white;
+        border-radius: 6px;
+      }
+    }
+  }
 }
 
 .badges {