INIT
This commit is contained in:
commit
c04f9e66ca
21 changed files with 12436 additions and 0 deletions
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
# Nuxt dev/build outputs
|
||||||
|
.output
|
||||||
|
.data
|
||||||
|
.nuxt
|
||||||
|
.nitro
|
||||||
|
.cache
|
||||||
|
dist
|
||||||
|
|
||||||
|
# Node dependencies
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
|
||||||
|
# Misc
|
||||||
|
.DS_Store
|
||||||
|
.fleet
|
||||||
|
.idea
|
||||||
|
|
||||||
|
# Local env files
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
24
Fonts.css
Normal file
24
Fonts.css
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Open Sans';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-stretch: 100%;
|
||||||
|
font-display: swap;
|
||||||
|
src: url('/opensans.woff2') format('woff2');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Roboto Condensed';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
font-display: swap;
|
||||||
|
src: url('/roboto_con_reg.woff2') format('woff2');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Roboto Condensed';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-display: swap;
|
||||||
|
src: url('/roboto_con_bold.woff2') format('woff2');
|
||||||
|
}
|
||||||
150
Globals.css
Normal file
150
Globals.css
Normal file
|
|
@ -0,0 +1,150 @@
|
||||||
|
@import './Fonts.css';
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: #6c5ce7;
|
||||||
|
color: #dfe6e9;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
border-radius: 20px;
|
||||||
|
background: #b2bec3;
|
||||||
|
transition: var(--transition-time);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
border-radius: 20px;
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-corner {
|
||||||
|
border-radius: 100%;
|
||||||
|
background: #b2bec3;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--spacing-standard: 25px;
|
||||||
|
--transition-time: 250ms;
|
||||||
|
--radius-standard: 4px;
|
||||||
|
|
||||||
|
--color-white: #ecf0f1;
|
||||||
|
--color-white-transparent: rgba(236, 240, 241, 0.8);
|
||||||
|
--color-black: #2a2723;
|
||||||
|
|
||||||
|
--color-orange: #ff9100;
|
||||||
|
|
||||||
|
--color-red: #822419;
|
||||||
|
--color-green: #236b40;
|
||||||
|
--color-yellow: #f1c40f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label.available {
|
||||||
|
background: var(--color-green);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.label.busy {
|
||||||
|
background: var(--color-yellow);
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label.booked {
|
||||||
|
background: var(--color-red);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
min-height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
overflow-y: overlay;
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
&.layer {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
color: var(--color-white);
|
||||||
|
background: var(--color-black);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-family: 'Roboto Condensed', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--color-link);
|
||||||
|
transition: var(--transition-time);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 100;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 150px 15vw;
|
||||||
|
|
||||||
|
& h2 {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.z-0 {
|
||||||
|
box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.z-1 {
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||||
|
}
|
||||||
|
|
||||||
|
.z-2 {
|
||||||
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||||
|
}
|
||||||
|
|
||||||
|
.z-3 {
|
||||||
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
||||||
|
}
|
||||||
|
|
||||||
|
.z-4 {
|
||||||
|
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
|
||||||
|
}
|
||||||
|
|
||||||
|
.z-5 {
|
||||||
|
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
|
||||||
|
}
|
||||||
75
README.md
Normal file
75
README.md
Normal file
|
|
@ -0,0 +1,75 @@
|
||||||
|
# Nuxt 3 Minimal Starter
|
||||||
|
|
||||||
|
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
|
||||||
|
Make sure to install the dependencies:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm install
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn install
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun install
|
||||||
|
```
|
||||||
|
|
||||||
|
## Development Server
|
||||||
|
|
||||||
|
Start the development server on `http://localhost:3000`:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm run dev
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn dev
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
## Production
|
||||||
|
|
||||||
|
Build the application for production:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm run build
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn build
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun run build
|
||||||
|
```
|
||||||
|
|
||||||
|
Locally preview production build:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm run preview
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm run preview
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn preview
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun run preview
|
||||||
|
```
|
||||||
|
|
||||||
|
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||||
10
app.vue
Normal file
10
app.vue
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<style src="./Globals.css" />
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<Header />
|
||||||
|
<Intro />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
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>
|
||||||
3
nuxt.config.ts
Normal file
3
nuxt.config.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
export default defineNuxtConfig({
|
||||||
|
devtools: { enabled: false }
|
||||||
|
})
|
||||||
11662
package-lock.json
generated
Normal file
11662
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
19
package.json
Normal file
19
package.json
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"name": "nuxt-app",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"build": "nuxt build",
|
||||||
|
"dev": "nuxt dev",
|
||||||
|
"prepare": "nuxt prepare",
|
||||||
|
"generate": "nuxt generate",
|
||||||
|
"preview": "nuxt preview",
|
||||||
|
"postinstall": "nuxt prepare"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"nuxt": "^3.11.2"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"iconoir": "^7.7.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
public/opensans.woff2
Normal file
BIN
public/opensans.woff2
Normal file
Binary file not shown.
BIN
public/profile.webp
Normal file
BIN
public/profile.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
public/roboto_con_bold.woff2
Normal file
BIN
public/roboto_con_bold.woff2
Normal file
Binary file not shown.
BIN
public/roboto_con_reg.woff2
Normal file
BIN
public/roboto_con_reg.woff2
Normal file
Binary file not shown.
3
server/tsconfig.json
Normal file
3
server/tsconfig.json
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"extends": "../.nuxt/tsconfig.server.json"
|
||||||
|
}
|
||||||
4
tsconfig.json
Normal file
4
tsconfig.json
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
// https://nuxt.com/docs/guide/concepts/typescript
|
||||||
|
"extends": "./.nuxt/tsconfig.json"
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue