ADD: Components

Teaser, Card

app/components/Section/Skills.vue

@@ -3,20 +3,18 @@
     <h2>Meine Expertise.</h2>
     <h3>Dies sind meine <span class="highlight">Spezialgebiete</span> - aber ich bin flexibel!</h3>
     <div class="skill-list margin-top gap-default">
-      <article class="z-2 card flex-col gap-sm" v-for="skill in skills">
-        <h3>{{skill.title}}</h3>
+      <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>
-      </article>
+      </Card>
     </div>
-    <article class="tech-list z-2 card flex-col gap-default margin-top">
-      <h3>Technologien</h3>
+    <Card title="Technologien" titleTag="h3" class="margin-top">
       <p>Neben den klassischen Webentwicklungsstandards JavaScript, HTML und CSS biete ich außerdem folgende Technologien.</p>
-      <ul class="gap-default">
+      <ul class="gap-default margin-top-small">
         <li v-for="tech in technologies">
           <Technology v-bind="tech" size="l"/>
         </li>
       </ul>
-    </article>
+    </Card>
     <div class="bottom flex-col margin-top gap-default">
       <h3>Manche von euch haben hier sicher kein Wort verstanden.</h3>
       <Button href="#skills_easy" class="cta">

app/components/Section/SkillsEasy.vue

@@ -3,25 +3,13 @@
     <h2>Jetzt mal ganz konkret.</h2>
     <h3>In diesem Abschnitt 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>
+      <Teaser
+        v-for="(skill, skillIndex) in skills"
+        :title="skill.title"
+        :image="{ path: '/img/explanations/', name : skill.img, position: skillIndex % 2 ? 'right' : 'left'}"
+      >
+        <RichText :elements="skill.text" />
+      </Teaser>
     </div>
     <div class="bottom flex-col margin-top gap-default">
       <h3>Verwirkliche jetzt dein Webprojekt.</h3>
@@ -37,7 +25,7 @@
 import type { RichText } from '@/components/RichText/Types'
 
 type Skill = {
-  img: Function
+  img: string
   title: string
   text: RichText[]
 }
@@ -46,7 +34,7 @@ const getExplanationImage = (img : string) => getImage('/img/explanations/', img
 
 const skills : Skill[] = [
   {
-    img: getExplanationImage('components'),
+    img: 'components',
     title: 'Das, was du sehen kannst',
     text: [
       {
@@ -106,7 +94,7 @@ const skills : Skill[] = [
       },
     ],
   }, {
-    img: getExplanationImage('cms'),
+    img: 'cms',
     title: 'Da, wo du eintragen kannst',
     text: [
       {
@@ -207,7 +195,7 @@ const skills : Skill[] = [
       },
     ],
   }, {
-    img: getExplanationImage('result'),
+    img: 'result',
     title: 'Was dabei am Ende rauskommt',
     text: [
       {