ADD: Responsiveness

components/Person/Person.css

@@ -0,0 +1,31 @@
+.Person {
+    flex: 1 1;
+    flex-basis: 300px;
+    align-items: center;
+    gap: 1rem;
+
+    & img {
+        border: 4px solid var(--color-orange);
+        border-radius: 50%;
+        width: 150px;
+    }
+
+    & span {
+        font-family: 'Roboto Condensed', sans-serif;
+        font-weight: bold;
+
+        &:not(:last-child):after {
+            content: " | "
+        }
+    }
+
+    & p {
+        text-align: center;
+        white-space: pre-wrap;
+
+        &:first-of-type {
+            margin-top: -1rem;
+        }
+    }
+}
+

components/Person/Person.vue

@@ -0,0 +1,25 @@
+<style scoped src="./Person.css"/>
+
+<template>
+  <article class="Person flex-col">
+    <img :src="img" :alt="`Bild von ${name}`" />
+    <h3>{{name}}</h3>
+    <p>
+      <span v-for="tag in tags">{{tag}}</span>
+    </p>
+    <p>{{flavour}}</p>
+    <Button :href="link" target="_blank" rel="noreferrer noopener" label="Zur Homepage" />
+  </article>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  img: string
+  name: string
+  tags: string[]
+  flavour: string
+  link: string
+}
+
+defineProps<Props>()
+</script>