ADD: Contact page
Add contact page with socials
This commit is contained in:
parent
a1a711b015
commit
aa962bd8db
14 changed files with 151 additions and 64 deletions
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<section id="services" class="Services content">
|
||||
<h2>Services.</h2>
|
||||
<h3>Du hast also beschlossen, dass du <span class="highlight">meine Hilfe</span> brauchst. Cool!</h3>
|
||||
<h1>Projektbuchungen</h1>
|
||||
<h2>Du hast also beschlossen, dass du <span class="highlight">meine Hilfe</span> brauchst. Cool!</h2>
|
||||
<p class="margin-top">Hinter diesen Angeboten gibt es <span class="highlight">keinerlei Abos oder versteckte Kosten</span>.
|
||||
Aus Transparenzgründen sei aber gesagt, dass sich <span class="highlight">*alle Preise zzgl. 19 % Umsatzsteuer</span>. verstehen.</p>
|
||||
|
||||
|
|
@ -48,14 +48,9 @@
|
|||
</article>
|
||||
</div>
|
||||
|
||||
<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="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>
|
||||
</article>
|
||||
<div class="flex-col gap-sm margin-top">
|
||||
<Spoiler v-for="entry in faq" v-bind="entry" class="z-2" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
|
@ -129,7 +124,7 @@ const oneOff : Service[] = [
|
|||
button: 'Frag nach!',
|
||||
link: 'https://tidycal.com/webfussel/project-booking',
|
||||
list: [
|
||||
'Anforderungsanalyse',
|
||||
'Schulungsinhalte klären',
|
||||
'Team-Workshops',
|
||||
'Azubi-Betreuung',
|
||||
'1:1 Mentoring',
|
||||
|
|
@ -138,4 +133,36 @@ const oneOff : Service[] = [
|
|||
},
|
||||
]
|
||||
|
||||
const faq = [
|
||||
{
|
||||
header: 'Warum machst du keine Stundensätze?',
|
||||
content: [
|
||||
'Ich finde Stundensätze haben für beide Seiten nur Nachteile:',
|
||||
'Wenn ich schnell und gut arbeite, dann bekomme ich weniger Geld. Hab ich mal einen Knoten im Gehirn und brauche sehr lange, muss der Kunde mehr zahlen.',
|
||||
'Klar kann man sagen, dass sich das irgendwann ausgleichen könnte - aber so weit will ich es garnicht erst kommen lassen.'
|
||||
]
|
||||
},
|
||||
{
|
||||
header: 'Welche Themen bietest du für deine Schulungen an?',
|
||||
content: [
|
||||
'Sprachen: JavaScript, TypeScript, HTML, CSS',
|
||||
'Frameworks: Vue, Nuxt',
|
||||
]
|
||||
},
|
||||
{
|
||||
header: 'Wo finden die Schulungen statt?',
|
||||
content: [
|
||||
'Die Schulungen finden online statt. Normalerweise nutze ich dafür Google Meet, aber wenn du oder deine Firma eine andere Plattform wünschen und bereitstellen bin ich natürlich flexibel.',
|
||||
'Wenn sich deine Firma in der Nähe meines Wohnortes befindet - und damit meine ich "In einer Stunde mit der Straßenbahn zu erreichen", dann kann alles natürlich auch vor Ort stattfinden.',
|
||||
]
|
||||
},
|
||||
{
|
||||
header: 'Ich hab ein cooles Projekt! Aber kein Geld...',
|
||||
content: [
|
||||
'Tja.',
|
||||
'Ne, awas. Meld dich einfach trotzdem über meine E-Mail-Adresse und vielleicht finden wir eine Lösung.'
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
</script>
|
||||
|
|
|
|||
33
app/components/Contact.vue
Normal file
33
app/components/Contact.vue
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<section id="contact" class="Contact content full gap-default">
|
||||
<h1>Kontakt <span class="highlight">&</span> Social Media</h1>
|
||||
<h2>Kannst ruhig in meine <span class="highlight">DMs sliden</span>. Oder in's Postfach.</h2>
|
||||
|
||||
<article class="z-2 card flex-col gap-sm margin-top">
|
||||
<h3>Du willst einfach nur 'ne Mail schreiben?</h3>
|
||||
<p>Ja gut, passt. Meld dich unter
|
||||
<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>
|
||||
</article>
|
||||
|
||||
<article class="z-2 card flex-col gap-sm margin-top">
|
||||
<h3>Ich auf Social Media</h3>
|
||||
<p>Falls du irgendwo einen anderen Social Media Account von mir findest, der nicht hier aufgelistet ist, aber aktiv postet, dann ist dieser höchstwahrscheinlich <span class="highlight">Fake</span>.
|
||||
<br />Meld' dich gerne bei mir, wenn du so einen findest.
|
||||
</p>
|
||||
<ul class="social-media">
|
||||
<li v-for="({icon, name, ...rest}) in socials" :key="rest.href">
|
||||
<a v-bind="rest" target="_blank">
|
||||
<Icon :name="icon" :alt="rest['aria-label']" size="1.5em" mode="svg" />
|
||||
<span>{{ name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import { socials } from '../utils/socials'
|
||||
</script>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<section id="customers" class="Customers content">
|
||||
<h2>Kunden <span class="highlight">&</span> Projekte.</h2>
|
||||
<h3>Meine bisherigen Geschäftpartner</h3>
|
||||
<h1>Kunden <span class="highlight">&</span> Projekte.</h1>
|
||||
<h2>Meine bisherigen Geschäftpartner</h2>
|
||||
<div class="customer-list margin-top gap-default">
|
||||
<a v-for="customer in customers" :href="customer.link" target="_blank" rel="noopener noreferrer">
|
||||
<img
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
/>
|
||||
</a>
|
||||
</div>
|
||||
<h3 class="margin-top-big">Projektauswahl</h3>
|
||||
<h2 class="margin-top-big">Projektauswahl</h2>
|
||||
<div class="projects-list margin-top">
|
||||
<article v-for="pr in projects">
|
||||
<div class="bg">
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<section id="services" class="Services content">
|
||||
<h2>Prepaid Flatrates.</h2>
|
||||
<h3>Genieße fusselige Qualität ohne groß herumzurechnen.</h3>
|
||||
<h1>Prepaid Flatrates</h1>
|
||||
<h2>Genieße fusselige <span class="highlight">Qualität</span> ohne groß herumzurechnen.</h2>
|
||||
|
||||
<p class="margin-top-small">Bei dir fällt ständig was an oder du hast ein langlaufendes Projekt, bei dem du immer wieder mal Unterstützung brauchst? Kein Ding.
|
||||
<p class="margin-top">Bei dir fällt ständig was an oder du hast ein langlaufendes Projekt, bei dem du immer wieder mal Unterstützung brauchst? Kein Ding.
|
||||
Hier gibt's die <span class="highlight">Entwickler-Flat</span> für planbare Kosten und On-Demand-Entwicklung. Aus Transparenzgründen sei aber gesagt, dass sich <span class="highlight">*alle Preise zzgl. 19 % Umsatzsteuer</span>. verstehen.</p>
|
||||
|
||||
<div class="Pricing margin-top">
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
</div>
|
||||
|
||||
<div class="flex-col gap-sm margin-top">
|
||||
<Spoiler v-for="entry in faq" v-bind="entry" />
|
||||
<Spoiler v-for="entry in faq" v-bind="entry" class="z-2" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
import { socials } from '../utils/socials'
|
||||
|
||||
const nav = [
|
||||
{
|
||||
|
|
@ -35,9 +35,13 @@ const nav = [
|
|||
label: 'Home',
|
||||
'aria-label': 'Link dieser Seite: Home'
|
||||
}, {
|
||||
to: `/services`,
|
||||
label: 'Leistungen',
|
||||
'aria-label': 'Link dieser Seite: Leistungen'
|
||||
to: `/booking`,
|
||||
label: 'Projektbuchung',
|
||||
'aria-label': 'Link dieser Seite: Projektbuchung'
|
||||
}, {
|
||||
to: `/flatrate`,
|
||||
label: 'Flatrate',
|
||||
'aria-label': 'Link dieser Seite: Flatrate'
|
||||
}, {
|
||||
to: `/references`,
|
||||
label: 'Referenzen',
|
||||
|
|
@ -52,34 +56,4 @@ const nav = [
|
|||
'aria-label': 'Link dieser Seite: Impressum'
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
const socials = [
|
||||
{
|
||||
href: 'https://www.linkedin.com/in/webfussel/',
|
||||
icon: 'ph:linkedin-logo-duotone',
|
||||
'aria-label': 'Externer Link: LinkedIn Profil'
|
||||
},
|
||||
{
|
||||
href: 'https://mastodontech.de/@webfussel',
|
||||
icon: 'ph:mastodon-logo-duotone',
|
||||
rel: 'me',
|
||||
'aria-label': 'Externer Link: Mastodon Profil'
|
||||
},
|
||||
{
|
||||
href: 'https://bsky.app/profile/webfussel.de',
|
||||
icon: 'wf:bluesky',
|
||||
'aria-label': 'Externer Link: Bluesky Profil'
|
||||
},
|
||||
{
|
||||
href: 'https://twitch.tv/webfussel',
|
||||
icon: 'ph:twitch-logo-duotone',
|
||||
'aria-label': 'Externer Link: Twitch Kanal'
|
||||
},
|
||||
{
|
||||
href: 'https://ko-fi.com/webfussel',
|
||||
icon: 'wf:kofi',
|
||||
'aria-label': 'Externer Link: KoFi Profil'
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue