cv2/components/BadgeSection.vue

<!--suppress TypeScriptValidateTypes -->
<template>
  <v-container>
    <v-row>
      <v-col cols="4">
        <div
          v-for="item in col1"
          :key="item.title"
          class="badges-section"
        >
          <h4>{{ item.title }}</h4>

          <Badge
            v-for="badge in item.badges"
            :title="badge.title"
            :img="badge.logo"
            :subtitle="badge.subtitle"
            :details="badge.details"
          />
        </div>
      </v-col>

      <v-col cols="4">
        <div
          v-for="item in col2"
          :key="item.title"
          class="badges-section"
        >
          <h4>{{ item.title }}</h4>

          <Badge
            v-for="badge in item.badges"
            :title="badge.title"
            :img="badge.logo"
            :subtitle="badge.subtitle"
            :details="badge.details"
          />
        </div>
      </v-col>

      <v-col cols="4">
        <div
          v-for="item in col3"
          :key="item.title"
          class="badges-section"
        >
          <h4>{{ item.title }}</h4>

          <Badge
            v-for="badge in item.badges"
            :title="badge.title"
            :img="badge.logo"
            :subtitle="badge.subtitle"
            :details="badge.details"
          />
        </div>
      </v-col>
    </v-row>
  </v-container>

  <!--          <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>-->
</template>

<script setup lang="ts">
import { useTheme } from 'vuetify'

const theme = useTheme()
const i18n = useI18n()

// 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.

const col1 = [
  {
    title: 'Languages',
    badges: [
      {
        title: 'Python',
        logo: '/images/logos/python.svg',
        subtitle: i18n.t('x_years', { years: 4 }),
        details: ''
      },
      {
        title: 'PHP',
        logo: '/images/logos/php.svg',
        subtitle: i18n.t('x_years', { years: 4 }),
        details: ''
      },
      {
        title:
          'Node.js',
        logo: theme.global.name.value === 'light' ? '/images/logos/nodejs_light.svg' : '/images/logos/nodejs_dark.svg',
        subtitle: i18n.t('x_years', { years: 5 }),
        details: ''
      },
      {
        title: 'C#',
        logo: '/images/logos/csharp.png',
        subtitle: i18n.t('x_years', { years: 2 }),
        details: ''
      },
    ]
  },
  {
    title: 'Frameworks',
    badges: [
      {
        'title': 'Symfony',
        logo: '/images/logos/symfony.svg',
        subtitle: i18n.t('x_years', { years: 10 }),
        details: ''
      },
      {
        'title': 'Vue.js',
        logo: '/images/logos/vue.png',
        subtitle: i18n.t('x_years', { years: 3 }),
        details: ''
      },
      {
        'title': 'Nuxt.js',
        logo: '/images/logos/nuxt.svg',
        subtitle: i18n.t('x_years', { years: 3 }),
        details: ''
      },
      {
        'title': '.Net',
        logo: '/images/logos/dotnet.svg',
        subtitle: i18n.t('x_years', { years: 2 }),
        details: ''
      },
      {
        'title': 'Jquery',
        logo: theme.global.name.value === 'light' ? '/images/logos/jquery.png' : '/images/logos/jquery_dark.png',
        subtitle: i18n.t('x_years', { years: 3 }),
        details: ''
      },
    ]
  }
]

const col2 = [
  {
    title: 'DBs and search-engines',
    badges: [
      {
        title: 'Mysql',
        logo: '/images/logos/mysql.png',
        subtitle: i18n.t('x_years', { years: 6 }),
        details: ''
      },
      {
        title: 'MariaDb',
        logo: theme.global.name.value === 'light' ? '/images/logos/mariadb.svg': '/images/logos/mariadb_dark.svg',
        subtitle: i18n.t('x_years', { years: 6 }),
        details: ''
      },
      {
        title: 'Postgresql',
        logo: '/images/logos/postgresql.svg',
        subtitle: i18n.t('x_years', { years: 5 }),
        details: ''
      },
      {
        title: 'SQL-Server',
        logo: '/images/logos/sql-server.svg',
        subtitle: i18n.t('x_years', { years: 6 }),
        details: ''
      },
      {
        title: 'Sqlite',
        logo: '/images/logos/sqlite.svg',
        subtitle: i18n.t('x_years', { years: 5 }),
        details: ''
      },
      {
        title: 'Solr',
        logo: theme.global.name.value === 'light' ? '/images/logos/solr_light.png' : '/images/logos/solr_dark.png',
        subtitle: i18n.t('x_years', { years: 1 }),
        details: ''
      },
    ]
  },
  {
    title: 'DevOps',
    badges: [
      {
        'title': 'Docker',
        logo: '/images/logos/docker.svg',
        subtitle: i18n.t('x_years', { years: 5 }),
        details: ''
      },
      {
        'title': 'Gitlab CI',
        logo: '/images/logos/gitlab.svg',
        subtitle: i18n.t('x_years', { years: 8 }),
        details: ''
      },
      {
        'title': 'Github Actions',
        logo: theme.global.name.value === 'light' ? '/images/logos/github-light.svg' : '/images/logos/github-dark.svg',
        subtitle: i18n.t('x_years', { years: 3 }),
        details: ''
      },
      {
        'title': 'Jenkins',
        logo: '/images/logos/jenkins.png',
        subtitle: i18n.t('x_years', { years: 3 }),
        details: ''
      }
    ]
  }
]

const col3 = [
  {
    title: 'CMS',
    badges: [
      {
        title: 'Typo3',
        logo: '/images/logos/typo3.png',
        subtitle: i18n.t('x_years', { years: 4 }),
        details: ''
      },
      {
        title: 'Wordpress',
        logo: theme.global.name.value === 'light' ? '/images/logos/wordpress.png' : '/images/logos/wordpress_dark.png',
        subtitle: i18n.t('x_years', { years: 6 }),
        details: ''
      }
    ]
  },
  {
    title: 'Other',
    badges: [
      {
        title: 'Mercure (SSE)',
        logo: '/images/logos/docker.svg',
        subtitle: i18n.t('x_years', { years: 5 }),
        details: ''
      },
      {
        title: 'Nextcloud',
        logo: '/images/logos/gitlab.svg',
        subtitle: i18n.t('x_years', { years: 8 }),
        details: ''
      },
      {
        title: 'Linux',
        logo: theme.global.name.value === 'light' ? '/images/logos/github-light.svg' : '/images/logos/github-dark.svg',
        subtitle: i18n.t('x_years', { years: 3 }),
        details: ''
      }
    ]
  },
  {
    title: 'Management',
    badges: [
      {
        title: 'Management',
        logo: '/images/team-management.png',
        subtitle: i18n.t('x_years', { years: 10 }),
        details: ''
      },
      {
        title: 'Continuous Improvement',
        logo: '/images/continuous-improvement.png',
        subtitle: i18n.t('x_years', { years: 9 }),
        details: ''
      },
      {
        title: 'SCRUM',
        logo: '/images/scrum.png',
        subtitle: i18n.t('x_years', { years: 8 }),
        details: ''
      },
      {
        title: 'Tutoring',
        logo: '/images/teacher.png',
        subtitle: i18n.t('x_years', { years: 6 }),
        details: ''
      }
    ]
  }
]
</script>

<style scoped lang="scss">
>.v-container {
  padding: 0 !important;
}

.v-col {
  display: flex;
  flex-direction: column;
}

.badges-section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 12px 0;
  padding: 12px 6px;
  border: solid 1px rgba(var(--v-theme-primary-alt), 0.3);
  border-radius: 16px;
  flex: 1;

  h4 {
    font-size: 16px;
    margin: -24px 24px 6px 24px;
    padding: 0 12px;
    background: rgb(var(--v-theme-background));;
  }

  .v-card {
    margin: 6px auto;
  }
}
</style>