ADD: Technologies

components/Customers/Customers.css

@@ -28,7 +28,6 @@
             overflow: hidden;
 
             & .skill {
-                height: 30px;
             }
 
             & .bg {
@@ -81,10 +80,8 @@
                     }
 
                     & ul {
-                        display: flex;
                         gap: 1rem;
                         justify-content: center;
-                        list-style: none;
                     }
 
                     & a {

components/Customers/Customers.vue

@@ -21,7 +21,7 @@
               <h3 class="title">{{ pr.title }}</h3>
               <ul>
                 <li v-for="skill in pr.technologies">
-                  <img class="skill" :alt="skill.name" :src="skill.img" />
+                  <Technology v-bind="skill" link="" />
                 </li>
               </ul>
               <p v-for="d in pr.desc">{{ d }}</p>

components/Header/Header.css

@@ -128,8 +128,6 @@
     }
 
     & ul {
-        display: flex;
-        list-style: none;
         gap: var(--spacing-standard);
         transform: scale(1);
 

components/Services/Services.css

@@ -25,7 +25,6 @@
             }
 
             & ul {
-                list-style: none;
                 gap: 1rem;
 
                 & li {

components/Skills/Skills.vue

@@ -12,6 +12,14 @@
         </main>
       </article>
     </div>
+    <article class="z-2 card flex-col default-gap margin-top">
+      <h3>Technologien</h3>
+      <ul class="default-gap">
+        <li v-for="tech in technologies">
+          <Technology v-bind="tech" size="l"/>
+        </li>
+      </ul>
+    </article>
     <div class="bottom flex-col margin-top default-gap">
       <h3>Du brauchst was davon? Kein Ding.</h3>
       <Button href="#services" class="cta" label="Lass mal reden" />
@@ -20,6 +28,11 @@
 </template>
 
 <script setup lang="ts">
+
+import { css, gl, html, java, jetbrains, js, njs, nuxt, pcss, react, rust, ts, vitest, vue } from '~/Skills'
+
+const technologies = [ts, pcss, vue, react, nuxt, njs, java, rust, vitest, gl, jetbrains]
+
 const skills = [
   {
     title: 'Komponenten',

components/Technology/Technology.css

@@ -0,0 +1,10 @@
+.Technology {
+
+    &.m {
+        height: 30px;
+    }
+
+    &.l {
+        height: 50px;
+    }
+}

components/Technology/Technology.vue

@@ -0,0 +1,21 @@
+<style scoped src="./Technology.css"/>
+
+<template>
+  <a v-if="link" :href="link" target="_blank" rel="noopener noreferrer">
+    <img class="Technology" :src="img" :alt="name" :class="[size]"/>
+  </a>
+  <img v-else class="Technology" :src="img" :alt="name" :class="[size]"/>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  img: string
+  name: string
+  link?: string
+  size?: 'm' | 'l'
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 'm'
+})
+</script>