mat/matdoesdev
1
0
Fork 0
mirror of https://github.com/mat-1/matdoesdev.git synced 2025-08-02 14:46:04 +00:00
Code Activity Actions

add backgrounds

Browse source
This commit is contained in:
mat 2024-09-08 01:20:31 +00:00
parent c0d203274e
commit adfb84178d
3 changed files with 51 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/lib/topography.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 89 KiB

1
src/routes/(main)/+layout.svelte
View file

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

50
src/routes/(main)/+page.svelte
View file

@ -6,10 +6,13 @@
import KofiIcon from '$lib/Icon/Kofi.svelte' import KofiIcon from '$lib/Icon/Kofi.svelte'
import ButtonRow from '$lib/ButtonRow.svelte' import ButtonRow from '$lib/ButtonRow.svelte'
import IconButtonRow from '$lib/IconButtonRow.svelte' import IconButtonRow from '$lib/IconButtonRow.svelte'
import Topography from '$lib/topography.svg'
let titleEl: HTMLParagraphElement let titleEl: HTMLParagraphElement
onMount(async () => { onMount(async () => {
maybeAddRandomBackground()
const delays = [60, 63, 126, 19, 88, 95, 91, 61, 83] as const const delays = [60, 63, 126, 19, 88, 95, 91, 61, 83] as const
const titleContent = titleEl.textContent ?? '' const titleContent = titleEl.textContent ?? ''
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 defaultSentence1 = "I'm mat, I do full-stack software development."
const defaultSentence2 = const defaultSentence2 =
"This portfolio contains my blog posts and links to some of the projects I've made." "This portfolio contains my blog posts and links to some of the projects I've made."