From 4726749456c8c137c2f3331f1954fa266f96313a Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Fri, 6 Jun 2025 07:24:07 +0200
Subject: [PATCH] FIX: breaking tech list

Or rather non-breaking tech list
---
 app/components/Button.vue         | 28 +++++++++++++---------------
 app/components/Project.vue        |  2 +-
 app/components/Section/Skills.vue |  2 +-
 app/components/Technology.vue     |  4 ++--
 4 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/app/components/Button.vue b/app/components/Button.vue
index c8ce8b4..0cd8559 100755
--- a/app/components/Button.vue
+++ b/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')
-  return type
+  if (href) return resolveComponent('NuxtLink')
+  return 'button'
 })
 
-const actualProps = () => {
-  if (type === 'NuxtLink') {
-    return {
-      to: href,
-      target: isExternal ? '_blank' : undefined,
-      external: isExternal,
-    }
+const actualProps = computed(() => {
+  if (!href) return
+
+  return {
+    to: href,
+    target: isExternal.value ? '_blank' : undefined,
+    external: isExternal.value,
   }
-}
+})
 </script>
diff --git a/app/components/Project.vue b/app/components/Project.vue
index cc44a5d..9427db6 100644
--- a/app/components/Project.vue
+++ b/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>
diff --git a/app/components/Section/Skills.vue b/app/components/Section/Skills.vue
index 867e764..53d8554 100755
--- a/app/components/Section/Skills.vue
+++ b/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">
diff --git a/app/components/Technology.vue b/app/components/Technology.vue
index c398cd4..b0cde0f 100755
--- a/app/components/Technology.vue
+++ b/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>