ADD: Contact page

Add contact page with socials

app/app.vue

@@ -1,5 +1,5 @@
 <template>
-  <section>
+  <section class="bg-radial">
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>

app/assets/css/contact.css

@@ -0,0 +1,19 @@
+.Contact {
+    & .social-media {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1rem 2rem;
+
+        & li a {
+            display: flex;
+            gap: .5rem;
+            align-items: center;
+            transition: var(--transition-time);
+            width: max-content;
+
+            &:hover {
+                color: var(--color-orange);
+            }
+        }
+    }
+}

app/assets/css/footer.css

@@ -1,6 +1,7 @@
 .Footer {
     align-items: center;
     padding: 1rem 15vw;
+    background: var(--color-black);
 
     & .notes {
         display: flex;

app/assets/css/global.css

@@ -201,6 +201,13 @@ span.chip {
     margin-top: auto;
 }
 
+.bg-radial {
+    background-image: radial-gradient(circle at 100vw 100vh, rgba(255,145,0,0.2) 0%, rgba(0,0,0,0) 63%, rgba(0,0,0,0) 100%);
+    background-color: var(--color-orange-black);
+    background-repeat: no-repeat;
+
+}
+
 .flex-row {
     display: flex;
     flex-direction: row;

app/assets/css/services.css

@@ -1,11 +1,5 @@
 .Services {
-    background-image: radial-gradient(circle at 100vw 100vh, rgba(255,145,0,0.2) 0%, rgba(0,0,0,0) 63%, rgba(0,0,0,0) 100%);
+    & .network-list {
-    background-color: var(--color-orange-black);
-    background-repeat: no-repeat;
-
-
-
-    .network-list {
         width: 100%;
         overflow-x: auto;
         padding-top: 4px;

app/assets/css/spoiler.css

@@ -8,6 +8,7 @@
     }
 
     & summary {
+        font-family: 'Roboto Condensed', sans-serif;
         font-size: 1.5rem;
         cursor: pointer;
         list-style: none;

app/components/Booking.vue

@@ -1,7 +1,7 @@
 <template>
   <section id="services" class="Services content">
-    <h2>Services.</h2>
+    <h1>Projektbuchungen</h1>
-    <h3>Du hast also beschlossen, dass du <span class="highlight">meine Hilfe</span> brauchst. Cool!</h3>
+    <h2>Du hast also beschlossen, dass du <span class="highlight">meine Hilfe</span> brauchst. Cool!</h2>
     <p class="margin-top">Hinter diesen Angeboten gibt es <span class="highlight">keinerlei Abos oder versteckte Kosten</span>.
       Aus Transparenzgründen sei aber gesagt, dass sich <span class="highlight">*alle Preise zzgl. 19 % Umsatzsteuer</span>. verstehen.</p>
 
@@ -48,14 +48,9 @@
       </article>
     </div>
 
-    <article class="z-2 card flex-col gap-default margin-top">
+    <div class="flex-col gap-sm margin-top">
-      <h3>Keinen Bock auf Telen? Understandable.</h3>
+      <Spoiler v-for="entry in faq" v-bind="entry" class="z-2" />
-      <p>Dann schreib mir einfach gerne direkt eine E-Mail an
+    </div>
-        <ClientOnly><a class="mail" href="mailto:anfragen@webfussel.de">anfragen@webfussel.de<Icon name="ph:envelope-duotone" aria-hidden="true" alt="mail icon" size="1.2em" mode="svg" /></a></ClientOnly>
-      </p>
-      <h3>Keine Kohle? Kommt vor.</h3>
-      <p>Meld dich trotzdem. Eventuell ist dein Projekt ja cool genug, dass ich dir da auch entsprechend entgegenkommen kann. :)</p>
-    </article>
   </section>
 </template>
 
@@ -129,7 +124,7 @@ const oneOff : Service[] = [
     button: 'Frag nach!',
     link: 'https://tidycal.com/webfussel/project-booking',
     list: [
-      'Anforderungsanalyse',
+      'Schulungsinhalte klären',
       'Team-Workshops',
       'Azubi-Betreuung',
       '1:1 Mentoring',
@@ -138,4 +133,36 @@ const oneOff : Service[] = [
   },
 ]
 
+const faq = [
+  {
+    header: 'Warum machst du keine Stundensätze?',
+    content: [
+      'Ich finde Stundensätze haben für beide Seiten nur Nachteile:',
+      'Wenn ich schnell und gut arbeite, dann bekomme ich weniger Geld. Hab ich mal einen Knoten im Gehirn und brauche sehr lange, muss der Kunde mehr zahlen.',
+      'Klar kann man sagen, dass sich das irgendwann ausgleichen könnte - aber so weit will ich es garnicht erst kommen lassen.'
+    ]
+  },
+  {
+    header: 'Welche Themen bietest du für deine Schulungen an?',
+    content: [
+      'Sprachen: JavaScript, TypeScript, HTML, CSS',
+      'Frameworks: Vue, Nuxt',
+    ]
+  },
+  {
+    header: 'Wo finden die Schulungen statt?',
+    content: [
+      'Die Schulungen finden online statt. Normalerweise nutze ich dafür Google Meet, aber wenn du oder deine Firma eine andere Plattform wünschen und bereitstellen bin ich natürlich flexibel.',
+      'Wenn sich deine Firma in der Nähe meines Wohnortes befindet - und damit meine ich "In einer Stunde mit der Straßenbahn zu erreichen", dann kann alles natürlich auch vor Ort stattfinden.',
+    ]
+  },
+  {
+    header: 'Ich hab ein cooles Projekt! Aber kein Geld...',
+    content: [
+      'Tja.',
+      'Ne, awas. Meld dich einfach trotzdem über meine E-Mail-Adresse und vielleicht finden wir eine Lösung.'
+    ]
+  }
+]
+
 </script>

app/components/Contact.vue

@@ -0,0 +1,33 @@
+<template>
+  <section id="contact" class="Contact content full gap-default">
+    <h1>Kontakt <span class="highlight">&</span> Social Media</h1>
+    <h2>Kannst ruhig in meine <span class="highlight">DMs sliden</span>. Oder in's Postfach.</h2>
+
+    <article class="z-2 card flex-col gap-sm margin-top">
+      <h3>Du willst einfach nur 'ne Mail schreiben?</h3>
+      <p>Ja gut, passt. Meld dich unter
+        <ClientOnly><a class="mail" href="mailto:anfragen@webfussel.de">anfragen@webfussel.de<Icon name="ph:envelope-duotone" aria-hidden="true" alt="mail icon" size="1.2em" mode="svg" /></a></ClientOnly>
+      </p>
+    </article>
+
+    <article class="z-2 card flex-col gap-sm margin-top">
+      <h3>Ich auf Social Media</h3>
+      <p>Falls du irgendwo einen anderen Social Media Account von mir findest, der nicht hier aufgelistet ist, aber aktiv postet, dann ist dieser höchstwahrscheinlich <span class="highlight">Fake</span>.
+        <br />Meld' dich gerne bei mir, wenn du so einen findest.
+      </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'
+</script>

app/components/Customers.vue

@@ -1,7 +1,7 @@
 <template>
   <section id="customers" class="Customers content">
-    <h2>Kunden <span class="highlight">&</span> Projekte.</h2>
+    <h1>Kunden <span class="highlight">&</span> Projekte.</h1>
-    <h3>Meine bisherigen Geschäftpartner</h3>
+    <h2>Meine bisherigen Geschäftpartner</h2>
     <div class="customer-list margin-top gap-default">
       <a v-for="customer in customers" :href="customer.link" target="_blank" rel="noopener noreferrer">
         <img
@@ -13,7 +13,7 @@
         />
       </a>
     </div>
-    <h3 class="margin-top-big">Projektauswahl</h3>
+    <h2 class="margin-top-big">Projektauswahl</h2>
     <div class="projects-list margin-top">
         <article v-for="pr in projects">
           <div class="bg">

app/components/Flatrate.vue

@@ -1,9 +1,9 @@
 <template>
   <section id="services" class="Services content">
-    <h2>Prepaid Flatrates.</h2>
+    <h1>Prepaid Flatrates</h1>
-    <h3>Genieße fusselige Qualität ohne groß herumzurechnen.</h3>
+    <h2>Genieße fusselige <span class="highlight">Qualität</span> ohne groß herumzurechnen.</h2>
 
-    <p class="margin-top-small">Bei dir fällt ständig was an oder du hast ein langlaufendes Projekt, bei dem du immer wieder mal Unterstützung brauchst? Kein Ding.
+    <p class="margin-top">Bei dir fällt ständig was an oder du hast ein langlaufendes Projekt, bei dem du immer wieder mal Unterstützung brauchst? Kein Ding.
       Hier gibt's die <span class="highlight">Entwickler-Flat</span> für planbare Kosten und On-Demand-Entwicklung. Aus Transparenzgründen sei aber gesagt, dass sich <span class="highlight">*alle Preise zzgl. 19 % Umsatzsteuer</span>. verstehen.</p>
 
     <div class="Pricing margin-top">
@@ -41,7 +41,7 @@
     </div>
 
     <div class="flex-col gap-sm margin-top">
-      <Spoiler v-for="entry in faq" v-bind="entry" />
+      <Spoiler v-for="entry in faq" v-bind="entry" class="z-2" />
     </div>
   </section>
 </template>

app/components/Footer.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts" setup>
-
+import { socials } from '../utils/socials'
 
 const nav = [
   {
@@ -35,9 +35,13 @@ const nav = [
     label: 'Home',
     'aria-label': 'Link dieser Seite: Home'
   }, {
-    to: `/services`,
+    to: `/booking`,
-    label: 'Leistungen',
+    label: 'Projektbuchung',
-    'aria-label': 'Link dieser Seite: Leistungen'
+    'aria-label': 'Link dieser Seite: Projektbuchung'
+  },  {
+    to: `/flatrate`,
+    label: 'Flatrate',
+    'aria-label': 'Link dieser Seite: Flatrate'
   }, {
     to: `/references`,
     label: 'Referenzen',
@@ -52,34 +56,4 @@ const nav = [
     'aria-label': 'Link dieser Seite: Impressum'
   }
 ]
-
-
-const socials = [
-  {
-    href: 'https://www.linkedin.com/in/webfussel/',
-    icon: 'ph:linkedin-logo-duotone',
-    'aria-label': 'Externer Link: LinkedIn Profil'
-  },
-  {
-    href: 'https://mastodontech.de/@webfussel',
-    icon: 'ph:mastodon-logo-duotone',
-    rel: 'me',
-    'aria-label': 'Externer Link: Mastodon Profil'
-  },
-  {
-    href: 'https://bsky.app/profile/webfussel.de',
-    icon: 'wf:bluesky',
-    'aria-label': 'Externer Link: Bluesky Profil'
-  },
-  {
-    href: 'https://twitch.tv/webfussel',
-    icon: 'ph:twitch-logo-duotone',
-    'aria-label': 'Externer Link: Twitch Kanal'
-  },
-  {
-    href: 'https://ko-fi.com/webfussel',
-    icon: 'wf:kofi',
-    'aria-label': 'Externer Link: KoFi Profil'
-  },
-]
 </script>

app/pages/contact.vue

@@ -1,9 +1,6 @@
 <template>
   <div>
-    <Intro />
+    <Contact />
-    <Skills />
-    <Customers />
-    <Booking />
   </div>
 </template>
 

app/utils/socials.ts

@@ -0,0 +1,33 @@
+export const socials = [
+  {
+    href: 'https://www.linkedin.com/in/webfussel/',
+    icon: 'ph:linkedin-logo-duotone',
+    name: 'LinkedIn: Fiona Urban aka webfussel',
+    'aria-label': 'Externer Link: LinkedIn Profil'
+  },
+  {
+    href: 'https://mastodontech.de/@webfussel',
+    icon: 'ph:mastodon-logo-duotone',
+    name: 'Mastodon: @webfussel@mastodontech',
+    rel: 'me',
+    'aria-label': 'Externer Link: Mastodon Profil'
+  },
+  {
+    href: 'https://bsky.app/profile/webfussel.de',
+    icon: 'wf:bluesky',
+    name: 'Bluesky: @webfussel.de',
+    'aria-label': 'Externer Link: Bluesky Profil'
+  },
+  {
+    href: 'https://twitch.tv/webfussel',
+    icon: 'ph:twitch-logo-duotone',
+    name: 'Twitch: webfussel',
+    'aria-label': 'Externer Link: Twitch Kanal'
+  },
+  {
+    href: 'https://ko-fi.com/webfussel',
+    icon: 'wf:kofi',
+    name: 'Ko-Fi: webfussel',
+    'aria-label': 'Externer Link: KoFi Profil'
+  },
+]

nuxt.config.ts

@@ -20,6 +20,7 @@ export default defineNuxtConfig({
     '~/assets/css/skills.css',
     '~/assets/css/pricing.css',
     '~/assets/css/customers.css',
+    '~/assets/css/contact.css',
     '~/assets/css/services.css',
     '~/assets/css/footer.css',
     '~/assets/css/technology.css',