ADD: Contact page

Add contact page with socials

app/components/Contact.vue

@@ -24,10 +24,65 @@
         </li>
       </ul>
     </article>
+
+    <article class="z-2 card flex-col gap-sm margin-top">
+      <h3>Wenn ich mal ausgebucht bin</h3>
+      <p>Dann buch doch einfach einen der tollen Menschen aus meinem Netzwerk!</p>
+      <ul class="social-media">
+        <li v-for="({icon, name, ...rest}) in socials" :key="rest.href">
+          <a v-bind="rest" target="_blank">
+            <Icon :name="icon" :alt="rest['aria-label']" size="1.5em" mode="svg" />
+            <span>{{ name }}</span>
+          </a>
+        </li>
+      </ul>
+    </article>
   </section>
 </template>
 
 <script setup lang="ts">
-
 import { socials } from '../utils/socials'
+
+const shuffle = <T>(unshuffled : T[]) => unshuffled
+  .map(value => ({ value, sort: Math.random() }))
+  .sort((a, b) => a.sort - b.sort)
+  .map(({ value }) => value)
+
+const network = shuffle([
+  {
+    name: 'Robert Janus',
+    img: 'robert',
+    tags: ['Digitalberatung', 'Webentwicklung', 'eCommerce'],
+    flavour: 'Website, SEO und Conversions. Auf einen Klick.',
+    link: 'https://robertjanus.de/webertoire',
+  },
+  // {
+  //   name: 'Matthias Lehmann',
+  //   img: 'matthias',
+  //   tags: ['Onlineportale für Patienten', 'Kunden', 'Mitarbeiter'],
+  //   flavour: 'Software die macht, was DU willst!',
+  //   link: 'https://mind-deploy.de',
+  // },
+  {
+    name: 'Maximilian Schluer',
+    img: 'max',
+    tags: ['iOS Development', 'Software-QA'],
+    flavour: 'Kann dein iOS-Team unterstützen oder dein Software-Qualitätsproblem lösen – egal welches.',
+    link: 'https://max-schluer.de',
+  },
+  {
+    name: 'Judith Böhlert',
+    img: 'judith',
+    tags: ['Full-stack', 'Frontend'],
+    flavour: 'MVPs und Prototypen - schnell, schick und ohne Drama.',
+    link: 'https://judithboehlert.com',
+  },
+  {
+    name: 'Kevin Damiani',
+    img: 'kevin',
+    tags: ['Webentwicklung', 'Frontend'],
+    flavour: 'Erfahrener Frontend-Entwickler mit Fokus auf Performance, Barrierefreiheit und moderne Technologien.',
+    link: 'https://kevin-damiani.de',
+  },
+])
 </script>