<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">
      <Project v-for="pr in projects" v-bind="pr" />
    </div>
  </section>
</template>

<script setup lang="ts">
import { css, 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: 'ProPapier',
    company: 'webfussel',
    img: 'propapier',
    desc: [
      'Klopapier-Preise einfach vergleichen.',
      'Zahlst du zu viel für\'s Papier?',
    ],
    tech: [nuxt, ts, pcss],
    link: 'https://pro-papier.de',
  },
  {
    title: 'Unterricht',
    company: 'SAE Institute Germany',
    img: 'education',
    desc: [
      'Vorbereitung und Durchführung von Unterricht in JavaScript und TypeScript.',
    ],
    tech: [js, ts]
  },
  {
    title: 'Headless CMS & Cache',
    company: 'DEKRA',
    img: 'dekra',
    desc: [
      'Anbindung an ein Headless CMS und Entwicklung der dazugehörigen Komponentenbibliothek unter Einsatz von Tailwind, sowie serverseitiges Caching.',
    ],
    tech: [ts, nuxt, tw, njs]
  },
  {
    title: 'Bounce Script',
    company: 'Bounce Commerce',
    link: 'https://bounce-commerce.de',
    img: 'bounce',
    desc: [
      'Script zum Einbinden in Web Shops für Bounce Management.',
      'Pures JavaScript, so klein gehalten wie möglich zur einfach Integration.',
    ],
    tech: [js]
  },
  {
    title: 'WEB.DE / GMX',
    company: '1&1 Mail & Media',
    link: 'https://web.de',
    img: 'webde',
    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.',
    ],
    tech: [js, vue, scss]
  },
  {
    title: 'Körrie! Landingpage',
    company: 'KVK Berlin',
    link: 'https://körrie.de',
    img: 'krrie',
    desc: [
      'Neubau der Landingpage für "Kauft Körrie!". Die Prämisse war: Kein Schnickschnack.',
      'Deshalb aufgebaut mit simplem Js, HTML und CSS',
    ],
    tech: [html, css, js],
  },
  {
    title: 'UI Tools',
    company: 'webfussel',
    link: 'https://uitools.webfussel.de',
    img: 'uitools',
    desc: [
      'Eine kleine Sammlung an Tools für die Erstellung von UIs.',
      'Farbpalette, Kontraste und CSS Variablen.',
      'Ist in aktiver Entwicklung.',
    ],
    tech: [nuxt, ts, pcss]
  },
]
</script>
