breaking git here we go !!

src/lib/banner.svelte

@@ -1,26 +1,130 @@
 <script lang="ts">
-  export let message = "";
-  export let link = "#";
- let show = true;
+	export let message = '';
+	export let link = '#';
+	let show = true;
+	let backgroundColor = '#1976D2';
+	let displayMessage = message;
+	let tooLate = false;
+	const now = new Date();
+	const deadline = new Date('2025-07-31T23:59:59');
+	const hideAfter = new Date('2025-08-14T23:59:59');
 
-  function hideBanner() {
-    show = false;
-  }
+	if (now > hideAfter) {
+		show = false;
+	} else if (now > deadline) {
+		backgroundColor = '#444';
+		displayMessage = 'There is nothing to save anymore.';
+		tooLate = true;
+	} else {
+		const totalMs = deadline.getTime() - new Date('2025-01-01').getTime();
+		const remainingMs = deadline.getTime() - now.getTime();
+		const progress = 1 - remainingMs / totalMs;
+
+		// Blend from blue to red (HSL hues: 210 → 0)
+		const hue = 210 - progress * 210;
+		// Don't change color if the hue is less than 0
+		if (hue < 0) {
+			backgroundColor = '#1976D2'; // fallback blue
+		}
+		backgroundColor = `hsl(${hue}, 80%, 45%)`;
+	}
+
+	function hideBanner() {
+		const el = document.querySelector('.glass-banner');
+		if (!(el instanceof HTMLElement)) return;
+
+		show = false;
+		const rect = el.getBoundingClientRect();
+
+		// Create shards container
+		const container = document.createElement('div');
+		container.style.position = 'fixed';
+		container.style.left = '0';
+		container.style.top = '0';
+		container.style.width = '100vw';
+		container.style.height = '100vh';
+		container.style.pointerEvents = 'none';
+		document.body.appendChild(container);
+
+		const shards = 15;
+		for (let i = 0; i < shards; i++) {
+			const shard = document.createElement('div');
+			shard.style.position = 'absolute';
+			shard.style.left = `${rect.left}px`;
+			shard.style.top = `${rect.top}px`;
+			shard.style.width = `${rect.width}px`;
+			shard.style.height = `${rect.height}px`;
+			shard.style.background = `${backgroundColor}`;
+			shard.style.clipPath = triangle();
+			shard.style.transition = 'transform 5s cubic-bezier(0.3, 1.5, 0.5, 1), opacity 2s';
+			shard.style.zIndex = '10000';
+
+			const hueShift = Math.random() * 10 - 5;
+			const baseColor = 210 + hueShift; // hue of #1976D2 is around 210
+
+			const lightness = 45 + Math.random() * 10;
+
+			shard.style.transitionDelay = `${Math.random() * 100}ms`;
+			shard.style.background = `hsl(${baseColor}, 90%, ${lightness}%)`;
+
+			if (tooLate) {
+				shard.style.background = '#444'; // gray
+			}
+			container.appendChild(shard);
+
+			// Force reflow
+			shard.getBoundingClientRect();
+
+			const dx = (Math.random() - 0.5) * 100;
+			const dy = 1000 + Math.random() * 2000;
+			const angle = (Math.random() - 0.5) * 90;
+
+			shard.style.transform = `translate(${dx}px, ${dy}px) rotate(${angle}deg)`;
+			shard.style.opacity = '0';
+		}
+
+		setTimeout(() => {
+			container.remove();
+		}, 5000);
+	}
+
+	function triangle() {
+		const x1 = Math.random() * 100;
+		const y1 = Math.random() * 100;
+		const x2 = Math.random() * 100;
+		const y2 = Math.random() * 100;
+		const x3 = Math.random() * 100;
+		const y3 = Math.random() * 100;
+		return `polygon(${x1}% ${y1}%, ${x2}% ${y2}%, ${x3}% ${y3}%)`;
+	}
 </script>
 
-
 {#if show}
-  <div class="bg-[#1976D2] text-white text-center p-2.5 fixed bottom-0 left-0 w-full z-1000 md:top-0 md:bottom-auto md:text-xl md:p-4 flex items-center">
-    <!-- X button on the left -->
-    <button on:click={hideBanner} class="text-white font-bold flex items-center p-1 rounded hover:bg-[#0d47a1] focus:outline-none">
-      <div class="i-maki:cross w-6 h-6"></div> <!-- Cross icon -->
-    </button>
-    <!-- Spacer to push content to the center -->
-    <div class="flex-1 mx-4 text-center">
-      <a href={link} class="text-white no-underline font-bold flex items-center justify-center">
-        {message}
-        <div class="i-mdi:external-link w-8 h-8 ml-2"></div> <!-- External link icon -->
-      </a>
-    </div>
-  </div>
+	<div
+		class="glass-banner text-white text-center p-2.5 fixed bottom-0 left-0 w-full z-1000 md:top-0 md:bottom-auto md:text-xl md:p-4 flex items-center"
+		style="background-color: {backgroundColor};"
+	>
+		<!-- X button on the left -->
+		<button
+			on:click={hideBanner}
+			class="text-white font-bold flex items-center p-1 rounded hover:bg-[#0d47a1] focus:outline-none"
+		>
+			<div class="i-maki:cross w-6 h-6"></div>
+			<!-- Cross icon -->
+		</button>
+		<!-- Spacer to push content to the center -->
+		{#if !tooLate}
+			<div class="flex-1 mx-4 text-center">
+				<a href={link} class="text-white no-underline font-bold flex items-center justify-center">
+					{displayMessage}
+					<div class="i-mdi:external-link w-8 h-8 ml-2"></div>
+					<!-- External link icon -->
+				</a>
+			</div>
+		{:else}
+			<div class="flex-1 mx-4 text-center">
+				{displayMessage}
+			</div>
+		{/if}
+	</div>
 {/if}

src/routes/+page.svelte

@@ -4,7 +4,10 @@
 	import { quintOut } from 'svelte/easing';
 </script>
 
-<div class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans min-h-screen" id="content">
+<div
+	class="text-black dark:text-white dark:bg-black bg-gray-300 font-sans min-h-screen"
+	id="content"
+>
 	<div
 		class="justify-center flex md:flex-row flex-col items-center m-auto shrink overflow-hidden h-25% md:h-screen"
 	>
@@ -42,14 +45,6 @@
 							<div class="i-carbon-logo-github px-2 md:px-0 my-auto text-3xl" />
 						</div>
 					</a>
-					<a href="{data.matrix}{data.mtx}">
-						<div
-							class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded"
-						>
-							<p class="text-2xl md:block hidden md:pr-2">Matrix</p>
-							<div class="i-tabler-brand-matrix md:pl-3 px-2 my-auto md:px-0 text-3xl" />
-						</div>
-					</a>
 					<a href="mailto:{data.mail}">
 						<div
 							class="flex flex-row p-1 md:dark:hover:bg-white md:dark:hover:text-black md:hover:bg-gray-400 rounded"