From b85e5f281b195a2895a9e057047419ca2d5ef694 Mon Sep 17 00:00:00 2001 From: dangrubbb Date: Thu, 12 Jun 2025 02:25:29 +0100 Subject: [PATCH] Upload files to "/" Initial Commit --- .gitignore | 1 + index.html | 254 +++++++++++++++++++++++++++++++++++++++++++++++++++++ script.js | 129 +++++++++++++++++++++++++++ style.css | 196 +++++++++++++++++++++++++++++++++++++++++ 4 files changed, 580 insertions(+) create mode 100644 .gitignore create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1b5b003 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +deploy_dangrubb.net.sh \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..12e7143 --- /dev/null +++ b/index.html @@ -0,0 +1,254 @@ + + + + + + dangrubb.net + + + + + + + +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +

+ dangrubb.net +

+

+ ai + blog + media + storage + cv + git

+
+
+
+ + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..59b84a2 --- /dev/null +++ b/script.js @@ -0,0 +1,129 @@ +"use strict"; +const random = (min, max) => { + return Math.round(Math.random() * (max - min)) + min; +}; +const getKeyFrames = (name, glitchPercentageDuration, steps = 3, tick = 0.1) => { + const percentageStep = 100 / steps; + const keyframes = []; + // First keyframe + const baseKeys = [0]; + for (let i = 1; i < steps; i++) { + const p = i * percentageStep; + baseKeys.push(p); + baseKeys.push(p + glitchPercentageDuration); + } + // Last keyframe + baseKeys.push(100); + keyframes.push({ + keys: baseKeys, + css: { + transform: "none", + filter: "hue-rotate(0) drop-shadow(0 0 0 transparent)" // Hack to force animation in Safari + } + }); + for (let i = 1; i < steps; i++) { + const p = i * percentageStep; + // Blue / red shadow + const color = Math.random() > 0.5 ? "rgb(255 0 0 / 0.1)" : "rgb(0 0 255 / 0.1)"; + const shadowX = random(-4, 4); + const shadowY = random(-4, 4); + keyframes.push({ + keys: [p + tick, p + glitchPercentageDuration - tick], + css: { + transform: `translateX(var(--glitch-x-${i}))`, + filter: `hue-rotate(var(--glitch-hue-${i})) drop-shadow(${shadowX}px ${shadowY}px 0 ${color})` + } + }); + } + const css = keyframes + .map((keyframe) => { + const keys = keyframe.keys + .map((key) => `${key.toFixed(2)}%`) + .join(",\n "); + const content = Object.entries(keyframe.css) + .map(([key, value]) => ` ${key}: ${value};`) + .join("\n "); + return [keys, "{", content, "}"].join("\n "); + }) + .join("\n\n "); + return `@keyframes ${name} {\n ${css}\n}`; +}; +const getStripHTML = (top, stripHeight) => { + const duration = random(5, 10); + const name = `glitch-${duration}`; + return `
`; +}; +const getGlitchHTML = (height) => { + let i = 0; + const html = []; + while (1) { + const stripHeight = random(1, 6); + if (i + stripHeight < height) { + const strip = getStripHTML(i, stripHeight); + html.push(strip); + } + else { + // Last strip + const strip = getStripHTML(i, height - i); + html.push(strip); + break; + } + i = i + stripHeight; + } + return html; +}; +/* + +If you want to generate new CSS/HTML dinamically, +uncomment the code below. + +*/ +// const html = getGlitchHTML(62); +// // HTML +// const $glitch = document.querySelector(".bard") as HTMLElement; +// $glitch.innerHTML = html.join("\n"); +// // CSS +// const css = [5,6,7,8,9,10].map((n) => { +// const glitchDurationMS = 500; +// const glitchPercentageDuration = (glitchDurationMS * 100) / (n * 1000); +// return getKeyFrames(`glitch-${n}`, glitchPercentageDuration); +// }); +// // Add generated CSS to the page +// const $style = document.createElement("style"); +// $style.innerHTML = css.join("\n"); +// document.head.appendChild($style); +// // ----- Debug -------------- // +// // Not used for the animation // +// const $code = document.querySelector(".code"); +// const escape = (html) => { +// return html +// .replace(/&/g, "&") +// .replace(//g, ">") +// .replace(/"/g, """) +// .replace(/'/g, "'"); +// }; +// $code.innerHTML = ` +//
+//
HTML
+// 
${escape(html.join("\n\n"))}
+//
+//
+//
CSS
+// 
${css.join("\n\n")}
+//
+// `; \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..6a3b10f --- /dev/null +++ b/style.css @@ -0,0 +1,196 @@ +body { + background: #0d0a14; + padding: 40px 20px; + font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; + color: #9d9aa4; +} + +.bard { + margin: 0 auto 40px; + width: 65em; + height: 62em; + font-size: 2px; +} +@media (min-width: 360px) { + .bard { + font-size: 3px; + } +} +@media (min-width: 600px) { + .bard { + font-size: 4px; + } +} +@media (min-width: 1000px) { + .bard { + font-size: 5px; + } +} + +.bard img { + width: 100%; + height: auto; + position: absolute; + left: 0; + top: 0; +} + +.strip { + overflow: hidden; + position: relative; + animation-iteration-count: infinite; + animation-direction: alternate; + animation-timing-function: linear; + image-rendering: pixelated; + image-rendering: -moz-crisp-edges; + image-rendering: crisp-edges; + background-size: 100% auto; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbwAAAG8CAYAAAClsBDfAAABMmVYSWZJSSoACAAAAAwACwACAA4AAACeAAAAAAEEAAEAAAC8AQAAAQEEAAEAAAC8AQAAAgEDAAMAAACsAAAAEgEDAAEAAAABAAAAGgEFAAEAAACyAAAAGwEFAAEAAAC6AAAAKAEDAAEAAAACAAAAMQECAA0AAADCAAAAMgECABQAAADQAAAAEwIDAAEAAAABAAAAaYcEAAEAAADkAAAAAAAAAGdUaHVtYiAzLjEyLjQACAAIAAgALAEAAAEAAAAsAQAAAQAAAEdJTVAgMi4xMC4zOAAAMjAyNDoxMToyNSAxOToyOTo1OQAGAACQBwAEAAAAMDIyMQGRBwAEAAAAAQIDAACgBwAEAAAAMDEwMAGgAwABAAAAAQAAAAKgBAABAAAAvAEAAAOgBAABAAAAvAEAAAAAAADMGVjUAAABg2lDQ1BJQ0MgcHJvZmlsZQAAeJx9kT1Iw0AcxV9TpaIVBztIUchQO9lFRRxrFYpQIdQKrTqYXPoFTRqSFBdHwbXg4Mdi1cHFWVcHV0EQ/ABxdnBSdJES/5cWWsR4cNyPd/ced+8AoVFhmtUTBzTdNtPJhJjNrYqBVwwgDGAMUZlZxpwkpeA5vu7h4+tdjGd5n/tzDKp5iwE+kTjODNMm3iCe2bQNzvvEIVaSVeJz4gmTLkj8yHWlxW+ciy4LPDNkZtLzxCFisdjFShezkqkRTxNHVE2nfCHbYpXzFmetUmPte/IXBvP6yjLXaY4iiUUsQYIIBTWUUYGNGK06KRbStJ/w8Iddv0QuhVxlMHIsoAoNsusH/4Pf3VqFqclWUjAB9L44zsc4ENgFmnXH+T52nOYJ4H8GrvSOv9oAZj9Jr3e0yBEwtA1cXHc0ZQ+43AFGngzZlF3JT1MoFID3M/qmHDB8C/SvtXpr7+P0AchQV6kb4OAQiBYpe93j3X3dvf17pt3fD6GhcrmeKfbWAAAOW2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNC40LjAtRXhpdjIiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iCiAgICB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6R0lNUD0iaHR0cDovL3d3dy5naW1wLm9yZy94bXAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgIHhtcE1NOkRvY3VtZW50SUQ9ImdpbXA6ZG9jaWQ6Z2ltcDplMTdhZmQ4Ni1iYzkzLTQzMzYtOGY0NS1iNGQ4MjY0YzIzZWUiCiAgIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6YjVhYzNjYWYtZjAwNS00OGFmLWIxODMtYmNhOWJkZDE4YzFkIgogICB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6YmE1Yzk1NzUtYjRjOC00OGRjLTg5NzctZDMxMzZmODFjMmJlIgogICBkYzpGb3JtYXQ9ImltYWdlL3BuZyIKICAgR0lNUDpBUEk9IjIuMCIKICAgR0lNUDpQbGF0Zm9ybT0iTGludXgiCiAgIEdJTVA6VGltZVN0YW1wPSIxNzMyNTgxMDAwNzYyOTU0IgogICBHSU1QOlZlcnNpb249IjIuMTAuMzgiCiAgIHRpZmY6T3JpZW50YXRpb249IjEiCiAgIHhtcDpDcmVhdG9yVG9vbD0iR0lNUCAyLjEwIgogICB4bXA6TWV0YWRhdGFEYXRlPSIyMDI0OjExOjI1VDE5OjI5OjU5LTA1OjAwIgogICB4bXA6TW9kaWZ5RGF0ZT0iMjAyNDoxMToyNVQxOToyOTo1OS0wNTowMCI+CiAgIDx4bXBNTTpIaXN0b3J5PgogICAgPHJkZjpTZXE+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InNhdmVkIgogICAgICBzdEV2dDpjaGFuZ2VkPSIvIgogICAgICBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmFjNmM3MmFkLTFlMGMtNDY1MC1iMTE5LTE0YWRmNmFhMzZiOSIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iR2ltcCAyLjEwIChMaW51eCkiCiAgICAgIHN0RXZ0OndoZW49IjIwMjMtMTItMTZUMTQ6Mjk6MzYtMDU6MDAiLz4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiCiAgICAgIHN0RXZ0OmNoYW5nZWQ9Ii8iCiAgICAgIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6Zjc2ZmJmODMtZjQ2OS00MWU2LWJlN2MtODg5ZDk0OGQzMjI3IgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJHaW1wIDIuMTAgKExpbnV4KSIKICAgICAgc3RFdnQ6d2hlbj0iMjAyNC0xMS0yNVQxOTozMDowMC0wNTowMCIvPgogICAgPC9yZGY6U2VxPgogICA8L3htcE1NOkhpc3Rvcnk+CiAgPC9yZGY6RGVzY3JpcHRpb24+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgCjw/eHBhY2tldCBlbmQ9InciPz7dK7T4AAAABmJLR0QAGgChAFhuGdrNAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH6AsaAB4AqvaKegAAColJ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); +} + +@keyframes glitch-5 { + 0.00%, 33.33%, 43.33%, 66.67%, 76.67%, 100.00% { + transform: none; + filter: hue-rotate(0) drop-shadow(0 0 0 transparent); + } + 33.43%, 43.23% { + transform: translateX(var(--glitch-x-1)); + filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(0px -4px 0 rgba(0, 0, 255, 0.1)); + } + 66.77%, 76.57% { + transform: translateX(var(--glitch-x-2)); + filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(-1px 0px 0 rgba(255, 0, 0, 0.1)); + } +} +@keyframes glitch-6 { + 0.00%, 33.33%, 41.67%, 66.67%, 75.00%, 100.00% { + transform: none; + filter: hue-rotate(0) drop-shadow(0 0 0 transparent); + } + 33.43%, 41.57% { + transform: translateX(var(--glitch-x-1)); + filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(-2px 3px 0 rgba(255, 0, 0, 0.1)); + } + 66.77%, 74.90% { + transform: translateX(var(--glitch-x-2)); + filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(-3px -2px 0 rgba(0, 0, 255, 0.1)); + } +} +@keyframes glitch-7 { + 0.00%, 33.33%, 40.48%, 66.67%, 73.81%, 100.00% { + transform: none; + filter: hue-rotate(0) drop-shadow(0 0 0 transparent); + } + 33.43%, 40.38% { + transform: translateX(var(--glitch-x-1)); + filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(0px -3px 0 rgba(0, 0, 255, 0.1)); + } + 66.77%, 73.71% { + transform: translateX(var(--glitch-x-2)); + filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(4px 1px 0 rgba(255, 0, 0, 0.1)); + } +} +@keyframes glitch-8 { + 0.00%, 33.33%, 39.58%, 66.67%, 72.92%, 100.00% { + transform: none; + filter: hue-rotate(0) drop-shadow(0 0 0 transparent); + } + 33.43%, 39.48% { + transform: translateX(var(--glitch-x-1)); + filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(-1px -1px 0 rgba(0, 0, 255, 0.1)); + } + 66.77%, 72.82% { + transform: translateX(var(--glitch-x-2)); + filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(3px -1px 0 rgba(0, 0, 255, 0.1)); + } +} +@keyframes glitch-9 { + 0.00%, 33.33%, 38.89%, 66.67%, 72.22%, 100.00% { + transform: none; + filter: hue-rotate(0) drop-shadow(0 0 0 transparent); + } + 33.43%, 38.79% { + transform: translateX(var(--glitch-x-1)); + filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(1px -3px 0 rgba(255, 0, 0, 0.1)); + } + 66.77%, 72.12% { + transform: translateX(var(--glitch-x-2)); + filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(1px 1px 0 rgba(255, 0, 0, 0.1)); + } +} +@keyframes glitch-10 { + 0.00%, 33.33%, 38.33%, 66.67%, 71.67%, 100.00% { + transform: none; + filter: hue-rotate(0) drop-shadow(0 0 0 transparent); + } + 33.43%, 38.23% { + transform: translateX(var(--glitch-x-1)); + filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(3px -1px 0 rgba(255, 0, 0, 0.1)); + } + 66.77%, 71.57% { + transform: translateX(var(--glitch-x-2)); + filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(-3px 2px 0 rgba(255, 0, 0, 0.1)); + } +} +p { + margin: 20px auto 0; + position: relative; + max-width: 400px; + text-align: center; + line-height: 1.3; + font-size: 0.875rem; +} + +a { + color: #6be1e9; +} + +a:focus, +a:hover, +a:visited { + opacity: 0.8; +} + +a:focus-visible { + outline: 2px solid currentColor; + outline-offset: 2px; +} + +.debug { + margin: 40px auto 0; + position: relative; + max-width: 800px; + display: flex; + flex-direction: column; + align-items: center; + max-width: 100%; +} + +.code { + margin: 10px auto 0; +} +@media (min-width: 600px) { + .code { + display: flex; + gap: 32px; + justify-content: center; + align-items: flex-start; + } +} + +.heading { + margin: 0 0 10px; + font-size: 1.5rem; + font-weight: bold; +} + +.column { + border: 1px solid rgba(255, 255, 255, 0.1); + padding: 10px; + border-radius: 4px; + color: #e8c57d; +} + +.column + .column { + color: #aa95bd; +} \ No newline at end of file