FIX: some texts and layouts for easy skill explanation

Improving site clarity

app/assets/css/global.css

@@ -145,6 +145,12 @@ span.chip {
     border-radius: 20px;
     min-width: 300px;
     flex: 1;
+    justify-content: space-between;
+
+    & .card-img {
+        border-radius: 20px;
+        object-fit: cover;
+    }
 }
 
 .color-icon {
@@ -155,6 +161,7 @@ span.chip {
     position: relative;
     z-index: 100;
     padding: 150px 15vw;
+    min-height: 100vh;
 }
 
 .full {
@@ -169,15 +176,28 @@ span.chip {
     margin-top: 6rem;
 }
 
+.flex-row {
+    display: flex;
+    flex-direction: row;
+
+    &.reverse {
+        flex-direction: row-reverse;
+    }
+}
+
 .flex-col {
     display: flex;
     flex-direction: column;
 }
 
-.default-gap {
+.gap-default {
     gap: 3rem;
 }
 
+.gap-sm {
+    gap: 1rem;
+}
+
 .z-0 {
     box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
 }

app/components/Customers.vue

@@ -2,7 +2,7 @@
   <section id="customers" class="Customers content">
     <h2>Kunden <span class="highlight">&</span> Projekte.</h2>
     <h3>Meine bisherigen Geschäftpartner</h3>
-    <div class="customer-list margin-top default-gap">
+    <div class="customer-list margin-top gap-default">
       <a v-for="customer in customers" :href="customer.link" target="_blank" rel="noopener noreferrer">
         <img
             loading="lazy"

app/components/Footer.vue

@@ -1,18 +1,18 @@
 <template>
-  <footer class="Footer flex-col default-gap">
+  <footer class="Footer flex-col gap-default">
-    <ul class="sitemap default-gap">
+    <ul class="sitemap gap-default">
       <li v-for="{ label, ...rest} in nav" :key="label">
         <NuxtLink v-bind="rest">{{label}}</NuxtLink>
       </li>
     </ul>
-    <ul class="sitemap default-gap">
+    <ul class="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 default-gap">
+    <ul class="sitemap gap-default">
       <li class="tip-container">
         <Icon name="material-symbols:cookie-off-outline" size="1.5rem" mode="svg" />
         <span class="tip">Ohne Cookies</span>
@@ -75,6 +75,11 @@ const socials = [
     icon: 'ri:bluesky-line',
     'aria-label': 'Externer Link: Bluesky Profil'
   },
+  {
+    href: 'https://twitch.tv/webfussel',
+    icon: 'ri:twitch-line',
+    'aria-label': 'Externer Link: Twitch Kanal'
+  },
   {
     href: 'https://ko-fi.com/webfussel',
     icon: 'wf:kofi',

app/components/Intro.vue

@@ -1,6 +1,6 @@
 <template>
-  <section id="intro" class="Intro content full default-gap">
+  <section id="intro" class="Intro content full gap-default">
-    <div class="intro-text flex-col default-gap">
+    <div class="intro-text flex-col gap-default">
       <h1 class="flex-col">
         <span class="greeting">Moin.</span>
         <span class="my-name-wrapper">Ich bin <span class="nowrap"><span class="highlight">Fiona </span><small>Urban</small><span class="dot">.</span></span></span>

app/components/Services.vue

@@ -4,9 +4,9 @@
     <h3>Du hast also beschlossen, dass du <span class="highlight">meine Hilfe</span> brauchst. Cool!</h3>
     <p class="margin-top">Hinter meinen Angeboten gibt es <span class="highlight">keinerlei Abos oder versteckte Kosten</span>.
       Aus Transparenzgründen sei aber gesagt, dass sich alle Preise zzgl. 19 % Umsatzsteuer verstehen.</p>
-    <div class="service-list margin-top default-gap">
+    <div class="service-list margin-top gap-default">
-      <article v-for="service in services" class="z-2 card flex-col default-gap">
+      <article v-for="service in services" class="z-2 card flex-col gap-default">
-        <h3 class="flex-col default-gap">
+        <h3 class="flex-col gap-default">
           <span>{{service.title}}</span>
           <span class="highlight">{{service.price}}</span>
         </h3>
@@ -24,10 +24,10 @@
         </ul>
       </article>
     </div>
-    <article class="z-2 card flex-col default-gap margin-top">
+    <article class="z-2 card flex-col gap-default margin-top">
       <h3>Keinen Bock auf Telen? Understandable.</h3>
       <p>Dann schreib mir einfach gerne direkt eine E-Mail an
-        <ClientOnly><a class="mail" href="mailto:anfragen@webfussel.de">anfragen@webfussel.de<Icon name="ri:mail-line" aria-hidden="true" alt="mail icon" mode="svg" /></a></ClientOnly>
+        <ClientOnly><a class="mail" href="mailto:anfragen@webfussel.de">anfragen@webfussel.de<Icon name="ph:envelope-duotone" aria-hidden="true" alt="mail icon" size="1.2em" mode="svg" /></a></ClientOnly>
       </p>
       <h3>Keine Kohle? Kommt vor.</h3>
       <p>Meld dich trotzdem. Eventuell ist dein Projekt ja cool genug, dass ich dir da auch entsprechend entgegenkommen kann. :)</p>
@@ -38,7 +38,7 @@
     </p>
     <ClientOnly>
       <div class="network-list margin-top">
-        <div class="scroll-container default-gap">
+        <div class="scroll-container gap-default">
           <Person ref="persons" v-for="person in network" v-bind="person" />
         </div>
       </div>

app/components/Skills.vue

@@ -2,26 +2,26 @@
   <section id="skills" class="Skills content">
     <h2>Meine Expertise.</h2>
     <h3>Dies sind meine <span class="highlight">Spezialgebiete</span> - aber ich bin flexibel!</h3>
-    <div class="skill-list margin-top default-gap">
+    <div class="skill-list margin-top gap-default">
-      <article class="z-2 card flex-col default-gap" v-for="skill in skills">
+      <article class="z-2 card flex-col gap-default" v-for="skill in skills">
         <h3>{{skill.title}}</h3>
         <main>
-          <p v-for="(t, i) in skill.text" :class="[i === skills.length - 1 && 'margin-top bold']">{{t}}</p>
+          <p v-for="(t, i) in skill.text" :class="[i === skill.text.length - 1 && 'margin-top bold']">{{t}}</p>
         </main>
       </article>
     </div>
-    <article class="tech-list z-2 card flex-col default-gap margin-top">
+    <article class="tech-list z-2 card flex-col gap-default margin-top">
       <h3>Technologien</h3>
       <p>Neben den klassischen Webentwicklungsstandards JavaScript, HTML und CSS biete ich außerdem folgende Technologien.</p>
-      <ul class="default-gap">
+      <ul class="gap-default">
         <li v-for="tech in technologies">
           <Technology v-bind="tech" size="l"/>
         </li>
       </ul>
     </article>
-    <div class="bottom flex-col margin-top default-gap">
+    <div class="bottom flex-col margin-top gap-default">
       <h3>Manche von euch haben hier sicher kein Wort verstanden.</h3>
-      <Button href="#services" class="cta">
+      <Button href="#skills_easy" class="cta">
         <span class="animate-up-down">
           <Icon name="ph:caret-double-down-duotone" size="1.5em" mode="svg" />
         </span>

app/components/SkillsEasy.vue

@@ -0,0 +1,52 @@
+<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="flex-col margin-top gap-default">
+      <article class="z-2 card flex-row gap-default" v-for="(skill, skillIndex) in skills" :class="[skillIndex % 2 && 'reverse']">
+        <img :src="skill.img" alt="" class="card-img z-4" />
+        <div class="flex-col gap-default">
+          <h3>{{skill.title}}</h3>
+          <main class="flex-col gap-sm">
+            <p v-for="(t, i) in skill.text" :class="[i === skill.text.length - 1 && 'margin-top bold']">{{t}}</p>
+          </main>
+        </div>
+      </article>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+
+const skills = [
+  {
+    img: 'https://picsum.photos/550/350.webp?random=1',
+    title: 'Das, was du sehen kannst',
+    text: [
+      '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.',
+      '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.',
+      '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.',
+      'Diese Voraussicht, für den Fall der Fälle vorzusorgen: Die gibt\'s bei mir dazu. Fussel-Ehrenwort.'
+    ],
+  }, {
+    img: 'https://picsum.photos/550/350.webp?random=2',
+    title: 'Da, wo du eintragen kannst',
+    text: [
+      'Du hast Daten in einer Datenbank liegen, aber keine Ahnung, wie du da gescheit rankommen sollst?',
+      'Liegen deine Daten eventuell sogar verstreut an mehreren Orten, über Datenbanken, Dateien und anderen Storagemöglichkeiten verteilt?',
+      'Kein Ding. Ich bau dir eine Schnittstelle, die alles easy zusammenträgt.'
+    ],
+  }, {
+    img: 'https://picsum.photos/550/350.webp?random=3',
+    title: 'Headless CMS',
+    text: [
+      'Wenn man ein Headless CMS anbinden will, dann verknüpft das Komponenten und APIs.',
+      'Für eine saubere und dynamische Einbindung reicht die Library, die euch vom Hersteller zur Verfügung gestellt wird, oft nicht aus.',
+      'Übersichtliche Projektstruktur und saubere Auflösung der Daten - mit Fusselgarantie.'
+    ],
+  }
+]
+</script>

app/pages/imp.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <section class="Imp flex-col default-gap content full">
+    <section class="Imp flex-col gap-default content full">
       <div>
         <p>
           Fiona Lena Urban<br/>
@@ -55,7 +55,7 @@
         </p>
       </div>
 
-      <div class="flex-col default-gap">
+      <div class="flex-col gap-default">
         <h3>Quellenangaben</h3>
         <div>
           <h4>Bilder</h4>

app/pages/index.vue

@@ -2,5 +2,6 @@
   <div>
     <Intro />
     <Skills />
+    <SkillsEasy />
   </div>
 </template>