wf4/components/Customers.vue

<template>
  <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">
      <a v-for="customer in customers" :href="customer.link" target="_blank" rel="noopener noreferrer">
        <img loading="lazy" height="50" :width="customer.logo.width" :alt="customer.name" :src="customer.logo.src" :class="[customer.logo.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 height="350" width="400" loading="lazy" :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">
                  <Technology v-bind="skill" link="" />
                </li>
              </ul>
              <p v-for="d in pr.desc">{{ d }}</p>
              <a v-if="pr.link" :href="pr.link" target="_blank">Zur {{pr.type ?? 'Seite'}}</a>
            </main>
          </div>
        </article>
    </div>
  </section>
</template>

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

const customers = [
  {
    name: 'Bounce Commerce',
    link: 'https://bounce-commerce.de',
    logo: {
      src: '/img/customers/bounce.webp',
      width: 150,
      white: true,
    },
  }, {
    name: 'GMX',
    link: 'https://gmx.net',
    logo: {
      src: '/img/customers/gmx.webp',
      width: 148,
      white: true,
    },
  }, {
    name: 'WEB.DE',
    link: 'https://web.de',
    logo: {
      src: '/img/customers/webde.webp',
      width: 50,
    },
  }, {
    name: '1&1',
    link: 'https://1und1.de',
    logo: {
      src: '/img/customers/einsundeins.webp',
      width: 50,
    },
  }, {
    name: 'Körrie',
    link: 'https://körrie.de',
    logo: {
      src: '/img/customers/koerrie.webp',
      width: 50,
    }
  }, {
    name: 'Pembe',
    link: 'https://pembe.io',
    logo: {
      src: '/img/customers/pembe.webp',
      width: 48,
      white: true,
    },
  }, {
    name: 'SAE Institute Germany',
    link: 'https://www.sae.edu/deu/en/sae-home/',
    logo: {
      src: '/img/customers/sae.webp',
      width: 77,
      white: true,
    },
  }
]

const projects = [
  {
    title: 'Kauft Körrie! App',
    customer: 'KVK Berlin',
    image: '/img/projects/koerrie_app.webp',
    desc: [
      'Entwicklung einer Android Info-App für die Gewürzmischungen "Körrie" und passendem Zubehör.',
      'Zusätzlich die Übertragung des Körrie-O-Mat von der Landingpage in die App mit Ergebnisverlauf.',
    ],
    technologies: [flutter, dart, android],
    link: 'https://play.google.com/store/apps/details?id=com.koerrieomat&hl=de',
    type: 'App',
  },
  {
    title: 'Unterricht',
    customer: 'SAE Institute Germany',
    image: '/img/projects/education.webp',
    desc: [
      'Vorbereitung und Durchführung von Unterricht in JavaScript und TypeScript.',
    ],
    technologies: [js, ts]
  },
  {
    title: 'Headless CMS & Cache',
    customer: 'Nicht erwähnt',
    image: '/img/projects/headlesscms.webp',
    desc: [
      'Anbindung an ein Headless CMS und Entwicklung der dazugehörigen Komponentenbibliothek unter Einsatz von Tailwind, sowie serverseitiges Caching.',
    ],
    technologies: [ts, nuxt, tw, njs]
  },
  {
    title: 'Bounce Script',
    customer: 'Bounce Commerce',
    link: 'https://bounce-commerce.de',
    image: '/img/projects/bounce.webp',
    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.webp',
    desc: [
      'Eine kleine Sammlung an Tools für die Erstellung von UIs.',
      'Farbpalette, Kontraste und CSS Variablen.',
      'Ist in aktiver Entwicklung.',
    ],
    technologies: [nuxt, ts, pcss]
  }, {
    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>