Migrate to Nuxt 3 and Vuetify 3

pages/bio.vue

@@ -11,29 +11,19 @@
       </span>
     </v-col>
     <v-col v-for="set, ind in sets" :key="ind" cols="12">
-      <v-tooltip v-for="(value, index) in set" :key="index" bottom>
-        <template #activator="{ on, attrs }">
+      <v-tooltip v-for="(value, index) in set" :key="index" location="bottom" :text="value.title">
+        <template #activator="{ props }">
           <v-btn
-            :small="value.level == 1"
-            :large="value.level == 2"
-            :x-large="value.level >= 3"
-            icon
+            variant="text"
+            :size="getButtonSize(value.level)"
+            :icon="value.icon"
+            color="primary"
             class="mx-1"
             :href="`https://${value.url}`"
             target="_blank"
-            v-bind="attrs"
-            v-on="on"
-          >
-            <v-icon 
-              color="primary"
-              :large="value.level == 2"
-              :x-large="value.level >= 3"
-            >
-              {{ value.icon }}
-            </v-icon>
-          </v-btn>
+            v-bind="props"
+          />
         </template>
-        <span>{{ value.title }}</span>
       </v-tooltip>
     </v-col>
   </v-row>
@@ -88,6 +78,15 @@ export default {
     skills () {
       return [...this.languages, ...this.frameworks, ...this.tech, ...this.os]
     }
+  },
+  methods: {
+    getButtonSize (level) {
+      switch (level) {
+        case 1: return 'small'
+        case 2: return 'large'
+        default: return 'x-large'
+      }
+    }
   }
 }
 </script>

pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-row justify="center" align="center">
+  <v-row justify="center">
     <v-col cols="12">
       <span class="text-h3">Hi, my name is Manuel.</span>
     </v-col>
@@ -7,8 +7,7 @@
       <span class="text-h6">I'm a Software Developer based in Vienna, Austria.<br/>I make all kind of applications.</span>
     </v-col>
     <v-col cols="12">
-      <v-btn depressed outlined color="primary" href="mailto:rakantor.dev@gmail.com">
-        <v-icon left>mdi-email-outline</v-icon>
+      <v-btn depressed outlined color="primary" prepend-icon="mdi-email-outline" href="mailto:rakantor.dev@gmail.com">
         Contact me
       </v-btn>
     </v-col>

pages/portfolio.vue

@@ -6,8 +6,8 @@
     <v-col v-for="(project, index) of projects" :key="index" cols="12" md="6">
       <v-card color="backgroundSecondary">
         <v-img
-          height="250"
           src="https://cdn.vuetifyjs.com/images/cards/cooking.png"
+          cover
         ></v-img>
         <v-card-title>
           <span v-if="project.projectUrl">
@@ -23,20 +23,16 @@
         <v-card-actions>
           <v-btn
             v-if="project.repoUrl"
-            icon
+            icon="mdi-github"
             :href="`https://${project.repoUrl}`"
             target="_blank"
-          >
-            <v-icon>mdi-github</v-icon>
-          </v-btn>
+          />
           <v-btn
             v-if="project.projectUrl"
-            icon
+            icon="mdi-open-in-new"
             :href="`https://${project.projectUrl}`"
             target="_blank"
-          >
-            <v-icon>mdi-open-in-new</v-icon>
-          </v-btn>
+          />
         </v-card-actions>
       </v-card>
     </v-col>
@@ -71,6 +67,7 @@ export default {
         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',