FIX: some texts and layouts for easy skill explanation
Improving site clarity
This commit is contained in:
parent
9642496e5a
commit
9e3a9d38a0
9 changed files with 101 additions and 23 deletions
|
@ -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"
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
52
app/components/SkillsEasy.vue
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue