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

ADD: projects

Browse source
This commit is contained in:
webfussel 2024-05-21 10:41:00 +02:00
parent ba015d748b
commit e07c708ea8
56 changed files with 487 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

98
components/Customers/Customers.css
View file

@ -1,8 +1,7 @@
.Customers {
& .customer-list {
margin-top: 3rem;
display: flex;
gap: 3rem;
flex-wrap: wrap;
& img {
height: 50px;
@ -12,4 +11,99 @@
}
}
}
& .projects-list {
display: flex;
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;
& .skill {
height: 30px;
}
& .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.7);
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 {
display: flex;
gap: 1rem;
justify-content: center;
list-style: none;
}
& a {
color: var(--color-orange);
&:hover {
color: var(--color-white);
}
}
}
&:hover {
backdrop-filter: blur(5px);
& > main {
max-height: 25rem;
}
}
}
}
}
}

129
components/Customers/Customers.vue
View file

@ -4,15 +4,37 @@
<section class="Customers content">
<h2>Kunden <span class="highlight">&</span> Projekte</h2>
<h3>Meine bisherigen Geschäftpartner</h3>
<div class="customer-list">
<div class="customer-list margin-top default-gap">
<a v-for="customer in customers" :href="customer.link" target="_blank" rel="noopener noreferrer">
<img :alt="customer.name" :src="customer.logo" :class="[customer.white && 'white']" />
</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 :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">
<img class="skill" :alt="skill.name" :src="skill.img" />
</li>
</ul>
<p v-for="d in pr.desc">{{ d }}</p>
<a v-if="pr.link" :href="pr.link" target="_blank">Zur Seite</a>
</main>
</div>
</article>
</div>
</section>
</template>
<script setup lang="ts">
import { ase, cs, css, html, js, ng, njs, nuxt, phaser, scss, ts, tw, unity, vue } from '~/Skills'
const customers = [
{
@ -24,7 +46,112 @@ const customers = [
logo: '/img/customers/bounce.png',
link: 'https://bounce-commerce.de',
white: true,
}, {
name: 'GMX',
logo: '/img/customers/gmx.png',
link: 'https://gmx.net',
white: true,
}, {
name: 'WEB.DE',
logo: '/img/customers/webde.png',
link: 'https://web.de',
}, {
name: '1&1',
logo: '/img/customers/einsundeins.png',
link: 'https://1und1.de',
}, {
name: 'Körrie',
logo: '/img/customers/koerrie.webp',
link: 'https://körrie.de',
}, {
name: 'Pembe',
logo: '/img/customers/pembe.svg',
link: 'https://pembe.io',
white: true,
}, {
name: 'SAE Institute Germany',
logo: '/img/customers/sae.png',
link: 'https://www.sae.edu/deu/en/sae-home/',
white: true,
}
]
const projects = [
{
title: 'Headless CMS & Cache',
customer: 'Dekra',
link: 'https://dekra.de',
image: '/img/projects/dekra.png',
desc: [
'Anbindung an ein Headless CMS und Entwicklung der dazugehörigen Komponentenbibliothek, sowie Serverseitiges Caching.',
],
technologies: [ts, nuxt, tw, njs]
},
{
title: 'Bounce Script',
link: 'https://bounce-commerce.de',
image: '/img/projects/bounce.jpg',
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',
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',
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',
link: 'https://uitools.webfussel.de',
image: '/img/projects/uitools.png',
desc: [
'Eine kleine Sammlung an Tools für die Erstellung von UIs:',
'Farbpalette, Kontraste und CSS Variablen.',
'Man kann seine Paletten per URL mit anderen teilen oder per localstorage speichern.',
],
technologies: [ng, ts, scss]
}, {
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, phaser, css]
}, {
title: 'PixelPalette',
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]
}, {
title: 'World Generation',
image: '/img/projects/worldgen.webp',
desc: [
'Mein zweiter Versuch mit einer Game Engine - diesmal Unity 3D.',
'Ziel war eigentlich ein ganzes Spiel, aus Zeitmangel wurde es nur ein Weltengenerierungsskript.',
],
technologies: [unity, cs, ase]
}
]
</script>

14
components/Intro/Intro.css
View file

@ -3,7 +3,6 @@
background-repeat: no-repeat;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
.intro-img {
width: 750px;
@ -21,22 +20,9 @@
.intro-text {
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
z-index: 1;
h2 {
display: flex;
flex-direction: column;
}
h3,
.fulltext,
.cta {
margin-top: 2rem;
}
.fulltext {
color: var(--color-white-transparent);
}

6
components/Intro/Intro.vue
View file

@ -1,9 +1,9 @@
<style scoped src="./Intro.css"/>
<template>
<section id="intro" class="Intro content full">
<div class="intro-text">
<h2>
<section id="intro" class="Intro content full default-gap">
<div class="intro-text flex-col default-gap">
<h2 class="flex-col">
<span class="greeting">Moin.</span>
<span class="my-name-wrapper">Ich bin <span class="highlight">Fiona</span>.</span>
</h2>

13
components/Skills/Skills.css
View file

@ -4,32 +4,19 @@
background-repeat: no-repeat;
& .skills-wrapper {
margin-top: 3rem;
display: flex;
gap: 3rem;
flex-wrap: wrap;
}
& article {
display: flex;
flex-direction: column;
gap: 2rem;
padding: 2rem;
background: var(--color-black);
border-radius: 20px;
min-width: 300px;
flex: 1;
& p:last-of-type {
margin-top: 2rem;
}
}
& .bottom {
margin-top: 3rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 3rem;
}
}

8
components/Skills/Skills.vue
View file

@ -3,15 +3,15 @@
<template>
<section class="Skills content">
<h2>Meine Expertise.</h2>
<div class="skills-wrapper">
<article class="z-2" v-for="skill in skills">
<div class="skills-wrapper margin-top default-gap">
<article class="z-2 flex-col default-gap" v-for="skill in skills">
<h3>{{skill.title}}</h3>
<main>
<p v-for="t in skill.text">{{t}}</p>
<p v-for="(t, i) in skill.text" :class="[i === skills.length - 1 && 'margin-top bold']">{{t}}</p>
</main>
</article>
</div>
<div class="bottom">
<div class="bottom flex-col margin-top default-gap">
<h3>Du brauchst was davon? Kein Ding.</h3>
<Button class="cta" label="Lass mal reden" />
</div>