various style improvements

app.vue

@@ -48,8 +48,7 @@ html {
   display: flex;
   flex-direction: column;
   flex: 1;
-  margin: 0 auto;
-  max-width: 1400px;
+  margin: 0 15%;
 
   @media (max-width: 1280px) {
     margin: 0 10%;

components/Cursus.vue

@@ -40,5 +40,9 @@
   .v-table {
     max-width: 720px;
     margin: 12px auto;
+
+    td {
+      padding: 4px 16px !important;
+    }
   }
 </style>

lang/en.json

@@ -2,11 +2,14 @@
   "Fullstack developer": "Fullstack Developer",
   "x_years_experience": "{years} years experience",
   "x_years": "{years} years",
-  "intro_part_1": "Trained as an engineer, my professional 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_short": "Trained as an engineer, fullstack developer, with managerial, system and Product Owner experience.",
+  "intro_part_1": "Since 2011, my professional 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.",
   "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 <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 :",
+  "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>.",
+  "intro_part_5": "Find me on :",
+  "show_more": "Show more",
+  "show_less": "Show less",
   "Find me on Github": "Find me on Github",
   "Find me on Stackoverflow": "Find me on Stackoverflow",
   "Find me on LinkedIn": "Find me on LinkedIn",

lang/fr.json

@@ -2,11 +2,14 @@
   "Fullstack developer": "Développeur Fullstack",
   "x_years_experience": "{years} ans d'expérience",
   "x_years": "{years} ans",
-  "intro_part_1": "Ingénieur de formation, mon parcours professionnel 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 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_short": "Ingénieur de formation, développeur fullstack, avec expérience managériale, système et PO.",
+  "intro_part_1": "Depuis 2011, mon parcours professionnel m'a permis de développer des compétences très variées, tant 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..., que 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 de natures diverses: services des eaux, gestion des déchets, travaux ruraux, conservatoires et écoles de musique, réseaux telecom.",
   "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 <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 :",
+  "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>.",
+  "intro_part_5": "Retrouvez moi sur :",
+  "show_more": "Voir plus",
+  "show_less": "Réduire",
   "Find me on Github": "Retrouvez moi sur Github",
   "Find me on Stackoverflow": "Retrouvez moi sur Stackoverflow",
   "Find me on LinkedIn": "Retrouvez moi sur LinkedIn",

pages/index.vue

@@ -12,153 +12,168 @@
     <h2>
       {{ $t('x_years_experience', { years: XP_YEARS }) }}
     </h2>
+  </div>
 
-    <div class="introduction">
-      <div>
-        {{ $t('intro_part_1') }}
-      </div>
-
-      <div>
-        {{ $t('intro_part_2') }}
-      </div>
+  <div class="introduction">
+    <div>
+      {{ $t('intro_short') }}
+    </div>
 
-      <div>
-        {{ $t('intro_part_3') }}
-      </div>
+    <div v-html="$t('intro_part_4')" />
 
-      <div v-html="$t('intro_part_4')" />
+    <v-expand-transition>
+      <div v-if="showLongIntro">
+        <div>
+          {{ $t('intro_part_1') }}
+        </div>
 
-      <div>
-        {{ $t('intro_part_5') }}
-      </div>
+        <div>
+          {{ $t('intro_part_2') }}
+        </div>
 
-      <div class="logos mt-3">
-        <BannerLogo
-          href="https://github.com/olinox14"
-          :img="theme.global.name.value === 'light' ? '/images/logos/github_large_light.png' : '/images/logos/github_large_dark.png'"
-          :alt="i18n.t('Find me on Github')"
-        />
-
-        <BannerLogo
-          href="https://stackoverflow.com/users/4279120/olinox14"
-          img="/images/logos/stackoverflow.svg"
-          :alt="i18n.t('Find me on Stackoverflow')"
-          class="so-logo"
-        />
-
-        <BannerLogo
-          href="https://www.linkedin.com/in/olivier-massot-60b87b181"
-          img="/images/logos/linkedin.png"
-          :alt="i18n.t('Find me on LinkedIn')"
-        />
-
-        <BannerLogo
-          href="https://www.codingame.com/profile/75dcc329745def530c02ddb4485f22235683081"
-          img="/images/logos/codingame.svg"
-          :alt="i18n.t('Find me on Codingame')"
-        />
+        <div>
+          {{ $t('intro_part_3') }}
+        </div>
       </div>
+    </v-expand-transition>
+
+    <v-btn
+      size="small"
+      variant="text"
+      :prepend-icon="showLongIntro ? 'fas fa-caret-up' : 'fas fa-caret-down'"
+      @click="showLongIntro=!showLongIntro"
+    >
+      {{ showLongIntro ? $t('show_less') : $t('show_more') }}
+    </v-btn>
+
+    <div class="logos mt-3">
+      <BannerLogo
+        href="https://github.com/olinox14"
+        :img="theme.global.name.value === 'light' ? '/images/logos/github_large_light.png' : '/images/logos/github_large_dark.png'"
+        :alt="i18n.t('Find me on Github')"
+      />
+
+      <BannerLogo
+        href="https://stackoverflow.com/users/4279120/olinox14"
+        :img="theme.global.name.value === 'light' ? '/images/logos/stackoverflow.svg' : '/images/logos/stackoverflow-dark.svg'"
+        :alt="i18n.t('Find me on Stackoverflow')"
+        class="so-logo"
+      />
+
+      <BannerLogo
+        href="https://www.linkedin.com/in/olivier-massot-60b87b181"
+        img="/images/logos/linkedin.png"
+        :alt="i18n.t('Find me on LinkedIn')"
+      />
+
+      <BannerLogo
+        href="https://www.codingame.com/profile/75dcc329745def530c02ddb4485f22235683081"
+        img="/images/logos/codingame.svg"
+        :alt="i18n.t('Find me on Codingame')"
+      />
     </div>
   </div>
 
-  <div class="badges">
-    <h3>{{ $t("Competences") }}</h3>
-
-    <v-container>
-      <v-row>
-        <v-col cols="4">
-          <div class="badges-section">
-            <h4>Languages</h4>
-
-            <Badge
-              title="Python"
-              img="/images/logos/python.svg"
-              :subtitle="$t('x_years', { years: 10 })"
-              details="J'ai travaillé sur de très nombreux projets avec Python, depuis la version 2.7 jusqu'à la version 3.12: scripts variés, extensions QGis, projets web, librairies, utilitaires ou applications buraeautiques."
-            />
-            <Badge title="PHP" img="/images/logos/php.svg" :subtitle="$t('x_years', { years: 4 })" />
-            <Badge title="Node.js" :img="theme.global.name.value === 'light' ? '/images/logos/nodejs_light.svg' : '/images/logos/nodejs_dark.svg'" :subtitle="$t('x_years', { years: 5 })" />
-            <Badge title="C#" img="/images/logos/csharp.png" :subtitle="$t('x_years', { years: 2 })" />
-          </div>
-
-          <div class="badges-section">
-            <h4>Frameworks</h4>
-
-            <Badge title="Symfony" img="/images/logos/symfony.svg" :subtitle="$t('x_years', { years: 4 })" />
-            <Badge title="Vue.js" img="/images/logos/vue.png" :subtitle="$t('x_years', { years: 3 })" />
-            <Badge title="Nuxt.js" img="/images/logos/nuxt.svg" :subtitle="$t('x_years', { years: 3 })" />
-            <Badge title="Django" :img="theme.global.name.value === 'light' ? '/images/logos/django-light.svg' : '/images/logos/django-dark.svg'" :subtitle="$t('x_years', { years: 3 })" />
-            <Badge title=".Net" img="/images/logos/dotnet.svg" :subtitle="$t('x_years', { years: 2 })" />
-            <Badge title="Jquery" :img="theme.global.name.value === 'light' ? '/images/logos/jquery.png' : '/images/logos/jquery_dark.png'" :subtitle="$t('x_years', { years: 4 })"/>
-          </div>
-        </v-col>
-
-        <v-col cols="4">
-          <div class="badges-section">
-            <h4>DBs and search-engines</h4>
-
-            <Badge title="Mysql" img="/images/logos/mysql.png" :subtitle="$t('x_years', { years: 6 })" />
-            <Badge title="MariaDb" :img="theme.global.name.value === 'light' ? '/images/logos/mariadb.svg': '/images/logos/mariadb_dark.svg'" :subtitle="$t('x_years', { years: 6 })" />
-            <Badge title="Postgresql" img="/images/logos/postgresql.svg" :subtitle="$t('x_years', { years: 5 })"/>
-            <Badge title="SQL-Server" img="/images/logos/sql-server.svg" :subtitle="$t('x_years', { years: 6 })" />
-            <Badge title="Sqlite" img="/images/logos/sqlite.svg" :subtitle="$t('x_years', { years: 5 })" />
-            <Badge title="Solr" :img="theme.global.name.value === 'light' ? '/images/logos/solr_light.png' : '/images/logos/solr_dark.png'" :subtitle="$t('x_years', { years: 1 })" />
-          </div>
-
-          <div class="badges-section">
-            <h4>Devops</h4>
-
-            <Badge title="Docker" img="/images/logos/docker.svg" :subtitle="$t('x_years', { years: 5 })" />
-            <Badge title="Gitlab CI" img="/images/logos/gitlab.svg" :subtitle="$t('x_years', { years: 8 })" />
-            <Badge title="Github Actions" :img="theme.global.name.value === 'light' ? '/images/logos/github-light.svg' : '/images/logos/github-dark.svg'" :subtitle="$t('x_years', { years: 1 })" />
-            <Badge title="Jenkins" img="/images/logos/jenkins.png" :subtitle="$t('x_years', { years: 4 })" />
-          </div>
-        </v-col>
-
-        <v-col cols="4">
-          <div class="badges-section">
-            <h4>CMS</h4>
-
-            <Badge title="Typo3" img="/images/logos/typo3.png" :subtitle="$t('x_years', { years: 4 })" />
-            <Badge title="Wordpress" :img="theme.global.name.value === 'light' ? '/images/logos/wordpress.png' : '/images/logos/wordpress_dark.png'" :subtitle="$t('x_years', { years: 6 })"/>
-          </div>
-
-          <div class="badges-section">
-            <h4>Other</h4>
-
-            <Badge title="Mercure (SSE)" img="/images/logos/mercure_icon.png" :subtitle="$t('x_years', { years: 3 })" />
-            <Badge title="Nextcloud" img="/images/logos/nextcloud.svg" :subtitle="$t('x_years', { years: 6 })" />
-            <Badge title="Linux" img="/images/logos/linux.png" :subtitle="$t('x_years', { years: 10 })" />
-          </div>
-
-          <div class="badges-section">
-            <h4>Management</h4>
-
-            <Badge title="Management" img="/images/team-management.png" :subtitle="$t('x_years', { years: 10 })" />
-            <Badge title="Continuous Improvement" img="/images/continuous-improvement.png" :subtitle="$t('x_years', { years: 9 })" />
-            <Badge title="SCRUM" img="/images/scrum.png" :subtitle="$t('x_years', { years: 8 })" />
-            <Badge title="Tutoring" img="/images/teacher.png" :subtitle="$t('x_years', { years: 6 })" />
-          </div>
-
-<!--          <div class="badges-section">-->
-<!--            <h4>Languages</h4>-->
-
-<!--            <Badge title="English" img="" :subtitle="$t('good')" />-->
-<!--            <Badge title="French" img="" :subtitle="$t('native')" />-->
-<!--            <Badge title="Spanish" img="" :subtitle="$t('basic')" />-->
-<!--          </div>-->
-        </v-col>
-      </v-row>
-    </v-container>
-  </div>
+  <div class="content">
+    <div class="badges">
+      <h3>{{ $t("Competences") }}</h3>
+
+      <v-container>
+        <v-row>
+          <v-col cols="4">
+            <div class="badges-section">
+              <h4>Languages</h4>
+
+              <Badge
+                title="Python"
+                img="/images/logos/python.svg"
+                :subtitle="$t('x_years', { years: 10 })"
+                details="J'ai travaillé sur de très nombreux projets avec Python, depuis la version 2.7 jusqu'à la version 3.12: scripts variés, extensions QGis, projets web, librairies, utilitaires ou applications buraeautiques."
+              />
+              <Badge title="PHP" img="/images/logos/php.svg" :subtitle="$t('x_years', { years: 4 })" />
+              <Badge title="Node.js" :img="theme.global.name.value === 'light' ? '/images/logos/nodejs_light.svg' : '/images/logos/nodejs_dark.svg'" :subtitle="$t('x_years', { years: 5 })" />
+              <Badge title="C#" img="/images/logos/csharp.png" :subtitle="$t('x_years', { years: 2 })" />
+            </div>
+
+            <div class="badges-section">
+              <h4>Frameworks</h4>
+
+              <Badge title="Symfony" img="/images/logos/symfony.svg" :subtitle="$t('x_years', { years: 4 })" />
+              <Badge title="Vue.js" img="/images/logos/vue.png" :subtitle="$t('x_years', { years: 3 })" />
+              <Badge title="Nuxt.js" img="/images/logos/nuxt.svg" :subtitle="$t('x_years', { years: 3 })" />
+              <Badge title="Django" :img="theme.global.name.value === 'light' ? '/images/logos/django-light.svg' : '/images/logos/django-dark.svg'" :subtitle="$t('x_years', { years: 3 })" />
+              <Badge title=".Net" img="/images/logos/dotnet.svg" :subtitle="$t('x_years', { years: 2 })" />
+              <Badge title="Jquery" :img="theme.global.name.value === 'light' ? '/images/logos/jquery.png' : '/images/logos/jquery_dark.png'" :subtitle="$t('x_years', { years: 4 })"/>
+            </div>
+          </v-col>
+
+          <v-col cols="4">
+            <div class="badges-section">
+              <h4>DBs and search-engines</h4>
+
+              <Badge title="Mysql" img="/images/logos/mysql.png" :subtitle="$t('x_years', { years: 6 })" />
+              <Badge title="MariaDb" :img="theme.global.name.value === 'light' ? '/images/logos/mariadb.svg': '/images/logos/mariadb_dark.svg'" :subtitle="$t('x_years', { years: 6 })" />
+              <Badge title="Postgresql" img="/images/logos/postgresql.svg" :subtitle="$t('x_years', { years: 5 })"/>
+              <Badge title="SQL-Server" img="/images/logos/sql-server.svg" :subtitle="$t('x_years', { years: 6 })" />
+              <Badge title="Sqlite" img="/images/logos/sqlite.svg" :subtitle="$t('x_years', { years: 5 })" />
+              <Badge title="Solr" :img="theme.global.name.value === 'light' ? '/images/logos/solr_light.png' : '/images/logos/solr_dark.png'" :subtitle="$t('x_years', { years: 1 })" />
+            </div>
+
+            <div class="badges-section">
+              <h4>Devops</h4>
+
+              <Badge title="Docker" img="/images/logos/docker.svg" :subtitle="$t('x_years', { years: 5 })" />
+              <Badge title="Gitlab CI" img="/images/logos/gitlab.svg" :subtitle="$t('x_years', { years: 8 })" />
+              <Badge title="Github Actions" :img="theme.global.name.value === 'light' ? '/images/logos/github-light.svg' : '/images/logos/github-dark.svg'" :subtitle="$t('x_years', { years: 1 })" />
+              <Badge title="Jenkins" img="/images/logos/jenkins.png" :subtitle="$t('x_years', { years: 4 })" />
+            </div>
+          </v-col>
+
+          <v-col cols="4">
+            <div class="badges-section">
+              <h4>CMS</h4>
+
+              <Badge title="Typo3" img="/images/logos/typo3.png" :subtitle="$t('x_years', { years: 4 })" />
+              <Badge title="Wordpress" :img="theme.global.name.value === 'light' ? '/images/logos/wordpress.png' : '/images/logos/wordpress_dark.png'" :subtitle="$t('x_years', { years: 6 })"/>
+            </div>
+
+            <div class="badges-section">
+              <h4>Other</h4>
+
+              <Badge title="Mercure (SSE)" img="/images/logos/mercure_icon.png" :subtitle="$t('x_years', { years: 3 })" />
+              <Badge title="Nextcloud" img="/images/logos/nextcloud.svg" :subtitle="$t('x_years', { years: 6 })" />
+              <Badge title="Linux" img="/images/logos/linux.png" :subtitle="$t('x_years', { years: 10 })" />
+            </div>
+
+            <div class="badges-section">
+              <h4>Management</h4>
+
+              <Badge title="Management" img="/images/team-management.png" :subtitle="$t('x_years', { years: 10 })" />
+              <Badge title="Continuous Improvement" img="/images/continuous-improvement.png" :subtitle="$t('x_years', { years: 9 })" />
+              <Badge title="SCRUM" img="/images/scrum.png" :subtitle="$t('x_years', { years: 8 })" />
+              <Badge title="Tutoring" img="/images/teacher.png" :subtitle="$t('x_years', { years: 6 })" />
+            </div>
+
+  <!--          <div class="badges-section">-->
+  <!--            <h4>Languages</h4>-->
+
+  <!--            <Badge title="English" img="" :subtitle="$t('good')" />-->
+  <!--            <Badge title="French" img="" :subtitle="$t('native')" />-->
+  <!--            <Badge title="Spanish" img="" :subtitle="$t('basic')" />-->
+  <!--          </div>-->
+          </v-col>
+        </v-row>
+      </v-container>
+    </div>
 
-  <div class="cursus">
-    <h3>{{ $t("Cursus") }}</h3>
+    <div class="cursus">
+      <h3>{{ $t("Cursus") }}</h3>
 
-    <Cursus />
+      <Cursus />
+    </div>
   </div>
 
-  <div class="cursus">
+  <div class="contact">
     <h3>{{ $t("Contact") }}</h3>
 
     <Contact />
@@ -169,6 +184,7 @@
 <script setup lang="ts">
 
 import { useTheme } from 'vuetify'
+import type { Ref } from '@vue/reactivity'
 
 const i18n = useI18n()
 
@@ -179,6 +195,8 @@ const CURRENT_YEAR = new Date().getFullYear();
 
 const XP_YEARS = CURRENT_YEAR - START_YEAR
 
+const showLongIntro: Ref<boolean> = ref(false)
+
 </script>
 
 <style scoped lang="scss">
@@ -194,34 +212,36 @@ const XP_YEARS = CURRENT_YEAR - START_YEAR
     margin: 18px 0 36px 0;
     border-bottom: none;
   }
+}
+
+.introduction {
+  text-align: justify;
+  padding: 36px 64px;
+  border: solid 1px rgba(var(--v-theme-on-neutral), 0.4);
+  border-radius: 16px;
+  background: rgba(var(--v-theme-primary-alt), 0.1);
+  margin-bottom: 36px;
+
+  div {
+    margin-bottom: 16px;
+  }
 
-  .introduction {
-    max-width: 800px;
-    text-align: justify;
-    padding: 36px 64px;
-    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: rgb(var(--v-theme-on-neutral));
-      font-weight: 700;
-      text-decoration: none;
-    }
-
-    .logos {
-      display: flex;
-      flex-direction: row;
-
-      .so-logo {
-        background-color: white;
-        border-radius: 6px;
-      }
-    }
+  .v-btn {
+    width: 100%;
+    margin: 8px auto;
+  }
+
+  :deep(a) {
+    color: rgb(var(--v-theme-on-neutral));
+    font-weight: 900;
+    text-decoration: none;
+  }
+
+  .logos {
+    display: flex;
+    flex-direction: row;
+    max-width: 700px;
+    margin: 0 auto;
   }
 }
 
@@ -229,7 +249,27 @@ h3 {
   margin: 12px 0 24px 0;
 }
 
+.content {
+  display: flex;
+  flex-direction: row;
+
+  .badges {
+    max-width: 65%;
+  }
+
+  .cursus {
+    max-width: 35%;
+    padding: 24px;
+  }
+}
+
 .badges {
+  padding: 24px;
+
+  >.v-container {
+    padding: 0 !important;
+  }
+
   .v-col {
     display: flex;
     flex-direction: column;