wf4/app/components/SkillsEasy.vue

<template>
  <section id="skills_easy" class="Skills content">
    <h2>Jetzt mal ganz konkret.</h2>
    <h3>In diesem Abschnitt jetzt mal ganz <span class="highlight">ohne Technik-Blabla</span>.</h3>
    <div class="skill-container flex-col margin-top gap-default">
      <article class="skill-card z-2 card gap-default" v-for="(skill, skillIndex) in skills" :class="[skillIndex % 2 && 'reverse']">
        <div class="image-container">
          <img
              loading="lazy"
              width="550"
              height="350"
              :srcset="[skill.img('1x', true), skill.img('2x', true), skill.img('3x', true)].join(', ')"
              :src="skill.img('1x', false)"
              aria-hidden="true"
              alt=""
          />
        </div>
        <div class="text-container flex-col gap-default">
          <h3>{{skill.title}}</h3>
          <main class="flex-col gap-sm">
            <RichText :elements="skill.text" />
          </main>
        </div>
      </article>
    </div>
    <div class="bottom flex-col margin-top gap-default">
      <h3>Verwirkliche jetzt dein Webprojekt.</h3>
      <Button href="/booking" class="cta">
        <Icon name="ph:chat-circle-text-duotone" size="1.5em" mode="svg" />
        Lass mal reden
      </Button>
    </div>
  </section>
</template>

<script setup lang="ts">

import type { RichText } from './RichText/Types'

type Skill = {
  img: Function
  title: string
  text: RichText[]
}

const getExplanationImage = (img : string) => getImage('/img/explanations/', img)

const skills : Skill[] = [
  {
    img: getExplanationImage('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: getExplanationImage('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: getExplanationImage('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.'
          }
        ]
      },
    ],
  }
]
</script>