wf4/components/Customers/Customers.vue

<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 margin-top default-gap">
      <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>
    <h3 class="margin-top-big">Projektauswahl</h3>
    <div class="projects-list margin-top">
        <article v-for="pr in projects">
          <div class="bg">
            <img :alt="pr.title" :src="pr.image" aria-hidden="true"/>
          </div>
          <div>
            <main>
              <small class="customer">{{ pr.customer }}</small>
              <h3 class="title">{{ pr.title }}</h3>
              <ul>
                <li v-for="skill in pr.technologies">
                  <img class="skill" :alt="skill.name" :src="skill.img" />
                </li>
              </ul>
              <p v-for="d in pr.desc">{{ d }}</p>
              <a v-if="pr.link" :href="pr.link" target="_blank">Zur Seite</a>
            </main>
          </div>
        </article>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ase, cs, css, html, js, ng, njs, nuxt, phaser, scss, ts, tw, unity, vue } from '~/Skills'

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,
  }, {
    name: 'GMX',
    logo: '/img/customers/gmx.png',
    link: 'https://gmx.net',
    white: true,
  }, {
    name: 'WEB.DE',
    logo: '/img/customers/webde.png',
    link: 'https://web.de',
  }, {
    name: '1&1',
    logo: '/img/customers/einsundeins.png',
    link: 'https://1und1.de',
  }, {
    name: 'Körrie',
    logo: '/img/customers/koerrie.webp',
    link: 'https://körrie.de',
  }, {
    name: 'Pembe',
    logo: '/img/customers/pembe.svg',
    link: 'https://pembe.io',
    white: true,
  }, {
    name: 'SAE Institute Germany',
    logo: '/img/customers/sae.png',
    link: 'https://www.sae.edu/deu/en/sae-home/',
    white: true,
  }
]

const projects = [
  {
    title: 'Headless CMS & Cache',
    customer: 'Dekra',
    link: 'https://dekra.de',
    image: '/img/projects/dekra.png',
    desc: [
        'Anbindung an ein Headless CMS und Entwicklung der dazugehörigen Komponentenbibliothek, sowie Serverseitiges Caching.',
    ],
    technologies: [ts, nuxt, tw, njs]
  },
  {
    title: 'Bounce Script',
    customer: 'Bounce Commerce',
    link: 'https://bounce-commerce.de',
    image: '/img/projects/bounce.jpg',
    desc: [
      'Script zum Einbinden in Web Shops für Bounce Management.',
      'Pures JavaScript, so klein gehalten wie möglich zur einfach Integration.',
    ],
    technologies: [js]
  },
  {
    title: 'WEB.DE / GMX',
    customer: '1&1 Mail & Media',
    link: 'https://web.de',
    image: '/img/projects/webde.webp',
    desc: [
      'Neubau der Seiten web.de und GMX mit einem komponentenbasierten Ansatz unter Verwendung von VueJS.',
      'Optimiert für moderne Browser, während Internet Explorer in einer Extraversion angefertigt wurde.',
    ],
    technologies: [js, vue, scss]
  },
  {
    title: 'Körrie! Landingpage',
    customer: 'KVK Berlin',
    link: 'https://körrie.de',
    image: '/img/projects/krrie.webp',
    desc: [
      'Neubau der Landingpage für "Kauft Körrie!". Die Prämisse war: Kein Schnickschnack.',
      'Deshalb aufgebaut mit simplem Js, HTML und CSS',
    ],
    technologies: [html, css, js],
  }, {
    title: 'UI Tools',
    customer: 'webfussel',
    link: 'https://uitools.webfussel.de',
    image: '/img/projects/uitools.png',
    desc: [
      'Eine kleine Sammlung an Tools für die Erstellung von UIs:',
      'Farbpalette, Kontraste und CSS Variablen.',
      'Man kann seine Paletten per URL mit anderen teilen oder per localstorage speichern.',
    ],
    technologies: [ng, ts, scss]
  }, {
    customer: 'webfussel',
    title: 'Shnaik - Teh Gaem',
    link: 'https://shnaik.webfussel.de',
    image: '/img/projects/shnaik.webp',
    desc: [
      'Nachbau des bekannten Spiels "Snake" für die damaligen Nokia Handys.',
      'Meine erste Erfahrung mit Gaming Libraries und wurde eher als Experiment und Zeitvertreib angefertigt.',
    ],
    technologies: [ts, phaser, css]
  }, {
    title: 'PixelPalette',
    customer: 'webfussel',
    link: 'https://pixelpalette.webfussel.de',
    image: '/img/projects/pp.webp',
    desc: [
      'Ich hatte einige Tage eine Idee, wie man Grafiken mit 4 Farben - angelehnt den Gameboy - komprimieren und im Speicher unterbringen kann.',
      'Prototypisch zum Spaß erstellt.',
    ],
    technologies: [js, html, css]
  }, {
    customer: 'webfussel',
    title: 'World Generation',
    image: '/img/projects/worldgen.webp',
    desc: [
      'Mein zweiter Versuch mit einer Game Engine - diesmal Unity 3D.',
      'Ziel war eigentlich ein ganzes Spiel, aus Zeitmangel wurde es nur ein Weltengenerierungsskript.',
    ],
    technologies: [unity, cs, ase]
  }
]
</script>