From 63bad706491bf8c5081ed2ac83001c694607026d Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Wed, 28 May 2025 08:19:09 +0200
Subject: [PATCH] ADD: Contact page

Add contact page with socials
---
 app/components/Contact.vue | 57 +++++++++++++++++++++++++++++++++++++-
 app/pages/contact.vue      | 54 ------------------------------------
 2 files changed, 56 insertions(+), 55 deletions(-)

diff --git a/app/components/Contact.vue b/app/components/Contact.vue
index fbaf827..c0b26ed 100644
--- a/app/components/Contact.vue
+++ b/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>
\ No newline at end of file
diff --git a/app/pages/contact.vue b/app/pages/contact.vue
index e0dd69e..0a90b23 100755
--- a/app/pages/contact.vue
+++ b/app/pages/contact.vue
@@ -3,57 +3,3 @@
     <Contact />
   </div>
 </template>
-
-<script setup lang="ts">
-
-
-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: 'Maria Salcedo',
-  //   img: 'maria',
-  //   tags: ['Backend', 'DevOps', 'Architektur'],
-  //   flavour: 'Effizient und kommunikativ. "You build it, you run it."',
-  //   link: 'https://masagu.dev',
-  // },
-  {
-    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>