setup font, complete i18n, improve badges

app.vue

@@ -32,7 +32,7 @@ useHead(() => ({
 }))
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 html {
   scroll-behavior: smooth;
 }
@@ -40,6 +40,7 @@ html {
 .v-application {
   background: rgb(var(--v-theme-neutral));
   color: rgb(var(--v-theme-on-neutral));
+  font-family: Inter, sans-serif;
 }
 
 .body {

components/Badge.vue

@@ -6,7 +6,7 @@
         :alt="title"
       />
 
-      <div>
+      <div class="details">
         <v-card-title>{{ title }}</v-card-title>
         <v-card-subtitle v-if="subtitle">{{ subtitle }}</v-card-subtitle>
         <v-card-text v-if="details && expanded">{{ details }}</v-card-text>
@@ -21,6 +21,7 @@
 <script setup lang="ts">
 
 import type { PropType } from '@vue/runtime-core'
+import type { Ref } from '@vue/reactivity'
 
 defineProps({
   title: {
@@ -45,6 +46,10 @@ defineProps({
 
 const expanded: Ref<boolean> = ref(false)
 
+const onHover = () => {
+
+}
+
 const onMoreClick = () => {
 
 }
@@ -52,7 +57,7 @@ const onMoreClick = () => {
 
 <style scoped lang="scss">
   .v-card {
-    height: 96px;
+    height: 54px;
     width: 196px;
     padding: 10px;
 
@@ -65,8 +70,24 @@ const onMoreClick = () => {
       max-height: 100%;
     }
 
+    .details {
+      flex: 1;
+    }
+
     .v-img {
-      height: 32px;
+      max-width: 24px;
+      height: 24px;
+      margin: 0 12px;
+    }
+
+    .v-card-title {
+      font-size: 16px;
+      padding: 0 16px;
+      font-weight: 300;
+    }
+
+    .v-card-subtitle {
+      font-size: 14px;
     }
   }
 
@@ -74,9 +95,9 @@ const onMoreClick = () => {
     display: none;
   }
 
-  .v-card:hover {
-    .v-card-actions {
-      display: block;
-    }
-  }
+  //.v-card:hover {
+  //  .v-card-actions {
+  //    display: block;
+  //  }
+  //}
 </style>

lang/en.json

@@ -1,13 +1,14 @@
 {
   "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.",
+  "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_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 :",
   "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",
+  "Find me on Codingame": "Find me on Codingame"
 }

lang/fr.json

@@ -1,12 +1,14 @@
 {
   "Fullstack developer": "Développeur Fullstack",
-  "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.",
+  "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_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 :",
   "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",
+  "Find me on Codingame": "Retrouvez moi sur Codingame"
 }

nuxt.config.ts

@@ -50,11 +50,11 @@ export default defineNuxtConfig({
       )
     },
     'nuxt-lodash',
-    //'@nuxt/devtools',
+    '@nuxt/devtools',
     '@nuxtjs/sitemap',
     '@nuxtjs/i18n',
+    '@nuxtjs/google-fonts',
   ],
-
   vite: {
     esbuild: {
       drop: process.env.DEBUG ? [] : ['console', 'debugger'],
@@ -73,7 +73,6 @@ export default defineNuxtConfig({
       },
     },
   },
-
   router: {
     options: {
       scrollBehaviorType: 'smooth',
@@ -107,6 +106,10 @@ export default defineNuxtConfig({
     defaultLocale: 'fr',
     detectBrowserLanguage: true,
   },
-
+  googleFonts: {
+    families: {
+      Inter: true,
+    },
+  },
   compatibilityDate: '2024-07-02',
 })

package.json

@@ -15,6 +15,7 @@
     "@fortawesome/free-brands-svg-icons": "^6.5.1",
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@nuxtjs/google-fonts": "^3.2.0",
     "@nuxtjs/i18n": "^8.3.1",
     "@nuxtjs/mdc": "^0.7.1",
     "@nuxtjs/sitemap": "^5.2.0",

pages/index.vue

@@ -10,7 +10,7 @@
     </h1>
 
     <h2>
-      {{ $t('twelve_years_experience') }}
+      {{ $t('x_years_experience', { years: XP_YEARS }) }}
     </h2>
 
     <div class="introduction">
@@ -62,58 +62,75 @@
   </div>
 
   <div class="badges">
-    <h2>Languages</h2>
-    <div class="badges-section">
-      <Badge
-        title="Python"
-        img="/images/logos/python.svg"
-        subtitle="12 years"
-        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="4 years" />
-      <Badge title="Node.js" img="/images/logos/node-light.svg" subtitle="5 years" />
-      <Badge title="C#" img="/images/logos/csharp.png" subtitle="2 years" />
-    </div>
-
-    <h2>Frameworks</h2>
-    <div class="badges-section">
-      <Badge title="Symfony" img="/images/logos/symfony.svg" subtitle="4 years" />
-      <Badge title="Vue.js" img="/images/logos/vue.png" subtitle="3 years" />
-      <Badge title="Nuxt.js" img="/images/logos/nuxt.svg" subtitle="3 years" />
-      <Badge title="Django" img="/images/logos/django-light.svg" subtitle="2 years" />
-      <Badge title=".Net" img="/images/logos/dotnet.svg" subtitle="2 years" />
-      <Badge title="Jquery" img="/images/logos/jquery.png" subtitle="4 years"/>
-    </div>
-
-    <h2>DBs and search-engines</h2>
-    <div class="badges-section">
-      <Badge title="Mysql" img="/images/logos/mysql.png" subtitle="6 years" />
-      <Badge title="MariaDb" img="/images/logos/mariadb.svg" subtitle="6 years" />
-      <Badge title="Postgresql" img="/images/logos/postgresql.png" subtitle="4 years"/>
-      <Badge title="SQL-Server" img="/images/logos/sql-server.svg" subtitle="6 years" />
-      <Badge title="Sqlite" img="/images/logos/sqlite.png" subtitle="5 years" />
-      <Badge title="Solr" img="/images/logos/solr.png" subtitle="1 year" />
-    </div>
-
-    <h2>Devops</h2>
-    <div class="badges-section">
-      <Badge title="Docker" img="/images/logos/docker.svg" subtitle="5 years" />
-      <Badge title="Gitlab CI" img="/images/logos/gitlab.svg" subtitle="8 years" />
-      <Badge title="Github Actions" img="/images/logos/github-light.svg" subtitle="1 year" />
-      <Badge title="Jenkins" img="/images/logos/jenkins.png" subtitle="4 years" />
-    </div>
 
-    <h2>CMS</h2>
-    <div class="badges-section">
-      <Badge title="Typo3 (development)" img="/images/logos/typo3.png" subtitle="4 year" />
-      <Badge title="Wordpress (administration)" img="/images/logos/wordpress.png" subtitle="6 years"/>
-    </div>
-
-    <h2>Other</h2>
-    <div class="badges-section">
-      <Badge title="Mercure (SSE)" img="/images/logos/mercure.svg" subtitle="3 years" />
-      <Badge title="Nextcloud" img="/images/logos/nextcloud.svg" subtitle="6 years" />
-    </div>
+    <v-container>
+      <v-row>
+        <v-col cols="4">
+          <div class="badges-section">
+            <h2>Languages</h2>
+
+            <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="/images/logos/node-light.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">
+            <h2>Frameworks</h2>
+
+            <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="/images/logos/django-light.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="/images/logos/jquery.png" :subtitle="$t('x_years', { years: 4 })"/>
+          </div>
+        </v-col>
+
+        <v-col cols="4">
+          <div class="badges-section">
+            <h2>DBs and search-engines</h2>
+
+            <Badge title="Mysql" img="/images/logos/mysql.png" :subtitle="$t('x_years', { years: 6 })" />
+            <Badge title="MariaDb" img="/images/logos/mariadb.svg" :subtitle="$t('x_years', { years: 6 })" />
+            <Badge title="Postgresql" img="/images/logos/postgresql.png" :subtitle="$t('x_years', { years: 4 })"/>
+            <Badge title="SQL-Server" img="/images/logos/sql-server.svg" :subtitle="$t('x_years', { years: 6 })" />
+            <Badge title="Sqlite" img="/images/logos/sqlite.png" :subtitle="$t('x_years', { years: 5 })" />
+            <Badge title="Solr" img="/images/logos/solr.png" :subtitle="$t('x_years', { years: 1 })" />
+          </div>
+
+          <div class="badges-section">
+            <h2>Devops</h2>
+
+            <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="/images/logos/github-light.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">
+            <h2>CMS</h2>
+
+            <Badge title="Typo3" img="/images/logos/typo3.png" :subtitle="$t('x_years', { years: 4 })" />
+            <Badge title="Wordpress" img="/images/logos/wordpress.png" :subtitle="$t('x_years', { years: 6 })"/>
+          </div>
+
+          <div class="badges-section">
+            <h2>Other</h2>
+
+            <Badge title="Mercure (SSE)" img="/images/logos/mercure.svg" :subtitle="$t('x_years', { years: 3 })" />
+            <Badge title="Nextcloud" img="/images/logos/nextcloud.svg" :subtitle="$t('x_years', { years: 6 })" />
+          </div>
+        </v-col>
+      </v-row>
+    </v-container>
   </div>
 </template>
 
@@ -121,6 +138,11 @@
 
 const i18n = useI18n()
 
+const START_YEAR = 2011
+const CURRENT_YEAR = new Date().getFullYear();
+
+const XP_YEARS = CURRENT_YEAR - START_YEAR
+
 </script>
 
 <style scoped lang="scss">
@@ -132,19 +154,15 @@ const i18n = useI18n()
   text-align: center;
   padding: 20px;
 
-  @media (min-width: 1920px) {
-    height: 640px;
-  }
-
   h2 {
-    margin: 18px 0;
+    margin: 18px 0 36px 0;
     border-bottom: none;
   }
 
   .introduction {
     max-width: 800px;
     text-align: justify;
-    padding: 36px;
+    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);
@@ -177,7 +195,7 @@ const i18n = useI18n()
 
 .badges-section {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   flex-wrap: wrap;
   justify-content: center;
 

yarn.lock

@@ -1690,6 +1690,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@nuxtjs/google-fonts@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "@nuxtjs/google-fonts@npm:3.2.0"
+  dependencies:
+    "@nuxt/kit": "npm:^3.10.3"
+    google-fonts-helper: "npm:^3.5.0"
+    pathe: "npm:^1.1.2"
+  checksum: 10c0/bdd4dc825452f9b640da150fb1334e1dd78988b15f565e2bdcb402b5f0565ef9edb0091f0d41f69b32775c621491607efdd80e1911557bf77718f763031d8eb2
+  languageName: node
+  linkType: hard
+
 "@nuxtjs/i18n@npm:^8.3.1":
   version: 8.3.3
   resolution: "@nuxtjs/i18n@npm:8.3.3"
@@ -4380,6 +4391,7 @@ __metadata:
     "@nuxtjs/eslint-config-typescript": "npm:^12.1.0"
     "@nuxtjs/eslint-module": "npm:^4.1.0"
     "@nuxtjs/fontawesome": "npm:^1.1.2"
+    "@nuxtjs/google-fonts": "npm:^3.2.0"
     "@nuxtjs/i18n": "npm:^8.3.1"
     "@nuxtjs/mdc": "npm:^0.7.1"
     "@nuxtjs/sitemap": "npm:^5.2.0"
@@ -4521,7 +4533,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deepmerge@npm:^4.2.2":
+"deepmerge@npm:^4.2.2, deepmerge@npm:^4.3.1":
   version: 4.3.1
   resolution: "deepmerge@npm:4.3.1"
   checksum: 10c0/e53481aaf1aa2c4082b5342be6b6d8ad9dfe387bc92ce197a66dea08bd4265904a087e75e464f14d1347cf2ac8afe1e4c16b266e0561cc5df29382d3c5f80044
@@ -6469,6 +6481,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"google-fonts-helper@npm:^3.5.0":
+  version: 3.6.0
+  resolution: "google-fonts-helper@npm:3.6.0"
+  dependencies:
+    deepmerge: "npm:^4.3.1"
+    hookable: "npm:^5.5.3"
+    ofetch: "npm:^1.3.4"
+    ufo: "npm:^1.5.3"
+  checksum: 10c0/0c87c0b03546af53317bed18a99271fca472fbbc81230226116d11b159a86810d6b595ad28b6d8933c0d91f679c60b4e93bf57ff57e8200d8e533c82ae5a9a4d
+  languageName: node
+  linkType: hard
+
 "gopd@npm:^1.0.1":
   version: 1.0.1
   resolution: "gopd@npm:1.0.1"