FIX: breaking tech list

Or rather non-breaking tech list

app/components/Button.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="actualComponent" v-bind="actualProps()" class="Button" :class="[design]">
+  <component :is="actualComponent" v-bind="actualProps" class="Button" :class="[design]">
     <slot />
   </component>
 </template>
@@ -7,31 +7,29 @@
 <script setup lang="ts">
 
 type Props = {
-  type ?: 'NuxtLink' | 'button'
   href ?: string
   design ?: 'default' | 'dark' | 'white'
 }
 
 const {
-  type = 'NuxtLink',
+  href,
-  href = '#',
   design = 'default',
 } = defineProps<Props>()
 
-const isExternal = href.startsWith('http')
+const isExternal = computed(() => href?.startsWith('http'))
 
 const actualComponent = computed(() => {
-  if (type === 'NuxtLink') return resolveComponent('NuxtLink')
+  if (href) return resolveComponent('NuxtLink')
-  return type
+  return 'button'
 })
 
-const actualProps = () => {
+const actualProps = computed(() => {
-  if (type === 'NuxtLink') {
+  if (!href) return
+
   return {
     to: href,
-      target: isExternal ? '_blank' : undefined,
+    target: isExternal.value ? '_blank' : undefined,
-      external: isExternal,
+    external: isExternal.value,
-    }
-  }
   }
+})
 </script>

app/components/Project.vue

@@ -13,7 +13,7 @@
           </li>
         </ul>
         <p v-for="d in desc">{{ d }}</p>
-        <a v-if="link" :href="link" target="_blank">Zur Seite</a>
+        <NuxtLink v-if="link" :to="link" target="_blank" external>Zur Seite</NuxtLink>
       </main>
     </div>
   </article>

app/components/Section/Skills.vue

@@ -7,7 +7,7 @@
         <p v-for="(t, i) in skill.text" :class="[i === skill.text.length - 1 && 'bold']">{{t}}</p>
       </Card>
     </div>
-    <Card title="Technologien" titleTag="h3" class="margin-top">
+    <Card title="Technologien" titleTag="h3" class="margin-top tech-list">
       <p>Neben den klassischen Webentwicklungsstandards JavaScript, HTML und CSS biete ich außerdem folgende Technologien.</p>
       <ul class="gap-default margin-top-small">
         <li v-for="tech in technologies">

app/components/Technology.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="Technology flex-col tip-container" :class="[size]">
-    <a v-if="link" :href="link" target="_blank" rel="noopener noreferrer">
+    <NuxtLink v-if="link" :to="link" external target="_blank" rel="noopener noreferrer">
       <img loading="lazy" :src="img" :alt="altText()" :height="getPixelForSize()" :width="getWidth()" />
-    </a>
+    </NuxtLink>
     <img v-else loading="lazy" :height="getPixelForSize()" :width="getWidth()" :src="img" :alt="altText()"/>
     <span class="tip">{{name}}</span>
   </div>