site/www/index.html

200 lines
16 KiB
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">
<head>
<meta charset="utf-8" />
<title>have you tried crying more?</title>
<!-- !! Favicon !! -->
<link rel="icon" href="imgs/favicon/favicon.ico" />
<link rel="icon" type="image/png" sizes="16x16" href="imgs/favicon/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="imgs/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="48x48" href="imgs/favicon/favicon-48x48.png" />
<link rel="icon" type="image/png" sizes="64x64" href="imgs/favicon/favicon-64x64.png" />
<!-- TODO: add 96x96 -->
<link rel="icon" type="image/png" sizes="128x128" href="imgs/favicon/favicon-128x128.png" />
<link rel="icon" type="image/png" sizes="256x256" href="imgs/favicon/favicon-256x256.png" />
<script src="js/main.js" type="module"></script>
<!-- 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) -->
<canvas id="bg-canvas"></canvas>
<!-- Vibey Background Music -->
<audio 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 -->
<div class="centered-container">
<div class="ppty centered cryframe" id="boot-ppty">
<div class="ppty-block">
<div class="ppty-prompt">
grub>
</div>
<div class="ppty-command">
boot
</div>
<div class="ppty-output theme-tty-warning">
ERROR: Root device mounted successfully, but /sbin/init does not exist.<br/><br/>
<i class="theme-tty-error">
Bailing out, you are on your own.<br/>
Good luck<br/><br/>
</i>
sh: can't access tty; job control turned off<br/><br/>
</div>
</div>
<div class="ppty-block">
<div class="ppty-prompt">
[rootfs ]#
</div>
<div class="ppty-command">
do butterflies cry when they're sad?
</div>
<div class="ppty-output">
<i class="theme-tty-error">
Segmentation fault (core dumped)
</i>
</div>
</div>
</div>
</div>
<main>
<div class="centered-container">
<div class="centered cryframe">
<div style="display: flex; flex-direction: row; align-items: start; justify-items: center;">
<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>
</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> -->
<!-- <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> 888IO8DO88b. : : .d8888I8DO88 </span><span class="theme-tty-warning">--&gt;</span> -->
<!-- <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> 8LOVET' `Y8b. ` ' .d8Y' `TLOVE8 </span><span class="theme-tty-warning">--&gt;</span> -->
<!-- <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> jYOUM! .db. Yb. ' ' .dY .db. !MYOUk </span><span class="theme-tty-warning">--&gt;</span> -->
<!-- <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> `888 Y88Y `q ( ) p' Y88Y 888' </span><span class="theme-tty-warning">--&gt;</span> -->
<!-- <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> 8SOb '" ,', "' dSO8 </span><span class="theme-tty-warning">--&gt;</span> -->
<!-- <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> j8plEASEYgr"' ':' `"?gpYplEASESk </span><span class="theme-tty-warning">--&gt;</span> -->
<!-- <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> 'Y' .8' d' 'b '8. 'Y' </span><span class="theme-tty-warning">--&gt;</span> -->
<!-- <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> ! .8' db d'; ;`b db '8. ! </span><span class="theme-tty-warning">--&gt;</span> -->
<!-- <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> d88 `' 8 ; ; 8 `' 88b </span><span class="theme-tty-warning">--&gt;</span> -->
<!-- <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> d88Ib .g8 ',' 8g. dI88b </span><span class="theme-tty-warning">--&gt;</span> -->
<!-- <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> :888LOVE88Y' 'Y88LOVE888: </span><span class="theme-tty-warning">--&gt;</span> -->
<!-- <span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> '! YpME888' `888MEpY !' </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"> ! ! </span><span class="theme-tty-warning">--&gt;</span> -->
<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 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"> 888<span class="theme-icon">I</span>O8DO88b. : : .d88OD8O<span class="theme-icon">I</span>888 </span><span class="theme-tty-warning">--&gt;</span>
<span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> 8<span class="theme-icon">LOVE</span>T' `Y8b. ` ' .d8Y' `T<span class="theme-icon">LOVE</span>8 </span><span class="theme-tty-warning">--&gt;</span>
<span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> j<span class="theme-icon">YOU</span>M! .db. Yb. ' ' .dY .db. !M<span class="theme-icon">YOU</span>k </span><span class="theme-tty-warning">--&gt;</span>
<span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> `888 Y88Y `q ( ) p' Y88Y 888' </span><span class="theme-tty-warning">--&gt;</span>
<span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> 8<span class="theme-icon">SO</span>b '" ,', "' d<span class="theme-icon">SO</span>8 </span><span class="theme-tty-warning">--&gt;</span>
<span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> j8<span class="theme-icon">PLEASE</span>Ygr"' ':' `"?gpY<span class="theme-icon">PLEASE</span>Sk </span><span class="theme-tty-warning">--&gt;</span>
<span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> 'Y' .8' d' 'b '8. 'Y' </span><span class="theme-tty-warning">--&gt;</span>
<span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> ! .8' db d'; ;`b db '8. ! </span><span class="theme-tty-warning">--&gt;</span>
<span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> d88 `' 8 ; ; 8 `' 88b </span><span class="theme-tty-warning">--&gt;</span>
<span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> d88Ib .g8 ',' 8g. dI88b </span><span class="theme-tty-warning">--&gt;</span>
<span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> :888<span class="theme-icon">LOVE</span>88Y' 'Y88<span class="theme-icon">LOVE</span>888: </span><span class="theme-tty-warning">--&gt;</span>
<span class="theme-tty-warning">&lt;--</span><span class="theme-icon-off"> '! Yp<span class="theme-icon">ME</span>888' `888<span class="theme-icon">ME</span>pY !' </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"> ! ! </span><span class="theme-tty-warning">--&gt;</span></pre>
</div>
</main>
</body>
</html>