FIX: mpa, nuxt4 future, improvements in intro and services

Added mpa support, nuxt4 future compatibility, improvements in intro and services

app/components/Footer.vue

@@ -0,0 +1,84 @@
+<template>
+  <footer class="Footer flex-col default-gap">
+    <ul class="sitemap default-gap">
+      <li v-for="{ label, ...rest} in nav" :key="label">
+        <NuxtLink v-bind="rest">{{label}}</NuxtLink>
+      </li>
+    </ul>
+    <ul class="sitemap default-gap">
+      <li v-for="({icon, ...rest}) in socials" :key="rest.href">
+        <a v-bind="rest" target="_blank">
+          <Icon :name="icon" :alt="rest['aria-label']" size="1.5em" mode="svg" />
+        </a>
+      </li>
+    </ul>
+    <ul class="sitemap default-gap">
+      <li class="tip-container">
+        <Icon name="material-symbols:cookie-off-outline" size="1.5rem" mode="svg" />
+        <span class="tip">Ohne Cookies</span>
+      </li>
+      <li class="tip-container">
+        <Icon name="material-symbols:fingerprint-off" size="1.5rem" mode="svg" />
+        <span class="tip">Ohne Tracker</span>
+      </li>
+    </ul>
+    <p>&copy; 2024 by <a href="https://webfussel.de">webfussel</a></p>
+  </footer>
+</template>
+
+<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 Expertise'
+  }, {
+    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'
+  }
+]
+
+
+const socials = [
+  {
+    href: 'https://www.linkedin.com/in/webfussel/',
+    icon: 'ri:linkedin-box-line',
+    'aria-label': 'Externer Link: LinkedIn Profil'
+  },
+  {
+    href: 'https://mastodontech.de/@webfussel',
+    icon: 'ri:mastodon-line',
+    rel: 'me',
+    'aria-label': 'Externer Link: Mastodon Profil'
+  },
+  {
+    href: 'https://bsky.app/profile/webfussel.de',
+    icon: 'ri:bluesky-line',
+    'aria-label': 'Externer Link: Bluesky Profil'
+  },
+  {
+    href: 'https://ko-fi.com/webfussel',
+    icon: 'wf:kofi',
+    'aria-label': 'Externer Link: KoFi Profil'
+  },
+]
+</script>