ADD: Customers

Globals.css

@@ -121,6 +121,10 @@ a {
     transition: var(--transition-time);
 }
 
+span.highlight {
+    color: var(--color-orange);
+}
+
 .content {
     position: relative;
     z-index: 100;

app.vue

@@ -5,6 +5,7 @@
     <Header />
     <Intro />
     <Skills />
+    <Customers />
   </div>
 </template>
 <script setup lang="ts">

components/Customers/Customers.css

@@ -0,0 +1,15 @@
+.Customers {
+    & .customer-list {
+        margin-top: 3rem;
+        display: flex;
+        gap: 3rem;
+
+        & img {
+            height: 50px;
+
+            &.white {
+                filter: brightness(0) invert(1);
+            }
+        }
+    }
+}

components/Customers/Customers.vue

@@ -0,0 +1,30 @@
+<style scoped src="./Customers.css"/>
+
+<template>
+  <section class="Customers content">
+    <h2>Kunden <span class="highlight">&</span> Projekte</h2>
+    <h3>Meine bisherigen Geschäftpartner</h3>
+    <div class="customer-list">
+      <a v-for="customer in customers" :href="customer.link" target="_blank" rel="noopener noreferrer">
+        <img :alt="customer.name" :src="customer.logo" :class="[customer.white && 'white']" />
+      </a>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+
+const customers = [
+  {
+    name: 'Dekra',
+    logo: '/img/customers/dekra.png',
+    link: 'https://dekra.de'
+  }, {
+    name: 'Bounce Commerce',
+    logo: '/img/customers/bounce.png',
+    link: 'https://bounce-commerce.de',
+    white: true,
+  }
+]
+
+</script>

components/Header/Header.css

@@ -141,6 +141,10 @@
             &:hover {
                 transform: scale(1.15);
                 color: var(--color-orange);
+
+                & .icon {
+                    filter: invert(50%) sepia(84%) saturate(868%) hue-rotate(1deg) brightness(103%) contrast(100%);
+                }
             }
         }
     }
@@ -149,10 +153,6 @@
         transition: 250ms;
         filter: invert(1);
         height: 30px;
-
-        &:hover {
-            filter: invert(50%) sepia(84%) saturate(868%) hue-rotate(1deg) brightness(103%) contrast(100%);
-        }
     }
 }
 

components/Intro/Intro.css

@@ -26,10 +26,6 @@
         flex-direction: column;
         z-index: 1;
 
-        span.highlight {
-            color: var(--color-orange);
-        }
-
         h2 {
             display: flex;
             flex-direction: column;

components/Skills/Skills.css

@@ -7,6 +7,7 @@
         margin-top: 3rem;
         display: flex;
         gap: 3rem;
+        flex-wrap: wrap;
     }
 
     & article {
@@ -16,6 +17,8 @@
         padding: 2rem;
         background: var(--color-black);
         border-radius: 20px;
+        min-width: 300px;
+        flex: 1;
 
         & p:last-of-type {
             margin-top: 2rem;

components/Skills/Skills.vue

@@ -35,7 +35,7 @@ const skills = [
       'Kein Ding. Ich bau dir eine Schnittstelle, die alles easy zusammenträgt.'
     ],
   }, {
-    title: 'Headless CMS Anbindung',
+    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.',