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

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

app/components/Technology.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="Technology flex-col tip-container" :class="[size]">
+    <a v-if="link" :href="link" target="_blank" rel="noopener noreferrer">
+      <img loading="lazy" :src="img" :alt="altText()" :height="getPixelForSize()" :width="getWidth()" />
+    </a>
+    <img v-else loading="lazy" :height="getPixelForSize()" :width="getWidth()" :src="img" :alt="altText()"/>
+    <span class="tip">{{name}}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  img: string
+  name: string
+  link?: string
+  width?: number
+  size?: 's' | 'm' | 'l'
+}
+
+const {
+  name,
+  size = 'm',
+  width = 50,
+} = defineProps<Props>()
+
+const sizes = {
+  s: 15,
+  m: 30,
+  l: 50,
+}
+
+const altText = () => `Icon für ${name}`
+const getPixelForSize = () => sizes[size]
+const getWidth = () => width / 50 * getPixelForSize()
+</script>