From cbc2587cc91b84b2c8e3937528ce35fb1434a0f7 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 26 May 2025 15:02:24 -0700
Subject: [PATCH] Header blur and sticky

---
 src/lib/components/Header.svelte | 42 +++++++++++++++++++++++++++++++-
 src/routes/+layout.svelte        |  5 ++++
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index cfead5d..406fe65 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,9 +1,21 @@
 <script lang="ts">
 	import Avatar from './Avatar.svelte'
 	import SegmentedController from './SegmentedController.svelte'
+
+	let scrollY = $state(0)
+	let hasScrolled = $derived(scrollY > 10)
+
+	$effect(() => {
+		const handleScroll = () => {
+			scrollY = window.scrollY
+		}
+
+		window.addEventListener('scroll', handleScroll)
+		return () => window.removeEventListener('scroll', handleScroll)
+	})
 </script>
 
-<header class="site-header">
+<header class="site-header {hasScrolled ? 'scrolled' : ''}">
 	<div class="header-content">
 		<a href="/about" class="header-link" aria-label="@jedmund">
 			<Avatar />
@@ -14,15 +26,43 @@
 
 <style lang="scss">
 	.site-header {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 100;
 		display: flex;
 		justify-content: center;
 		padding: $unit-5x 0;
+		transition: padding 0.3s ease;
+		pointer-events: none;
+
+		&.scrolled {
+			padding: $unit-2x 0;
+			
+			&::before {
+				content: '';
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				height: 120px;
+				background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), transparent);
+				backdrop-filter: blur(6px);
+				-webkit-backdrop-filter: blur(6px);
+				mask-image: linear-gradient(to bottom, black 0%, black 15%, transparent 90%);
+				-webkit-mask-image: linear-gradient(to bottom, black 0%, black 15%, transparent 90%);
+				pointer-events: none;
+				z-index: -1;
+			}
+		}
 	}
 
 	.header-content {
 		display: flex;
 		align-items: center;
 		gap: $unit-3x;
+		pointer-events: auto;
 	}
 
 	.header-link {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 263789c..a5bc0c4 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -37,6 +37,11 @@ user-scalable=no"
 		margin: 0;
 		padding: 0;
 	}
+	
+	main {
+		padding-top: calc(52px + #{$unit-5x * 2}); // Avatar height + header padding
+		min-height: 100vh;
+	}
 
 	@include breakpoint('phone') {
 		:global(html) {