ADD: project component
Finish Project component
This commit is contained in:
parent
aa4b3002c4
commit
4dbd4b3109
4 changed files with 118 additions and 156 deletions
|
|
@ -1,6 +1,21 @@
|
|||
<template>
|
||||
<article class="Project">
|
||||
|
||||
<div class="bg">
|
||||
<img height="350" width="400" loading="lazy" :alt="title" :src="`/img/projects/${img}.webp`" aria-hidden="true"/>
|
||||
</div>
|
||||
<div>
|
||||
<main>
|
||||
<small class="customer">{{ company }}</small>
|
||||
<h3 class="title">{{ title }}</h3>
|
||||
<ul>
|
||||
<li v-for="skill in tech">
|
||||
<Technology v-bind="skill" link="" />
|
||||
</li>
|
||||
</ul>
|
||||
<p v-for="d in desc">{{ d }}</p>
|
||||
<a v-if="link" :href="link" target="_blank">Zur Seite</a>
|
||||
</main>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
|
|
@ -11,7 +26,10 @@ type Props = {
|
|||
img : string
|
||||
company : string
|
||||
title : string
|
||||
desc : string[]
|
||||
link ?: string
|
||||
tech : Skill[]
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
</script>
|
||||
|
|
@ -15,24 +15,7 @@
|
|||
</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>
|
||||
<Project v-for="pr in projects" v-bind="pr" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
|
@ -103,113 +86,79 @@ const customers = [
|
|||
]
|
||||
|
||||
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: 'ProPapier',
|
||||
customer: 'webfussel',
|
||||
image: '/img/projects/propapier.webp',
|
||||
company: 'webfussel',
|
||||
img: 'propapier',
|
||||
desc: [
|
||||
'Klopapier-Preise einfach vergleichen.',
|
||||
'Zahlst du zu viel für\'s Papier?',
|
||||
],
|
||||
technologies: [nuxt, ts, pcss],
|
||||
tech: [nuxt, ts, pcss],
|
||||
link: 'https://pro-papier.de',
|
||||
},
|
||||
{
|
||||
title: 'Unterricht',
|
||||
customer: 'SAE Institute Germany',
|
||||
image: '/img/projects/education.webp',
|
||||
company: 'SAE Institute Germany',
|
||||
img: 'education',
|
||||
desc: [
|
||||
'Vorbereitung und Durchführung von Unterricht in JavaScript und TypeScript.',
|
||||
],
|
||||
technologies: [js, ts]
|
||||
tech: [js, ts]
|
||||
},
|
||||
{
|
||||
title: 'Headless CMS & Cache',
|
||||
customer: 'DEKRA',
|
||||
image: '/img/projects/dekra.webp',
|
||||
company: 'DEKRA',
|
||||
img: 'dekra',
|
||||
desc: [
|
||||
'Anbindung an ein Headless CMS und Entwicklung der dazugehörigen Komponentenbibliothek unter Einsatz von Tailwind, sowie serverseitiges Caching.',
|
||||
],
|
||||
technologies: [ts, nuxt, tw, njs]
|
||||
tech: [ts, nuxt, tw, njs]
|
||||
},
|
||||
{
|
||||
title: 'Bounce Script',
|
||||
customer: 'Bounce Commerce',
|
||||
company: 'Bounce Commerce',
|
||||
link: 'https://bounce-commerce.de',
|
||||
image: '/img/projects/bounce.webp',
|
||||
img: 'bounce',
|
||||
desc: [
|
||||
'Script zum Einbinden in Web Shops für Bounce Management.',
|
||||
'Pures JavaScript, so klein gehalten wie möglich zur einfach Integration.',
|
||||
],
|
||||
technologies: [js]
|
||||
tech: [js]
|
||||
},
|
||||
{
|
||||
title: 'WEB.DE / GMX',
|
||||
customer: '1&1 Mail & Media',
|
||||
company: '1&1 Mail & Media',
|
||||
link: 'https://web.de',
|
||||
image: '/img/projects/webde.webp',
|
||||
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.',
|
||||
],
|
||||
technologies: [js, vue, scss]
|
||||
tech: [js, vue, scss]
|
||||
},
|
||||
{
|
||||
title: 'Körrie! Landingpage',
|
||||
customer: 'KVK Berlin',
|
||||
company: 'KVK Berlin',
|
||||
link: 'https://körrie.de',
|
||||
image: '/img/projects/krrie.webp',
|
||||
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',
|
||||
],
|
||||
technologies: [html, css, js],
|
||||
tech: [html, css, js],
|
||||
},
|
||||
{
|
||||
title: 'UI Tools',
|
||||
customer: 'webfussel',
|
||||
company: 'webfussel',
|
||||
link: 'https://uitools.webfussel.de',
|
||||
image: '/img/projects/uitools.webp',
|
||||
img: 'uitools',
|
||||
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]
|
||||
tech: [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