diff --git a/index.html b/index.html index e799228..63a9553 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ + ʕ·ᴥ·ʔ- august kline @@ -11,7 +12,7 @@
-

ʕ·ᴥ·ʔ- hi! i'm august. or kline.

+

hi! i'm august. or kline.

i like to build systems. lately i've been working on george. here's my @@ -22,9 +23,11 @@ email (and my resume - if ur into that sorta thing) + too!)

+
+
diff --git a/public/14thstsunrise.gif b/public/14thstsunrise.gif new file mode 100644 index 0000000..b28cc11 Binary files /dev/null and b/public/14thstsunrise.gif differ diff --git a/public/ducklings.gif b/public/ducklings.gif new file mode 100644 index 0000000..33fabd3 Binary files /dev/null and b/public/ducklings.gif differ diff --git a/public/ermine.gif b/public/ermine.gif new file mode 100644 index 0000000..ee53a66 Binary files /dev/null and b/public/ermine.gif differ diff --git a/public/fieldnotes.gif b/public/fieldnotes.gif new file mode 100644 index 0000000..85d2c04 Binary files /dev/null and b/public/fieldnotes.gif differ diff --git a/public/flowers.jpeg b/public/flowers.jpeg new file mode 100644 index 0000000..7d08ab8 Binary files /dev/null and b/public/flowers.jpeg differ diff --git a/public/georgerasp.gif b/public/georgerasp.gif new file mode 100644 index 0000000..ec283b3 Binary files /dev/null and b/public/georgerasp.gif differ diff --git a/public/heron.jpeg b/public/heron.jpeg new file mode 100644 index 0000000..1717209 Binary files /dev/null and b/public/heron.jpeg differ diff --git a/public/lamp.gif b/public/lamp.gif new file mode 100644 index 0000000..559d8ea Binary files /dev/null and b/public/lamp.gif differ diff --git a/public/mirror.jpeg b/public/mirror.jpeg new file mode 100644 index 0000000..a2c58ed Binary files /dev/null and b/public/mirror.jpeg differ diff --git a/public/ohio.jpeg b/public/ohio.jpeg new file mode 100644 index 0000000..414f39d Binary files /dev/null and b/public/ohio.jpeg differ diff --git a/public/solderkitty.jpeg b/public/solderkitty.jpeg new file mode 100644 index 0000000..d32b32f Binary files /dev/null and b/public/solderkitty.jpeg differ diff --git a/src/main.ts b/src/main.ts index 9585929..7cc4a18 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,4 +1,3 @@ -import "./style.css"; import backwalkgeorge from "/backwalkgeorge.jpg"; import georgetoilet from "/georgetoilet.png"; import klinefloor from "/klinefloor.jpeg"; @@ -8,28 +7,130 @@ import klinetrain from "/klinetrain.jpeg"; import sashaklineburrito from "/sashaklineburrito.jpeg"; import sashaklinecar from "/sashaklinecar.jpeg"; import sunsetkline from "/sunsetkline.png"; +import georgerasp from "/georgerasp.gif"; +import sunsetfourteenth from "/14thstsunrise.gif"; +import solderkitty from "/solderkitty.jpeg"; +import ducklings from "/ducklings.gif"; +import fieldnotes from "/fieldnotes.gif"; +import lamp from "/lamp.gif"; +import ohio from "/ohio.jpeg"; +import heron from "/heron.jpeg"; +import flowers from "/flowers.jpeg"; +import mirror from "/mirror.jpeg"; -let app = document.getElementById("app")!; +let background = document.getElementById("background")!; + +let prefersReducedMotion = window.matchMedia( + "(prefers-reduced-motion: reduce)", +); let setImages = () => { - let images = [ - backwalkgeorge, - georgetoilet, - klinefloor, - klinemirror, - klineoutside, - klinetrain, - sashaklineburrito, - sashaklinecar, - sunsetkline, - ]; + let images: string[] = []; + if (prefersReducedMotion.matches) { + images = [ + backwalkgeorge, + georgetoilet, + klinefloor, + klinemirror, + klineoutside, + klinetrain, + sashaklineburrito, + sashaklinecar, + sunsetkline, + // georgerasp, + // sunsetfourteenth, + solderkitty, + // ducklings, + fieldnotes, + // lamp, + ohio, + heron, + flowers, + mirror, + ]; + } else { + images = [ + backwalkgeorge, + georgetoilet, + klinefloor, + klinemirror, + klineoutside, + klinetrain, + sashaklineburrito, + sashaklinecar, + sunsetkline, + georgerasp, + sunsetfourteenth, + solderkitty, + ducklings, + fieldnotes, + lamp, + ohio, + heron, + flowers, + mirror, + ]; + } + const randn_bm = (mean = 0, stdev = 0.4) => { + const u = 1 - Math.random(); + const v = Math.random(); + const z = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v); + return z * stdev + mean; + }; + + const randNums = (count: number, minDistance: number): number[] => { + const numbers: number[] = []; + + function isFarEnough(num: number): boolean { + for (const n of numbers) { + if (Math.abs(num - n) < minDistance) { + return false; + } + } + return true; + } + + while (numbers.length < count) { + const newNumber = randn_bm(); + if (isFarEnough(newNumber)) { + numbers.push(newNumber); + } + } + + return numbers; + }; + + const lefts = randNums(images.length, 0.05); + const tops = randNums(images.length, 0.05); for (let index in images) { let img = document.createElement("img"); img.setAttribute("src", images[index]); - img.style.setProperty("left", (Math.random() * 100).toString() + "%"); - img.style.setProperty("top", (Math.random() * 100).toString() + "%"); - app.append(img); + // let left = randn_bm(); + // let top = randn_bm(); + let left = lefts[index]; + let top = tops[index]; + let z = (Math.abs(left) + Math.abs(top)) / 2; + let range = { x: window.innerWidth * 0.7, y: window.innerHeight * 0.7 }; + img.style.setProperty( + "left", + `${left * range.x + window.innerWidth / 2}px`, + ); + img.style.setProperty("top", `${top * range.y + window.innerHeight / 2}px`); + img.style.setProperty("--translate-z", `${z * 3000}px`); + img.setAttribute("data-group", `${Math.floor(Math.random() * 3)}`); + background.append(img); } }; +const root = document.documentElement; + +const onMove = (ev: MouseEvent) => { + let rotateY = `${(ev.clientX - window.innerWidth / 2) * 0.001}deg`; + let rotateX = `${(ev.clientY - window.innerHeight / 2) * 0.001}deg`; + root.style.setProperty("--rotate-x", rotateX); + root.style.setProperty("--rotate-y", rotateY); +}; + +document.addEventListener("mousemove", onMove); + setImages(); diff --git a/src/style.css b/src/style.css deleted file mode 100644 index 34fa999..0000000 --- a/src/style.css +++ /dev/null @@ -1,77 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - color: var(--text-color); - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - --link-color: oklch(68% .1707 0); - --text-color: black -} - -body, -html { - inline-size: 100%; - block-size: 100%; - margin: 0; - padding: 0; - overflow: hidden -} - -#app { - inline-size: 100%; - block-size: 100%; - display: flex; - margin: 0; - padding: 0; - position: relative; - align-items: center; - justify-content: center; - flex-direction: column; - overflow: hidden -} - -h1 { - font-size: 1.5rem; - margin-block: .5rem -} - -p { - font-size: 1.5rem; - margin: 0; - text-align: justify; - inline-size: 100% -} - -a { - color: var(--link-color); - text-decoration: none; - transition: .2s text-shadow, .2s transform; - display: inline-block -} - -a:hover { - text-shadow: 0rem 0rem 1rem var(--link-color); - transform: rotate(-3deg) -} - -img { - transform: translate(-50%, -50%); - position: absolute; - inline-size: 10%; - z-index: -1; - min-inline-size: 10rem -} - -.text { - display: flex; - flex-direction: column; - align-items: center; - background: #fff; - border: 1px solid black; - box-shadow: 0 0 1.5rem #fff; - padding: .8rem 1.6rem; - inline-size: clamp(20rem, 30%, 40rem) -} diff --git a/style.css b/style.css new file mode 100644 index 0000000..b70ed38 --- /dev/null +++ b/style.css @@ -0,0 +1,125 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + color: var(--text-color); + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + --text-color: black; + --link-color: var(--text-color); + --link-shadow-color: rgba(0, 0, 0, 0.5); + --border-color: rgba(200, 200, 200, 0.5); + --text-bg-color: rgba(255, 255, 255, 0.9); + --text-border-shadow-color: rgba(255, 255, 255, 0.7); + --text-shadow-color: rgba(0, 0, 0, 0.1); + --img-bg-color: rgba(50, 50, 50, 0.2); + --img-border-color: rgba(255, 255, 255, 0.8); +} + +body, +html { + inline-size: 100%; + block-size: 100%; + margin: 0; + padding: 0; + overflow: hidden; +} + +#app { + inline-size: 100%; + block-size: 100%; + display: flex; + margin: 0; + padding: 0; + position: relative; + align-items: center; + justify-content: center; + flex-direction: column; + overflow: hidden; +} + +h1 { + font-size: 1.5rem; + margin-block: .5rem; +} + +p { + font-size: 1.5rem; + margin: 0; + text-align: justify; + text-align-last: center; + inline-size: 100%; +} + +a { + color: var(--link-color); + text-decoration: none; + transition: .2s text-shadow, .2s transform; + display: inline-block; + font-weight: 600; +} + +a:hover { + text-shadow: 0rem 0.2rem 1rem var(--link-shadow-color); + /* transform: rotate(-3deg); */ + transform: translateY(-7%) scale(1.01); +} + +img { + transform: translate(-50%, -50%) translateZ(var(--translate-z)); + position: absolute; + inline-size: 10%; + z-index: -1; + min-inline-size: 10rem; + border: 0.01rem solid var(--img-border-color); + border-radius: 1rem; + box-shadow: 0.05rem 0.05rem 0px var(--img-bg-color), + -0.05rem -0.05rem 0px var(--img-bg-color), + 0.05rem -0.05rem 0px var(--img-bg-color), + -0.05rem 0.05rem 0px var(--img-bg-color), + 0 0 1rem rgba(0, 0, 0, 0.3); +} + +#background { + transform-style: preserve-3d; + transform: rotateX(var(--rotate-x)) rotateY(var(--rotate-y)); + inline-size: 100%; + block-size: 100%; + z-index: -1; + position: absolute; +} + +@media (prefers-reduced-motion: reduce) { + #background { + transform: none; + } + + a { + transition: none; + } + + a:hover { + transform: none; + } +} + +.text { + display: flex; + flex-direction: column; + align-items: center; + background: var(--text-bg-color); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 0.01rem solid var(--border-color); + margin: 1px; + padding: .8rem 1.6rem; + inline-size: clamp(20rem, 30%, 40rem); + border-radius: 1rem; + box-shadow: 0.05rem 0.05rem 0px var(--text-border-shadow-color), + -0.05rem -0.05rem 0px var(--text-border-shadow-color), + 0.05rem -0.05rem 0px var(--text-border-shadow-color), + -0.05rem 0.05rem 0px var(--text-border-shadow-color), + 0rem 0rem 2rem var(--text-shadow-color); +}