webfussel/wf4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ADD: project component

Browse source 
Finish Project component
This commit is contained in:
webfussel 2025-06-05 08:00:04 +02:00
parent aa4b3002c4
commit 4dbd4b3109
4 changed files with 118 additions and 156 deletions
Download patch file Download diff file Expand all files Collapse all files

82
app/assets/css/customers.css
View file

@ -17,88 +17,6 @@
align-items: center;
justify-content: center;
flex-wrap: wrap;
& > article {
flex-grow: 1;
flex-shrink: 0;
flex-basis: clamp(350px, calc(33% - 3rem), 400px);
height: 350px;
display: grid;
overflow: hidden;
& .bg {
padding: 0;
height: 350px;
width: 100%;
& img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
& > * {
grid-column: 1;
grid-row: 1;
}
& > div {
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.88);
backdrop-filter: blur(1px);
transition: var(--transition-time);
height: 100%;
text-shadow: 0 0 5px rgba(0, 0, 0, .7);
text-align: center;
padding: 1rem;
& > main {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
max-height: 6rem;
overflow: hidden;
transition: var(--transition-time);
& .customer {
font-size: 1rem;
color: var(--color-white-transparent);
}
& .title {
margin-top: -1rem;
}
& ul {
gap: 1rem;
justify-content: center;
}
& a {
color: var(--color-orange);
&:hover {
color: var(--color-white);
}
}
}
&:hover {
backdrop-filter: blur(5px);
& > main {
max-height: 25rem;
}
}
}
}
}
}

77
app/assets/css/project.css
View file

@ -1,3 +1,80 @@
.Project {
flex-grow: 1;
flex-shrink: 0;
flex-basis: clamp(350px, calc(33% - 3rem), 400px);
height: 350px;
display: grid;
overflow: hidden;
& .bg {
padding: 0;
height: 350px;
width: 100%;
& img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
& > * {
grid-column: 1;
grid-row: 1;
}
& > div {
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.88);
backdrop-filter: blur(1px);
transition: var(--transition-time);
height: 100%;
text-shadow: 0 0 5px rgba(0, 0, 0, .7);
text-align: center;
padding: 1rem;
& > main {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
max-height: 6rem;
overflow: hidden;
transition: var(--transition-time);
& .customer {
font-size: 1rem;
color: var(--color-white-transparent);
}
& .title {
margin-top: -1rem;
}
& ul {
gap: 1rem;
justify-content: center;
}
& a {
color: var(--color-orange);
&:hover {
color: var(--color-white);
}
}
}
&:hover {
backdrop-filter: blur(5px);
& > main {
max-height: 25rem;
}
}
}
}

20
app/components/Project.vue
View file

@ -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>

95
app/components/Section/Customers.vue
View file

@ -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>