164 lines
3.8 KiB
Vue
Executable file
164 lines
3.8 KiB
Vue
Executable file
<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>
|