various style improvements

components/Badge.vue

@@ -8,7 +8,7 @@
       />
 
       <div class="details">
-        <v-card-title>{{ title }}</v-card-title>
+        <v-card-title :class="small ? 'small' : ''">{{ title }}</v-card-title>
         <v-card-subtitle v-if="subtitle">{{ subtitle }}</v-card-subtitle>
       </div>
 
@@ -43,6 +43,11 @@ defineProps({
     required: false,
     default: null
   },
+  small: {
+    type: Boolean,
+    required: false,
+    defualt: false
+  }
 })
 
 const expanded: Ref<boolean> = ref(false)
@@ -58,11 +63,12 @@ const onMoreClick = () => {
 
 <style scoped lang="scss">
   .v-card {
-    height: 54px;
+    height: 62px;
     width: 95%;
     padding: 10px;
 
     .frame {
+      height: 42px;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
@@ -80,14 +86,20 @@ const onMoreClick = () => {
       max-width: 24px;
       height: 24px;
       width: 24px;
-      margin: 4px;
+      margin: 4px auto;
     }
 
     .v-card-title {
       font-size: 15px;
       padding: 0 16px;
       font-weight: 300;
-      text-overflow: ellipsis;
+      line-height: 18px;
+      white-space: break-spaces;
+    }
+
+    .v-card-title.small {
+      font-size: 14px;
+      line-height: 16px;
     }
 
     .v-card-subtitle {

components/BadgeSection.vue

@@ -19,6 +19,7 @@
             :img="badge.logo"
             :subtitle="badge.subtitle"
             :details="badge.details"
+            :small="badge.small ?? false"
           />
         </div>
       </v-col>
@@ -206,10 +207,11 @@ const col3 = [
         details: ''
       },
       {
-        title: 'Linux',
-        logo: theme.global.name.value === 'light' ? '/images/logos/github-light.svg' : '/images/logos/github-dark.svg',
+        title: i18n.t('system_administration'),
+        logo: theme.global.name.value === 'light' ? '/images/command-line_light.png' : '/images/command-line_dark.png',
         subtitle: i18n.t('x_years', { years: 8 }),
-        details: ''
+        details: '',
+        small: true
       },
       {
         title: 'Git-Flow',
@@ -244,7 +246,8 @@ const col3 = [
         title: i18n.t('continuous_improvement'),
         logo: '/images/continuous-improvement.png',
         subtitle: i18n.t('x_years', { years: 9 }),
-        details: ''
+        details: '',
+        small: true
       },
       {
         title: 'SCRUM',

components/Cursus.vue

@@ -39,7 +39,7 @@
 <style scoped lang="scss">
   .v-table {
     max-width: 720px;
-    margin: 12px auto;
+    margin: 32px auto;
 
     td {
       padding: 4px 16px !important;

components/Topbar.vue

@@ -9,6 +9,7 @@
           href="https://github.com/olinox14"
           target="_blank"
           :aria-label="i18n.t('Find me on Github')"
+          class="logo"
       >
         <v-icon>fab fa-github</v-icon>
       </nuxt-link>
@@ -17,6 +18,7 @@
           href="https://stackoverflow.com/users/4279120/olinox14"
           target="_blank"
           :aria-label="i18n.t('Find me on Stackoverflow')"
+          class="logo"
       >
         <v-icon>fab fa-stack-overflow</v-icon>
       </nuxt-link>
@@ -25,6 +27,7 @@
           href="https://www.linkedin.com/in/olivier-massot-60b87b181"
           target="_blank"
           :aria-label="i18n.t('Find me on LinkedIn')"
+          class="logo"
       >
         <v-icon>fab fa-linkedin</v-icon>
       </nuxt-link>
@@ -70,6 +73,10 @@
       margin-left: 24px;
     }
 
+    .logo {
+      padding: 4px;
+    }
+
     a {
       color: rgb(var(--v-theme-on-neutral--clickable));
     }

lang/en.json

@@ -35,5 +35,6 @@
   "contact_message": "Message",
   "contact_submit": "Send",
   "contact_confirmation": "Your message has been sent, I will get back to you as soon as possible",
-  "continuous_improvement": "Continuous improvement"
+  "continuous_improvement": "Continuous improvement",
+  "system_administration": "System administration"
 }

lang/fr.json

@@ -35,5 +35,6 @@
   "contact_message": "Message",
   "contact_submit": "Envoyer",
   "contact_confirmation": "Votre message a bien été envoyé, je reviendrais vers vous dès que possible",
-  "continuous_improvement": "Amélioration continue"
+  "continuous_improvement": "Amélioration continue",
+  "system_administration": "Administration système"
 }

pages/index.vue

@@ -47,7 +47,9 @@
       {{ showLongIntro ? $t('show_less') : $t('show_more') }}
     </v-btn>
 
-    <h5 class="find-me-on">{{ $t('find_me_on')}} </h5>
+    <h5 class="find-me-on">
+      {{ $t('find_me_on')}}
+    </h5>
 
     <div class="logos mt-3">
       <BannerLogo
@@ -158,13 +160,15 @@ const showLongIntro: Ref<boolean> = ref(false)
   :deep(a) {
     font-weight: 900;
     text-decoration: none;
+    padding: 3px 1px;
   }
 
   .find-me-on {
     margin: 16px auto 0 auto;
     text-transform: uppercase;
     text-align: center;
-    font-size: 11px;
+    font-size: 12px;
+    font-weight: 400;
   }
 
   .logos {