FIX: mpa, nuxt4 future, improvements in intro and services
Added mpa support, nuxt4 future compatibility, improvements in intro and services
This commit is contained in:
parent
078d4bfd82
commit
9642496e5a
35 changed files with 324 additions and 172 deletions
204
app/components/Customers.vue
Normal file
204
app/components/Customers.vue
Normal file
|
|
@ -0,0 +1,204 @@
|
|||
<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="`/img/customers/${customer.logo.src}.svg`"
|
||||
/>
|
||||
</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 { 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue