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

uh no idea, i just a bunch probably...

Browse source
This commit is contained in:
Emile Clark-Boman 2026-02-06 01:20:27 +10:00
parent 795d62154b
commit bafb0c07b1
2 changed files with 174 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

75
www/css/style.css
View file

@ -1,10 +1,23 @@
html, body {
inset: 0 0 0 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
background-color: var(--theme-bg);
min-height: 100%;
}
main {
visibility: hidden;
opacity: 0;
width: 100%;
height: 100%;
z-index: 0;
}
#bg-canvas {
@ -20,7 +33,7 @@ main {
.centered-container {
position: absolute;
inset: 0 0 0 0;
margin: auto;
margin: auto auto;
display: flex;
}
@ -35,8 +48,8 @@ main {
border: 0.5ch solid var(--theme-tty-border);
padding: 20px;
width: auto;
height: auto;
/* width: auto; */
/* height: auto; */
background-color: var(--theme-bg);
color: var(--theme-text);
@ -45,6 +58,56 @@ main {
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 {
margin: 0;
padding: 0;
@ -71,7 +134,7 @@ main {
}
.socials-name {
flex: 1 1 140px;
flex: 1 1 9ch;
overflow: hidden;
white-space: nowrap;
@ -89,5 +152,5 @@ main {
text-decoration: none;
text-overflow: ellipsis;
color: var(--theme-link);
color: var(--theme-tty-command);
}

185
www/index.html
View file

@ -1,5 +1,4 @@
<!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">
<head>
<meta charset="utf-8" />
@ -20,31 +19,24 @@
<!-- Theming -->
<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 -->
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/ppty.css">
</head>
<body>
<!-- ShadeMyCanvas (background) -->
<!-- the background is rendered via a shader pipeline i wrote <3 -->
<canvas id="bg-canvas"></canvas>
<!-- Vibey Background Music -->
<audio id="music">
<!-- Vibey Background Music (WOWZERS!) -->
<audio autoplay id="music">
<!-- <source src="audio/UNREGISTERED_FIREARM.mpeg" type="audio/mpeg"> -->
<source src="audio/UNDO_UNDO.mpeg" type="audio/mpeg">
<!-- Your browser does not support the audio element. -->
</audio>
<!-- Psuedo-Pseudo-Terminal -->
<!-- Psuedo-Pseudo-Terminal (watch /dev/ppty frfr) -->
<div class="centered-container">
<div class="ppty centered cryframe" id="boot-ppty">
<div class="centered cryframe ppty" id="boot-ppty">
<div class="ppty-block">
<div class="ppty-prompt">
@ -87,75 +79,98 @@
</div>
<main>
<div class="centered-container">
<div class="centered cryframe">
<div style="display: flex; flex-direction: row; align-items: start; justify-items: center;">
<div id="frames">
<div class="cryframe" id="whoami">
<img class="avatar" src="imgs/avatar.png" loading="eager">
<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)">
this is my first web project so don't be too mean...<br/><br/>
</span>
<img src="imgs/avatar.png" loading="eager" height="150">
<ul class="socials-list">
<li class="socials-item">
<!-- REF: https://dashboardicons.com/icons/bluesky -->
<svg class="socials-icon" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 30.56 512 450.84">
<path style="fill: var(--theme-icon)" d="M111 60.9c58.7 44.1 121.8 133.4 145 181.4 23.2-47.9 86.3-137.3 145-181.4 42.4-31.8 111-56.4 111 21.9 0 15.6-9 131.3-14.2 150.1-18.3 65.3-84.9 82-144.1 71.9 103.5 17.6 129.9 76 73 134.4-108 110.9-155.3-27.8-167.4-63.4-2.2-6.5-3.3-9.6-3.3-7 0-2.6-1.1.5-3.3 7-12.1 35.5-59.4 174.2-167.4 63.4-56.9-58.4-30.5-116.8 73-134.4-59.2 10.1-125.8-6.5-144.1-71.8C9 214.2 0 98.5 0 82.8 0 4.5 68.6 29.1 111 60.9"/>
</svg>
<div class="socials-name">Bluesky</div>
<a class="socials-link" href="https://bsky.app/profile/dobutterfliescry.bsky.social" rel="author">@dobutterfliescry</a>
</li>
<li class="socials-item">
<!-- REF: https://dashboardicons.com/icons/discord -->
<svg class="socials-icon" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0.02 57.8 511.92 396.3">
<path style="fill: var(--theme-icon)" d="M433.7 91a416.5 416.5 0 0 0-105.6-33.2c-4.6 8.2-9.9 19.3-13.5 28.1-39.4-5.9-78.4-5.9-117.1 0-3.7-8.8-9.1-19.9-13.7-28.1-37.1 6.4-72.6 17.7-105.7 33.3-66.8 101-85 199.5-75.9 296.6 44.3 33.1 87.3 53.2 129.6 66.4 10.4-14.4 19.7-29.6 27.7-45.7-15.3-5.8-29.9-13-43.7-21.3 3.7-2.7 7.2-5.6 10.7-8.5 84.2 39.4 175.8 39.4 259 0 3.5 2.9 7.1 5.8 10.7 8.5-13.9 8.3-28.5 15.5-43.8 21.3 8 16 17.3 31.3 27.7 45.7 42.3-13.2 85.3-33.3 129.6-66.4 10.8-112.5-18-210.1-76-296.7M170.9 328c-25.3 0-46-23.6-46-52.4s20.3-52.4 46-52.4 46.5 23.6 46 52.4c.1 28.8-20.2 52.4-46 52.4m170.2 0c-25.3 0-46-23.6-46-52.4s20.3-52.4 46-52.4 46.5 23.6 46 52.4c0 28.8-20.3 52.4-46 52.4"/>
</svg>
<div class="socials-name">Discord</div>
<a class="socials-link" href="https://discordapp.com/users/320442794969792513" rel="author">@_cry64</a>
</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="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:#71c2ff"/>
<stop offset="1" style="stop-color:#39aaff"/>
</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:#2185d0" 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">
<!-- REF: https://dashboardicons.com/icons/github -->
<svg class="socials-icon" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512">
<path style="fill-rule: evenodd; clip-rule: evenodd; fill: var(--theme-icon)" d="M256 6.3C114.6 6.3 0 120.9 0 262.3c0 113.3 73.3 209 175 242.9 12.8 2.2 17.6-5.4 17.6-12.2 0-6.1-.3-26.2-.3-47.7-64.3 11.8-81-15.7-86.1-30.1-2.9-7.4-15.4-30.1-26.2-36.2-9-4.8-21.8-16.6-.3-17 20.2-.3 34.6 18.6 39.4 26.2 23 38.7 59.8 27.8 74.6 21.1 2.2-16.6 9-27.8 16.3-34.2-57-6.4-116.5-28.5-116.5-126.4 0-27.8 9.9-50.9 26.2-68.8-2.6-6.4-11.5-32.6 2.6-67.8 0 0 21.4-6.7 70.4 26.2 20.5-5.8 42.2-8.6 64-8.6s43.5 2.9 64 8.6c49-33.3 70.4-26.2 70.4-26.2 14.1 35.2 5.1 61.4 2.6 67.8 16.3 17.9 26.2 40.6 26.2 68.8 0 98.2-59.8 120-116.8 126.4 9.3 8 17.3 23.4 17.3 47.4 0 34.2-.3 61.8-.3 70.4 0 6.7 4.8 14.7 17.6 12.2C438.7 471.3 512 375.3 512 262.3c0-141.4-114.6-256-256-256"/>
</svg>
<div class="socials-name">Github</div>
<a class="socials-link" href="https://github.com/emilelcb" rel="author">@emilelcb</a>
</li>
</ul>
</div>
<p>hi!! i'm cry (they/them) <3</p>
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">
<li class="socials-item">
<!-- REF: https://dashboardicons.com/icons/bluesky -->
<svg class="socials-icon" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 30.56 512 450.84">
<path style="fill: var(--theme-icon)" d="M111 60.9c58.7 44.1 121.8 133.4 145 181.4 23.2-47.9 86.3-137.3 145-181.4 42.4-31.8 111-56.4 111 21.9 0 15.6-9 131.3-14.2 150.1-18.3 65.3-84.9 82-144.1 71.9 103.5 17.6 129.9 76 73 134.4-108 110.9-155.3-27.8-167.4-63.4-2.2-6.5-3.3-9.6-3.3-7 0-2.6-1.1.5-3.3 7-12.1 35.5-59.4 174.2-167.4 63.4-56.9-58.4-30.5-116.8 73-134.4-59.2 10.1-125.8-6.5-144.1-71.8C9 214.2 0 98.5 0 82.8 0 4.5 68.6 29.1 111 60.9"/>
</svg>
<div class="socials-name">Bluesky</div>
<a class="socials-link" href="https://bsky.app/profile/dobutterfliescry.bsky.social" rel="author">@dobutterfliescry</a>
</li>
<li class="socials-item">
<!-- REF: https://dashboardicons.com/icons/discord -->
<svg class="socials-icon" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0.02 57.8 511.92 396.3">
<path style="fill: var(--theme-icon)" d="M433.7 91a416.5 416.5 0 0 0-105.6-33.2c-4.6 8.2-9.9 19.3-13.5 28.1-39.4-5.9-78.4-5.9-117.1 0-3.7-8.8-9.1-19.9-13.7-28.1-37.1 6.4-72.6 17.7-105.7 33.3-66.8 101-85 199.5-75.9 296.6 44.3 33.1 87.3 53.2 129.6 66.4 10.4-14.4 19.7-29.6 27.7-45.7-15.3-5.8-29.9-13-43.7-21.3 3.7-2.7 7.2-5.6 10.7-8.5 84.2 39.4 175.8 39.4 259 0 3.5 2.9 7.1 5.8 10.7 8.5-13.9 8.3-28.5 15.5-43.8 21.3 8 16 17.3 31.3 27.7 45.7 42.3-13.2 85.3-33.3 129.6-66.4 10.8-112.5-18-210.1-76-296.7M170.9 328c-25.3 0-46-23.6-46-52.4s20.3-52.4 46-52.4 46.5 23.6 46 52.4c.1 28.8-20.2 52.4-46 52.4m170.2 0c-25.3 0-46-23.6-46-52.4s20.3-52.4 46-52.4 46.5 23.6 46 52.4c0 28.8-20.3 52.4-46 52.4"/>
</svg>
<div class="socials-name">Discord</div>
<a class="socials-link" href="https://discordapp.com/users/320442794969792513" rel="author">@_cry64</a>
</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">
<!-- REF: https://dashboardicons.com/icons/github -->
<svg class="socials-icon" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512">
<path style="fill-rule: evenodd; clip-rule: evenodd; fill: var(--theme-icon)" d="M256 6.3C114.6 6.3 0 120.9 0 262.3c0 113.3 73.3 209 175 242.9 12.8 2.2 17.6-5.4 17.6-12.2 0-6.1-.3-26.2-.3-47.7-64.3 11.8-81-15.7-86.1-30.1-2.9-7.4-15.4-30.1-26.2-36.2-9-4.8-21.8-16.6-.3-17 20.2-.3 34.6 18.6 39.4 26.2 23 38.7 59.8 27.8 74.6 21.1 2.2-16.6 9-27.8 16.3-34.2-57-6.4-116.5-28.5-116.5-126.4 0-27.8 9.9-50.9 26.2-68.8-2.6-6.4-11.5-32.6 2.6-67.8 0 0 21.4-6.7 70.4 26.2 20.5-5.8 42.2-8.6 64-8.6s43.5 2.9 64 8.6c49-33.3 70.4-26.2 70.4-26.2 14.1 35.2 5.1 61.4 2.6 67.8 16.3 17.9 26.2 40.6 26.2 68.8 0 98.2-59.8 120-116.8 126.4 9.3 8 17.3 23.4 17.3 47.4 0 34.2-.3 61.8-.3 70.4 0 6.7 4.8 14.7 17.6 12.2C438.7 471.3 512 375.3 512 262.3c0-141.4-114.6-256-256-256"/>
</svg>
<div class="socials-name">Github</div>
<a class="socials-link" href="https://github.com/emilelcb" rel="author">@emilelcb</a>
</li>
</ul>
</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"> `CRY6666bo. : : .od8888CRY' </span><span class="theme-tty-warning">--&gt;</span> -->
@ -174,7 +189,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"> 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 class="centered cryframe">
<pre class="centered cryframe" id="butterfly">
<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>
@ -193,6 +208,16 @@
<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"> ! ! </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>
</main>