added color ripple on hover to buttons

src/routes/+page.svelte

@@ -1,19 +1,5 @@
 <script>
-	import About from './About.svelte';
-	import Projects from './Projects.svelte';
-	import { onMount } from 'svelte';
-
-	let showAbout = false;
-	let showProjects = false;
-
-	function toggleAbout() {
-		showAbout = !showAbout;
-		showProjects = false;
-	}
-	function toggleProjects() {
-		showProjects = !showProjects;
-		showAbout = false;
-	}
+	import Nav from './Nav.svelte';
 </script>
 
 <svelte:head>
@@ -24,30 +10,8 @@
 <section>
 	<h1>noah costello</h1>
 </section>
-<section>
-	<ul>
-		<li>
-			<button class={showAbout ? 'button-active' : ''} on:click|preventDefault={toggleAbout}
-				>about</button
-			>
-		</li>
-		<li>
-			<button class={showProjects ? 'button-active' : ''} on:click|preventDefault={toggleProjects}
-				>projects</button
-			>
-		</li>
-		<li><a href="https://github.com/nmcostello" target="_blank"><button>github</button></a></li>
-		<li>
-			<a href="https://linkedin.com/in/noah-costello" target="_blank"><button>linkedin</button></a>
-		</li>
-	</ul>
-	{#if showAbout}
-		<About />
-	{/if}
-	{#if showProjects}
-		<Projects />
-	{/if}
-</section>
+
+<Nav />
 
 <style>
 	section {
@@ -62,13 +26,4 @@
 		align-items: left;
 		justify-content: left;
 	}
-
-	li {
-		list-style-type: none;
-	}
-
-	ul li {
-		font-size: 1.5em;
-		margin-bottom: 0.5em;
-	}
 </style>

src/routes/AnimatedButton.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	export let label = 'Button';
+	export let clickHandler: (event: MouseEvent) => void;
+
+	let animationFrame: number;
+
+	function handleMouseEnter(e: MouseEvent): void {
+		const button = e.currentTarget as HTMLButtonElement;
+		const rect = button.getBoundingClientRect();
+		const x = e.clientX - rect.left; // x-coordinate within the button
+		const y = e.clientY - rect.top; // y-coordinate within the button
+
+		// Define an array of pastel colors
+		const colors = ['#FF6961', '#019563', '#FFB347']; // Pastel Red, Yellow, Green, Orange
+		// Randomly select a color
+		const color = colors[Math.floor(Math.random() * colors.length)];
+
+		let startTime: number | null = null;
+		const maxSize = Math.sqrt(rect.width ** 2 + rect.height ** 2) * 2;
+
+		function animate(timestamp: number): void {
+			if (startTime === null) startTime = timestamp;
+			const elapsed = timestamp - startTime;
+			const size = Math.min(elapsed * 0.3, maxSize); // Adjust speed by changing multiplier
+
+			// Create a radial gradient that expands from the mouse position
+			button.style.backgroundImage = `radial-gradient(circle at ${x}px ${y}px, ${color} ${size}px, var(--button-color) ${size}px)`;
+
+			if (size < maxSize) {
+				animationFrame = requestAnimationFrame(animate);
+			} else {
+				cancelAnimationFrame(animationFrame);
+			}
+		}
+
+		animationFrame = requestAnimationFrame(animate);
+	}
+
+	function handleMouseLeave(e: MouseEvent): void {
+		const button = e.currentTarget as HTMLButtonElement;
+		// Cancel the animation frame
+		cancelAnimationFrame(animationFrame);
+		// Reset the background
+		button.style.backgroundImage = '';
+	}
+</script>
+
+<button on:mouseenter={handleMouseEnter} on:mouseleave={handleMouseLeave} on:click={clickHandler}>
+	{label}
+</button>
+
+<style>
+	button {
+		position: relative;
+		overflow: hidden;
+		background-color: var(--button-color);
+		color: var(--button-text);
+		border: none;
+		padding: 15px 30px;
+		font-size: 18px;
+		cursor: pointer;
+		margin: 10px;
+		font-family: var(--font-mono);
+	}
+</style>

src/routes/Nav.svelte

@@ -0,0 +1,49 @@
+<script>
+	import About from './About.svelte';
+	import Projects from './Projects.svelte';
+	import AnimatedButton from './AnimatedButton.svelte';
+
+	let showAbout = false;
+	let showProjects = false;
+
+	function toggleAbout() {
+		showAbout = !showAbout;
+		showProjects = false;
+	}
+	function toggleProjects() {
+		showProjects = !showProjects;
+		showAbout = false;
+	}
+
+	const buttons = [
+		{
+			label: 'about',
+			action: () => toggleAbout()
+		},
+		{
+			label: 'projects',
+			action: () => toggleProjects()
+		},
+		{
+			label: 'github',
+			action: () => (window.location.href = 'https://github.com/nmcostello')
+		},
+		{
+			label: 'linkedin',
+			action: () => (window.location.href = 'https://linkedin.com/in/noah-costello')
+		}
+	];
+</script>
+
+<div>
+	{#each buttons as { label, action }}
+		<AnimatedButton {label} clickHandler={action} />
+	{/each}
+</div>
+
+{#if showAbout}
+	<About />
+{/if}
+{#if showProjects}
+	<Projects />
+{/if}