Update page

2025-12-17 19:36:32 +01:00 · 2023-04-20 22:15:48 +02:00
parent a3d86dda60
commit 3b269ae45f
4 changed files with 308 additions and 136 deletions
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-app dark class="v-app-bg">
+  <v-app class="v-app-bg">
    <v-navigation-drawer
      v-model="drawer"
      :mini-variant="miniVariant"
@@ -31,14 +31,14 @@
            outlined
            color="primary"
            prepend-icon="mdi-email-outline"
-            :href="`mailto:${myName}<${myEmail}>`"
+            :href="`mailto:<${$myEmail}>`"
          >
            Contact
          </v-btn>
        </div>
      </template>
    </v-navigation-drawer>
-    <v-app-bar fixed flat app color="transparent">
+    <v-app-bar app color="background" class="px-md-10 py-md-4">
      <template v-slot:prepend>
        <v-avatar
          size="48"
@@ -49,15 +49,18 @@
          <img src="~/assets/avatar_transparent.png" width="55" />
        </v-avatar>
      </template>
-      <v-app-bar-title class="text-subtitle-1" v-text="myName" />
+      <!-- v-app-bar-title class="text-subtitle-1" v-text="$myName" /-->
      <v-spacer />
-      <v-app-bar-nav-icon v-if="smAndDown" @click.stop="drawer = !drawer" />
-      <div v-else>
-        <v-btn plain active-class="link-active" to="/">Home</v-btn>
-        <v-btn plain active-class="link-active" to="/bio">About</v-btn>
-        <v-btn plain active-class="link-active" to="/portfolio">Work</v-btn>
-        <v-btn plain active-class="link-active" :href="`mailto:${myName}<${myEmail}>`">Contact</v-btn>
-      </div>
+      <v-app-bar-nav-icon
+        v-if="smAndDown"
+        @click.stop="drawer = !drawer"
+      />
+      <v-btn-toggle v-else :model-value="0" mandatory variant="plain" selected-class="link-active">
+        <v-btn :ripple="false" to="/">Home</v-btn>
+        <v-btn :ripple="false" to="/bio">About</v-btn>
+        <v-btn :ripple="false" to="/portfolio">Work</v-btn>
+        <v-btn :ripple="false" :href="`mailto:<${$myEmail}>`">Contact</v-btn>
+      </v-btn-toggle>
    </v-app-bar>
    <v-main>
      <v-container class="my-16">
@@ -67,9 +70,8 @@
    <v-footer app absolute color="transparent">
      <v-row justify="center" no-gutters>
        <v-col cols="12" class="text-center">
-          <v-divider></v-divider>
          <span class="text-caption">
-            &copy; {{ new Date().getFullYear() }} | {{ myName }}
+            &copy; {{ new Date().getFullYear() }} {{ $myName }}
          </span>
        </v-col>
      </v-row>
@@ -90,8 +92,7 @@ export default {
    drawer: false,
    miniVariant: false,
    selectedItem: 0,
-    myName: 'Manuel',
-    myEmail: 'rakantor.dev@gmail.com',
+    test: 0,
    items: [
      {
        icon: 'mdi-home',
@@ -113,21 +114,24 @@ export default {
 }
 </script>

-<style scoped>
+<style scoped lang="scss">
 .v-app-bg {
  background: rgb(var(--v-theme-background))
 }
 .link-active {
-  color: var(--v-primary-base);
+  color: rgb(var(--v-theme-primary)) !important;
 }
-.v-btn--plain:deep(.v-btn__content) {
-  color: inherit;
+.v-btn--variant-plain {
+  color: rgb(var(--v-theme-on-background));
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.v-btn--plain:hover {
-  color: var(--v-primary-base);
-}
-.v-btn--plain:focus {
-  color: var(--v-primary-base);
+  opacity: 0.87;
+
+  &:hover {
+    color: rgb(var(--v-theme-primary));
+  }
+
+  &:focus {
+    color: rgb(var(--v-theme-primary));
+  }
 }
 </style>
--- a/pages/bio.vue
+++ b/pages/bio.vue
@@ -1,32 +1,61 @@
 <template>
  <v-row>
    <v-col cols="12">
-      <span class="text-h4">About me</span>
+      <span class="text-h4">My Journey as a Developer</span>
    </v-col>
    <v-col cols="12">
-      <span>
-        Hello there! I'm Manuel, a software dev based in Vienna, Austria. I C.
-        A year later, I continued to learn Java. I HTML and CSS
-        full-stack web development in 2018.
-      </span>
+      <v-sheet color="transparent" :max-width="600">
+        <p>
+          My interest in programming was sparked in 2007 when I began tinkering with SQL
+          to setup a private server for my favorite
+          <a href="https://en.wikipedia.org/wiki/Massively_multiplayer_online_role-playing_game" target="_blank">MMORPG</a>
+          (success!)
+        </p>
+        <p>
+          Eager to learn more, I attended a
+          <a href="https://en.wikipedia.org/wiki/H%C3%B6here_Technische_Lehranstalt" target="_blank">HTL</a>
+          specializing in IT in 2009, where I learned C, Java, HTML and CSS.
+        </p>
+        <p>
+          Some years later, I pursued a degree in <a href="https://en.wikipedia.org/wiki/Business_informatics">BI</a>
+          with a specialization in Web and App development.
+        </p>
+        <br/>
+        <p>
+          Here's some of the tech that I've used and worked with before:
+        </p>
+      </v-sheet>
    </v-col>
    <v-col v-for="set, ind in sets" :key="ind" cols="12">
-      <v-tooltip v-for="(value, index) in set" :key="index" location="bottom" :text="value.title">
+      <v-card variant="outlined">
+        <v-card-item>
+          <v-card-title>{{ set.title }}</v-card-title>
+        </v-card-item>
+        <v-card-text class="text-center">
+          <v-row>
+            <v-col v-for="(v, i) in set.data" :key="i" cols="12">
+              <v-tooltip v-for="(value, index) in v" :key="index" location="bottom" :text="value.title">
                <template #activator="{ props }">
                  <v-btn
                    variant="text"
-            :size="getButtonSize(value.level)"
                    :icon="value.icon"
+                    :size="getButtonSize(value.level)"
                    color="primary"
                    class="mx-1"
                    :href="`https://${value.url}`"
                    target="_blank"
                    v-bind="props"
-          />
+                  >
+                    <v-icon :icon="value.icon" :size="getButtonSize(value.level) - 10"></v-icon>
+                  </v-btn>
                </template>
              </v-tooltip>
            </v-col>
          </v-row>
+        </v-card-text>
+      </v-card>
+    </v-col>
+  </v-row>
 </template>

 <script>
@@ -38,42 +67,63 @@ export default {
    languages: [
      { title: 'Java', icon: 'mdi-language-java', url: 'java.com', level: 3 },
      { title: 'Android', icon: 'mdi-android', url: 'android.com', level: 3 },
-      { title: 'C', icon: 'mdi-language-cpp', url: 'isocpp.org', level: 2 },
+      { title: 'C/C++', icon: 'mdi-language-cpp', url: 'isocpp.org', level: 2 },
      { title: 'Python', icon: 'mdi-language-python', url: 'python.org', level: 1 },
      { title: 'JavaScript (ES6+)', icon: 'mdi-language-javascript', url: 'javascript.com', level: 3 },
+      { title: 'TypeScript', icon: 'mdi-language-typescript', url: 'typescriptlang.org/', level: 1 },
      { title: 'Vue.js', icon: 'mdi-vuejs', url: 'vuejs.org', level: 3 },
-      { title: 'Nuxt.js', icon: 'mdi-nuxt', url: 'nuxtjs.org', level: 3 },
-      { title: 'Lua', icon: 'mdi-language-lua', url: 'lua.org', level: 2 },
+      { title: 'Nuxt.js', icon: 'mdi-nuxt', url: 'nuxt.com', level: 3 },
      { title: 'HTML', icon: 'mdi-language-html5', url: 'html.spec.whatwg.org/multipage', level: 2 },
      { title: 'CSS', icon: 'mdi-language-css3', url: 'w3.org/Style/CSS', level: 2 },
      { title: 'PHP', icon: 'mdi-language-php', url: 'php.net', level: 2 },
-      { title: 'SQL', icon: 'mdi-database', url: 'iso.org/standard/63555.html', level: 2 }
+      { title: 'SQL', icon: 'mdi-database', url: 'iso.org/standard/63555.html', level: 2 },
+      { title: 'Lua', icon: 'mdi-language-lua', url: 'lua.org', level: 2 }
    ],
    frameworks: [
-      { title: 'Vuetify', icon: 'mdi-vuetify', url: 'vuetifyjs.com', level: 3 },
-      { title: 'BootstrapVue', icon: 'mdi-bootstrap', url: 'bootstrap-vue.org', level: 2 }
+      { title: 'Vuetify.js', icon: 'mdi-vuetify', url: 'vuetifyjs.com', level: 3 },
+      { title: 'BootstrapVue', icon: 'mdi-bootstrap', url: 'bootstrap-vue.org', level: 1 },
+      { title: 'libGDX', icon: 'mdi-alpha-l-box-outline', url: 'libgdx.com', level: 1 }
    ],
    tech: [
      { title: 'Amazon Web Services', icon: 'mdi-aws', url: 'aws.amazon.com', level: 3 },
      { title: 'Google Firebase', icon: 'mdi-firebase', url: 'firebase.google.com', level: 3 },
      { title: 'Microsoft Azure', icon: 'mdi-microsoft-azure', url: 'azure.microsoft.com', level: 1 },
-      { title: 'Heroku', icon: 'mdi-alpha-h-box-outline', url: 'heroku.com', level: 1 },
+      { title: 'Heroku', icon: 'brands:heroku', url: 'heroku.com', level: 1 },
      { title: 'WordPress', icon: 'mdi-wordpress', url: 'wordpress.com', level: 1 },
      { title: 'Unity', icon: 'mdi-unity', url: 'unity.com', level: 1 },
      { title: 'Unreal Engine', icon: 'mdi-unreal', url: 'unrealengine.com', level: 1 }
    ],
    os: [
-      { title: 'Microsoft Windows', icon: 'mdi-microsoft-windows', url: 'microsoft.com/windows', level: 1 },
-      { title: 'Linux Mint', icon: 'mdi-linux-mint', url: 'linuxmint.com', level: 1 },
+      { title: 'Microsoft Windows', icon: 'mdi-microsoft-windows', url: 'microsoft.com/windows', level: 3 },
+      { title: 'Apple macOS', icon: 'brands:apple', url: 'apple.com/macos', level: 3 },
+      { title: 'Linux Mint', icon: 'mdi-linux-mint', url: 'linuxmint.com', level: 3 },
+      { title: 'Fedora Workstation', icon: 'mdi-fedora', url: 'getfedora.org', level: 3 },
+      { title: 'Arch Linux', icon: 'mdi-arch', url: 'archlinux.org', level: 1 },
      { title: 'Ubuntu', icon: 'mdi-ubuntu', url: 'ubuntu.com', level: 1 },
-      { title: 'Fedora Workstation', icon: 'mdi-fedora', url: 'getfedora.org', level: 1 },
-      { title: 'macOS', icon: 'mdi-apple-finder', url: 'apple.com/macos', level: 1 },
+      { title: 'Apple iOS', icon: 'mdi-apple-ios', url: 'apple.com/ios', level: 1 },
+      { title: 'Android', icon: 'mdi-android', url: 'android.com', level: 1 },
    ]
  }),
  computed: {
    sets () {
-      const set = _groupBy(this.skills, e => e.level)
-      return Object.keys(set).sort().reverse().map(e => set[e])
+      const languages = _groupBy([...this.languages, ...this.frameworks], e => e.level)
+      // const frameworks = _groupBy(this.frameworks, e => e.level)
+      const tech = _groupBy(this.tech, e => e.level)
+      const os = _groupBy(this.os, e => e.level)
+      return [
+        {
+          title: "Languages & Frameworks",
+          data: Object.keys(languages).sort().reverse().map(e => languages[e])
+        },
+        {
+          title: "Tools & Platforms",
+          data: Object.keys(tech).sort().reverse().map(e => tech[e])
+        },
+        {
+          title: "Operating Systems",
+          data: Object.keys(os).sort().reverse().map(e => os[e])
+        }
+      ]
    },
    skills () {
      return [...this.languages, ...this.frameworks, ...this.tech, ...this.os]
@@ -82,9 +132,9 @@ export default {
  methods: {
    getButtonSize (level) {
      switch (level) {
-        case 1: return 'small'
-        case 2: return 'large'
-        default: return 'x-large'
+        case 1: return 48
+        case 2: return 64
+        default: return 96
      }
    }
  }
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,13 +1,14 @@
 <template>
  <v-row justify="center">
    <v-col cols="12">
-      <span class="text-h3">Hi, my name is Manuel.</span>
+      <span class="text-h3">{{ $t('greeting') }}</span>
    </v-col>
-    <v-col cols="12">
-      <span class="text-h6">
+    <v-col cols="12" class="my-6">
+      <p class="text-h6" style="max-width: 600px;">
        I'm a Software Developer based in Vienna, Austria.<br/>
-        I make all kind of applications.
-      </span>
+        I develop various types of applications.
+        Explore my portfolio to view a showcase of my projects ✌️
+      </p>
    </v-col>
    <v-col cols="12">
      <v-btn
@@ -15,7 +16,7 @@
        outlined
        color="primary"
        prepend-icon="mdi-email-outline"
-        href="mailto:rakantor.dev@gmail.com"
+        :href="`mailto:<${$myEmail}>`"
      >
        Contact me
      </v-btn>
--- a/pages/portfolio.vue
+++ b/pages/portfolio.vue
@@ -3,37 +3,58 @@
    <v-col cols="12">
      <span class="text-h5 font-weight-medium">Some of my projects</span>
    </v-col>
-    <v-col v-for="(project, index) of projects" :key="index" cols="12" md="6">
+    <v-col v-for="(project, index) of projects" :key="index" cols="12" lg="4" md="6">
      <v-card color="backgroundSecondary">
-        <v-img
-          src="https://cdn.vuetifyjs.com/images/cards/cooking.png"
-          cover
-        ></v-img>
-        <v-card-title>
-          <span v-if="project.projectUrl">
-            <a :href="`https://${project.projectUrl}`" target="_blank" class="link">{{ project.title }}</a>
-          </span>
-          <span v-else>{{ project.title }}</span>
-        </v-card-title>
-        <v-card-subtitle>{{ project.subtitle }}</v-card-subtitle>
-        <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sapien justo, vehicula at rutrum sed, maximus nec ante. Fusce maximus nulla vel elit scelerisque, eget eleifend neque tincidunt. Cras malesuada ultrices massa ac tempor. Donec faucibus orci eu arcu condimentum, quis congue neque sollicitudin. Etiam vel consequat lectus. Cras vel metus id odio ultrices tincidunt. Sed vitae neque non eros molestie convallis eget non ligula. Nam ullamcorper dolor risus, in dapibus sapien pellentesque in. Praesent dapibus justo eu egestas sagittis. Nam vel ipsum mauris. In hendrerit odio a magna viverra, vehicula vehicula urna tempor. Vestibulum vel vestibulum lorem. Integer luctus nulla libero, egestas efficitur ex sagittis sed. In fermentum cursus eleifend.</v-card-text>
-        <v-card-text class="text-caption">
-          {{ project.description }}
-        </v-card-text>
-        <v-card-actions>
+        <v-carousel
+          show-arrows="hover"
+          hide-delimiter-background
+          height="auto"
+        >
+          <v-carousel-item v-for="image of project.images" :key="image"
+            :src="`${cdn}${image}`"
+            :aspect-ratio="1/1"
+          ></v-carousel-item>
+        </v-carousel>
+        <v-card-item>
+          <v-card-title class="d-flex">
+            <span>{{ project.title }}</span>
+            <v-spacer></v-spacer>
            <v-btn
              v-if="project.repoUrl"
+              variant="text"
              icon="mdi-github"
+              density="comfortable"
+              color="on-backgroundSecondary"
              :href="`https://${project.repoUrl}`"
              target="_blank"
+              class="link"
            />
            <v-btn
              v-if="project.projectUrl"
+              variant="text"
              icon="mdi-open-in-new"
+              density="comfortable"
+              color="on-backgroundSecondary"
              :href="`https://${project.projectUrl}`"
              target="_blank"
+              class="link"
            />
-        </v-card-actions>
+          </v-card-title>
+          <v-card-subtitle>{{ project.subtitle }}</v-card-subtitle>
+        </v-card-item>
+        <v-card-text>{{ $t(project.description) }}</v-card-text>
+        <v-card-text class="d-flex flex-row flex-wrap justify-start">
+          <a v-for="t of project.tech" :key="tech[t].title"
+            :href="`https://${tech[t].projectUrl}`"
+            target="_blank"
+          >
+            <img
+              :src="`https://badgen.net/badge/icon/${tech[t].title}?icon=${tech[t].iconUrl}`"
+              :height="20"
+              class="ma-1"
+            />
+          </a>
+        </v-card-text>
      </v-card>
    </v-col>
  </v-row>
@@ -43,56 +64,152 @@
 export default {
  name: 'PortfolioComponent',
  data: () => ({
+    cdn: 'https://d29l6egdxvgg9c.cloudfront.net/',
    projects: [
    {
-        title: 'Torii SRS 2.0',
+        title: 'Torii SRS (v2 Beta)',
        subtitle: 'Progressive Web App',
-        description: 'Vue.js Vuetify.js Chart.js MySQL PHP AWS Azure Watson Heroku',
-        projectUrl: 'beta.torii-srs.com'
+        description: 'toriiSRSv2',
+        tech: ['vue2', 'vuetify2', 'mysql', 'php', 'aws', 'azure', 'watson', 'heroku'],
+        projectUrl: 'beta.torii-srs.com',
+        images: [
+          'torii-v2-01.jpg', 'torii-v2-03.jpg', 'torii-v2-04.jpg',
+          'torii-v2-05.jpg', 'torii-v2-06.jpg', 'torii-v2-07.jpg',
+          'torii-v2-08.jpg', 'torii-v2-09.jpg', 'torii-v2-10.jpg'
+        ]
      },
      {
-        title: 'Torii SRS 1.0',
-        subtitle: 'Cross-platform desktop and mobile app',
-        description: 'Java libGDX MySQL PHP AWS WordPress',
-        projectUrl: 'torii-srs.com'
+        title: 'Torii SRS (v1)',
+        subtitle: 'Cross-platform app',
+        description: 'toriiSRSv1',
+        tech: ['java', 'libgdx', 'mysql', 'php', 'aws', 'wordpress'],
+        projectUrl: 'torii-srs.com',
+        images: [
+          'torii-v1-1.jpg', 'torii-v1-2.png', 'torii-v1-3.png',
+          'torii-v1-4.png', 'torii-v1-5.png', 'torii-v1-6.png'
+        ]
+      },
+      {
+        title: 'IU Quiz App',
+        subtitle: 'Web App',
+        description: 'iuQuizApp',
+        tech: ['nuxt2', 'vuetify2', 'firebase'],
+        repoUrl: 'github.com/Rakantor/iu-quiz-app',
+        projectUrl: 'iu-quiz-app.web.app',
+        images: ['torii-v1-1.jpg']
+      },
+      {
+        title: 'Menacing Blue',
+        subtitle: 'Cross-platform app',
+        description: 'pmb',
+        tech: ['java', 'libgdx'],
+        images: ['pmb-6.png', 'pmb-1.png', 'pmb-2.png', 'pmb-3.png', 'pmb-4.png', 'pmb-5.png']
+      },
+      {
+        title: 'Personal Website',
+        subtitle: 'The thing you\'re looking at right now',
+        description: '',
+        tech: ['nuxt3', 'vuetify3', 'ghpages'],
+        repoUrl: 'github.com/Rakantor/personal-portfolio',
+        projectUrl: 'mave.dev',
+        images: ['torii-v1-1.jpg']
      },
      {
        title: 'IU Gamer App',
        subtitle: 'Android app',
-        description: 'Android (Java) Firebase',
+        description: '',
+        tech: ['android', 'firebase'],
        repoUrl: 'github.com/Rakantor/iubh-gamer-app',
-      },
-      {
-        title: 'IU Quiz App',
-        subtitle: 'Nuxt.js Web App',
-        description: 'Android (Java) Firebase',
-        repoUrl: 'github.com/Rakantor/iu-quiz-app',
-        projectUrl: 'iu-quiz-app.web.app'
-      },
-      {
-        title: 'Menacing Blue',
-        subtitle: '2000s Pokémon inspired Cross-platform 2D game',
-        description: 'Java libGDX'
-      },
-      {
-        title: 'Personal Portfolio Website',
-        subtitle: 'The thing you\'re looking at right now',
-        description: 'Nuxt.js Vuetify.js GitHub-Pages',
-        repoUrl: 'github.com/Rakantor/personal-portfolio',
-        projectUrl: 'mave.dev'
+        images: []
+      }
+    ],
+    tech: {
+      android: {
+        title: 'Android',
+        iconUrl: 'https://cdn.simpleicons.org/android&label&color=3DDC84',
+        projectUrl: 'android.com'
+      },
+      aws: {
+        title: 'AWS',
+        iconUrl: 'https://cdn.simpleicons.org/amazonaws&label&color=232F3E',
+        projectUrl: 'nuxt.com'
+      },
+      azure: {
+        title: 'Azure',
+        iconUrl: 'https://cdn.simpleicons.org/microsoftazure&label&color=0078D4',
+        projectUrl: 'nuxt.com'
+      },
+      firebase: {
+        title: 'Firebase',
+        iconUrl: 'https://cdn.simpleicons.org/firebase&label&color=FFCA28',
+        projectUrl: 'nuxt.com'
+      },
+      ghpages: {
+        title: 'GH Pages',
+        iconUrl: 'https://cdn.simpleicons.org/github&label&color=222222',
+        projectUrl: 'nuxt.com'
+      },
+      heroku: {
+        title: 'Heroku',
+        iconUrl: 'https://cdn.simpleicons.org/heroku&label&color=430098',
+        projectUrl: 'nuxt.com'
+      },
+      java: {
+        title: 'Java',
+        iconUrl: 'https://cdn.simpleicons.org/coffeescript&label&color=FF7800',
+        projectUrl: 'nuxt.com'
+      },
+      libgdx: {
+        title: 'libGDX',
+        iconUrl: 'https://cdn.simpleicons.org/youtubegaming&label&color=990000',
+        projectUrl: 'nuxtjs.org'
+      },
+      mysql: {
+        title: 'MySQL',
+        iconUrl: 'https://cdn.simpleicons.org/mysql&label&color=4479A1',
+        projectUrl: 'nuxtjs.org'
+      },
+      nuxt2: {
+        title: 'Nuxt 2',
+        iconUrl: 'https://cdn.simpleicons.org/nuxtdotjs&label&color=00DC82',
+        projectUrl: 'nuxtjs.org'
+      },
+      nuxt3: {
+        title: 'Nuxt 3',
+        iconUrl: 'https://cdn.simpleicons.org/nuxtdotjs&label&color=00DC82',
+        projectUrl: 'nuxt.com'
+      },
+      php: {
+        title: 'PHP',
+        iconUrl: 'https://cdn.simpleicons.org/php&label&color=777BB4',
+        projectUrl: 'nuxt.com'
+      },
+      vue2: {
+        title: 'Vue 2',
+        iconUrl: 'https://cdn.simpleicons.org/vuedotjs&label&color=4FC08D',
+        projectUrl: 'nuxt.com'
+      },
+      vuetify2: {
+        title: 'Vuetify 2',
+        iconUrl: 'https://cdn.simpleicons.org/vuetify&label&color=1867C0',
+        projectUrl: 'nuxt.com'
+      },
+      vuetify3: {
+        title: 'Vuetify 3',
+        iconUrl: 'https://cdn.simpleicons.org/vuetify&label&color=1867C0',
+        projectUrl: 'nuxt.com'
+      },
+      watson: {
+        title: 'Watson',
+        iconUrl: 'https://cdn.simpleicons.org/ibmwatson&label&color=BE95FF',
+        projectUrl: 'nuxt.com'
+      },
+      wordpress: {
+        title: 'WordPress',
+        iconUrl: 'https://cdn.simpleicons.org/wordpress&label&color=21759B',
+        projectUrl: 'nuxt.com'
+      }
    }
-    ]
  })
 }
 </script>
-
-<style scoped>
-.link {
-  color: inherit;
-  text-decoration: none;
-  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.link:hover {
-  color: var(--v-primary-base);
-}
-</style>