diff --git a/src/lib/topography.svg b/src/lib/topography.svg
new file mode 100644
index 0000000..adeee82
--- /dev/null
+++ b/src/lib/topography.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/routes/(main)/+layout.svelte b/src/routes/(main)/+layout.svelte
index 40319d0..bcda503 100644
--- a/src/routes/(main)/+layout.svelte
+++ b/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
diff --git a/src/routes/(main)/+page.svelte b/src/routes/(main)/+page.svelte
index 56caa8f..ebd24e0 100644
--- a/src/routes/(main)/+page.svelte
+++ b/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(
+ ``
+ ),
+ // topography
+ Topography,
+
+ // signal (random rectangles)
+ 'data:image/svg+xml,' +
+ encodeURIComponent(
+ ``
+ ),
+ // bubbles
+ 'data:image/svg+xml,' +
+ encodeURIComponent(
+ ``
+ ),
+ // plus
+ 'data:image/svg+xml,' +
+ encodeURIComponent(
+ ``
+ ),
+ ]
+
+ 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."