From 4e953392fc54f6d6d00dae41d1ffc8ae79dd45b3 Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Tue, 10 Jun 2025 07:48:21 +0200
Subject: [PATCH 01/10] REMOVE: RichText

Removed all traces of RichText implementation in Favor of NuxtContent
---
 app/components/FreeInfo.vue           |   4 +-
 app/components/Highlight.vue          |   3 +
 app/components/Icon/LinkExternal.vue  |   3 +
 app/components/Icon/LinkInternal.vue  |   3 +
 app/components/RichText/General.vue   |  40 -----
 app/components/RichText/Link.vue      |  18 --
 app/components/RichText/NewLine.vue   |   3 -
 app/components/RichText/Paragraph.vue |  11 --
 app/components/RichText/Plain.vue     |   9 -
 app/components/RichText/RichText.vue  |  20 ---
 app/components/RichText/String.vue    |  11 --
 app/components/RichText/Types.ts      |  30 ----
 app/components/Section/Booking.vue    |   8 +-
 app/components/Section/Contact.vue    |   6 +-
 app/components/Section/Customers.vue  |   2 +-
 app/components/Section/Flatrate.vue   |   6 +-
 app/components/Section/Footer.vue     |   2 +-
 app/components/Section/Intro.vue      |   4 +-
 app/components/Section/Skills.vue     |   2 +-
 app/components/Section/SkillsEasy.vue | 245 +-------------------------
 content/snippets/skills/1.see.md      |   2 +-
 content/snippets/skills/2.edit.md     |   8 +-
 content/snippets/skills/3.result.md   |  10 +-
 23 files changed, 38 insertions(+), 412 deletions(-)
 create mode 100644 app/components/Highlight.vue
 create mode 100644 app/components/Icon/LinkExternal.vue
 create mode 100644 app/components/Icon/LinkInternal.vue
 delete mode 100755 app/components/RichText/General.vue
 delete mode 100755 app/components/RichText/Link.vue
 delete mode 100755 app/components/RichText/NewLine.vue
 delete mode 100755 app/components/RichText/Paragraph.vue
 delete mode 100755 app/components/RichText/Plain.vue
 delete mode 100755 app/components/RichText/RichText.vue
 delete mode 100755 app/components/RichText/String.vue
 delete mode 100755 app/components/RichText/Types.ts

diff --git a/app/components/FreeInfo.vue b/app/components/FreeInfo.vue
index 6f7ecd0..1ebce38 100644
--- a/app/components/FreeInfo.vue
+++ b/app/components/FreeInfo.vue
@@ -1,6 +1,6 @@
 <template>
   <article class="z-2 card flex-col margin-top font-big text-center">
-    <p>Derzeit habe ich <span class="highlight">keine freien Plätze</span>.</p>
-    <p class="margin-top-small">Das ändert sich ab <span class="highlight">01. Januar 2026</span>.</p>
+    <p>Derzeit habe ich <Highlight>keine freien Plätze</Highlight>.</p>
+    <p class="margin-top-small">Das ändert sich ab <Highlight>01. Januar 2026</Highlight>.</p>
   </article>
 </template>
\ No newline at end of file
diff --git a/app/components/Highlight.vue b/app/components/Highlight.vue
new file mode 100644
index 0000000..195f8ce
--- /dev/null
+++ b/app/components/Highlight.vue
@@ -0,0 +1,3 @@
+<template>
+  <span class="highlight"><slot /></span>
+</template>
\ No newline at end of file
diff --git a/app/components/Icon/LinkExternal.vue b/app/components/Icon/LinkExternal.vue
new file mode 100644
index 0000000..55d2c08
--- /dev/null
+++ b/app/components/Icon/LinkExternal.vue
@@ -0,0 +1,3 @@
+<template>
+  <Icon name="ph:arrow-square-out-duotone" mode="svg" />
+</template>
\ No newline at end of file
diff --git a/app/components/Icon/LinkInternal.vue b/app/components/Icon/LinkInternal.vue
new file mode 100644
index 0000000..e0e3305
--- /dev/null
+++ b/app/components/Icon/LinkInternal.vue
@@ -0,0 +1,3 @@
+<template>
+  <Icon name="ph:link-simple-duotone" mode="svg" />
+</template>
\ No newline at end of file
diff --git a/app/components/RichText/General.vue b/app/components/RichText/General.vue
deleted file mode 100755
index 2dda4a1..0000000
--- a/app/components/RichText/General.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <component :is="computedComponent.is" v-bind="computedComponent.props" />
-</template>
-
-<script setup lang="ts">
-import type { RichText } from './Types'
-
-type Props = {
-  element : RichText
-}
-
-const { element } = defineProps<Props>()
-
-const computedComponent = computed(() => {
-  let is : ReturnType<typeof resolveComponent> = {}
-
-  switch (element.type) {
-    case 'plain':
-      is = resolveComponent('RichTextPlain')
-      break
-    case 'p':
-      is = resolveComponent('RichTextParagraph')
-      break
-    case 'span':
-      is = resolveComponent('RichTextString')
-      break
-    case 'a':
-      is = resolveComponent('RichTextLink')
-      break
-    case 'br':
-      is = resolveComponent('RichTextNewLine')
-      break
-    default:
-      break
-  }
-
-  return { is, props: { ...element } }
-})
-
-</script>
diff --git a/app/components/RichText/Link.vue b/app/components/RichText/Link.vue
deleted file mode 100755
index 4714303..0000000
--- a/app/components/RichText/Link.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <a v-if="isExternal" :href="href" :target="target" class="text inline-flex-row">
-    {{ content }}
-    <Icon name="ph:arrow-square-out-duotone" mode="svg" />
-  </a>
-  <NuxtLink v-else :to="href" class="text inline-flex-row">
-    {{ content }}
-    <Icon name="ph:link-simple-duotone" mode="svg" />
-  </NuxtLink>
-</template>
-
-<script setup lang="ts">
-import type { RichTextLink } from './Types'
-
-const { href } = defineProps<RichTextLink>()
-
-const isExternal = href.startsWith('http')
-</script>
diff --git a/app/components/RichText/NewLine.vue b/app/components/RichText/NewLine.vue
deleted file mode 100755
index 1502375..0000000
--- a/app/components/RichText/NewLine.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <br>
-</template>
diff --git a/app/components/RichText/Paragraph.vue b/app/components/RichText/Paragraph.vue
deleted file mode 100755
index 5ec1196..0000000
--- a/app/components/RichText/Paragraph.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <p :class="css">
-    <RichTextGeneral v-for="element in children" :element="element" />
-  </p>
-</template>
-
-<script setup lang="ts">
-import type { RichTextParagraph } from './Types'
-
-defineProps<RichTextParagraph>()
-</script>
\ No newline at end of file
diff --git a/app/components/RichText/Plain.vue b/app/components/RichText/Plain.vue
deleted file mode 100755
index 162d9d3..0000000
--- a/app/components/RichText/Plain.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  {{ content }}
-</template>
-
-<script setup lang="ts">
-import type { RichTextPlain } from './Types'
-
-defineProps<RichTextPlain>()
-</script>
diff --git a/app/components/RichText/RichText.vue b/app/components/RichText/RichText.vue
deleted file mode 100755
index ed64451..0000000
--- a/app/components/RichText/RichText.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <template v-if="Array.isArray(elements)">
-    <General v-for="element in elements" :element="element" />
-  </template>
-  <template v-else>
-    <General :element="elements" />
-  </template>
-</template>
-
-<script setup lang="ts">
-import type { RichText } from './Types'
-import General from './General.vue'
-
-type Props = {
-  elements : RichText | RichText[]
-}
-
-
-defineProps<Props>()
-</script>
diff --git a/app/components/RichText/String.vue b/app/components/RichText/String.vue
deleted file mode 100755
index 926b4e0..0000000
--- a/app/components/RichText/String.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <span :class="css">
-    {{ content }}
-  </span>
-</template>
-
-<script setup lang="ts">
-import type { RichTextSpan } from './Types'
-
-defineProps<RichTextSpan>()
-</script>
diff --git a/app/components/RichText/Types.ts b/app/components/RichText/Types.ts
deleted file mode 100755
index 3372f88..0000000
--- a/app/components/RichText/Types.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-type RichTextBasis = {
-  type: string
-  content: string
-  css ?: string
-}
-
-export type RichTextPlain = RichTextBasis & {
-  type: 'plain'
-}
-
-export type RichTextParagraph = Omit<RichTextBasis, 'content'> & {
-  type: 'p'
-  children ?: RichText[]
-}
-
-export type RichTextSpan = RichTextBasis & {
-  type: 'span'
-}
-
-export type RichTextLink = RichTextBasis & {
-  type: 'a'
-  href: string
-  target ?: string
-}
-
-export type RichTextNewLine = {
-  type: 'br'
-}
-
-export type RichText = RichTextPlain | RichTextParagraph |  RichTextSpan | RichTextLink | RichTextNewLine
\ No newline at end of file
diff --git a/app/components/Section/Booking.vue b/app/components/Section/Booking.vue
index a715ed7..b708107 100755
--- a/app/components/Section/Booking.vue
+++ b/app/components/Section/Booking.vue
@@ -1,11 +1,11 @@
 <template>
   <section id="services" class="Services content">
     <h1>Projekt buchen</h1>
-    <h2>Du hast also beschlossen, dass du <span class="highlight">meine Hilfe</span> brauchst. Cool!</h2>
+    <h2>Du hast also beschlossen, dass du <Highlight>meine Hilfe</Highlight> brauchst. Cool!</h2>
     <p class="margin-top">Manchmal brauchen wir alle einfach nur eine Kleinigkeit und wollen uns nicht lange binden. Das ist natürlich
-      völlig in Ordnung und genau deshalb biete ich dir die Möglichkeit mich gezielt für <span class="highlight">kleinere Projekte</span> zu buchen.</p>
-    <p class="margin-top-small">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>
+      völlig in Ordnung und genau deshalb biete ich dir die Möglichkeit mich gezielt für <Highlight>kleinere Projekte</Highlight> zu buchen.</p>
+    <p class="margin-top-small">Hinter diesen Angeboten gibt es <Highlight>keinerlei Abos oder versteckte Kosten</Highlight>.
+      Aus Transparenzgründen sei aber gesagt, dass sich <Highlight>alle Preise zzgl. 19 % Umsatzsteuer</Highlight> verstehen.</p>
 
     <FreeInfo />
 
diff --git a/app/components/Section/Contact.vue b/app/components/Section/Contact.vue
index 15a187f..ee3aa66 100644
--- a/app/components/Section/Contact.vue
+++ b/app/components/Section/Contact.vue
@@ -1,7 +1,7 @@
 <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>
+    <h1>Kontakt <Highlight>&</Highlight> Social Media</h1>
+    <h2>Kannst ruhig in meine <Highlight>DMs sliden</Highlight>. 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>
@@ -12,7 +12,7 @@
 
     <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>.
+      <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 <Highlight>Fake</Highlight>.
         <br />Meld' dich gerne bei mir, wenn du so einen findest.
       </p>
       <ul class="social-media">
diff --git a/app/components/Section/Customers.vue b/app/components/Section/Customers.vue
index 851eac3..b5ec932 100755
--- a/app/components/Section/Customers.vue
+++ b/app/components/Section/Customers.vue
@@ -1,6 +1,6 @@
 <template>
   <section id="customers" class="Customers content">
-    <h1>Kunden <span class="highlight">&</span> Projekte.</h1>
+    <h1>Kunden <Highlight>&</Highlight> Projekte.</h1>
     <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">
diff --git a/app/components/Section/Flatrate.vue b/app/components/Section/Flatrate.vue
index da0935e..d264a1e 100755
--- a/app/components/Section/Flatrate.vue
+++ b/app/components/Section/Flatrate.vue
@@ -1,11 +1,11 @@
 <template>
   <section id="services" class="Services content">
     <h1>Prepaid Flatrates</h1>
-    <h2>Genieße fusselige <span class="highlight">Qualität</span> ohne groß herumzurechnen.</h2>
+    <h2>Genieße fusselige <Highlight>Qualität</Highlight> ohne groß herumzurechnen.</h2>
 
     <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.</p>
-    <p class="margin-top-small">Aus Transparenzgründen sei gesagt, dass sich <span class="highlight">alle Preise zzgl. 19 % Umsatzsteuer</span> verstehen.</p>
+      Hier gibt's die <Highlight>Entwickler-Flat</Highlight> für planbare Kosten und On-Demand-Entwicklung.</p>
+    <p class="margin-top-small">Aus Transparenzgründen sei gesagt, dass sich <Highlight>alle Preise zzgl. 19 % Umsatzsteuer</Highlight> verstehen.</p>
 
     <FreeInfo />
 
diff --git a/app/components/Section/Footer.vue b/app/components/Section/Footer.vue
index f01bdb7..b12d10b 100755
--- a/app/components/Section/Footer.vue
+++ b/app/components/Section/Footer.vue
@@ -22,7 +22,7 @@
         <span class="tip">Ohne Tracker</span>
       </li>
     </ul>
-    <p class="inline-flex-row"><Icon name="ph:copyright-duotone" mode="svg"/> 2024 by <a href="https://webfussel.de">webfussel</a></p>
+    <p class="inline-flex-row"><Icon name="ph:copyright-duotone" mode="svg"/> 2024 by <NuxtLink to="/">webfussel</NuxtLink></p>
   </footer>
 </template>
 
diff --git a/app/components/Section/Intro.vue b/app/components/Section/Intro.vue
index 55609b2..396f561 100755
--- a/app/components/Section/Intro.vue
+++ b/app/components/Section/Intro.vue
@@ -3,10 +3,10 @@
     <div class="intro-text flex-col gap-default">
       <h1 class="flex-col">
         <span class="greeting inline-flex-row">Moin. <Icon name="ph:hand-peace-duotone" mode="svg"/></span>
-        <span class="my-name-wrapper">Ich bin <span class="highlight">Fiona</span>.</span>
+        <span class="my-name-wrapper">Ich bin <Highlight>Fiona</Highlight>.</span>
       </h1>
       <h2>
-        Component <span class="highlight">&</span> API Entwicklerin
+        Component <Highlight>&</Highlight> API Entwicklerin
       </h2>
       <p class="fulltext">
         Ich unterstütze Unternehmen dabei, ihre Daten von verschiedenen Endpunkten sauber aufzubereiten
diff --git a/app/components/Section/Skills.vue b/app/components/Section/Skills.vue
index 53d8554..3d61b24 100755
--- a/app/components/Section/Skills.vue
+++ b/app/components/Section/Skills.vue
@@ -1,7 +1,7 @@
 <template>
   <section id="skills" class="Skills content">
     <h2>Meine Expertise.</h2>
-    <h3>Dies sind meine <span class="highlight">Spezialgebiete</span> - aber ich bin flexibel!</h3>
+    <h3>Dies sind meine <Highlight>Spezialgebiete</Highlight> - aber ich bin flexibel!</h3>
     <div class="skill-list margin-top gap-default">
       <Card v-for="skill in skills" :title="skill.title" titleTag="h3">
         <p v-for="(t, i) in skill.text" :class="[i === skill.text.length - 1 && 'bold']">{{t}}</p>
diff --git a/app/components/Section/SkillsEasy.vue b/app/components/Section/SkillsEasy.vue
index d133c0a..2db7b93 100755
--- a/app/components/Section/SkillsEasy.vue
+++ b/app/components/Section/SkillsEasy.vue
@@ -1,13 +1,13 @@
 <template>
   <section id="skills_easy" class="Skills content">
     <h2>Jetzt mal ganz konkret.</h2>
-    <h3>In diesem Abschnitt ganz <span class="highlight">ohne Technik-Blabla</span>.</h3>
+    <h3>In diesem Abschnitt ganz <Highlight>ohne Technik-Blabla</Highlight>.</h3>
     <div class="skill-container flex-col margin-top gap-default">
       <ContentRenderer v-for="skill in skills" :key="skill.id" :value="skill" :style="{ display: 'contents' }" />
     </div>
     <div class="bottom flex-col margin-top gap-default">
       <h3>Verwirkliche jetzt dein Webprojekt.</h3>
-      <Button href="/booking" class="cta">
+      <Button href="/booking/" class="cta">
         <Icon name="ph:chat-circle-text-duotone" size="1.5em" mode="svg" />
         Lass mal reden
       </Button>
@@ -16,246 +16,5 @@
 </template>
 
 <script setup lang="ts">
-import type { RichText } from '@/components/RichText/Types'
-
-type Skill = {
-  img: string
-  title: string
-  text: RichText[]
-}
-
-const getExplanationImage = (img : string) => getImage('/img/explanations/', img)
-
-// const skills : Skill[] = [
-//   {
-//     img: 'components',
-//     title: 'Das, was du sehen kannst',
-//     text: [
-//       {
-//         type: 'p',
-//         children: [
-//           {
-//             type: 'plain',
-//             content: 'Die meisten Anwendungen haben eine grafische Benutzeroberfläche - die so genannte GUI. Wenn etwas graphisch ist, ' +
-//                 'dann bedeutet das auch natürlich, dass es sinnvoll dargestellt werden muss. Dafür verwenden wir kleine Bausteine, die wir Komponenten nennen.',
-//           }
-//         ]
-//       },
-//       {
-//         type: 'p',
-//         children: [
-//           {
-//             type: 'plain',
-//             content: 'Grundsätzlich lassen sich komplette Anwendungen und auch einfache Webseiten ziemlich cool über Komponenten aufbauen, sodass wir wiederkehrende Elemente ' +
-//                 'wie Buttons, Textabschnitte, Links oder Teaser immer wieder verwenden können - selbst wenn sich diese in ihren Details wie Farben oder Icons unterscheiden.',
-//           }
-//         ]
-//       },
-//       {
-//         type: 'p',
-//         children: [
-//           {
-//             type: 'plain',
-//             content: 'Diese Komponenten so zu entwickeln, dass sie wirklich flexibel sind und auch perfekt mit dem Design übereinstimmen ist gar nicht so einfach, denn oft sollten sie ' +
-//                 'auch mehr können als im Design kurzfristig ersichtlich ist.',
-//           }
-//         ]
-//       },
-//       {
-//         type: 'p',
-//         css: 'place-bottom bold',
-//         children: [
-//           {
-//             type: 'plain',
-//             content: 'Diese Voraussicht, für den Fall der Fälle vorzusorgen:',
-//           },
-//           {
-//             type: 'br',
-//           },
-//           {
-//             type: 'plain',
-//             content: 'Die gibt\'s bei mir dazu.',
-//           },
-//           {
-//             type: 'br',
-//           },
-//           {
-//             type: 'span',
-//             css: 'highlight',
-//             content: 'Fussel-Ehrenwort.'
-//           }
-//         ]
-//       },
-//     ],
-//   }, {
-//     img: 'cms',
-//     title: 'Da, wo du eintragen kannst',
-//     text: [
-//       {
-//         type: 'p',
-//         children: [
-//           {
-//             type: 'plain',
-//             content: 'In vielen Fällen ist es natürlich praktisch, wenn du einfach Inhalte einer Seite auf das ändern kannst, was gerade aktuell ist, ohne auf andere angewiesen zu sein.'
-//                 + 'Damit das reibungslos möglich ist, entwickle ich dir gerne eine Anwendung oder Homepage, deren Inhalte du komplett selbst auf dem neuesten Stand halten kannst - und zwar '
-//                 + 'mit einem sogenannten CMS - ein ',
-//           },
-//           {
-//             type: 'span',
-//             css: 'highlight',
-//             content: 'C'
-//           },
-//           {
-//             type: 'plain',
-//             content: 'ontent '
-//           },
-//           {
-//             type: 'span',
-//             css: 'highlight',
-//             content: 'M'
-//           },
-//           {
-//             type: 'plain',
-//             content: 'anagement '
-//           },
-//           {
-//             type: 'span',
-//             css: 'highlight',
-//             content: 'S'
-//           },
-//           {
-//             type: 'plain',
-//             content: 'ystem.'
-//           },
-//         ]
-//       },
-//       {
-//         type: 'p',
-//         children: [
-//           {
-//             type: 'plain',
-//             content: 'Für CMS setze ich in erster Linie auf die cloudbasierte Lösung ',
-//           },
-//           {
-//             type: 'a',
-//             target: '_blank',
-//             css: 'text',
-//             href: 'https://www.storyblok.com',
-//             content: 'Storyblok'
-//           },
-//           {
-//             type: 'plain',
-//             content: '. Dies stellt für die Meisten eine kostenlose bis kostengünstige Lösung dar ohne viel technisches Wissen mitbringen zu müssen.',
-//           }
-//         ]
-//       },
-//       {
-//         type: 'p',
-//         children: [
-//           {
-//             type: 'plain',
-//             content: 'Falls du aber nicht möchtest, dass deine Daten auf irgendeinem Fremden server liegen - was ich durchaus verstehen kann! - dann gibt es auch die Möglichkeit mit ',
-//           },
-//           {
-//             type: 'a',
-//             target: '_blank',
-//             css: 'text',
-//             href: 'https://www.strapi.io',
-//             content: 'Strapi'
-//           },
-//           {
-//             type: 'plain',
-//             content: ' selbst das eigene CMS zu hosten. Das musst du dann aber allerdings selbst erledigen oder ich erledige das für dich für einen Aufpreis.',
-//           }
-//         ]
-//       },
-//       {
-//         type: 'p',
-//         css: 'place-bottom bold',
-//         children: [
-//           {
-//             type: 'plain',
-//             content: 'Nie wieder jemand anderen Fragen zu müssen, um deine Website auf dem neuesten Stand zu halten.',
-//           },
-//           {
-//             type: 'br',
-//           },
-//           {
-//             type: 'span',
-//             css: 'highlight',
-//             content: 'Mit Fussel-Garantie.'
-//           }
-//         ]
-//       },
-//     ],
-//   }, {
-//     img: 'result',
-//     title: 'Was dabei am Ende rauskommt',
-//     text: [
-//       {
-//         type: 'p',
-//         children: [
-//           {
-//             type: 'plain',
-//             content: 'Grundsätzlich lässt sich das ganz einfach zusammenfassen: ',
-//           },
-//           {
-//             type: 'span',
-//             css: 'highlight',
-//             content: 'Dein persönlicher Webauftritt.',
-//           }
-//         ]
-//       },
-//       {
-//         type: 'p',
-//         children: [
-//           {
-//             type: 'plain',
-//             content: 'Ob du nun etwas kleineres brauchst, um ein paar Hobbies zu zeigen. Oder vielleicht etwas größeres, weil du dir ein eigenes Business aufbauen willst. Eventuell ein eigener Blog, eine komplette Applikation oder '
-//                 + 'die Möglichkeit für andere Leute deine Daten bereit zu stellen. All das, das kann ich dir mit meinen Fähigkeiten und meiner Erfahrung bieten.'
-//           }
-//         ]
-//       },
-//       {
-//         type: 'p',
-//         children: [
-//           {
-//             type: 'plain',
-//             content: 'Erkunde einfach meine ',
-//           },
-//           {
-//             type: 'a',
-//             href: '/references',
-//             content: 'Referenzen'
-//           },
-//           {
-//             type: 'plain',
-//             content: ' und dir wird auffallen, dass diese äußerst durchmischt und bunt sind. So individuell wie die Projekte meiner bisherigen Kunden wird auch dein Projekt behandelt. Und auch, wenn '
-//                 + 'du glaubst, dass die Referenzen nicht zu deinem Projekt passen, werden wir deine ganz individuelle Lösung gemeinsam erarbeiten.'
-//           }
-//         ]
-//       },
-//       {
-//         type: 'p',
-//         css: 'place-bottom bold',
-//         children: [
-//           {
-//             type: 'plain',
-//             content: 'Denn jedes Projekt ist etwas eigenes und besonderes.',
-//           },
-//           {
-//             type: 'br',
-//           },
-//           {
-//             type: 'span',
-//             css: 'highlight',
-//             content: 'Auch deins.'
-//           }
-//         ]
-//       },
-//     ],
-//   }
-// ]
-
 const skills = await queryCollection('skills').all()
 </script>
diff --git a/content/snippets/skills/1.see.md b/content/snippets/skills/1.see.md
index fa0430c..0ea7a91 100644
--- a/content/snippets/skills/1.see.md
+++ b/content/snippets/skills/1.see.md
@@ -15,5 +15,5 @@ Diese Komponenten so zu entwickeln, dass sie wirklich flexibel sind und auch per
 
 **Diese Voraussicht, für den Fall der Fälle vorzusorgen:**  
 **Die gibt's bei mir dazu.**  
-<span class="highlight">Fussel-Ehrenwort.</span>
+<Highlight>Fussel-Ehrenwort.</Highlight>
 ::
\ No newline at end of file
diff --git a/content/snippets/skills/2.edit.md b/content/snippets/skills/2.edit.md
index 0037d6a..b5b195a 100644
--- a/content/snippets/skills/2.edit.md
+++ b/content/snippets/skills/2.edit.md
@@ -7,12 +7,12 @@ image:
     position: "right"
 ---
 
-In vielen Fällen ist es natürlich praktisch, wenn du einfach Inhalte einer Seite auf das ändern kannst, was gerade aktuell ist, ohne auf andere angewiesen zu sein. Damit das reibungslos möglich ist, entwickle ich dir gerne eine Anwendung oder Homepage, deren Inhalte du komplett selbst auf dem neuesten Stand halten kannst – und zwar mit einem sogenannten <span class="highlight">CMS</span> – ein <span class="highlight">C</span>ontent <span class="highlight">M</span>anagement <span class="highlight">S</span>ystem.
+In vielen Fällen ist es natürlich praktisch, wenn du einfach Inhalte einer Seite auf das ändern kannst, was gerade aktuell ist, ohne auf andere angewiesen zu sein. Damit das reibungslos möglich ist, entwickle ich dir gerne eine Anwendung oder Homepage, deren Inhalte du komplett selbst auf dem neuesten Stand halten kannst – und zwar mit einem sogenannten <Highlight>CMS</Highlight> – ein <Highlight>C</Highlight>ontent <Highlight>M</Highlight>anagement <Highlight>S</Highlight>ystem.
 
-Für CMS setze ich in erster Linie auf die cloudbasierte Lösung [Storyblok <Icon name="ph:arrow-square-out-duotone" mode="svg" />](https://www.storyblok.com){class="inline-flex-row text"}. Dies stellt für die Meisten eine kostenlose bis kostengünstige Lösung dar ohne viel technisches Wissen mitbringen zu müssen.
+Für CMS setze ich in erster Linie auf die cloudbasierte Lösung [Storyblok <IconLinkExternal />](https://www.storyblok.com){class="inline-flex-row text"}. Dies stellt für die Meisten eine kostenlose bis kostengünstige Lösung dar, ohne viel technisches Wissen mitbringen zu müssen.
 
-Falls du aber nicht möchtest, dass deine Daten auf irgendeinem Fremden Server liegen – was ich durchaus verstehen kann! – dann gibt es auch die Möglichkeit mit [Strapi <Icon name="ph:arrow-square-out-duotone" mode="svg" />](https://strapi.io){class="inline-flex-row text"} selbst das eigene CMS zu hosten. Das musst du dann aber allerdings selbst erledigen oder ich erledige das für dich für einen Aufpreis.
+Falls du aber nicht möchtest, dass deine Daten auf irgendeinem Fremden Server liegen – was ich durchaus verstehen kann! – dann gibt es auch die Möglichkeit mit [Strapi <IconLinkExternal />](https://strapi.io){class="inline-flex-row text"} selbst das eigene CMS zu hosten. Das musst du dann aber allerdings selbst erledigen oder ich erledige das für dich für einen Aufpreis.
 
 **Nie wieder jemand anderen fragen zu müssen, um deine Website auf dem neuesten Stand zu halten.**  
-<span class="highlight">Mit Fussel-Garantie.</span>
+<Highlight>Mit Fussel-Garantie.</Highlight>
 ::
\ No newline at end of file
diff --git a/content/snippets/skills/3.result.md b/content/snippets/skills/3.result.md
index 02045db..5109df9 100644
--- a/content/snippets/skills/3.result.md
+++ b/content/snippets/skills/3.result.md
@@ -7,12 +7,12 @@ image:
     position: "left"
 ---
 
-Grundsätzlich lässt sich das ganz einfach zusammenfassen: <span class="highlight">Dein persönlicher Webauftritt.</span>
+Grundsätzlich lässt sich das ganz einfach zusammenfassen: <Highlight>Dein persönlicher Webauftritt.</Highlight>
 
-Ob du nun etwas kleineres brauchst, um ein paar Hobbies zu zeigen. Oder vielleicht etwas größeres, weil du dir ein eigenes Business aufbauen willst. Eventuell ein eigener Blog, eine komplette Applikation oder die Möglichkeit für andere Leute deine Daten bereit zu stellen. All das, das kann ich dir mit meinen Fähigkeiten und meiner Erfahrung bieten.
+Ob du nun etwas Kleineres brauchst, um ein paar Hobbys zu zeigen. Oder vielleicht etwas Größeres, weil du dir ein eigenes Business aufbauen willst. Eventuell ein eigener Blog, eine komplette Applikation oder die Möglichkeit für andere Leute deine Daten bereitzustellen. All das, das kann ich dir mit meinen Fähigkeiten und meiner Erfahrung bieten.
 
-Erkunde einfach meine [Referenzen <Icon name="ph:link-simple-duotone" mode="svg" />](references/){class="inline-flex-row text"} und dir wird auffallen, dass diese äußerst durchmischt und bunt sind. So individuell wie die Projekte meiner bisherigen Kunden wird auch dein Projekt behandelt. Und auch, wenn du glaubst, dass die Referenzen nicht zu deinem Projekt passen, werden wir deine ganz individuelle Lösung gemeinsam erarbeiten.
+Erkunde einfach meine [Referenzen <IconLinkInternal >](references/){class="inline-flex-row text"} und dir wird auffallen, dass diese äußerst durchmischt und bunt sind. So individuell wie die Projekte meiner bisherigen Kunden wird auch dein Projekt behandelt. Und auch, wenn du glaubst, dass die Referenzen nicht zu deinem Projekt passen, werden wir deine ganz individuelle Lösung gemeinsam erarbeiten.
 
-**Denn jedes Projekt ist etwas eigenes und besonderes.**  
-<span class="highlight">Auch deins.</span>
+**Denn jedes Projekt ist etwas Eigenes und besondere.**  
+<Highlight>Auch deins.</Highlight>
 ::
\ No newline at end of file

From 8668b96eff39a4b664abd9e7576fa4f68ad346c1 Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Tue, 10 Jun 2025 07:52:31 +0200
Subject: [PATCH 02/10] fix: Typos

Fixes several typos
---
 app/components/Section/Booking.vue  | 2 +-
 content/snippets/skills/3.result.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Section/Booking.vue b/app/components/Section/Booking.vue
index b708107..32be3a2 100755
--- a/app/components/Section/Booking.vue
+++ b/app/components/Section/Booking.vue
@@ -1,7 +1,7 @@
 <template>
   <section id="services" class="Services content">
     <h1>Projekt buchen</h1>
-    <h2>Du hast also beschlossen, dass du <Highlight>meine Hilfe</Highlight> brauchst. Cool!</h2>
+    <h2>Paketpreise für <Highlight>feste Ergebnisse</Highlight>.</h2>
     <p class="margin-top">Manchmal brauchen wir alle einfach nur eine Kleinigkeit und wollen uns nicht lange binden. Das ist natürlich
       völlig in Ordnung und genau deshalb biete ich dir die Möglichkeit mich gezielt für <Highlight>kleinere Projekte</Highlight> zu buchen.</p>
     <p class="margin-top-small">Hinter diesen Angeboten gibt es <Highlight>keinerlei Abos oder versteckte Kosten</Highlight>.
diff --git a/content/snippets/skills/3.result.md b/content/snippets/skills/3.result.md
index 5109df9..bc2a49d 100644
--- a/content/snippets/skills/3.result.md
+++ b/content/snippets/skills/3.result.md
@@ -13,6 +13,6 @@ Ob du nun etwas Kleineres brauchst, um ein paar Hobbys zu zeigen. Oder vielleich
 
 Erkunde einfach meine [Referenzen <IconLinkInternal >](references/){class="inline-flex-row text"} und dir wird auffallen, dass diese äußerst durchmischt und bunt sind. So individuell wie die Projekte meiner bisherigen Kunden wird auch dein Projekt behandelt. Und auch, wenn du glaubst, dass die Referenzen nicht zu deinem Projekt passen, werden wir deine ganz individuelle Lösung gemeinsam erarbeiten.
 
-**Denn jedes Projekt ist etwas Eigenes und besondere.**  
+**Denn jedes Projekt ist etwas Eigenes und Besonderes.**  
 <Highlight>Auch deins.</Highlight>
 ::
\ No newline at end of file

From 48efe0f75b21c191d46dad2a51e65675f121d65a Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Tue, 10 Jun 2025 20:03:42 +0200
Subject: [PATCH 03/10] fix: FAQ in NuxtContent

FAQ converted to NuxtContent
---
 app/assets/css/global.css           |  4 ++
 app/assets/css/spoiler.css          | 10 ++++-
 app/components/Burger.vue           |  2 +-
 app/components/Project.vue          |  2 +-
 app/components/Section/Booking.vue  | 40 +++-----------------
 app/components/Section/Contact.vue  |  2 +-
 app/components/Section/Flatrate.vue | 49 ++----------------------
 app/components/Section/Footer.vue   |  6 +--
 app/components/Section/Header.vue   |  2 +-
 app/components/Section/Skills.vue   |  2 +-
 app/components/Spoiler.vue          |  9 ++---
 content.config.ts                   |  8 ++++
 content/snippets/faq/booking.md     | 58 +++++++++++++++++++++++++++++
 content/snippets/faq/flatrate.md    | 53 ++++++++++++++++++++++++++
 14 files changed, 151 insertions(+), 96 deletions(-)
 create mode 100644 content/snippets/faq/booking.md
 create mode 100644 content/snippets/faq/flatrate.md

diff --git a/app/assets/css/global.css b/app/assets/css/global.css
index 75cc7d6..da566fa 100755
--- a/app/assets/css/global.css
+++ b/app/assets/css/global.css
@@ -123,6 +123,10 @@ a.mail {
 }
 
 ul {
+    list-style-position: inside;
+}
+
+ul.row {
     list-style: none;
     display: flex;
 }
diff --git a/app/assets/css/spoiler.css b/app/assets/css/spoiler.css
index d94b8de..c4dc1a0 100644
--- a/app/assets/css/spoiler.css
+++ b/app/assets/css/spoiler.css
@@ -1,6 +1,5 @@
 .Spoiler {
     background: var(--color-black);
-    padding: 1rem 2rem;
     border-radius: 20px;
 
     & .icon {
@@ -17,13 +16,20 @@
         align-items: center;
         gap: 1rem;
         font-weight: bold;
+        padding: 1rem 2rem;
+        border-radius: 20px;
+        transition: 150ms ease-in-out;
+
+        &:hover {
+            background: rgba(0, 0, 0, .3);
+        }
     }
 
     & > div {
-        margin-top: 1rem;
         display: flex;
         flex-direction: column;
         gap: 1rem;
+        padding: 1rem 2rem;
     }
 }
 
diff --git a/app/components/Burger.vue b/app/components/Burger.vue
index a298c52..fa3acf3 100644
--- a/app/components/Burger.vue
+++ b/app/components/Burger.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="Burger" :class="{ open }">
     <nav class="z-4" ref="navElement">
-      <ul>
+      <ul class="row">
         <li v-for="({label, to, aria, icon}) in navigation" :key="label">
           <NuxtLink :to="to" :aria-label="aria" active-class="active" class="inline-flex-row big-gap" @click="close">
             <Icon :name="icon" mode="svg" />
diff --git a/app/components/Project.vue b/app/components/Project.vue
index 9427db6..70913b3 100644
--- a/app/components/Project.vue
+++ b/app/components/Project.vue
@@ -7,7 +7,7 @@
       <main>
         <small class="customer">{{ company }}</small>
         <h3 class="title">{{ title }}</h3>
-        <ul>
+        <ul class="row">
           <li v-for="skill in tech">
             <Technology v-bind="skill" link="" />
           </li>
diff --git a/app/components/Section/Booking.vue b/app/components/Section/Booking.vue
index 32be3a2..e952459 100755
--- a/app/components/Section/Booking.vue
+++ b/app/components/Section/Booking.vue
@@ -43,8 +43,8 @@
       </article>
     </div>
 
-    <div class="flex-col gap-sm margin-top">
-      <Spoiler v-for="entry in faq" v-bind="entry" class="z-2" />
+    <div v-if="faq" class="flex-col gap-sm margin-top">
+      <ContentRenderer :value="faq" :style="{ display: 'contents' }" />
     </div>
   </section>
 </template>
@@ -71,7 +71,8 @@ const intl = new Intl.NumberFormat(
       currency: 'EUR',
       minimumFractionDigits: 0,
       maximumFractionDigits: 0,
-    })
+    }
+)
 
 const oneOff : Service[] = [
   {
@@ -128,36 +129,5 @@ 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.'
-    ]
-  }
-]
-
+const faq = await queryCollection('faq').path('/snippets/faq/booking').first()
 </script>
diff --git a/app/components/Section/Contact.vue b/app/components/Section/Contact.vue
index ee3aa66..56f51da 100644
--- a/app/components/Section/Contact.vue
+++ b/app/components/Section/Contact.vue
@@ -15,7 +15,7 @@
       <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 <Highlight>Fake</Highlight>.
         <br />Meld' dich gerne bei mir, wenn du so einen findest.
       </p>
-      <ul class="social-media">
+      <ul class="row 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" />
diff --git a/app/components/Section/Flatrate.vue b/app/components/Section/Flatrate.vue
index d264a1e..7b3e2ee 100755
--- a/app/components/Section/Flatrate.vue
+++ b/app/components/Section/Flatrate.vue
@@ -43,8 +43,8 @@
       </article>
     </div>
 
-    <div class="flex-col gap-sm margin-top">
-      <Spoiler v-for="entry in faq" v-bind="entry" class="z-2" />
+    <div v-if="faq" class="flex-col gap-sm margin-top">
+      <ContentRenderer :value="faq" :style="{ display: 'contents' }" />
     </div>
   </section>
 </template>
@@ -138,48 +138,5 @@ const flatrate : Service[] =
       }
     ]
 
-const faq = [
-  {
-    header: 'Was ist eine Entwickler-Flatrate?',
-    content: [
-      'Die Entwickler-Flatrate ist ein Angebot, bei dem du für eine bestimmte Zeit eine bestimmte Menge an Leistungen erhältst.',
-      'Sie wird auch oft als sogenannter "Retainer" bezeichnet und ist eine günstige Art immer wieder anfallende Aufgaben auszulagern.'
-    ]
-  },
-  {
-    header: 'Wie läuft die Zusammenarbeit ab?',
-    content: [
-      'Nach einer ersten Analyse deines Projekts legen wir gemeinsam den Umfang und die monatlichen Aufgaben fest. Du kannst mich je nach Paket auf den vereinbarten Wegen jederzeit kontaktieren.',
-      'Die Bearbeitung erfolgt innerhalb der vereinbarten Fristen.',
-    ]
-  },
-  {
-    header: 'Wie wird abgerechnet?',
-    content: [
-      'Du zahlst monatlich einen festen Betrag im Prepaid-Format unabhängig davon wie viele Aufgaben tatsächlich anfallen.',
-      'Dadurch kannst du dein Budget besser einplanen und Aufgaben verteilen.'
-    ]
-  },
-  {
-    header: 'Kann ich den Retainer jederzeit kündigen?',
-    content: [
-      'Ja klar. Du musst dabei nur die Mindestvertragslaufzeit beachten - die bezahlte Leistung steht dir weiterhin zu.',
-      'Falls wir merken, dass wir für eine Zusammenarbeit mehr als ungeeignet sind, bekommst du dein Geld anteilig der verbleibenden Zeit zurück und verlierst den Anspruch auf Leistungen ab diesem Zeitpunkt.'
-    ]
-  },
-  {
-    header: 'Was passiert, wenn ich dich mal weniger brauche?',
-    content: [
-      'Der monatliche feste Betrag bleibt bestehen. Ähnlich wie bei einer Versicherung bezahlst du hier für den Fall, dass du mich brauchst und erhältst dann entsprechend die vereinbarten Leistungen.',
-      'Wenn du merkst, dass du mich nicht mehr brauchst, dann kannst du den Vertrag jederzeit kündigen und die Leistungen auslaufen lassen.'
-    ]
-  },
-  {
-    header: 'Für wen lohnt sich sowas überhaupt?',
-    content: [
-      'Vor allem Unternehmen, bei denen immer wieder Aufgaben anfallen für die sich aber kein komplettes Projekt oder gar eine feste Stelle in der Firma lohnt, profitieren von dieser Art von Leistung.',
-      'Sie ist ideal für eine langfristige und zuverlässige Zusammenarbeit.'
-    ]
-  }
-]
+const faq = await queryCollection('faq').path('/snippets/faq/flatrate').first()
 </script>
diff --git a/app/components/Section/Footer.vue b/app/components/Section/Footer.vue
index b12d10b..4c71b98 100755
--- a/app/components/Section/Footer.vue
+++ b/app/components/Section/Footer.vue
@@ -1,18 +1,18 @@
 <template>
   <footer class="Footer flex-col gap-default">
-    <ul class="sitemap gap-default">
+    <ul class="row sitemap gap-default">
       <li v-for="{ label, ...rest} in nav" :key="label">
         <NuxtLink v-bind="rest">{{label}}</NuxtLink>
       </li>
     </ul>
-    <ul class="sitemap gap-default">
+    <ul class="row sitemap gap-default">
       <li v-for="({icon, ...rest}) in socials" :key="rest.href">
         <a v-bind="rest" target="_blank">
           <Icon :name="icon" :alt="rest['aria-label']" size="1.5em" mode="svg" />
         </a>
       </li>
     </ul>
-    <ul class="sitemap gap-default">
+    <ul class="row sitemap gap-default">
       <li class="tip-container">
         <Icon name="wf:cookie-slash" size="1.5rem" mode="svg" />
         <span class="tip">Ohne Cookies</span>
diff --git a/app/components/Section/Header.vue b/app/components/Section/Header.vue
index 11368db..725fc68 100755
--- a/app/components/Section/Header.vue
+++ b/app/components/Section/Header.vue
@@ -12,7 +12,7 @@
         <Icon name="ph:waves" mode="svg" size="2em" />
       </button>
       <nav>
-        <ul class="main-nav">
+        <ul class="row main-nav">
           <li v-for="({label, to, aria, icon}) in navigation" :key="label">
             <NuxtLink :to="to" :aria-label="aria" active-class="active" class="inline-flex-row big-gap">
               <Icon :name="icon" mode="svg" />
diff --git a/app/components/Section/Skills.vue b/app/components/Section/Skills.vue
index 3d61b24..9eb7736 100755
--- a/app/components/Section/Skills.vue
+++ b/app/components/Section/Skills.vue
@@ -9,7 +9,7 @@
     </div>
     <Card title="Technologien" titleTag="h3" class="margin-top tech-list">
       <p>Neben den klassischen Webentwicklungsstandards JavaScript, HTML und CSS biete ich außerdem folgende Technologien.</p>
-      <ul class="gap-default margin-top-small">
+      <ul class="row gap-default margin-top-small">
         <li v-for="tech in technologies">
           <Technology v-bind="tech" size="l"/>
         </li>
diff --git a/app/components/Spoiler.vue b/app/components/Spoiler.vue
index c064887..623fe06 100644
--- a/app/components/Spoiler.vue
+++ b/app/components/Spoiler.vue
@@ -1,16 +1,15 @@
 <template>
-  <details class="Spoiler" :open="open" @click="toggle">
-    <summary><Icon class="icon" :name="icon" mode="svg" />{{ header }}</summary>
+  <details class="Spoiler" :open="open">
+    <summary @click="toggle"><Icon class="icon" :name="icon" mode="svg" />{{ title }}</summary>
     <div>
-      <p v-for="text in content">{{ text }}</p>
+      <slot />
     </div>
   </details>
 </template>
 
 <script setup lang="ts">
 type Props = {
-  header: string
-  content: string[]
+  title: string
 }
 
 defineProps<Props>()
diff --git a/content.config.ts b/content.config.ts
index 9ea361f..fdf5bcf 100644
--- a/content.config.ts
+++ b/content.config.ts
@@ -18,6 +18,14 @@ export default defineContentConfig({
           position: z.string(),
         }),
       })
+    }),
+
+    faq: defineCollection({
+      type: 'page',
+      source: 'snippets/faq/*.md',
+      schema: z.object({
+        title: z.string(),
+      })
     })
   }
 })
\ No newline at end of file
diff --git a/content/snippets/faq/booking.md b/content/snippets/faq/booking.md
new file mode 100644
index 0000000..73039cb
--- /dev/null
+++ b/content/snippets/faq/booking.md
@@ -0,0 +1,58 @@
+::spoiler
+---
+title: "Warum machst du keine Stundensätze?"
+---
+Ich finde, Stundensätze haben für beide Seiten nur Nachteile:
+
+Wenn ich schnell und gut arbeite, 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 gar nicht erst kommen lassen.
+::
+
+::spoiler
+---
+title: "Was bekomme ich denn für die 999 €?"
+---
+Grundsätzlich kommt das natürlich immer darauf an, was du genau willst. Da spielen einige Faktoren eine Rolle.
+
+Ein Beispiel für eine 999 € Seite wäre:
+- Kein CMS
+- 2 Sections auf der Landingpage
+- Impressum, Datenschutzerklärung
+- Standarddesign
+
+Je nach dem was du willst, kann sich das aber auch anders zusammensetzen.
+::
+
+::spoiler
+---
+title: "Welche Themen bietest du für deine Schulungen an?"
+---
+<div>
+<Highlight>Sprachen</Highlight>
+<br />JavaScript, TypeScript, HTML, CSS
+</div>
+
+<div>
+<Highlight>Frameworks</Highlight>
+<br />Vue, Nuxt
+</div>
+::
+
+::spoiler
+---
+title: "Wo finden die Schulungen statt?"
+---
+Die Schulungen finden <Highlight>online/Highlight> 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.
+::
+
+::spoiler
+---
+title: "Ich hab ein cooles Projekt! Aber kein Geld …"
+---
+Tja.
+
+Ne, awas. Meld dich einfach trotzdem über meine E-Mail-Adresse und vielleicht finden wir eine Lösung.
+::
\ No newline at end of file
diff --git a/content/snippets/faq/flatrate.md b/content/snippets/faq/flatrate.md
new file mode 100644
index 0000000..adee048
--- /dev/null
+++ b/content/snippets/faq/flatrate.md
@@ -0,0 +1,53 @@
+::spoiler
+---
+title: "Was ist eine Entwickler-Flatrate?"
+---
+Die Entwickler-Flatrate ist ein Angebot, bei dem du für eine bestimmte Zeit eine bestimmte Menge an Leistungen erhältst.
+
+Sie wird auch oft als sogenannter "Retainer" bezeichnet und ist eine günstige Art, immer wieder anfallende Aufgaben auszulagern.
+::
+
+::spoiler
+---
+title: "Wie läuft die Zusammenarbeit ab?"
+---
+Nach einer ersten Analyse deines Projekts legen wir gemeinsam den Umfang und die monatlichen Aufgaben fest. Du kannst mich je nach Paket auf den vereinbarten Wegen jederzeit kontaktieren.
+
+Die Bearbeitung erfolgt innerhalb der vereinbarten Fristen.
+::
+
+::spoiler
+---
+title: "Wie wird abgerechnet?"
+---
+Du zahlst monatlich einen festen Betrag im Prepaid-Format unabhängig davon, wie viele Aufgaben tatsächlich anfallen.
+
+Dadurch kannst du dein Budget besser einplanen und Aufgaben verteilen.
+::
+
+::spoiler
+---
+title: "Kann ich den Retainer jederzeit kündigen?"
+---
+Ja klar. Du musst dabei nur die Mindestvertragslaufzeit beachten – die bezahlte Leistung steht dir weiterhin zu.
+
+Falls wir merken, dass wir für eine Zusammenarbeit mehr als ungeeignet sind, bekommst du dein Geld anteilig der verbleibenden Zeit zurück und verlierst den Anspruch auf Leistungen ab diesem Zeitpunkt.
+::
+
+::spoiler
+---
+title: "Was passiert, wenn ich dich mal weniger brauche?"
+---
+Der monatliche feste Betrag bleibt bestehen. Ähnlich wie bei einer Versicherung bezahlst du hier für den Fall, dass du mich brauchst, und erhältst dann entsprechend die vereinbarten Leistungen.
+
+Wenn du merkst, dass du mich nicht mehr brauchst, dann kannst du den Vertrag jederzeit kündigen und die Leistungen auslaufen lassen.
+::
+
+::spoiler
+---
+title: "Für wen lohnt sich sowas überhaupt?"
+---
+Vor allem Unternehmen, bei denen immer wieder Aufgaben anfallen, für die sich aber kein komplettes Projekt oder gar eine feste Stelle in der Firma lohnt, profitieren von dieser Art von Leistung.
+
+Sie ist ideal für eine langfristige und zuverlässige Zusammenarbeit.
+::
\ No newline at end of file

From bb77bb6a5bbe6e37a5aa95eed9418134a42a609c Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Wed, 11 Jun 2025 07:00:25 +0200
Subject: [PATCH 04/10] fix: Typo fixes

Fixed typos and texts
---
 content/snippets/faq/booking.md | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/content/snippets/faq/booking.md b/content/snippets/faq/booking.md
index 73039cb..a0d5180 100644
--- a/content/snippets/faq/booking.md
+++ b/content/snippets/faq/booking.md
@@ -15,13 +15,20 @@ title: "Was bekomme ich denn für die 999 €?"
 ---
 Grundsätzlich kommt das natürlich immer darauf an, was du genau willst. Da spielen einige Faktoren eine Rolle.
 
-Ein Beispiel für eine 999 € Seite wäre:
+**Ein Beispiel für eine 999 € Seite wäre**
+
+---
 - Kein CMS
-- 2 Sections auf der Landingpage
+- Eine Section auf der Landingpage
 - Impressum, Datenschutzerklärung
 - Standarddesign
+---
 
-Je nach dem was du willst, kann sich das aber auch anders zusammensetzen.
+Je nachdem was du willst, kann sich das aber auch anders zusammensetzen.  
+Zu Beachten ist, dass es sich hier um reines HTML und CSS handelt. Keine Fancy Daten aus einem Backend, keine 3D-Animationen.  
+Große und gute Websites werden normalerweise über einen längeren Zeitraum entwickelt und kosten entsprechend auch mehr.
+
+Bei diesem Startangebot handelt es sich also einfach nur um eine kleine Online-Visitenkarte.
 ::
 
 ::spoiler
@@ -43,7 +50,7 @@ title: "Welche Themen bietest du für deine Schulungen an?"
 ---
 title: "Wo finden die Schulungen statt?"
 ---
-Die Schulungen finden <Highlight>online/Highlight> 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.
+Die Schulungen finden <Highlight>online</Highlight> 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.
 ::

From a86b89dc980c8b200501e425609988e2f01fb822 Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Wed, 11 Jun 2025 08:54:32 +0200
Subject: [PATCH 05/10] add: extract plain faq

Add Schema Org for FAQ
---
 app/components/Section/Booking.vue | 18 +++++++++++++++++-
 app/components/Spoiler.vue         |  3 ++-
 app/composables/faq.ts             | 20 ++++++++++++++++++++
 content.config.ts                  | 10 +---------
 package-lock.json                  |  1 -
 5 files changed, 40 insertions(+), 12 deletions(-)
 create mode 100644 app/composables/faq.ts

diff --git a/app/components/Section/Booking.vue b/app/components/Section/Booking.vue
index e952459..f557b91 100755
--- a/app/components/Section/Booking.vue
+++ b/app/components/Section/Booking.vue
@@ -129,5 +129,21 @@ const oneOff : Service[] = [
   },
 ]
 
-const faq = await queryCollection('faq').path('/snippets/faq/booking').first()
+const { data: faq } = await useAsyncData('faq', () => queryCollection('faq').path('/snippets/faq/booking').first())
+const texts = usePlainFaq(faq.value?.body.value)
+
+if (faq) {
+  useSchemaOrg({
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    'mainEntity': texts.map(entity => ({
+      '@type': 'Question',
+      'name': entity.question,
+      'acceptedAnswer': {
+        '@type': 'Answer',
+        'text': entity.answer,
+      },
+    }))
+  })
+}
 </script>
diff --git a/app/components/Spoiler.vue b/app/components/Spoiler.vue
index 623fe06..b136408 100644
--- a/app/components/Spoiler.vue
+++ b/app/components/Spoiler.vue
@@ -10,9 +10,10 @@
 <script setup lang="ts">
 type Props = {
   title: string
+  answer ?: string
 }
 
-defineProps<Props>()
+const { title, answer = '' } = defineProps<Props>()
 
 const open = ref(false)
 const toggle = (event : MouseEvent) => {
diff --git a/app/composables/faq.ts b/app/composables/faq.ts
new file mode 100644
index 0000000..c8ce67c
--- /dev/null
+++ b/app/composables/faq.ts
@@ -0,0 +1,20 @@
+import type { MinimalElement, MinimalNode } from '@nuxt/content'
+
+const extractText = (element ?: MinimalNode) : string => {
+  if (!element) return ''
+  if (typeof element === 'string') return element
+  const [,, ...nodes] = element
+  return nodes?.map((el : MinimalNode) => typeof el === 'string' ? el : extractText(el)).join(' ') ?? ''
+}
+
+export const usePlainFaq = (body ?: MinimalNode[]) => {
+  if (!body) return []
+  return body.map(part => {
+    const [, meta] = part as MinimalElement
+    return {
+      question: meta.title,
+      answer: extractText(part).replace(/\n/g, ' ')
+    }
+  })
+}
+
diff --git a/content.config.ts b/content.config.ts
index fdf5bcf..bcb3581 100644
--- a/content.config.ts
+++ b/content.config.ts
@@ -10,21 +10,13 @@ export default defineContentConfig({
     skills: defineCollection({
       type: 'page',
       source: 'snippets/skills/*.md',
-      schema: z.object({
-        title: z.string(),
-        img: z.object({
-          path: z.string(),
-          name: z.string(),
-          position: z.string(),
-        }),
-      })
     }),
 
     faq: defineCollection({
       type: 'page',
       source: 'snippets/faq/*.md',
       schema: z.object({
-        title: z.string(),
+        rawbody: z.string(),
       })
     })
   }
diff --git a/package-lock.json b/package-lock.json
index b36d5f2..35806ca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3723,7 +3723,6 @@
     },
     "node_modules/@parcel/watcher-wasm/node_modules/napi-wasm": {
       "version": "1.1.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT"
     },

From ca3868299c21e686f8adfeb68d45819e14a8971c Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Wed, 11 Jun 2025 14:14:49 +0200
Subject: [PATCH 06/10] add: extract plain faq

Add Schema Org for FAQ in Flatrate
---
 app/components/Section/Flatrate.vue | 18 +++++++++++++++++-
 app/utils/socials.ts                | 12 ++++++------
 content/snippets/faq/booking.md     |  2 ++
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/app/components/Section/Flatrate.vue b/app/components/Section/Flatrate.vue
index 7b3e2ee..4c74a38 100755
--- a/app/components/Section/Flatrate.vue
+++ b/app/components/Section/Flatrate.vue
@@ -138,5 +138,21 @@ const flatrate : Service[] =
       }
     ]
 
-const faq = await queryCollection('faq').path('/snippets/faq/flatrate').first()
+const { data : faq } = await useAsyncData('faq', () => queryCollection('faq').path('/snippets/faq/flatrate').first())
+const texts = usePlainFaq(faq.value?.body.value)
+
+if (faq) {
+  useSchemaOrg({
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    'mainEntity': texts.map(entity => ({
+      '@type': 'Question',
+      'name': entity.question,
+      'acceptedAnswer': {
+        '@type': 'Answer',
+        'text': entity.answer,
+      },
+    }))
+  })
+}
 </script>
diff --git a/app/utils/socials.ts b/app/utils/socials.ts
index 8c5eb5e..8178280 100644
--- a/app/utils/socials.ts
+++ b/app/utils/socials.ts
@@ -18,12 +18,12 @@ export const socials = [
     name: '@webfussel.de',
     'aria-label': 'Externer Link: Bluesky Profil'
   },
-  {
-    href: 'https://twitch.tv/webfussel',
-    icon: 'ph:twitch-logo-duotone',
-    name: 'webfussel',
-    'aria-label': 'Externer Link: Twitch Kanal'
-  },
+  // {
+  //   href: 'https://twitch.tv/webfussel',
+  //   icon: 'ph:twitch-logo-duotone',
+  //   name: 'webfussel',
+  //   'aria-label': 'Externer Link: Twitch Kanal'
+  // },
   {
     href: 'https://ko-fi.com/webfussel',
     icon: 'wf:kofi',
diff --git a/content/snippets/faq/booking.md b/content/snippets/faq/booking.md
index a0d5180..72baf1c 100644
--- a/content/snippets/faq/booking.md
+++ b/content/snippets/faq/booking.md
@@ -62,4 +62,6 @@ title: "Ich hab ein cooles Projekt! Aber kein Geld …"
 Tja.
 
 Ne, awas. Meld dich einfach trotzdem über meine E-Mail-Adresse und vielleicht finden wir eine Lösung.
+
+Du findest weitere Kontaktmöglichkeiten auf meiner [Kontakt-Seite <IconLinkInternal />](contact/){class="text inline-flex-row"}.
 ::
\ No newline at end of file

From fa0435efdf9e7eb42bae254d1dc5fc193d9bc635 Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Wed, 11 Jun 2025 18:49:19 +0200
Subject: [PATCH 07/10] add: more SEO meta

More seometa, better markdown parser
---
 app/app.vue                                   |  2 --
 app/components/Section/Booking.vue            |  6 +++---
 app/components/Section/Flatrate.vue           |  6 +++---
 app/pages/booking.vue                         |  7 +++++++
 app/pages/contact.vue                         |  7 +++++++
 app/pages/flatrate.vue                        |  7 +++++++
 app/pages/index.vue                           |  5 +++++
 app/pages/references.vue                      |  9 ++++++++-
 app/{composables/faq.ts => utils/markdown.ts} | 15 +++++++++++----
 content/snippets/faq/booking.md               |  2 +-
 10 files changed, 52 insertions(+), 14 deletions(-)
 rename app/{composables/faq.ts => utils/markdown.ts} (52%)

diff --git a/app/app.vue b/app/app.vue
index 52b2164..c876d24 100755
--- a/app/app.vue
+++ b/app/app.vue
@@ -8,8 +8,6 @@
 
 <script setup>
 useSeoMeta({
-  title: 'Home',
-  description: 'Headless CMS, Components & APIs by Fiona Urban. Storyblok, FirstSpirit, Nuxt.',
   author: 'webfussel',
   robots: 'index, follow',
   themeColor: '#2a2723',
diff --git a/app/components/Section/Booking.vue b/app/components/Section/Booking.vue
index f557b91..b88eed5 100755
--- a/app/components/Section/Booking.vue
+++ b/app/components/Section/Booking.vue
@@ -130,7 +130,7 @@ const oneOff : Service[] = [
 ]
 
 const { data: faq } = await useAsyncData('faq', () => queryCollection('faq').path('/snippets/faq/booking').first())
-const texts = usePlainFaq(faq.value?.body.value)
+const texts = generatePlainText<['title']>(faq.value?.body.value)
 
 if (faq) {
   useSchemaOrg({
@@ -138,10 +138,10 @@ if (faq) {
     '@type': 'FAQPage',
     'mainEntity': texts.map(entity => ({
       '@type': 'Question',
-      'name': entity.question,
+      'name': entity.meta.title,
       'acceptedAnswer': {
         '@type': 'Answer',
-        'text': entity.answer,
+        'text': entity.text,
       },
     }))
   })
diff --git a/app/components/Section/Flatrate.vue b/app/components/Section/Flatrate.vue
index 4c74a38..f6ce7ac 100755
--- a/app/components/Section/Flatrate.vue
+++ b/app/components/Section/Flatrate.vue
@@ -139,7 +139,7 @@ const flatrate : Service[] =
     ]
 
 const { data : faq } = await useAsyncData('faq', () => queryCollection('faq').path('/snippets/faq/flatrate').first())
-const texts = usePlainFaq(faq.value?.body.value)
+const texts = generatePlainText<['title']>(faq.value?.body.value)
 
 if (faq) {
   useSchemaOrg({
@@ -147,10 +147,10 @@ if (faq) {
     '@type': 'FAQPage',
     'mainEntity': texts.map(entity => ({
       '@type': 'Question',
-      'name': entity.question,
+      'name': entity.meta.title,
       'acceptedAnswer': {
         '@type': 'Answer',
-        'text': entity.answer,
+        'text': entity.text,
       },
     }))
   })
diff --git a/app/pages/booking.vue b/app/pages/booking.vue
index 8c934a0..72af40a 100755
--- a/app/pages/booking.vue
+++ b/app/pages/booking.vue
@@ -3,3 +3,10 @@
     <SectionBooking />
   </div>
 </template>
+
+<script lang="ts" setup>
+useSeoMeta({
+  title: 'Projektbuchung',
+  description: 'Buche jetzt dein Projekt auf webfussel. Du brauchst eine Schulung in JavaScript, Typescript, HTML, CSS, Vue oder Nuxt? Kein Problem.',
+})
+</script>
diff --git a/app/pages/contact.vue b/app/pages/contact.vue
index a19ef5d..867bfbf 100755
--- a/app/pages/contact.vue
+++ b/app/pages/contact.vue
@@ -3,3 +3,10 @@
     <SectionContact />
   </div>
 </template>
+
+<script lang="ts" setup>
+useSeoMeta({
+  title: 'Kontakt',
+  description: 'Nimm Kontakt zu webfussel auf. Egal ob über E-Mail oder Social Media - ich freue mich auf deine Nachricht.',
+})
+</script>
\ No newline at end of file
diff --git a/app/pages/flatrate.vue b/app/pages/flatrate.vue
index c1c2191..1eb8f68 100755
--- a/app/pages/flatrate.vue
+++ b/app/pages/flatrate.vue
@@ -3,3 +3,10 @@
     <SectionFlatrate />
   </div>
 </template>
+
+<script lang="ts" setup>
+useSeoMeta({
+  title: 'Flatrate',
+  description: 'Buche webfussel ganz einfach für eine zugesicherte Anzahl Stunden pro Woche. Wenn immer mal wieder was anfällt - vertrau auf Fusselqualität.',
+})
+</script>
\ No newline at end of file
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 206f51b..72ab00e 100755
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -14,4 +14,9 @@ useHead({
     { rel: 'icon', href: '/favicon.ico', type: 'image/x-icon' },
   ],
 })
+
+useSeoMeta({
+  title: 'Home',
+  description: 'Webprojekte und Retainer mit Fusselqualität. Du brauchst eine Website mit CMS? Bock auf Flatrate? webfussel by Fiona Urban',
+})
 </script>
\ No newline at end of file
diff --git a/app/pages/references.vue b/app/pages/references.vue
index e586151..3b724af 100755
--- a/app/pages/references.vue
+++ b/app/pages/references.vue
@@ -2,4 +2,11 @@
   <div>
     <SectionCustomers />
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<script lang="ts" setup>
+useSeoMeta({
+  title: 'Referenzen',
+  description: 'Schau dir dir Projekte von webfussel an. Über persönliche Webseiten, über Schulungen bis hin zu API Projekten.',
+})
+</script>
\ No newline at end of file
diff --git a/app/composables/faq.ts b/app/utils/markdown.ts
similarity index 52%
rename from app/composables/faq.ts
rename to app/utils/markdown.ts
index c8ce67c..adeaec8 100644
--- a/app/composables/faq.ts
+++ b/app/utils/markdown.ts
@@ -1,5 +1,12 @@
 import type { MinimalElement, MinimalNode } from '@nuxt/content'
 
+type TypedRecord<T extends readonly string[]> = Record<T[number], string>
+
+type PlainText<T extends string[]> = {
+  meta: TypedRecord<T>
+  text: string
+}
+
 const extractText = (element ?: MinimalNode) : string => {
   if (!element) return ''
   if (typeof element === 'string') return element
@@ -7,13 +14,13 @@ const extractText = (element ?: MinimalNode) : string => {
   return nodes?.map((el : MinimalNode) => typeof el === 'string' ? el : extractText(el)).join(' ') ?? ''
 }
 
-export const usePlainFaq = (body ?: MinimalNode[]) => {
+export const generatePlainText = <T extends string[] = []>(body ?: MinimalNode[]) : PlainText<T>[] => {
   if (!body) return []
-  return body.map(part => {
+  return body.map<PlainText<T>>(part => {
     const [, meta] = part as MinimalElement
     return {
-      question: meta.title,
-      answer: extractText(part).replace(/\n/g, ' ')
+      meta : meta as TypedRecord<T>,
+      text: extractText(part).replace(/\n/g, ' ')
     }
   })
 }
diff --git a/content/snippets/faq/booking.md b/content/snippets/faq/booking.md
index 72baf1c..2af58b4 100644
--- a/content/snippets/faq/booking.md
+++ b/content/snippets/faq/booking.md
@@ -63,5 +63,5 @@ Tja.
 
 Ne, awas. Meld dich einfach trotzdem über meine E-Mail-Adresse und vielleicht finden wir eine Lösung.
 
-Du findest weitere Kontaktmöglichkeiten auf meiner [Kontakt-Seite <IconLinkInternal />](contact/){class="text inline-flex-row"}.
+Du findest weitere Kontaktmöglichkeiten auf meiner [Kontakt-Seite <IconLinkInternal />](/contact/){class="text inline-flex-row"}.
 ::
\ No newline at end of file

From cffb719a056b85680b7b3a31764d80dafb87eae6 Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Thu, 10 Jul 2025 10:05:08 +0200
Subject: [PATCH 08/10] fix: caching of FAQ

Fix wrong caching of FAQs for correct generation
---
 app/components/Section/Booking.vue  |  57 +++++-----
 app/components/Section/Flatrate.vue | 155 +++++++++++++++-------------
 2 files changed, 117 insertions(+), 95 deletions(-)

diff --git a/app/components/Section/Booking.vue b/app/components/Section/Booking.vue
index b88eed5..ca9d9fa 100755
--- a/app/components/Section/Booking.vue
+++ b/app/components/Section/Booking.vue
@@ -1,33 +1,44 @@
 <template>
   <section id="services" class="Services content">
     <h1>Projekt buchen</h1>
-    <h2>Paketpreise für <Highlight>feste Ergebnisse</Highlight>.</h2>
+    <h2>Paketpreise für
+      <Highlight>feste Ergebnisse</Highlight>
+      .
+    </h2>
     <p class="margin-top">Manchmal brauchen wir alle einfach nur eine Kleinigkeit und wollen uns nicht lange binden. Das ist natürlich
-      völlig in Ordnung und genau deshalb biete ich dir die Möglichkeit mich gezielt für <Highlight>kleinere Projekte</Highlight> zu buchen.</p>
-    <p class="margin-top-small">Hinter diesen Angeboten gibt es <Highlight>keinerlei Abos oder versteckte Kosten</Highlight>.
-      Aus Transparenzgründen sei aber gesagt, dass sich <Highlight>alle Preise zzgl. 19 % Umsatzsteuer</Highlight> verstehen.</p>
+      völlig in Ordnung und genau deshalb biete ich dir die Möglichkeit mich gezielt für
+      <Highlight>kleinere Projekte</Highlight>
+      zu buchen.
+    </p>
+    <p class="margin-top-small">Hinter diesen Angeboten gibt es
+      <Highlight>keinerlei Abos oder versteckte Kosten</Highlight>
+      .
+      Aus Transparenzgründen sei aber gesagt, dass sich
+      <Highlight>alle Preise zzgl. 19 % Umsatzsteuer</Highlight>
+      verstehen.
+    </p>
 
-    <FreeInfo />
+    <FreeInfo/>
 
     <div class="Pricing margin-top">
       <article v-for="(service, index) in oneOff" :class="{ 'z-3-all': index === 1, 'z-2-all': index !== 1}">
         <header>
-          <strong>{{service.title}}</strong>
-          <p class="claim">{{service.smallClaim}}</p>
+          <strong>{{ service.title }}</strong>
+          <p class="claim">{{ service.smallClaim }}</p>
           <div class="price">
-            <span v-if="service.price.pre">{{service.price.pre}}</span>
-            <span>{{typeof service.price.value === 'number' ? intl.format(service.price.value) : service.price.value}}</span>
-            <span v-if="service.price.post" class="post">{{service.price.post}}</span>
+            <span v-if="service.price.pre">{{ service.price.pre }}</span>
+            <span>{{ typeof service.price.value === 'number' ? intl.format(service.price.value) : service.price.value }}</span>
+            <span v-if="service.price.post" class="post">{{ service.price.post }}</span>
           </div>
           <div aria-hidden="true" class="bg-icon">
-            <Icon :name="service.icon" size="1.5em" mode="svg" />
+            <Icon :name="service.icon" size="1.5em" mode="svg"/>
           </div>
         </header>
         <main>
           <div class="list-container">
             <ul>
               <li v-for="point in service.list">
-                <Icon class="icon yes" name="ph:caret-circle-double-right-duotone" size="1.5em" mode="svg" />
+                <Icon class="icon yes" name="ph:caret-circle-double-right-duotone" size="1.5em" mode="svg"/>
                 <span class="label">{{ point }}</span>
               </li>
             </ul>
@@ -44,7 +55,7 @@
     </div>
 
     <div v-if="faq" class="flex-col gap-sm margin-top">
-      <ContentRenderer :value="faq" :style="{ display: 'contents' }" />
+      <ContentRenderer :value="faq" :style="{ display: 'contents' }"/>
     </div>
   </section>
 </template>
@@ -65,16 +76,16 @@ type Service = {
 }
 
 const intl = new Intl.NumberFormat(
-    'de-DE',
-    {
-      style: 'currency',
-      currency: 'EUR',
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0,
-    }
+  'de-DE',
+  {
+    style: 'currency',
+    currency: 'EUR',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  },
 )
 
-const oneOff : Service[] = [
+const oneOff: Service[] = [
   {
     title: 'Quick Check',
     price: {
@@ -129,7 +140,7 @@ const oneOff : Service[] = [
   },
 ]
 
-const { data: faq } = await useAsyncData('faq', () => queryCollection('faq').path('/snippets/faq/booking').first())
+const { data: faq } = await useAsyncData('faq_booking', () => queryCollection('faq').path('/snippets/faq/booking').first())
 const texts = generatePlainText<['title']>(faq.value?.body.value)
 
 if (faq) {
@@ -143,7 +154,7 @@ if (faq) {
         '@type': 'Answer',
         'text': entity.text,
       },
-    }))
+    })),
   })
 }
 </script>
diff --git a/app/components/Section/Flatrate.vue b/app/components/Section/Flatrate.vue
index f6ce7ac..93f2905 100755
--- a/app/components/Section/Flatrate.vue
+++ b/app/components/Section/Flatrate.vue
@@ -1,33 +1,44 @@
 <template>
   <section id="services" class="Services content">
     <h1>Prepaid Flatrates</h1>
-    <h2>Genieße fusselige <Highlight>Qualität</Highlight> ohne groß herumzurechnen.</h2>
+    <h2>Genieße fusselige
+      <Highlight>Qualität</Highlight>
+      ohne groß herumzurechnen.
+    </h2>
 
-    <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 <Highlight>Entwickler-Flat</Highlight> für planbare Kosten und On-Demand-Entwicklung.</p>
-    <p class="margin-top-small">Aus Transparenzgründen sei gesagt, dass sich <Highlight>alle Preise zzgl. 19 % Umsatzsteuer</Highlight> verstehen.</p>
+    <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
+      <Highlight>Entwickler-Flat</Highlight>
+      für planbare Kosten und On-Demand-Entwicklung.
+    </p>
+    <p class="margin-top-small">Aus Transparenzgründen sei gesagt, dass sich
+      <Highlight>alle Preise zzgl. 19 % Umsatzsteuer</Highlight>
+      verstehen.
+    </p>
 
-    <FreeInfo />
+    <FreeInfo/>
 
     <div class="Pricing margin-top">
       <article v-for="(service, index) in flatrate" :class=" { 'z-2' : index === 1, 'z-1' : index !== 1 }">
         <header>
           <span v-if="service.best" class="chip dark z-2"><Icon name="ph:fire-duotone" mode="svg"/> Beschd</span>
-          <strong class="margin-top-small">{{service.title}}</strong>
-          <p class="claim">{{service.smallClaim}}</p>
-          <p class="price">{{intl.format(service.price)}}<span class="post">/ Monat</span></p>
+          <strong class="margin-top-small">{{ service.title }}</strong>
+          <p class="claim">{{ service.smallClaim }}</p>
+          <p class="price">{{ intl.format(service.price) }}<span class="post">/ Monat</span></p>
           <div aria-hidden="true" class="bg-icon">
-            <Icon :name="service.icon" size="1.5em" mode="svg" />
+            <Icon :name="service.icon" size="1.5em" mode="svg"/>
           </div>
         </header>
         <main>
           <ul>
             <li>
-              <Icon class="icon yes" name="ph:check-circle-duotone" mode="svg" />
+              <Icon class="icon yes" name="ph:check-circle-duotone" mode="svg"/>
               <span class="value">{{ service.hours }} Stunden pro Woche zugesichert</span>
             </li>
             <li v-for="(check, index) in service.checks">
-              <Icon class="icon" :class="{ 'yes' : check, 'no' : !check }" :name="check ? 'ph:check-circle-duotone' : 'ph:x-circle-duotone'" mode="svg" />
+              <Icon class="icon" :class="{ 'yes' : check, 'no' : !check }" :name="check ? 'ph:check-circle-duotone' : 'ph:x-circle-duotone'"
+                    mode="svg"/>
               <span class="value">{{ points[index] }}</span>
             </li>
           </ul>
@@ -44,7 +55,7 @@
     </div>
 
     <div v-if="faq" class="flex-col gap-sm margin-top">
-      <ContentRenderer :value="faq" :style="{ display: 'contents' }" />
+      <ContentRenderer :value="faq" :style="{ display: 'contents' }"/>
     </div>
   </section>
 </template>
@@ -72,7 +83,7 @@ const intl = new Intl.NumberFormat(
     maximumFractionDigits: 0,
   })
 
-const points : string[] = [
+const points: string[] = [
   'Kontakt per E-Mail',
   'Kontakt per Instant Messaging',
   'Kontakt per Video Call',
@@ -80,65 +91,65 @@ const points : string[] = [
   'Framework Migration',
 ]
 
-const flatrate : Service[] =
-    [
-      {
-        title: 'Casual',
-        smallClaim: 'Für kleine Aufgaben nebenbei.',
-        icon: 'ph:baby-carriage-thin',
-        button: 'Jetzt klar machen',
-        link: 'https://tidycal.com/webfussel/flatrate-casual',
-        best: false,
-        price: 2950,
-        hours: 5,
-        contractMin: 3,
-        checks: [
-          true,
-          false,
-          false,
-          false,
-          false,
-        ],
-      },
-      {
-        title: 'Gold-Fussel',
-        smallClaim: 'Wenn\'s mal wieder zu viel wird.',
-        icon: 'ph:coins-thin',
-        button: 'Jetzt Gold schürfen',
-        link: 'https://tidycal.com/webfussel/flatrate-gold-fussel',
-        best: true,
-        price: 5555,
-        hours: 10,
-        contractMin: 3,
-        checks: [
-          true,
-          true,
-          false,
-          true,
-          false,
-        ],
-      },
-      {
-        title: 'Big Chonker',
-        smallClaim: 'Für die richtig großen Sachen.',
-        icon: 'ph:skull-thin',
-        button: 'Jetzt Fett trimmen',
-        link: 'https://tidycal.com/webfussel/flatrate-big-chonker',
-        best: false,
-        price: 8550,
-        hours: 15,
-        contractMin: 6,
-        checks: [
-          true,
-          true,
-          true,
-          true,
-          true,
-        ],
-      }
-    ]
+const flatrate: Service[] =
+  [
+    {
+      title: 'Casual',
+      smallClaim: 'Für kleine Aufgaben nebenbei.',
+      icon: 'ph:baby-carriage-thin',
+      button: 'Jetzt klar machen',
+      link: 'https://tidycal.com/webfussel/flatrate-casual',
+      best: false,
+      price: 2950,
+      hours: 5,
+      contractMin: 3,
+      checks: [
+        true,
+        false,
+        false,
+        false,
+        false,
+      ],
+    },
+    {
+      title: 'Gold-Fussel',
+      smallClaim: 'Wenn\'s mal wieder zu viel wird.',
+      icon: 'ph:coins-thin',
+      button: 'Jetzt Gold schürfen',
+      link: 'https://tidycal.com/webfussel/flatrate-gold-fussel',
+      best: true,
+      price: 5555,
+      hours: 10,
+      contractMin: 3,
+      checks: [
+        true,
+        true,
+        false,
+        true,
+        false,
+      ],
+    },
+    {
+      title: 'Big Chonker',
+      smallClaim: 'Für die richtig großen Sachen.',
+      icon: 'ph:skull-thin',
+      button: 'Jetzt Fett trimmen',
+      link: 'https://tidycal.com/webfussel/flatrate-big-chonker',
+      best: false,
+      price: 8550,
+      hours: 15,
+      contractMin: 6,
+      checks: [
+        true,
+        true,
+        true,
+        true,
+        true,
+      ],
+    },
+  ]
 
-const { data : faq } = await useAsyncData('faq', () => queryCollection('faq').path('/snippets/faq/flatrate').first())
+const { data: faq } = await useAsyncData('faq_flatrate', () => queryCollection('faq').path('/snippets/faq/flatrate').first())
 const texts = generatePlainText<['title']>(faq.value?.body.value)
 
 if (faq) {
@@ -152,7 +163,7 @@ if (faq) {
         '@type': 'Answer',
         'text': entity.text,
       },
-    }))
+    })),
   })
 }
 </script>

From 9d691974ce36b4466b4c010cafc6f44f9fadbdb0 Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Fri, 11 Jul 2025 09:13:35 +0200
Subject: [PATCH 09/10] add: Orell

Add images for Orell
---
 public/img/network/orell@1x.webp | Bin 0 -> 2116 bytes
 public/img/network/orell@2x.webp | Bin 0 -> 5042 bytes
 public/img/network/orell@3x.webp | Bin 0 -> 8614 bytes
 3 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 public/img/network/orell@1x.webp
 create mode 100644 public/img/network/orell@2x.webp
 create mode 100644 public/img/network/orell@3x.webp

diff --git a/public/img/network/orell@1x.webp b/public/img/network/orell@1x.webp
new file mode 100644
index 0000000000000000000000000000000000000000..e47f07fe12e822cb6f19836cff2428a97f294300
GIT binary patch
literal 2116
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

literal 0
HcmV?d00001

diff --git a/public/img/network/orell@2x.webp b/public/img/network/orell@2x.webp
new file mode 100644
index 0000000000000000000000000000000000000000..24257263ceb95ad04eee9ac10fc99ec3b2f1ebb1
GIT binary patch
literal 5042
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
ISIUq80Kh4)Z~y=R

literal 0
HcmV?d00001

diff --git a/public/img/network/orell@3x.webp b/public/img/network/orell@3x.webp
new file mode 100644
index 0000000000000000000000000000000000000000..c011a41cc4f6e7cbcd3487f8807ed0822cf2f38b
GIT binary patch
literal 8614
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

literal 0
HcmV?d00001


From 2c42f24d0f523868d13e669d79fdb2bf8d181193 Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Tue, 15 Jul 2025 08:19:19 +0200
Subject: [PATCH 10/10] add: blog

blog post
---
 docker-compose.yaml | 47 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 docker-compose.yaml

diff --git a/docker-compose.yaml b/docker-compose.yaml
new file mode 100644
index 0000000..7578ab9
--- /dev/null
+++ b/docker-compose.yaml
@@ -0,0 +1,47 @@
+version: '3'
+
+services:
+  wf4:
+    image: oven/bun:latest
+    container_name: wf4
+    working_dir: /app
+    ports:
+      - "1337:3000"
+    volumes:
+      - wf4_data:/app
+    environment:
+      - NODE_ENV=production
+    command: >
+      sh -c "
+        # Install git and curl if not already installed
+        if ! command -v git &> /dev/null || ! command -v curl &> /dev/null; then
+          echo 'Installing required packages...'
+          apt-get update && apt-get install -y git curl
+        fi &&
+
+        # Clone repository if not already cloned
+        if [ ! -d /app/.git ]; then
+          echo 'Cloning repository...'
+          git clone https://git.webfussel.de/webfussel/wf4 /tmp/wf4 &&
+          cp -r /tmp/wf4/. /app/ &&
+          rm -rf /tmp/wf4
+        fi &&
+
+        # Install dependencies and start application
+        echo 'Installing dependencies...' &&
+        bun install &&
+        echo 'Building application...' &&
+        bun run build &&
+        echo 'Starting application...' &&
+        bun .output/server/index.mjs
+      "
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:1337"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+
+volumes:
+  wf4_data: