add intro

lang/en.json

@@ -1,7 +1,13 @@
 {
-  "Olivier Massot - Fullstack developer": "Olivier Massot - Fullstack Developer",
+  "Fullstack developer": "Fullstack Developer",
+  "twelve_years_experience": "12 years experience",
+  "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_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",
-  "Find me on LinkedIn": "Find me on LinkedIn",
+  "Find me on LinkedIn": "Find me on LinkedIn"
 
 }

lang/fr.json

@@ -1,6 +1,12 @@
 {
-  "Olivier Massot - Fullstack developer": "Olivier Massot - Développeur Fullstack",
+  "Fullstack developer": "Développeur Fullstack",
+  "twelve_years_experience": "12 years 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_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_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",
-  "Find me on LinkedIn": "Retrouvez moi sur LinkedIn",
+  "Find me on LinkedIn": "Retrouvez moi sur LinkedIn"
 }

pages/index.vue

@@ -5,11 +5,35 @@
   />
 
   <div class="banner">
-    <h1>{{ $t('Olivier Massot - Fullstack developer') }}</h1>
-  </div>
+    <h1>
+      {{ $t('Fullstack developer') }}
+    </h1>
+    
+    <span>
+      {{ $t('twelve_years_experience') }}
+    </span>
+
+    <div class="introduction">
+      <div>
+        {{ $t('intro_part_1') }}
+      </div>
+
+      <div>
+        {{ $t('intro_part_2') }}
+      </div>
 
-  <div class="introduction">
+      <div>
+        {{ $t('intro_part_3') }}
+      </div>
 
+      <div>
+        {{ $t('intro_part_4') }}
+      </div>
+
+      <div>
+        {{ $t('intro_part_5') }}
+      </div>
+    </div>
   </div>
 
   <div class="badges">
@@ -69,11 +93,12 @@
 
 <style scoped lang="scss">
 .banner {
-  height: 240px;
+  height: 480px;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
+  text-align: center;
   padding: 20px;
 }