166 lines
3.1 KiB
Plaintext
166 lines
3.1 KiB
Plaintext
---
|
|
import arrowDown from '../../assets/arrow-down-indicator.svg';
|
|
import WelcomeTypewriter from '../bits/WelcomeTypewriter.astro';
|
|
import BackgroundGradient from "../bits/BackgroundGradient.astro";
|
|
|
|
import { images } from "../../content/design";
|
|
|
|
const Background = images.welcome.motion;
|
|
const BackgroundStatic = images.welcome.static;
|
|
|
|
export interface Props {
|
|
nextSlideAnchor: string;
|
|
}
|
|
|
|
const { nextSlideAnchor } = Astro.props;
|
|
//const backgroundImage = `url(${background.src})`;
|
|
---
|
|
|
|
<header id="top" role="main">
|
|
<Background class="motion" />
|
|
<BackgroundStatic class="static" />
|
|
<BackgroundGradient />
|
|
<div class="welcome-text">
|
|
<h1>Hallöchen!</h1>
|
|
<p class="subtitle">Ich bin Daniel.</p>
|
|
<p class="subtitle"></p>
|
|
<WelcomeTypewriter />
|
|
</div>
|
|
<div class="contacts">
|
|
|
|
</div>
|
|
<a href={"#" + (nextSlideAnchor ? nextSlideAnchor : "")} class="arrow-down"><img src={arrowDown.src} alt="Runterscrollen" /></a>
|
|
</header>
|
|
|
|
<style>
|
|
header {
|
|
background: #000;
|
|
background-image: var(--backgroundImage);
|
|
content-visibility: auto;
|
|
contain-intrinsic-size: 100dvw 100dvh;
|
|
background-size: cover;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
svg {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: -10;
|
|
}
|
|
|
|
.welcome-text {
|
|
background-image: linear-gradient(
|
|
135deg,
|
|
rgb(235, 190, 244) 0%,
|
|
hsl(282deg 67% 74%) 20%,
|
|
hsl(274deg 67% 64%) 40%,
|
|
hsl(221deg 100% 64%) 60%,
|
|
hsl(193deg 100% 50%) 80%,
|
|
hsl(176deg 77% 83%) 100%
|
|
);
|
|
background-clip: text;
|
|
color: transparent;
|
|
text-shadow: 0 0 2em rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
.welcome-text h1 {
|
|
font-size: min(19dvw, 3em);
|
|
font-weight: 600;
|
|
text-align: center;
|
|
margin-top: 0em;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: min(5vw, 2rem);
|
|
font-weight: 400;
|
|
text-align: center;
|
|
margin: 0em;
|
|
}
|
|
|
|
.welcome-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.arrow-down {
|
|
color: #fff;
|
|
opacity: 0.3;
|
|
font-size: 5em;
|
|
position: absolute;
|
|
bottom: 1em;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 1em;
|
|
height: 1em;
|
|
cursor: pointer;
|
|
animation: arrow-bounce 4s linear infinite;
|
|
transition: bottom 0.5s ease-out, opacity 0.3s ease-out;
|
|
padding: 0.3em 0.5em;
|
|
}
|
|
|
|
.arrow-down:hover {
|
|
animation: arrow-bounce-hover 0.3s ease-out forwards;
|
|
}
|
|
|
|
@keyframes arrow-bounce {
|
|
0%, 80% {
|
|
bottom: 1em;
|
|
opacity: 0.3;
|
|
}
|
|
85% {
|
|
bottom: 0.8em;
|
|
opacity: 0.5;
|
|
}
|
|
90% {
|
|
bottom: 1em;
|
|
opacity: 0.3;
|
|
}
|
|
95% {
|
|
bottom: 0.8em;
|
|
opacity: 0.5;
|
|
}
|
|
100% {
|
|
bottom: 1em;
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
|
|
@keyframes arrow-bounce-hover {
|
|
to {
|
|
bottom: 0.8em;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.motion {
|
|
display: block !important;
|
|
}
|
|
.static {
|
|
display: none !important;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.motion {
|
|
display: none !important;
|
|
}
|
|
.static {
|
|
display: block !important;
|
|
}
|
|
.arrow-down {
|
|
animation: none;
|
|
}
|
|
}
|
|
</style>
|