cv2/components/BadgeSection.vue

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

          <Badge
            v-for="badge in item.badges"
            :title="badge.title"
            :img="badge.logo.value"
            :subtitle="badge.subtitle"
            :details="badge.details"
            :small="badge.small ?? false"
          />
        </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()

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

const col2 = [
  {
    title: 'Data',
    badges: [
      {
        title: 'Mysql',
        logo: ref('/images/logos/mysql.png'),
        subtitle: i18n.t('x_years', { years: 7 }),
        details: ''
      },
      {
        title: 'MariaDb',
        logo: computed(() => theme.global.name.value === 'light' ? '/images/logos/mariadb.svg': '/images/logos/mariadb_dark.svg'),
        subtitle: i18n.t('x_years', { years: 7 }),
        details: ''
      },
      {
        title: 'Postgresql',
        logo: ref('/images/logos/postgresql.svg'),
        subtitle: i18n.t('x_years', { years: 5 }),
        details: ''
      },
      {
        title: 'SQL-Server',
        logo: ref('/images/logos/sql-server.svg'),
        subtitle: i18n.t('x_years', { years: 6 }),
        details: ''
      },
      {
        title: 'Sqlite',
        logo: ref('/images/logos/sqlite.svg'),
        subtitle: i18n.t('x_years', { years: 5 }),
        details: ''
      },
      {
        title: 'Solr',
        logo: computed(() => theme.global.name.value === 'light' ? '/images/logos/solr_light.png' : '/images/logos/solr_dark.png'),
        subtitle: i18n.t('x_years', { years: 2 }),
        details: ''
      },
    ]
  },
  {
    title: 'DevOps',
    badges: [
      {
        'title': 'Docker',
        logo: ref('/images/logos/docker.svg'),
        subtitle: i18n.t('x_years', { years: 5 }),
        details: ''
      },
      {
        'title': 'Gitlab CI',
        logo: ref('/images/logos/gitlab.svg'),
        subtitle: i18n.t('x_years', { years: 9 }),
        details: ''
      },
      {
        'title': 'Github Actions',
        logo: computed(() => 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: ref('/images/logos/jenkins.png'),
        subtitle: i18n.t('x_years', { years: 3 }),
        details: ''
      }
    ]
  }
]

const col3 = [
  {
    title: 'Other',
    badges: [
      {
        title: 'Mercure (SSE)',
        logo: ref('/images/logos/docker.svg'),
        subtitle: i18n.t('x_years', { years: 4 }),
        details: ''
      },
      {
        title: 'Nextcloud',
        logo: ref('/images/logos/gitlab.svg'),
        subtitle: i18n.t('x_years', { years: 9 }),
        details: ''
      },
      {
        title: i18n.t('system_administration'),
        logo: computed(() => theme.global.name.value === 'light' ? '/images/command-line_light.png' : '/images/command-line_dark.png'),
        subtitle: i18n.t('x_years', { years: 9 }),
        details: '',
        small: true
      },
      {
        title: 'Git-Flow',
        logo: computed(() => theme.global.name.value === 'light' ? '/images/logos/git-flow-light.svg' : '/images/logos/git-flow-dark.svg'),
        subtitle: i18n.t('x_years', { years: 4 }),
        details: ''
      },
      {
        title: 'Typo3 (dev)',
        logo: ref('/images/logos/typo3.png'),
        subtitle: i18n.t('x_years', { years: 5 }),
        details: ''
      },
    ]
  },
  {
    title: 'Management',
    badges: [
      {
        title: 'Management',
        logo: ref('/images/team-management.png'),
        subtitle: i18n.t('x_years', { years: 11 }),
        details: ''
      },
      {
        title: 'Product Owner',
        logo: ref('/images/product-management.png'),
        subtitle: i18n.t('x_years', { years: 11 }),
        details: ''
      },
      {
        title: i18n.t('continuous_improvement'),
        logo: ref('/images/continuous-improvement.png'),
        subtitle: i18n.t('x_years', { years: 10 }),
        details: '',
        small: true
      },
      {
        title: 'SCRUM',
        logo: ref('/images/scrum.png'),
        subtitle: i18n.t('x_years', { years: 9 }),
        details: ''
      },
      {
        title: 'Tutoring',
        logo: ref('/images/teacher.png'),
        subtitle: i18n.t('x_years', { years: 7 }),
        details: ''
      }
    ]
  }
]

const cols = [
  col1,
  col2,
  col3
]

</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: 24px 0;
  padding: 12px 6px;
  border: solid 1px rgba(var(--v-theme-on-background), 0.2);
  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>