cry/site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: cry:bafb0c07b1687d458ee9040d9ea4f092f4843618
Branches Tags
cry:main
..
compare: cry:7442f0e3b887d6ad7d0193605ca78f9185615a42
Branches Tags
cry:main

No commits in common. "bafb0c07b1687d458ee9040d9ea4f092f4843618" and "7442f0e3b887d6ad7d0193605ca78f9185615a42" have entirely different histories.
bafb0c07b1 ... 7442f0e3b8

7 changed files with 103 additions and 226 deletions
Download patch file Download diff file Expand all files Collapse all files

6
www/css/ppty.css
View file

@ -3,6 +3,12 @@
/* =========================================================== */ /* =========================================================== */
.ppty { .ppty {
/* display: block; */
/* flex-direction: column; */
/* justify-content: start; */
/* align-content: center; */
/* align-items: start; */
overflow: hidden; overflow: hidden;
font-family: monospace; font-family: monospace;

108
www/css/style.css
View file

@ -1,23 +1,10 @@
html, body {
inset: 0 0 0 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body { body {
min-height: 100%; background-color: var(--theme-bg);
} }
main { main {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
width: 100%;
height: 100%;
z-index: 0;
} }
#bg-canvas { #bg-canvas {
@ -33,7 +20,7 @@ main {
.centered-container { .centered-container {
position: absolute; position: absolute;
inset: 0 0 0 0; inset: 0 0 0 0;
margin: auto auto; margin: auto;
display: flex; display: flex;
} }
@ -48,8 +35,8 @@ main {
border: 0.5ch solid var(--theme-tty-border); border: 0.5ch solid var(--theme-tty-border);
padding: 20px; padding: 20px;
/* width: auto; */ width: auto;
/* height: auto; */ height: auto;
background-color: var(--theme-bg); background-color: var(--theme-bg);
color: var(--theme-text); color: var(--theme-text);
@ -58,99 +45,46 @@ main {
font-size: 1.5em font-size: 1.5em
} }
#boot-ppty {
z-index: 1;
}
#frames {
/* border-box means padding+margin are included in width+height */
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 5% 10% 0% 5%;
display: grid;
grid-template-areas:
"whoami butterfly"
"socials butterfly"
"disclaimer disclaimer"
;
grid-template-columns: 1fr 1fr;
}
#whoami {
grid-area: whoami;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: start;
gap: 2ch;
}
#whoami .avatar {
height: 18ch;
display: block; /* avoid inline-image gaps */
object-fit: scale-down;
}
#socials {
grid-area: socials;
}
#butterfly {
grid-area: butterfly;
}
#disclaimer {
grid-area: disclaimer;
}
.socials-list { .socials-list {
margin: 0; /* display: flex; */
padding: 0; /* flex-direction: column; */
width: 45ch; /* gap: 1ch; */
/* align-content: centerr; */
/* align-items: start; */
list-style: none; list-style: none;
width: 45ch;
} }
.socials-item { .socials-item {
border-bottom: 1px solid var(--theme-icon-off);
padding: 8px 0;
display: flex; display: flex;
align-items: start; align-items: start;
gap: 12px; gap: 12px;
padding: 8px 0;
border-bottom: 1px solid var(--theme-icon-off);
} }
.socials-icon { .socials-icon {
width: 2ch; width: 2ch;
height: 2ch; height: 2ch;
flex: 0 0 40px; /* fixed column */
object-fit: contain; object-fit: contain;
flex: 0 0 40px; /* fixed column */
} }
.socials-name { .socials-name {
flex: 1 1 9ch; flex: 1 1 140px;
overflow: hidden;
white-space: nowrap;
text-align: left; text-align: left;
min-width: 0; /* important to allow truncation if needed */
overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
} }
.socials-link { .socials-link {
min-width: 0; /* important to allow truncation if needed */ flex: 0 0 auto; /* fixed link column width; adjust as needed */
overflow: hidden;
white-space: nowrap;
text-align: left; text-align: left;
color: var(--theme-link);
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; white-space: nowrap;
color: var(--theme-tty-command);
} }

1
www/css/themes/core.css
View file

@ -1,7 +1,6 @@
.theme-base { color: var(--theme-base); } .theme-base { color: var(--theme-base); }
.theme-bg { color: var(--theme-bg); } .theme-bg { color: var(--theme-bg); }
.theme-text { color: var(--theme-text); } .theme-text { color: var(--theme-text); }
.theme-text-muted { color: var(--theme-text-muted); }
.theme-link { color: var(--theme-link); } .theme-link { color: var(--theme-link); }
.theme-icon { color: var(--theme-icon); } .theme-icon { color: var(--theme-icon); }

1
www/css/themes/maps/rose-pine.css
View file

@ -21,7 +21,6 @@ Variables:
--theme-base: var(--palette-rose-pine-base); --theme-base: var(--palette-rose-pine-base);
--theme-bg: var(--palette-rose-pine-base); --theme-bg: var(--palette-rose-pine-base);
--theme-text: var(--palette-rose-pine-text); --theme-text: var(--palette-rose-pine-text);
--theme-text-muted: var(--palette-rose-pine-muted);
--theme-link: var(--palette-rose-pine-foam); --theme-link: var(--palette-rose-pine-foam);
--theme-icon: var(--palette-rose-pine-pine); --theme-icon: var(--palette-rose-pine-pine);

95
www/index.html
View file

@ -1,4 +1,5 @@
<!doctype html> <!doctype html>
<!-- Ref: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context -->
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
@ -19,24 +20,31 @@
<!-- Theming --> <!-- Theming -->
<link type="text/css" rel="stylesheet" href="css/themes/themes/rose-pine.css" media="all" id="theme_css"> <link type="text/css" rel="stylesheet" href="css/themes/themes/rose-pine.css" media="all" id="theme_css">
<script defer>
window.onload = function() {
document.getElementById("music").play();
}
</script>
<!-- Styling --> <!-- Styling -->
<link type="text/css" rel="stylesheet" href="css/style.css"> <link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/ppty.css"> <link type="text/css" rel="stylesheet" href="css/ppty.css">
</head> </head>
<body> <body>
<!-- the background is rendered via a shader pipeline i wrote <3 --> <!-- ShadeMyCanvas (background) -->
<canvas id="bg-canvas"></canvas> <canvas id="bg-canvas"></canvas>
<!-- Vibey Background Music (WOWZERS!) --> <!-- Vibey Background Music -->
<audio autoplay id="music"> <audio id="music">
<!-- <source src="audio/UNREGISTERED_FIREARM.mpeg" type="audio/mpeg"> --> <!-- <source src="audio/UNREGISTERED_FIREARM.mpeg" type="audio/mpeg"> -->
<source src="audio/UNDO_UNDO.mpeg" type="audio/mpeg"> <source src="audio/UNDO_UNDO.mpeg" type="audio/mpeg">
<!-- Your browser does not support the audio element. -->
</audio> </audio>
<!-- Psuedo-Pseudo-Terminal (watch /dev/ppty frfr) --> <!-- Psuedo-Pseudo-Terminal -->
<div class="centered-container"> <div class="centered-container">
<div class="centered cryframe ppty" id="boot-ppty"> <div class="ppty centered cryframe" id="boot-ppty">
<div class="ppty-block"> <div class="ppty-block">
<div class="ppty-prompt"> <div class="ppty-prompt">
@ -79,38 +87,11 @@
</div> </div>
<main> <main>
<div id="frames"> <div class="centered-container">
<div class="cryframe" id="whoami"> <div class="centered cryframe"> <!-- style="display: flex; flex-direction: row; gap: 20px;"> -->
<img class="avatar" src="imgs/avatar.png" loading="eager"> <div style="display: flex; flex-direction: row; align-items: start; justify-items: end;">
<p>
<span style="font-size: 1.5em; margin-bottom: 0.5ch;">
hi!! im cry (they/them) <span style="color: var(--theme-tty-error)"><3</span><br/>
</span>
<span style="color: var(--theme-text-muted)"> <img src="imgs/avatar.png" loading="eager" height="150">
this is my first web project so don't be too mean...<br/><br/>
</span>
im a 20yr old programmer from Australia! im mostly interested in
<span class="theme-icon-off">nix, haskell, rust, c, and bash.</span><br/><br/>
but also <span class="theme-icon-off">algebra, category theory, compiler/lang design,
and any/all systems programming!!</span>
</p>
</div>
<div class="centered cryframe" id="socials">
<ul class="socials-list">
<li class="socials-item">
<!-- REF: https://fontawesome.com/icons/paper-plane?f=classic&s=solid -->
<svg class="socials-icon" xmlns="http://www.w3.org/2000/svg" viewBox="44 35 556 556">
<path style="fill: var(--theme-icon-off)" d="M568.4 37.7C578.2 34.2 589 36.7 596.4 44C603.8 51.3 606.2 62.2 602.7 72L424.7 568.9C419.7 582.8 406.6 592 391.9 592C377.7 592 364.9 583.4 359.6 570.3L295.4 412.3C290.9 401.3 292.9 388.7 300.6 379.7L395.1 267.3C400.2 261.2 399.8 252.3 394.2 246.7C388.6 241.1 379.6 240.7 373.6 245.8L261.2 340.1C252.1 347.7 239.6 349.7 228.6 345.3L70.1 280.8C57 275.5 48.4 262.7 48.4 248.5C48.4 233.8 57.6 220.7 71.5 215.7L568.4 37.7z"/>
</svg>
<div class="socials-name">Email</div>
<a class="socials-link" rel="author">them [at] dobutterfliescry.net</a>
</li>
<ul class="socials-list"> <ul class="socials-list">
<li class="socials-item"> <li class="socials-item">
@ -120,7 +101,7 @@
</svg> </svg>
<div class="socials-name">Bluesky</div> <div class="socials-name">Bluesky</div>
<a class="socials-link" href="https://bsky.app/profile/dobutterfliescry.bsky.social" rel="author">@dobutterfliescry</a> <a class="socials-link" href="https://bsky.app/profile/dobutterfliescry.bsky.social" rel="author">@dobutterfliescry.bsky.social</a>
</li> </li>
<li class="socials-item"> <li class="socials-item">
@ -133,31 +114,6 @@
<a class="socials-link" href="https://discordapp.com/users/320442794969792513" rel="author">@_cry64</a> <a class="socials-link" href="https://discordapp.com/users/320442794969792513" rel="author">@_cry64</a>
</li> </li>
<li class="socials-item">
<!-- REF: https://fontawesome.com/icons/git-alt?f=brands&s=solid -->
<svg class="socials-icon" xmlns="http://www.w3.org/2000/svg" viewBox="64 64 576 576"> <!-- viewBox="0 0 640 640" -->
<path style="fill: var(--theme-icon)" d="M535.6 300.1L340 104.5C334.6 99 327.2 96 319.6 96C312 96 304.6 99 299.2 104.4L258.5 145L310 196.5C337.1 187.4 362.7 213.3 353.4 240.2L403.1 289.9C437.3 278.1 464.3 320.9 438.6 346.6C412.1 373.1 368.4 343.7 382.6 309.3L336.3 263L336.3 384.9C361.6 397.4 358.6 426.7 345.4 439.9C339 446.3 330.2 450 321.1 450C312 450 303.3 446.4 296.8 439.9C279.2 422.3 285.7 393 308 383.9L308 260.9C287.2 252.4 283.4 230.2 289.4 215.9L238.6 165L104.5 299.1C99 304.6 96 311.9 96 319.5C96 327.1 99 334.5 104.5 339.9L300.1 535.6C305.5 541 312.8 544 320.5 544C328.2 544 335.5 541 340.9 535.6L535.6 340.9C541 335.5 544 328.1 544 320.5C544 312.9 541 305.5 535.6 300.1z"/>
</svg>
<div class="socials-name">Tearforge</div>
<a class="socials-link" href="https://tearforge.net/cry" rel="author">@cry</a>
</li>
<li class="socials-item">
<!-- REF: https://dashboardicons.com/icons/codeberg -->
<svg class="socials-icon" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512">
<linearGradient id="a" x1="42506.715" x2="42624.223" y1="7642.54" y2="7408.031" gradientTransform="matrix(1.4006 0 0 -1.4006 -59281.402 10836.918)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#fff;stop-opacity:0"/>
<stop offset=".495" style="stop-color: var(--theme-icon-off)"/>
<stop offset="1" style="stop-color: var(--theme-icon)"/>
</linearGradient>
<path style="opacity:.5;fill:url(#a)" d="M260.8 129.9c-1.2 0-2.2.8-2.2 1.7v.3l98.6 369.7c47.7-20.5 88-55.1 115.6-99.1l-210-271.8c-.4-.5-1.2-.8-2-.8"/>
<path style="fill: var(--theme-icon-off)" d="M255 10.4C114 11 0 125.4 0 266.4c0 48.1 13.5 95.2 39.1 136l213.4-275.9c1.1-1.4 3.5-1.9 5.5-1.1.6.3 1.1.6 1.5 1.1l213.5 276c25.5-40.8 39.1-87.9 39.1-136 0-141.4-114.6-256-256-256-.4-.1-.7-.1-1.1-.1"/>
</svg>
<div class="socials-name">Codeberg</div>
<a class="socials-link" href="https://codeberg.org/cry64" rel="author">@cry64</a>
</li>
<li class="socials-item"> <li class="socials-item">
<!-- REF: https://dashboardicons.com/icons/github --> <!-- REF: https://dashboardicons.com/icons/github -->
@ -171,6 +127,9 @@
</ul> </ul>
</div> </div>
<p>hi!! i'm cry (they/them) <3</p>
</div>
<!-- <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> ` ' </span><span class="theme-tty-warning">--&gt;</span> --> <!-- <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> ` ' </span><span class="theme-tty-warning">--&gt;</span> -->
<!-- <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> ;,,, ` ' ,,,; </span><span class="theme-tty-warning">--&gt;</span> --> <!-- <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> ;,,, ` ' ,,,; </span><span class="theme-tty-warning">--&gt;</span> -->
<!-- <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> `CRY6666bo. : : .od8888CRY' </span><span class="theme-tty-warning">--&gt;</span> --> <!-- <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> `CRY6666bo. : : .od8888CRY' </span><span class="theme-tty-warning">--&gt;</span> -->
@ -189,7 +148,7 @@
<!-- <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> '8Y `Y Y' Y8' </span><span class="theme-tty-warning">--&gt;</span> --> <!-- <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> '8Y `Y Y' Y8' </span><span class="theme-tty-warning">--&gt;</span> -->
<!-- <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> Y Y </span><span class="theme-tty-warning">--&gt;</span> --> <!-- <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> Y Y </span><span class="theme-tty-warning">--&gt;</span> -->
<!-- <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> ! ! </span><span class="theme-tty-warning">--&gt;</span> --> <!-- <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> ! ! </span><span class="theme-tty-warning">--&gt;</span> -->
<pre class="centered cryframe" id="butterfly"> <pre class="centered cryframe">
<span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> ` ' </span><span class="theme-tty-warning">--&gt;</span> <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> ` ' </span><span class="theme-tty-warning">--&gt;</span>
<span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> ;,,, ` ' ,,,; </span><span class="theme-tty-warning">--&gt;</span> <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> ;,,, ` ' ,,,; </span><span class="theme-tty-warning">--&gt;</span>
<span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> `<span class="theme-tty-output">CRY</span>6666bo. : : .od8888<span class="theme-tty-output">CRY</span>' </span><span class="theme-tty-warning">--&gt;</span> <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> `<span class="theme-tty-output">CRY</span>6666bo. : : .od8888<span class="theme-tty-output">CRY</span>' </span><span class="theme-tty-warning">--&gt;</span>
@ -208,16 +167,6 @@
<span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> '8Y `Y Y' Y8' </span><span class="theme-tty-warning">--&gt;</span> <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> '8Y `Y Y' Y8' </span><span class="theme-tty-warning">--&gt;</span>
<span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> Y Y </span><span class="theme-tty-warning">--&gt;</span> <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> Y Y </span><span class="theme-tty-warning">--&gt;</span>
<span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> ! ! </span><span class="theme-tty-warning">--&gt;</span></pre> <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> ! ! </span><span class="theme-tty-warning">--&gt;</span></pre>
<p class="cryframe" id="disclaimer" style="margin: auto auto auto 0;">
<span class="theme-tty-warning" style="font-size: 1.2em;">
<b class="theme-tty-error" >NONE</b> of my work has been made with contribution from an LLM.<br/>
</span>
plus i really love programming! why would i want something to do it for me??<br/>
<span class="theme-text-muted">
when i design neural networks it is purely as an extension of classical statistical regression techniques, never for some shitty LLM...
</span>
</p>
</div> </div>
</main> </main>

41
www/js/main.js
View file

@ -3,25 +3,7 @@ import { PPTY } from "./ppty/lib.js";
main(); main();
function showMain(debug) { function endBoot(root) {
document
.querySelector("main")
.animate(
[
{ visibility: "visible" },
{ visibility: "visible", opacity: 1 }
],
{
duration: 400 * !debug,
fill: "forwards",
}
);
}
function endBoot(root, debug) {
if (root == null)
return showMain();
const style = getComputedStyle(root); const style = getComputedStyle(root);
const paddingLeft = parseFloat(style.paddingLeft); const paddingLeft = parseFloat(style.paddingLeft);
const paddingRight = parseFloat(style.paddingRight); const paddingRight = parseFloat(style.paddingRight);
@ -36,15 +18,26 @@ function endBoot(root, debug) {
const fade = root.animate( const fade = root.animate(
[{ opacity: 0 }], [{ opacity: 0 }],
{ {
duration: 400 * !debug, duration: 400,
delay: 3000 * !debug, delay: 3000,
fill: "forwards", fill: "forwards",
} }
); );
fade.onfinish = () => { fade.onfinish = () => {
root.remove(); root.remove();
showMain(); document
.querySelector("main")
.animate(
[
{ visibility: "visible" },
{ visibility: "visible", opacity: 1 }
],
{
duration: 400,
fill: "forwards",
}
);
} }
} }
@ -56,7 +49,7 @@ function main() {
{ {
cps: 12, cps: 12,
promptDelay: 0.5, promptDelay: 0.5,
commandDelay: 2.4, commandDelay: 0.7,
outputDelay: 1, outputDelay: 1,
blinkTime: 0.6, blinkTime: 0.6,
}, },
@ -69,7 +62,7 @@ function main() {
} }
]) ])
.onfinish(endBoot) .onfinish(endBoot)
.run(false); .run();
const canvas = document.querySelector("#bg-canvas"); const canvas = document.querySelector("#bg-canvas");
canvas.setAttribute('width', window.innerWidth); canvas.setAttribute('width', window.innerWidth);

13
www/js/ppty/ppty.js
View file

@ -8,8 +8,8 @@ function animDelta(anim) {
class PPTY { class PPTY {
#root; #root;
#blockOptions; #blockOptions;
#startCallback = (root, debug) => { }; #startCallback = _ => { };
#finishCallback = (root, debug) => { }; #finishCallback = _ => { };
constructor(root, blockOptions) { constructor(root, blockOptions) {
this.#root = root; this.#root = root;
@ -26,13 +26,10 @@ class PPTY {
return this; return this;
} }
run(debug = false) { run() {
var delay = 0; var delay = 0;
this.#startCallback(this.#root, debug); this.#startCallback(this.#root);
if (debug)
return this.#finishCallback(this.#root, debug);
this.#root this.#root
.querySelectorAll(".ppty-block") .querySelectorAll(".ppty-block")
@ -123,7 +120,7 @@ class PPTY {
setTimeout(() => { setTimeout(() => {
command.style.borderRightColor = "transparent"; command.style.borderRightColor = "transparent";
if (index == blocks.length - 1) if (index == blocks.length - 1)
this.#finishCallback(this.#root, debug); this.#finishCallback(this.#root);
}, delay); }, delay);
}); });
} }