various fixes

.yarnrc.yml

@@ -1 +1 @@
-nodeLinker: node-modules
+nodeLinker: node-modules

components/Badge.vue

@@ -1,16 +1,27 @@
 <template>
-  <v-card>
-    <v-img
-      :src="img"
-      :alt="title"
-    />
+  <v-card @hover="onHover">
+    <div class="frame">
+      <v-img
+        :src="img"
+        :alt="title"
+      />
 
-    <v-card-title>{{ title }}</v-card-title>
+      <div>
+        <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>
+        <v-card-actions v-if="details && !expanded">
+          <v-btn icon="fas fa-plus" variant="flat" @click="onMoreClick" />
+        </v-card-actions>
+      </div>
+    </div>
   </v-card>
 </template>
 
 <script setup lang="ts">
 
+import type { PropType } from '@vue/runtime-core'
+
 defineProps({
   title: {
     type: String,
@@ -19,20 +30,53 @@ defineProps({
   img: {
     type: String,
     required: true
-  }
+  },
+  subtitle: {
+    type: String as PropType<string | null>,
+    required: false,
+    default: null
+  },
+  details: {
+    type: String as PropType<string | null>,
+    required: false,
+    default: null
+  },
 })
 
+const expanded: Ref<boolean> = ref(false)
+
+const onMoreClick = () => {
 
+}
 </script>
 
 <style scoped lang="scss">
   .v-card {
-    height: 148px;
-    width: 128px;
-    padding: 18px;
+    height: 96px;
+    width: 196px;
+    padding: 10px;
+
+    .frame {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: nowrap;
+      max-height: 100%;
+    }
 
     .v-img {
-      height: 48px;
+      height: 32px;
+    }
+  }
+
+  .v-card-actions {
+    display: none;
+  }
+
+  .v-card:hover {
+    .v-card-actions {
+      display: block;
     }
   }
 </style>

components/Banner/Logo.vue

@@ -0,0 +1,48 @@
+<template>
+  <nuxt-link
+    :href="href"
+    target="_blank"
+    class="link"
+  >
+    <v-img
+      :src="img"
+      :height="26"
+      :alt="alt"
+    />
+  </nuxt-link>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from '@vue/runtime-core'
+
+defineProps({
+  href: String,
+  img: String,
+  alt: {
+    type: String as PropType<string, null>,
+    required: false,
+    default: ''
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.link {
+  width: 20%;
+  margin: 0 auto;
+  max-width: 140px;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  :deep(.v-img) {
+    width: 100%;
+  }
+}
+
+:deep(.v-img__img) {
+  display: block !important;
+}
+</style>

nuxt.config.ts

@@ -50,7 +50,7 @@ export default defineNuxtConfig({
       )
     },
     'nuxt-lodash',
-    '@nuxt/devtools',
+    //'@nuxt/devtools',
     '@nuxtjs/sitemap',
     '@nuxtjs/i18n',
   ],

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "path-php-doc",
+  "name": "cv2",
   "private": true,
   "type": "module",
   "scripts": {
@@ -47,5 +47,6 @@
     "jsdom": "^24.0.0",
     "prettier": "3.2.5",
     "typescript": "^5.3.3"
-  }
+  },
+  "packageManager": "yarn@4.3.1"
 }

pages/index.vue

@@ -32,44 +32,31 @@
         {{ $t('intro_part_5') }}
       </div>
 
-      <div class="logos">
-        <nuxt-link
+      <div class="logos mt-3">
+        <BannerLogo
           href="https://github.com/olinox14"
-          target="_blank"
-        >
-          <v-img
-            src="/images/logos/github_large_dark.png"
-          />
-        </nuxt-link>
-
-        <nuxt-link
+          img="/images/logos/github_large_dark.png"
+          :alt="i18n.t('Find me on Github')"
+        />
+
+        <BannerLogo
           href="https://stackoverflow.com/users/4279120/olinox14"
-          target="_blank"
-        >
-          <v-img
-            src="/images/logos/stackoverflow.svg"
-            class="so-logo"
-          />
-        </nuxt-link>
-
-        <nuxt-link
+          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"
-          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>
+          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>
@@ -77,61 +64,67 @@
   <div class="badges">
     <h2>Languages</h2>
     <div class="badges-section">
-      <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" />
+      <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" />
-      <Badge title="Vue.js" img="/images/logos/vue.png" />
-      <Badge title="Nuxt.js" img="/images/logos/nuxt.svg" />
-      <Badge title="Django" img="/images/logos/django-light.svg" />
-      <Badge title=".Net" img="/images/logos/dotnet.svg" />
-      <Badge title="Jquery" img="/images/logos/jquery.png" />
+      <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" />
-      <Badge title="MariaDb" img="/images/logos/mariadb.svg" />
-      <Badge title="Postgresql" img="/images/logos/postgresql.png" />
-      <Badge title="SQL-Server" img="/images/logos/sql-server.svg" />
-      <Badge title="Sqlite" img="/images/logos/sqlite.png" />
-      <Badge title="ElasticSearch" img="/images/logos/elasticsearch.svg" />
-      <Badge title="Solr" img="/images/logos/solr.png" />
+      <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" />
-      <Badge title="Gitlab CI" img="/images/logos/gitlab.svg" />
-      <Badge title="Github Actions" img="/images/logos/github-light.svg" />
-      <Badge title="Jenkins" img="/images/logos/jenkins.png" />
+      <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" img="/images/logos/typo3.png" />
-      <Badge title="Wordpress" img="/images/logos/wordpress.png" />
+      <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" />
-      <Badge title="Nextcloud" img="/images/logos/nextcloud.svg" />
+      <Badge title="Mercure (SSE)" img="/images/logos/mercure.svg" subtitle="3 years" />
+      <Badge title="Nextcloud" img="/images/logos/nextcloud.svg" subtitle="6 years" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+
+const i18n = useI18n()
+
 </script>
 
 <style scoped lang="scss">
 .banner {
-  height: 640px;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -139,6 +132,10 @@
   text-align: center;
   padding: 20px;
 
+  @media (min-width: 1920px) {
+    height: 640px;
+  }
+
   h2 {
     margin: 18px 0;
     border-bottom: none;
@@ -157,7 +154,7 @@
     }
 
     :deep(a) {
-      color: var(--v-theme-on-neutral);
+      color: rgb(var(--v-theme-on-neutral));
       font-weight: 700;
       text-decoration: none;
     }
@@ -166,15 +163,8 @@
       display: flex;
       flex-direction: row;
 
-      :deep(a) {
-        width: 20%;
-        margin: 0 auto;
-        max-width: 140px;
-        padding: 16px;
-      }
-
       .so-logo {
-        background: white;
+        background-color: white;
         border-radius: 6px;
       }
     }