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

FIX: some texts and layouts for easy skill explanation

Browse source 
Improving site clarity
This commit is contained in:
webfussel 2025-02-14 14:13:20 +01:00
parent 9642496e5a
commit 9e3a9d38a0
9 changed files with 101 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

22
app/assets/css/global.css
View file

@ -145,6 +145,12 @@ span.chip {
border-radius: 20px;
min-width: 300px;
flex: 1;
justify-content: space-between;
& .card-img {
border-radius: 20px;
object-fit: cover;
}
}
.color-icon {
@ -155,6 +161,7 @@ span.chip {
position: relative;
z-index: 100;
padding: 150px 15vw;
min-height: 100vh;
}
.full {
@ -169,15 +176,28 @@ span.chip {
margin-top: 6rem;
}
.flex-row {
display: flex;
flex-direction: row;
&.reverse {
flex-direction: row-reverse;
}
}
.flex-col {
display: flex;
flex-direction: column;
}
.default-gap {
.gap-default {
gap: 3rem;
}
.gap-sm {
gap: 1rem;
}
.z-0 {
box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
}

2
app/components/Customers.vue
View file

@ -2,7 +2,7 @@
<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">
<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"

13
app/components/Footer.vue
View file

@ -1,18 +1,18 @@
<template>
<footer class="Footer flex-col default-gap">
<ul class="sitemap default-gap">
<footer class="Footer flex-col gap-default">
<ul class="sitemap gap-default">
<li v-for="{ label, ...rest} in nav" :key="label">
<NuxtLink v-bind="rest">{{label}}</NuxtLink>
</li>
</ul>
<ul class="sitemap default-gap">
<ul class="sitemap gap-default">
<li v-for="({icon, ...rest}) in socials" :key="rest.href">
<a v-bind="rest" target="_blank">
<Icon :name="icon" :alt="rest['aria-label']" size="1.5em" mode="svg" />
</a>
</li>
</ul>
<ul class="sitemap default-gap">
<ul class="sitemap gap-default">
<li class="tip-container">
<Icon name="material-symbols:cookie-off-outline" size="1.5rem" mode="svg" />
<span class="tip">Ohne Cookies</span>
@ -75,6 +75,11 @@ const socials = [
icon: 'ri:bluesky-line',
'aria-label': 'Externer Link: Bluesky Profil'
},
{
href: 'https://twitch.tv/webfussel',
icon: 'ri:twitch-line',
'aria-label': 'Externer Link: Twitch Kanal'
},
{
href: 'https://ko-fi.com/webfussel',
icon: 'wf:kofi',

4
app/components/Intro.vue
View file

@ -1,6 +1,6 @@
<template>
<section id="intro" class="Intro content full default-gap">
<div class="intro-text flex-col default-gap">
<section id="intro" class="Intro content full gap-default">
<div class="intro-text flex-col gap-default">
<h1 class="flex-col">
<span class="greeting">Moin.</span>
<span class="my-name-wrapper">Ich bin <span class="nowrap"><span class="highlight">Fiona </span><small>Urban</small><span class="dot">.</span></span></span>

12
app/components/Services.vue
View file

@ -4,9 +4,9 @@
<h3>Du hast also beschlossen, dass du <span class="highlight">meine Hilfe</span> brauchst. Cool!</h3>
<p class="margin-top">Hinter meinen Angeboten gibt es <span class="highlight">keinerlei Abos oder versteckte Kosten</span>.
Aus Transparenzgründen sei aber gesagt, dass sich alle Preise zzgl. 19 % Umsatzsteuer verstehen.</p>
<div class="service-list margin-top default-gap">
<article v-for="service in services" class="z-2 card flex-col default-gap">
<h3 class="flex-col default-gap">
<div class="service-list margin-top gap-default">
<article v-for="service in services" class="z-2 card flex-col gap-default">
<h3 class="flex-col gap-default">
<span>{{service.title}}</span>
<span class="highlight">{{service.price}}</span>
</h3>
@ -24,10 +24,10 @@
</ul>
</article>
</div>
<article class="z-2 card flex-col default-gap margin-top">
<article class="z-2 card flex-col gap-default margin-top">
<h3>Keinen Bock auf Telen? Understandable.</h3>
<p>Dann schreib mir einfach gerne direkt eine E-Mail an
<ClientOnly><a class="mail" href="mailto:anfragen@webfussel.de">anfragen@webfussel.de<Icon name="ri:mail-line" aria-hidden="true" alt="mail icon" mode="svg" /></a></ClientOnly>
<ClientOnly><a class="mail" href="mailto:anfragen@webfussel.de">anfragen@webfussel.de<Icon name="ph:envelope-duotone" aria-hidden="true" alt="mail icon" size="1.2em" mode="svg" /></a></ClientOnly>
</p>
<h3>Keine Kohle? Kommt vor.</h3>
<p>Meld dich trotzdem. Eventuell ist dein Projekt ja cool genug, dass ich dir da auch entsprechend entgegenkommen kann. :)</p>
@ -38,7 +38,7 @@
</p>
<ClientOnly>
<div class="network-list margin-top">
<div class="scroll-container default-gap">
<div class="scroll-container gap-default">
<Person ref="persons" v-for="person in network" v-bind="person" />
</div>
</div>

14
app/components/Skills.vue
View file

@ -2,26 +2,26 @@
<section id="skills" class="Skills content">
<h2>Meine Expertise.</h2>
<h3>Dies sind meine <span class="highlight">Spezialgebiete</span> - aber ich bin flexibel!</h3>
<div class="skill-list margin-top default-gap">
<article class="z-2 card flex-col default-gap" v-for="skill in skills">
<div class="skill-list margin-top gap-default">
<article class="z-2 card flex-col gap-default" v-for="skill in skills">
<h3>{{skill.title}}</h3>
<main>
<p v-for="(t, i) in skill.text" :class="[i === skills.length - 1 && 'margin-top bold']">{{t}}</p>
<p v-for="(t, i) in skill.text" :class="[i === skill.text.length - 1 && 'margin-top bold']">{{t}}</p>
</main>
</article>
</div>
<article class="tech-list z-2 card flex-col default-gap margin-top">
<article class="tech-list z-2 card flex-col gap-default margin-top">
<h3>Technologien</h3>
<p>Neben den klassischen Webentwicklungsstandards JavaScript, HTML und CSS biete ich außerdem folgende Technologien.</p>
<ul class="default-gap">
<ul class="gap-default">
<li v-for="tech in technologies">
<Technology v-bind="tech" size="l"/>
</li>
</ul>
</article>
<div class="bottom flex-col margin-top default-gap">
<div class="bottom flex-col margin-top gap-default">
<h3>Manche von euch haben hier sicher kein Wort verstanden.</h3>
<Button href="#services" class="cta">
<Button href="#skills_easy" class="cta">
<span class="animate-up-down">
<Icon name="ph:caret-double-down-duotone" size="1.5em" mode="svg" />
</span>

52
app/components/SkillsEasy.vue Normal file
View file

@ -0,0 +1,52 @@
<template>
<section id="skills_easy" class="Skills content">
<h2>Jetzt mal ganz konkret.</h2>
<h3>In diesem Abschnitt jetzt mal ganz <span class="highlight">ohne Technik-Blabla</span>.</h3>
<div class="flex-col margin-top gap-default">
<article class="z-2 card flex-row gap-default" v-for="(skill, skillIndex) in skills" :class="[skillIndex % 2 && 'reverse']">
<img :src="skill.img" alt="" class="card-img z-4" />
<div class="flex-col gap-default">
<h3>{{skill.title}}</h3>
<main class="flex-col gap-sm">
<p v-for="(t, i) in skill.text" :class="[i === skill.text.length - 1 && 'margin-top bold']">{{t}}</p>
</main>
</div>
</article>
</div>
</section>
</template>
<script setup lang="ts">
const skills = [
{
img: 'https://picsum.photos/550/350.webp?random=1',
title: 'Das, was du sehen kannst',
text: [
'Die meisten Anwendungen haben eine grafische Benutzeroberfläche - die so genannte GUI. Wenn etwas graphisch ist, ' +
'dann bedeutet das auch natürlich, dass es sinnvoll dargestellt werden muss. Dafür verwenden wir kleine Bausteine, die wir Komponenten nennen.',
'Grundsätzlich lassen sich komplette Anwendungen und auch einfache Webseiten ziemlich cool über Komponenten aufbauen, sodass wir wiederkehrende Elemente ' +
'wie Buttons, Textabschnitte, Links oder Teaser immer wieder verwenden können - selbst wenn sich diese in ihren Details wie Farben oder Icons unterscheiden.',
'Diese Komponenten so zu entwickeln, dass sie wirklich flexibel sind und auch perfekt mit dem Design übereinstimmen ist gar nicht so einfach, denn oft sollten sie ' +
'auch mehr können als im Design kurzfristig ersichtlich ist.',
'Diese Voraussicht, für den Fall der Fälle vorzusorgen: Die gibt\'s bei mir dazu. Fussel-Ehrenwort.'
],
}, {
img: 'https://picsum.photos/550/350.webp?random=2',
title: 'Da, wo du eintragen kannst',
text: [
'Du hast Daten in einer Datenbank liegen, aber keine Ahnung, wie du da gescheit rankommen sollst?',
'Liegen deine Daten eventuell sogar verstreut an mehreren Orten, über Datenbanken, Dateien und anderen Storagemöglichkeiten verteilt?',
'Kein Ding. Ich bau dir eine Schnittstelle, die alles easy zusammenträgt.'
],
}, {
img: 'https://picsum.photos/550/350.webp?random=3',
title: 'Headless CMS',
text: [
'Wenn man ein Headless CMS anbinden will, dann verknüpft das Komponenten und APIs.',
'Für eine saubere und dynamische Einbindung reicht die Library, die euch vom Hersteller zur Verfügung gestellt wird, oft nicht aus.',
'Übersichtliche Projektstruktur und saubere Auflösung der Daten - mit Fusselgarantie.'
],
}
]
</script>

4
app/pages/imp.vue
View file

@ -1,6 +1,6 @@
<template>
<div>
<section class="Imp flex-col default-gap content full">
<section class="Imp flex-col gap-default content full">
<div>
<p>
Fiona Lena Urban<br/>
@ -55,7 +55,7 @@
</p>
</div>
<div class="flex-col default-gap">
<div class="flex-col gap-default">
<h3>Quellenangaben</h3>
<div>
<h4>Bilder</h4>

1
app/pages/index.vue
View file

@ -2,5 +2,6 @@
<div>
<Intro />
<Skills />
<SkillsEasy />
</div>
</template>