Prettier! More images, parallax, and subtle borders

This commit is contained in:
august kline 2024-08-25 20:38:38 -04:00
parent 6112655373
commit f8f4a606e8
15 changed files with 247 additions and 95 deletions

View File

@ -4,6 +4,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/augustcircle.png" /> <link rel="icon" type="image/png" href="/augustcircle.png" />
<link rel="stylesheet" type="text/css" href="/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ʕ·ᴥ·ʔ- august kline</title> <title>ʕ·ᴥ·ʔ- august kline</title>
</head> </head>
@ -11,7 +12,7 @@
<body> <body>
<div id="app"> <div id="app">
<div class="text"> <div class="text">
<h1>ʕ·ᴥ·ʔ- hi! i'm august. or kline. </h1> <h1>hi! i'm august. or kline. </h1>
<p>i like to build systems. lately i've been working on <p>i like to build systems. lately i've been working on
<a href="https://git.augustkline.com/august/george" target="_blank" rel="noreferer">george</a>. <a href="https://git.augustkline.com/august/george" target="_blank" rel="noreferer">george</a>.
here's my here's my
@ -22,9 +23,11 @@
<a href="mailto:august@klinegareth.com" target="_blank" rel="noreferer">email</a> <a href="mailto:august@klinegareth.com" target="_blank" rel="noreferer">email</a>
(and my (and my
<a href="/augustklineResume.pdf" target="_blank" rel="noreferer">resume</a> <a href="/augustklineResume.pdf" target="_blank" rel="noreferer">resume</a>
if ur into that sorta thing) too!)
</p> </p>
</div> </div>
<div id="background">
</div>
</div> </div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>

BIN
public/14thstsunrise.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 MiB

BIN
public/ducklings.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 MiB

BIN
public/ermine.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 MiB

BIN
public/fieldnotes.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 MiB

BIN
public/flowers.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 MiB

BIN
public/georgerasp.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

BIN
public/heron.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 938 KiB

BIN
public/lamp.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 MiB

BIN
public/mirror.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
public/ohio.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

BIN
public/solderkitty.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 514 KiB

View File

@ -1,4 +1,3 @@
import "./style.css";
import backwalkgeorge from "/backwalkgeorge.jpg"; import backwalkgeorge from "/backwalkgeorge.jpg";
import georgetoilet from "/georgetoilet.png"; import georgetoilet from "/georgetoilet.png";
import klinefloor from "/klinefloor.jpeg"; import klinefloor from "/klinefloor.jpeg";
@ -8,28 +7,130 @@ import klinetrain from "/klinetrain.jpeg";
import sashaklineburrito from "/sashaklineburrito.jpeg"; import sashaklineburrito from "/sashaklineburrito.jpeg";
import sashaklinecar from "/sashaklinecar.jpeg"; import sashaklinecar from "/sashaklinecar.jpeg";
import sunsetkline from "/sunsetkline.png"; 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 setImages = () => {
let images = [ let images: string[] = [];
backwalkgeorge, if (prefersReducedMotion.matches) {
georgetoilet, images = [
klinefloor, backwalkgeorge,
klinemirror, georgetoilet,
klineoutside, klinefloor,
klinetrain, klinemirror,
sashaklineburrito, klineoutside,
sashaklinecar, klinetrain,
sunsetkline, 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) { for (let index in images) {
let img = document.createElement("img"); let img = document.createElement("img");
img.setAttribute("src", images[index]); img.setAttribute("src", images[index]);
img.style.setProperty("left", (Math.random() * 100).toString() + "%"); // let left = randn_bm();
img.style.setProperty("top", (Math.random() * 100).toString() + "%"); // let top = randn_bm();
app.append(img); 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(); setImages();

View File

@ -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)
}

125
style.css Normal file
View File

@ -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);
}