interaction improvements

src/components/Button.svelte

@@ -38,7 +38,7 @@
 		padding-inline: 24px;
 		padding-block: 12px;
 		gap: 8px;
-		border: none;
+		outline: none;
 		/* text-transform: uppercase; */
 		transition: 0.15s ease;
 	}
@@ -58,6 +58,17 @@
 		color: var(--background-primary);
 	}
 
+	.button.variant-accent-yellow:active,
+	.button.variant-accent-red:active {
+		background-color: #fff;
+		color: var(--background-primary);
+	}
+
+	.button:focus {
+		outline: 2px solid var(--foreground-secondary);
+		outline-offset: 2px;
+	}
+
 	.button.disabled {
 		cursor: not-allowed;
 		opacity: 0.6;

src/components/CircuitsPattern.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	let element: HTMLElement | null = null;
+
+	let mouse = {
+		x: 0,
+		y: 0,
+	};
+
+	function handleMouseMove({ target, clientX, clientY }: MouseEvent) {
+		let rect = element?.getBoundingClientRect();
+
+		if (rect && clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom) {
+			mouse = {
+				x: clientX - rect.left,
+				y: clientY - rect.top
+			};
+		}
+	}
+</script>
+
+<svelte:window on:mousemove={handleMouseMove} />
+
+<div class="circuits-mask" bind:this={element} role="presentation">
+	<div class="circuits-pattern" style:--mouse-x="{mouse.x}px" style:--mouse-y="{mouse.y}px"></div>
+</div>
+
+<style>
+	.circuits-mask {
+		mask: linear-gradient(#000, transparent);
+		overflow: hidden;
+		contain: strict;
+		position: absolute;
+		inline-size: 100%;
+		block-size: 100%;
+		inset: 0;
+		z-index: -1;
+	}
+
+	.circuits-pattern {
+		position: relative;
+		inline-size: 100%;
+		block-size: 100%;
+		background-image: linear-gradient(hsl(var(--base-hue), 12%, 30%), var(--background-secondary), transparent);
+		mask: url("/images/pattern_circuits.svg");
+	}
+
+	.circuits-pattern::after {
+		content: "";
+		position: absolute;
+		left: var(--mouse-x);
+		top: var(--mouse-y);
+		transform: translate(-50%, -50%);
+		transition: 150ms ease;
+		opacity: 0.25;
+		background-image: radial-gradient(var(--foreground-secondary), transparent 50%);
+		inline-size: 100vw;
+		block-size: 100vw;
+		border-radius: 50%;
+	}
+</style>

src/layouts/BaseLayout.astro

@@ -123,6 +123,11 @@ const {
 		box-sizing: border-box;
 	}
 
+	:focus-visible {
+		outline: 2px solid var(--foreground-secondary);
+		outline-offset: 2px;
+	}
+
 	code {
 		font-family: var(--font-monospace);
 	}

src/pages/index.astro

@@ -2,8 +2,10 @@
 import { GITHUB_REPO_URL } from "~/config";
 
 import BaseLayout from "~/layouts/BaseLayout.astro";
-import Button from "~/components/Button.svelte";
 import PageSection from "~/components/PageSection.astro";
+
+import Button from "~/components/Button.svelte";
+import CircuitsPattern from "~/components/CircuitsPattern.svelte";
 ---
 
 <BaseLayout>
@@ -33,7 +35,9 @@ import PageSection from "~/components/PageSection.astro";
 			<div class="hero-right">
 
 			</div>
-			<div class="background-pattern" slot="outer"></div>
+			<Fragment slot="outer">
+				<CircuitsPattern client:load />
+			</Fragment>
 		</PageSection>
 	</main>
 </BaseLayout>
@@ -51,16 +55,6 @@ import PageSection from "~/components/PageSection.astro";
 		padding-block: 96px;
 	}
 
-	.background-pattern {
-		position: absolute;
-		inline-size: 100%;
-		block-size: 100%;
-		inset: 0;
-		background-image: linear-gradient(hsl(var(--base-hue), 12%, 30%), var(--background-secondary), transparent);
-		mask: url("/images/pattern_circuits.svg");
-		z-index: -1;
-	}
-
 	.title {
 		font-size: 7.2rem;
 		font-weight: 200;
@@ -76,6 +70,17 @@ import PageSection from "~/components/PageSection.astro";
 		color: var(--foreground-secondary);
 	}
 
+	.subtext a {
+		color: var(--foreground-accent-red);
+		text-decoration: none;
+		border-bottom: 1px solid currentColor;
+		transition: 250ms ease;
+	}
+
+	.subtext a:hover {
+		opacity: 0.8;
+	}
+
 	.hero-left,
 	.hero-right {
 		display: flex;