First draft

2026-02-20 07:31:50 +01:00
parent 75a2514b05
commit fd1cf2e72c
55 changed files with 6202 additions and 5102 deletions
--- a/src/components/bytes/Welcome.astro
+++ b/src/components/bytes/Welcome.astro
@@ -0,0 +1,149 @@
+---
+import Background from '../../assets/speedline.svg';
+import arrowDown from '../../assets/arrow-down-indicator.svg';
+import WelcomeTypewriter from '../bits/WelcomeTypewriter.astro';
+
+export interface Props {
+	nextSlideAnchor: string;
+}
+
+const { nextSlideAnchor } = Astro.props;
+//const backgroundImage = `url(${background.src})`;
+---
+
+<header id="welcome" role="main">
+	<Background />
+	<div id="welcome-text">
+		<h1>Hallöchen!</h1>
+		<p class="subtitle">Ich bin Daniel.</p>
+		<p class="subtitle"></p>
+		<WelcomeTypewriter />
+	</div>
+	<div id="contacts">
+		
+	</div>
+	<a href={"#" + (nextSlideAnchor ? "slide-" + nextSlideAnchor : "")} id="arrow-down"><img src={arrowDown.src} alt="Runterscrollen" /></a>
+</header>
+
+<style>
+	#welcome {
+		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;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		svg .ld.ld-speed-dash {
+			animation: none !important;
+		}
+
+		#arrow-down {
+			animation: none;
+		}
+	}
+</style>