93 lines
No EOL
3.3 KiB
Vue
93 lines
No EOL
3.3 KiB
Vue
<template>
|
||
<section id="contact" class="Contact content full gap-default">
|
||
<h1>Kontakt <Highlight>&</Highlight> Social Media</h1>
|
||
<h2>Kannst ruhig in meine <Highlight>DMs sliden</Highlight>. 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 <Highlight>Fake</Highlight>.
|
||
<br />Meld' dich gerne bei mir, wenn du so einen findest.
|
||
</p>
|
||
<ul class="row 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>
|
||
|
||
<article class="z-2 card flex-col gap-sm margin-top">
|
||
<h3>Wenn ich mal ausgebucht bin</h3>
|
||
<p>Dann buch doch einfach einen der tollen Menschen aus meinem Netzwerk!</p>
|
||
|
||
<div class="network margin-top">
|
||
<Person ref="persons" v-for="person in network" v-bind="person" />
|
||
</div>
|
||
</article>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { socials } from '~/utils/socials'
|
||
|
||
const network = [
|
||
{
|
||
name: 'Robert Janus',
|
||
img: 'robert',
|
||
tags: ['Digitalberatung', 'Webentwicklung', 'eCommerce'],
|
||
flavour: 'Website, SEO und Conversions. Auf einen Klick.',
|
||
link: 'https://robertjanus.de/webertoire',
|
||
},
|
||
{
|
||
name: 'Matthias Lehmann',
|
||
img: 'matthias',
|
||
tags: ['Onlineportale für Patienten', 'Kunden', 'Mitarbeiter'],
|
||
flavour: 'Software die macht, was DU willst!',
|
||
link: 'https://mind-deploy.de',
|
||
},
|
||
{
|
||
name: 'Maximilian Schluer',
|
||
img: 'max',
|
||
tags: ['iOS Development', 'Software-QA'],
|
||
flavour: 'Kann dein iOS-Team unterstützen oder dein Software-Qualitätsproblem lösen – egal welches.',
|
||
link: 'https://max-schluer.de',
|
||
},
|
||
{
|
||
name: 'Judith Böhlert',
|
||
img: 'judith',
|
||
tags: ['Full-stack', 'Frontend'],
|
||
flavour: 'MVPs und Prototypen - schnell, schick und ohne Drama.',
|
||
link: 'https://judithboehlert.com',
|
||
},
|
||
{
|
||
name: 'Kevin Damiani',
|
||
img: 'kevin',
|
||
tags: ['Webentwicklung', 'Frontend'],
|
||
flavour: 'Erfahrener Frontend-Entwickler mit Fokus auf Performance, Barrierefreiheit und moderne Technologien.',
|
||
link: 'https://kevin-damiani.de',
|
||
},
|
||
{
|
||
name: 'Roman Nenstiel',
|
||
img: 'roman',
|
||
tags: ['E-Commerce', 'Shopify', 'CRO', 'UX'],
|
||
flavour: 'Ich betreue deinen Shop, als wäre es mein eigener.',
|
||
link: 'https://shrimp-commerce.com',
|
||
},
|
||
{
|
||
name: 'Orell Garten',
|
||
img: 'orell',
|
||
tags: ['Backend', 'Data'],
|
||
flavour: 'Automatische Auswertung von Betriebsdaten - von Requirements bis Production.',
|
||
link: 'https://orellgarten.com',
|
||
},
|
||
].sort((a, b) => a.name.localeCompare(b.name))
|
||
</script> |