FIX: seo

components/Footer/Footer.vue

@@ -3,22 +3,41 @@
 <template>
   <footer class="Footer flex-col default-gap">
       <ul class="sitemap default-gap">
-        <li><a :href="`${mainPage ? '/' : ''}#intro`">Über mich</a></li>
-        <li><a :href="`${mainPage ? '/' : ''}#skills`">Meine Expertise</a></li>
-        <li><a :href="`${mainPage ? '/' : ''}#customers`">Kunden & Projekte</a></li>
-        <li><a :href="`${mainPage ? '/' : ''}#services`">Services</a></li>
-        <li><a :href="`${mainPage ? '/' : ''}#network`">Mein Netzwerk</a></li>
-        <li><a href="/imp">Impressum</a></li>
+        <li v-for="{ label, ...rest} in nav" :key="label">
+          <NuxtLink v-bind="rest">{{label}}</NuxtLink>
+        </li>
       </ul>
     <p>Natürlich ohne Cookies und Tracker.</p>
     <p>&copy; 2024 by <a href="https://webfussel.de">webfussel</a></p>
   </footer>
 </template>
 
-<script setup lang="ts">
-type Props = {
-  mainPage ?: boolean
-}
-
-defineProps<Props>()
+<script lang="ts" setup>
+const nav = [
+  {
+    to: `/#intro`,
+    label: 'Über mich',
+    'aria-label': 'Link dieser Seite: Über mich'
+  }, {
+    to: `/#skills`,
+    label: 'Meine Expertise',
+    'aria-label': 'Link dieser Seite: Meine Expertis'
+  }, {
+    to: `/#customers`,
+    label: 'Kunden',
+    'aria-label': 'Link dieser Seite: Kunden'
+  }, {
+    to: `/#services`,
+    label: 'Services',
+    'aria-label': 'Link dieser Seite: Services'
+  }, {
+    to: `/#network`,
+    label: 'Mein Netzwerk',
+    'aria-label': 'Link dieser Seite: Mein Netzwerk'
+  }, {
+    to: '/imp',
+    label: 'Impressum',
+    'aria-label': 'Link dieser Seite: Impressum'
+  }
+]
 </script>

components/Header/Header.vue

@@ -30,7 +30,7 @@
       <nav>
         <ul class="main-nav">
           <li v-for="({label, ...rest}) in nav" :key="label" @click="isBurgerOpen = false">
-            <a v-bind="rest">{{ label }}</a>
+            <NuxtLink v-bind="rest">{{ label }}</NuxtLink>
           </li>
         </ul>
         <ul class="socials">
@@ -49,12 +49,6 @@
 import LinkedInIcon from 'iconoir/icons/regular/linkedin.svg'
 import MastodonIcon from 'iconoir/icons/regular/mastodon.svg'
 
-type Props = {
-  mainPage ?: boolean
-}
-
-const { mainPage } = defineProps<Props>()
-
 let observer: IntersectionObserver
 const header = ref<HTMLElement | null>(null)
 const headerWrapper = ref<HTMLElement | null>(null)
@@ -67,15 +61,15 @@ const burgerLabel = computed(() => isBurgerOpen.value ? burgerCloseLabel : burge
 
 const nav = [
   {
-    href: `${mainPage ? '/' : ''}#intro`,
+    to: `/#intro`,
     label: 'Über mich',
-    'aria-label': 'Link dieser Seite: About'
+    'aria-label': 'Link dieser Seite: Über mich'
   }, {
-    href: `${mainPage ? '/' : ''}#customers`,
+    to: `/#customers`,
     label: 'Kunden',
     'aria-label': 'Link dieser Seite: Kunden'
   }, {
-    href: `${mainPage ? '/' : ''}#services`,
+    to: `/#services`,
     label: 'Services',
     'aria-label': 'Link dieser Seite: Services'
   }

components/Person/Person.css

@@ -7,7 +7,7 @@
     gap: 1rem;
 
     & img {
-        border: 4px solid var(--color-orange);
+        outline: 4px solid var(--color-orange);
         border-radius: 50%;
         width: 150px;
         height: 150px;

components/Services/Services.css

@@ -43,6 +43,7 @@
     .network-list {
         width: 100%;
         overflow-x: auto;
+        padding-top: 4px;
 
         & .scroll-container {
             display: flex;