INIT
This commit is contained in:
commit
c04f9e66ca
21 changed files with 12436 additions and 0 deletions
20
components/Button/Button.css
Normal file
20
components/Button/Button.css
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
.Button {
|
||||
all: unset;
|
||||
transition: 250ms;
|
||||
background: var(--color-orange);
|
||||
color: var(--color-black);
|
||||
cursor: pointer;
|
||||
padding: 1rem 1.5rem;
|
||||
outline: 3px solid var(--color-black);
|
||||
box-shadow: 0 0 0 0 var(--color-orange);
|
||||
border-radius: 99999px;
|
||||
width: max-content;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 6px var(--color-orange);
|
||||
}
|
||||
|
||||
&.cta {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
15
components/Button/Button.vue
Normal file
15
components/Button/Button.vue
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<style scoped src="./Button.css"/>
|
||||
|
||||
<template>
|
||||
<button :label="label" class="Button">
|
||||
{{ label }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
type Props = {
|
||||
label : string
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
</script>
|
||||
220
components/Header/Header.css
Normal file
220
components/Header/Header.css
Normal file
|
|
@ -0,0 +1,220 @@
|
|||
.stickyWatch {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.Header {
|
||||
padding: 15px calc(15vw - 30px);
|
||||
width: 100%;
|
||||
color: var(--color-header);
|
||||
background: transparent;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
|
||||
& .logo {
|
||||
fill-rule: evenodd;
|
||||
clip-rule: evenodd;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke-miterlimit: 1.5;
|
||||
|
||||
& .fussel {
|
||||
stroke: white;
|
||||
fill: var(--color-black);
|
||||
stroke-width: 20px;
|
||||
}
|
||||
|
||||
& .glasses {
|
||||
fill: none;
|
||||
stroke: white;
|
||||
stroke-width: 62px;
|
||||
}
|
||||
}
|
||||
|
||||
& h1 {
|
||||
cursor: default;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
flex: 4;
|
||||
|
||||
& svg {
|
||||
--size: 40px;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
}
|
||||
}
|
||||
|
||||
& nav {
|
||||
flex: 5;
|
||||
position: relative;
|
||||
font-weight: normal;
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
& > .wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 30px;
|
||||
transition: 750ms;
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 0;
|
||||
|
||||
& > label {
|
||||
display: none;
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
position: relative;
|
||||
transform: rotate(0deg);
|
||||
transition: var(--transition-time) ease-in-out;
|
||||
cursor: pointer;
|
||||
z-index: 20000;
|
||||
|
||||
& > span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 5px;
|
||||
width: 100%;
|
||||
background: var(--color-white);
|
||||
border-radius: 9px;
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
transform: rotate(0deg);
|
||||
transition: .25s ease-in-out;
|
||||
|
||||
&:nth-child(1) {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:nth-child(2), &:nth-child(3) {
|
||||
top: 9px;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
top: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > input[type="checkbox"]:checked + label span:nth-child(1) {
|
||||
top: 18px;
|
||||
width: 0;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
& > input[type="checkbox"]:checked + label span:nth-child(2) {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
& > input[type="checkbox"]:checked + label span:nth-child(3) {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
& > input[type="checkbox"]:checked + label span:nth-child(4) {
|
||||
top: 18px;
|
||||
width: 0;
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&.sticks {
|
||||
--color-burger: var(--color-black);
|
||||
--color-link: var(--color-black);
|
||||
--color-header: var(--color-black);
|
||||
|
||||
& > .wrapper {
|
||||
background: var(--color-white-transparent);
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
& input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: var(--spacing-standard);
|
||||
transform: scale(1);
|
||||
|
||||
& a {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.15);
|
||||
color: var(--color-orange);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav .icon {
|
||||
transition: 250ms;
|
||||
filter: invert(1);
|
||||
height: 30px;
|
||||
|
||||
&:hover {
|
||||
filter: invert(50%) sepia(84%) saturate(868%) hue-rotate(1deg) brightness(103%) contrast(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (width < 990px) {
|
||||
.Header {
|
||||
& .wrapper {
|
||||
background: var(--color-black);
|
||||
border-radius: 15px;
|
||||
|
||||
& > label > span {
|
||||
color: var(--color-black);
|
||||
}
|
||||
}
|
||||
|
||||
& > .wrapper.wrapper > label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& input[type="checkbox"]:checked ~ nav {
|
||||
transform: translateX(-15vw);
|
||||
}
|
||||
|
||||
& nav {
|
||||
background: var(--color-black);
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
top: -15px;
|
||||
transition: var(--transition-time);
|
||||
transform: translateX(100%);
|
||||
color: var(--color-white);
|
||||
flex-direction: column;
|
||||
|
||||
& .socials {
|
||||
flex-direction: row;
|
||||
height: max-content;
|
||||
|
||||
& img {
|
||||
height: 75px;
|
||||
}
|
||||
}
|
||||
|
||||
& ul {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
gap: 8vh;
|
||||
|
||||
& li {
|
||||
padding: 15px var(--spacing-standard);
|
||||
font-size: 10vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
105
components/Header/Header.vue
Normal file
105
components/Header/Header.vue
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<style scoped src="./Header.css"/>
|
||||
<template>
|
||||
<div ref="stickyWatch" />
|
||||
<header ref="header" class="Header">
|
||||
<div ref="headerWrapper" class="wrapper z-0">
|
||||
<h1>
|
||||
<svg aria-label="Logo" class="logo" height="40" viewBox="0 0 2500 2500" width="40">
|
||||
<g id="Logo">
|
||||
<g transform="matrix(2.00744,0,-5.91646e-31,2.00744,-1223.85,-1050.52)">
|
||||
<path class="fussel"
|
||||
d="M1232.34,1444.88L1356.88,1532.06C1356.88,1532.06 1405.5,1504.81 1444.06,1395.07C1464.03,1338.21 1476.18,1339.49 1506.32,1320.35C1579.8,1273.69 1638.29,1212.62 1630.86,1195.81C1560.6,1178.12 1512.77,1137.84 1506.32,1102.15L1618.41,946.736C1618.41,946.736 1514.23,877.412 1406.69,896.922C1407.7,845.817 1413.57,804.009 1481.42,759.931C1417.36,736.758 1260.23,740.351 1182.53,834.653C1115.13,783.067 1068.98,763.931 1008.18,759.931L1045.54,872.014C999.993,865.527 914.886,866.941 858.733,902.888C912.917,941.197 943.173,985.627 958.362,1033.91C883.905,1079.32 844.648,1134.09 808.918,1195.81C875.598,1205.68 938.224,1226.42 970.816,1282.99C1016.82,1362.83 1028.77,1456.11 1107.81,1532.06L1232.34,1444.88"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-422.589,697.589)">
|
||||
<path class="glasses" d="M1747.59,277.411C1695.36,294.131 1645.34,294.246 1597.59,277.411"/>
|
||||
</g>
|
||||
<path class="glasses"
|
||||
d="M1175,975C1189.02,1037.51 1161.76,1216.53 1125,1300C1027.14,1307.22 909.088,1298.04 825,1275C798.072,1183.9 789.715,1050.66 825,950C935.158,934.697 1076.23,935.423 1175,975Z"/>
|
||||
<g transform="matrix(-1,0,0,1,2500,2.20268e-13)">
|
||||
<path class="glasses"
|
||||
d="M1175,975C1189.02,1037.51 1161.76,1216.53 1125,1300C1027.14,1307.22 909.088,1298.04 825,1275C798.072,1183.9 789.715,1050.66 825,950C935.158,934.697 1076.23,935.423 1175,975Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
webfussel
|
||||
</h1>
|
||||
<input id="navToggle" v-model="isBurgerOpen" type="checkbox">
|
||||
<label :aria-label="burgerLabel" for="navToggle">
|
||||
<span/><span/><span/><span/>
|
||||
</label>
|
||||
<nav>
|
||||
<ul class="main-nav">
|
||||
<li v-for="({label, ...rest}) in nav" :key="label" @click="isBurgerOpen = false">
|
||||
<a v-bind="rest">{{ label }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="socials">
|
||||
<li v-for="({icon, ...rest}) in socials" :key="rest.href" @click="isBurgerOpen = false">
|
||||
<a v-bind="rest">
|
||||
<img class="icon" :src="icon" :alt="rest['aria-label']" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import LinkedInIcon from 'iconoir/icons/regular/linkedin.svg'
|
||||
import MastodonIcon from 'iconoir/icons/regular/mastodon.svg'
|
||||
|
||||
let observer: IntersectionObserver
|
||||
const header = ref<HTMLElement | null>(null)
|
||||
const headerWrapper = ref<HTMLElement | null>(null)
|
||||
const stickyWatch = ref<HTMLElement | null>(null)
|
||||
|
||||
const isBurgerOpen = ref<boolean>(false)
|
||||
const burgerOpenLabel = 'Burgermenü öffnen'
|
||||
const burgerCloseLabel = 'Burgermenü schließen'
|
||||
const burgerLabel = computed(() => isBurgerOpen.value ? burgerCloseLabel : burgerOpenLabel)
|
||||
|
||||
const nav = [
|
||||
{
|
||||
href: '#about',
|
||||
label: 'About',
|
||||
'aria-label': 'Link dieser Seite: About'
|
||||
}, {
|
||||
href: '#customers',
|
||||
label: 'Kunden',
|
||||
'aria-label': 'Link dieser Seite: Kunden'
|
||||
}, {
|
||||
href: '#services',
|
||||
label: 'Services',
|
||||
'aria-label': 'Link dieser Seite: Services'
|
||||
}
|
||||
]
|
||||
|
||||
const socials = [
|
||||
{
|
||||
href: 'https://www.linkedin.com/in/webfussel/',
|
||||
icon: LinkedInIcon,
|
||||
'aria-label': 'Externer Link: LinkedIn Profil'
|
||||
}, {
|
||||
href: 'https://mastodontech.de/@webfussel',
|
||||
icon: MastodonIcon,
|
||||
'aria-label': 'Externer Link: Mastodon Profil'
|
||||
}
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
observer = new IntersectionObserver(([entry]) => {
|
||||
const {isIntersecting} = entry
|
||||
header.value?.classList.toggle('sticks', !isIntersecting)
|
||||
headerWrapper.value?.classList.toggle('z-4', !isIntersecting)
|
||||
headerWrapper.value?.classList.toggle('z-0', isIntersecting)
|
||||
}, {
|
||||
rootMargin: '3% 0px 0px 0px'
|
||||
})
|
||||
observer.observe(stickyWatch.value!)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
observer.disconnect()
|
||||
})
|
||||
</script>
|
||||
68
components/Intro/Intro.css
Normal file
68
components/Intro/Intro.css
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
.Intro {
|
||||
background-image: radial-gradient(circle at -50vw -50vh, rgba(255,145,0,0.2) 0%, rgba(0,0,0,0) 63%, rgba(0,0,0,0) 100%);
|
||||
background-repeat: no-repeat;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 3rem;
|
||||
|
||||
.intro-img {
|
||||
width: 750px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
img {
|
||||
transition: 250ms;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
z-index: 1;
|
||||
|
||||
span.highlight {
|
||||
color: var(--color-orange);
|
||||
}
|
||||
|
||||
h2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
h3,
|
||||
.fulltext,
|
||||
.cta {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.fulltext {
|
||||
color: var(--color-white-transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 900px) {
|
||||
.Intro {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
& .intro-text, & .intro-img {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
& .intro-text,
|
||||
& h2{
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& .intro-img img {
|
||||
filter: brightness(.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
34
components/Intro/Intro.vue
Normal file
34
components/Intro/Intro.vue
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<style scoped src="./Intro.css"/>
|
||||
|
||||
<template>
|
||||
<section class="Intro content">
|
||||
<div class="intro-text">
|
||||
<h2>
|
||||
<span class="greeting">Moin.</span>
|
||||
<span class="my-name-wrapper">Ich bin <span class="highlight">Fiona</span>.</span>
|
||||
</h2>
|
||||
<h3>
|
||||
Component <span class="highlight">&</span> API Entwicklerin
|
||||
</h3>
|
||||
<p class="fulltext">
|
||||
Ich helfe Unternehmen dabei, ihre Daten so richtig nice aufzubereiten
|
||||
und in wunderschöne Komponenten zu gießen.
|
||||
</p>
|
||||
<p class="fulltext">
|
||||
Mit über 20 Jahren Erfahrung in der Webentwicklung habe ich
|
||||
inzwischen so ziemlich jeden Stuff miterlebt.
|
||||
</p>
|
||||
<p class="fulltext">
|
||||
Du brauchst großartige Komponenten und saubere Schnittstellen?
|
||||
</p>
|
||||
<Button class="cta" label="Lass mal reden" />
|
||||
</div>
|
||||
<div class="intro-img">
|
||||
<img src="/profile.webp" alt="Bild von mir" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue