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] 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