wf4/app/components/Customers.vue

<template>
  <section id="customers" class="Customers content">
    <h1>Kunden <span class="highlight">&</span> Projekte.</h1>
    <h2>Meine bisherigen Geschäftpartner</h2>
    <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"
            height="50"
            :width="customer.logo.width"
            :alt="customer.name"
            :src="`/img/customers/${customer.logo.src}.svg`"
        />
      </a>
    </div>
    <h2 class="margin-top-big">Projektauswahl</h2>
    <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 { android, css, dart, flutter, html, js, njs, nuxt, pcss, scss, ts, tw, vue } from '../utils/skills'

const customers = [
  {
    name: 'Bounce Commerce',
    link: 'https://bounce-commerce.de',
    logo: {
      src: 'bounce',
      width: 150,
    },
  },
  {
    name: 'GMX',
    link: 'https://gmx.net',
    logo: {
      src: 'gmx',
      width: 148,
      white: true,
    },
  },
  {
    name: 'WEB.DE',
    link: 'https://web.de',
    logo: {
      src: 'webde',
      width: 50,
    },
  },
  {
    name: '1&1',
    link: 'https://1und1.de',
    logo: {
      src: '1u1',
      width: 50,
    },
  },
  {
    name: 'Körrie',
    link: 'https://körrie.de',
    logo: {
      src: 'koerrie',
      width: 50,
    }
  },
  {
    name: 'Pembe',
    link: 'https://pembe.io',
    logo: {
      src: 'pembe',
      width: 48,
      white: true,
    },
  },
  {
    name: 'SAE Institute Germany',
    link: 'https://www.sae.edu/deu/en/sae-home/',
    logo: {
      src: 'sae',
      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: 'DEKRA',
    image: '/img/projects/dekra.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, 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]
  // },
]
</script>