add backgrounds

src/routes/(main)/+layout.svelte

@@ -32,7 +32,6 @@
 		// if we switched paths more than 10 times in the past 10 seconds, import $lib/gravity.js
 		pathChangeTimestamps.push(Date.now())
 		while (pathChangeTimestamps[0] < Date.now() - 10000) pathChangeTimestamps.shift()
-		console.log(pathChangeTimestamps)
 		if (pathChangeTimestamps.length >= 10) {
 			const { initGravity } = await import('$lib/gravity')
 			// wait 200ms for the animation to finish

src/routes/(main)/+page.svelte

@@ -6,10 +6,13 @@
 	import KofiIcon from '$lib/Icon/Kofi.svelte'
 	import ButtonRow from '$lib/ButtonRow.svelte'
 	import IconButtonRow from '$lib/IconButtonRow.svelte'
+	import Topography from '$lib/topography.svg'
 
 	let titleEl: HTMLParagraphElement
 
 	onMount(async () => {
+		maybeAddRandomBackground()
+
 		const delays = [60, 63, 126, 19, 88, 95, 91, 61, 83] as const
 		const titleContent = titleEl.textContent ?? ''
 		titleEl.textContent = ''
@@ -20,6 +23,53 @@
 		}
 	})
 
+	function maybeAddRandomBackground() {
+		// get css variable background-color-alt
+		const backgroundAltColor = getComputedStyle(document.body).getPropertyValue(
+			'--background-color-alt'
+		)
+		// sourced from https://heropatterns.com
+		const backgroundUrls = [
+			// texture (small dots)
+			'data:image/svg+xml,' +
+				encodeURIComponent(
+					`<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path fill='${backgroundAltColor}' fill-opacity='0.44' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'></path></svg>`
+				),
+			// topography
+			Topography,
+
+			// signal (random rectangles)
+			'data:image/svg+xml,' +
+				encodeURIComponent(
+					`<svg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='${backgroundAltColor}' fill-opacity='0.4' fill-rule='evenodd'/></svg>`
+				),
+			// bubbles
+			'data:image/svg+xml,' +
+				encodeURIComponent(
+					`<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path fill="${backgroundAltColor}" fill-rule="evenodd" d="M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm48 25a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm-43-7a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm63 31a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM34 90a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm56-76a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12 86a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm28-65a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm23-11a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm-6 60a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm29 22a5 5 0 1 0 0-10 5 5 0 0 0 0 10ZM32 63a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm57-13a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm-9-21a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM60 91a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM35 41a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM12 60a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/></svg>`
+				),
+			// plus
+			'data:image/svg+xml,' +
+				encodeURIComponent(
+					`<svg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'><g fill='none' fill-rule='evenodd'><g fill='${backgroundAltColor}' fill-opacity='0.4'><path d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/></g></g></svg>`
+				),
+		]
+
+		const backgroundIndex = localStorage.getItem('backgroundIndex')
+		if (!backgroundIndex) {
+			const shouldGetBackground = Math.random() < 0.01
+			localStorage.setItem(
+				'backgroundIndex',
+				shouldGetBackground ? String(Math.floor(Math.random() * backgroundUrls.length)) : '-1'
+			)
+		}
+
+		if (backgroundIndex !== '-1') {
+			const chosenBackgroundUrl = backgroundUrls[Number(backgroundIndex)]
+			document.body.style.backgroundImage = `url("${chosenBackgroundUrl}")`
+		}
+	}
+
 	const defaultSentence1 = "I'm mat, I do full-stack software development."
 	const defaultSentence2 =
 		"This portfolio contains my blog posts and links to some of the projects I've made."