ADD: projects
This commit is contained in:
parent
ea01b37e08
commit
e43366566e
8 changed files with 159 additions and 12 deletions
21
Globals.css
21
Globals.css
|
|
@ -126,6 +126,27 @@ span.highlight {
|
|||
color: var(--color-orange);
|
||||
}
|
||||
|
||||
span.chip {
|
||||
background: var(--color-orange);
|
||||
border-radius: 999px;
|
||||
font-size: 1rem;
|
||||
color: var(--color-black);
|
||||
height: max-content;
|
||||
padding: .5em 1em;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2rem;
|
||||
background: var(--color-black);
|
||||
border-radius: 20px;
|
||||
min-width: 300px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.color-icon {
|
||||
filter: invert(50%) sepia(84%) saturate(868%) hue-rotate(1deg) brightness(103%) contrast(100%);
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
|
|
|
|||
1
app.vue
1
app.vue
|
|
@ -6,6 +6,7 @@
|
|||
<Intro />
|
||||
<Skills />
|
||||
<Customers />
|
||||
<Services />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@
|
|||
outline: 3px solid var(--color-black);
|
||||
box-shadow: 0 0 0 0 var(--color-orange);
|
||||
border-radius: 99999px;
|
||||
width: max-content;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 6px var(--color-orange);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<style scoped src="./Customers.css"/>
|
||||
|
||||
<template>
|
||||
<section class="Customers content">
|
||||
<h2>Kunden <span class="highlight">&</span> Projekte</h2>
|
||||
<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">
|
||||
<a v-for="customer in customers" :href="customer.link" target="_blank" rel="noopener noreferrer">
|
||||
|
|
|
|||
43
components/Services/Services.css
Normal file
43
components/Services/Services.css
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
.Services {
|
||||
background-image: radial-gradient(circle at 100vw 100vh, rgba(255,145,0,0.2) 0%, rgba(0,0,0,0) 63%, rgba(0,0,0,0) 100%);
|
||||
background-color: var(--color-orange-black);
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.service-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
& article {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
flex-basis: clamp(400px, calc(33% - 3rem), 500px);
|
||||
position: relative;
|
||||
|
||||
& .chip {
|
||||
position: absolute;
|
||||
right: -1rem;
|
||||
top: calc(-1rem - 3px);
|
||||
}
|
||||
|
||||
& header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
& ul {
|
||||
list-style: none;
|
||||
gap: 1rem;
|
||||
|
||||
& li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
& .extra {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
88
components/Services/Services.vue
Normal file
88
components/Services/Services.vue
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
<style scoped src="./Services.css"/>
|
||||
|
||||
<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>
|
||||
<p class="margin-top">Hinter meinen Angeboten gibt es keinerlei Abos oder versteckte Kosten. Aus Transparenzgründen sei
|
||||
aber gesagt, dass sich alle Preise <span class="highlight">zzgl. 19% Umsatzsteuer</span> 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">
|
||||
<span>{{service.title}}</span>
|
||||
<span class="highlight">{{service.price}}</span>
|
||||
</h3>
|
||||
<span class="chip">{{service.availability}}</span>
|
||||
<p>{{service.smallClaim}}</p>
|
||||
<Button class="cta" :label="service.button" />
|
||||
<ul class="flex-col">
|
||||
<li v-for="point in service.list">
|
||||
<img class="color-icon" :src="check" aria-hidden="true" alt="checkmark icon" />
|
||||
<span>{{point}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="extra flex-col">
|
||||
<small v-for="extra in service.extra">* {{ extra }}</small>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<h3 class="margin-top-big">Mein Netzwerk</h3>
|
||||
<p class="margin-top">Doch auch wenn ich mal voll ausgelastet bin - keine Sorge! Mein <span class="highlight">Netzwerk an Profis</span> kann dir sicher auch weiterhelfen!</p>
|
||||
<div class="network-list">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import check from 'iconoir/icons/regular/double-check.svg'
|
||||
|
||||
const services = [
|
||||
{
|
||||
title: 'Bug Research',
|
||||
price: '149 € / Einmalig',
|
||||
availability: 'Frei',
|
||||
smallClaim: 'Du hast einen Bug, aber weißt nicht woher? Kein Ding.',
|
||||
button: 'Jetzt untersuchen lassen',
|
||||
list: [
|
||||
'Untersuchung des Source Code',
|
||||
'Konkrete Behebungsempfehlung',
|
||||
'Ergebnisse in spätestens 7 Tagen',
|
||||
],
|
||||
extra: [
|
||||
'Behebung je nach Schwere gegen Aufpreis möglich'
|
||||
]
|
||||
}, {
|
||||
title: 'Stundenbuchung',
|
||||
availability: 'Frei ab 16.12.24',
|
||||
price: '105 € / Stunde',
|
||||
smallClaim: 'Du brauchst einfach Unterstützung im Team, bis sich der Trubel legt?',
|
||||
button: 'Jetzt buchen',
|
||||
list: [
|
||||
'Arbeiten nach agilen Prinzipien',
|
||||
'Teilnahme an agilen Meetings',
|
||||
'Monatliche Rechnungsstellung',
|
||||
'Kündigungsfrist von einer Woche',
|
||||
],
|
||||
extra: [
|
||||
'Mindestabnahme 160 Stunden'
|
||||
]
|
||||
}, {
|
||||
title: 'Projektbuchung',
|
||||
price: 'ab 5.499 € je nach Umfang',
|
||||
availability: '3 Slots Frei',
|
||||
smallClaim: 'Umsetzung deiner Vision. Von einzelnen Tickets bis hin zu kompletten Anwendungen.',
|
||||
button: 'Jetzt durchstarten',
|
||||
list: [
|
||||
'Aufstellung der Anforderungen',
|
||||
'Untersuchung geeigneter Technologien',
|
||||
'Regelmäßiger Austausch',
|
||||
'Klare Kostenübersicht'
|
||||
],
|
||||
extra: [
|
||||
'Anzahlung 50% des Projektpreises',
|
||||
'Enddatum je nach Umfang'
|
||||
]
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
|
@ -8,14 +8,6 @@
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
& article {
|
||||
padding: 2rem;
|
||||
background: var(--color-black);
|
||||
border-radius: 20px;
|
||||
min-width: 300px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
& .bottom {
|
||||
align-items: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,9 @@
|
|||
<template>
|
||||
<section class="Skills content">
|
||||
<h2>Meine Expertise.</h2>
|
||||
<h3>Dies sind meine <span class="highlight">Spezialgebiete</span> - aber ich bin flexibel!</h3>
|
||||
<div class="skills-wrapper margin-top default-gap">
|
||||
<article class="z-2 flex-col default-gap" v-for="skill in skills">
|
||||
<article class="z-2 card flex-col default-gap" 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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue