FIX: better buttons

Better button stuff, better image naming and scaling

components/Person.vue

@@ -1,6 +1,13 @@
 <template>
   <article class="Person flex-col">
-    <img loading="lazy" width="150" height="150" :src="img" :alt="`Bild von ${name}`" />
+    <img
+        loading="lazy"
+        width="150"
+        height="150"
+        :srcset="[getImage('1x', true), getImage('2x', true), getImage('3x', true)].join(', ')"
+        :src="getImage('1x', false)"
+        :alt="`Bild von ${name}`"
+    />
     <h3>{{name}}</h3>
     <p>
       <span v-for="tag in tags">{{tag}}</span>
@@ -19,5 +26,7 @@ type Props = {
   link: string
 }
 
-defineProps<Props>()
+const { img } = defineProps<Props>()
+
+const getImage = (size : '1x' | '2x' | '3x', set : boolean) => `/img/network/${img}@${size}.webp${set ? ` ${size}` : ''}`
 </script>