noe.sh/index.html

274 lines
7.3 KiB
HTML

<!DOCTYPE html>
<meta charset="utf-8" />
<title>noe</title>
<link rel="preconnect" href="https://fonts.bunny.net" />
<link
href="https://fonts.bunny.net/css?family=atkinson-hyperlegible:400,400i,700,700i"
rel="stylesheet"
/>
<style>
:root {
font-family: "Atkinson Hyperlegible", sans-serif;
--l0: #1b1f21;
--l1: #441452;
--l2: #752565;
--l3: #ce2a66;
--l4: #ce9bb7;
--l5: #fdf4f4;
}
body {
overflow-x: hidden;
background-color: var(--l0);
color: var(--l5);
}
a {
color: var(--l4);
}
.container {
border: 3px solid var(--l3);
border-radius: 15px;
overflow: hidden;
}
header {
background-color: var(--l3);
color: var(--l0);
display: flex;
align-items: center;
h1 {
margin: 0;
padding: 1rem;
font-size: 3em;
text-shadow: -2px 1px 0 var(--l1), 2px 1px 3px var(--l4);
.meka {
color: var(--l2);
}
}
}
.monospace {
font-family: monospace;
}
.circlething {
width: 3em;
height: 3em;
background-color: red;
border-radius: 100%;
background: radial-gradient(
circle,
var(--l3) 20%,
var(--l1) 30%,
var(--l2) 50%,
var(--l0) 80%,
var(--l0) 100%
);
border: 3px solid var(--l0);
box-shadow: 0 0 2px 5px var(--l2);
margin-left: 1em;
}
section {
border: 0px solid var(--l2);
border-top-width: 3px;
border-left-width: 3px;
box-shadow: 3px 3px 3px var(--l1);
margin: 1em;
border-radius: 10px;
padding: 1em;
h2 {
margin: 0;
}
}
.friends {
display: inline-flex;
text-align: center;
flex-direction: column;
.divider {
border-top: 1px dashed var(--l2);
margin: 0.7em 2em 1em 2em;
}
}
</style>
<body>
<div class="container">
<header>
<div class="circlething"></div>
<h1><span class="meka">meka</span><span class="noe">noe</span></h1>
<p aria-hidden="true" class="monospace">
_[#41666H;&amp;: <span class="under">n,s,h</span>]$ ~>
</p>
<p aria-hidden="true" class="monospace">
<span id="js-timething">
// multishot; unknown target; tracking... *** ||--->> waiting...
||-->>
</span>
</p>
</header>
<main>
<section>
<h2>about</h2>
<p>
this one is noe
<a href="/pronouns/">(it/its, 3rd person preferred, alt: she/her)</a>
</p>
<p>
derelict combat doll; hacker; cyberpunk; nd;
<a href="/system.html">&amp;</a>; queer; empty spaces;;
</p>
<p>
nixos, devops/sre/sysadmin, rev-eng, electronics, personal evs,
writing, cats, plants
</p>
</section>
<section>
<h2>where to find</h2>
<ul>
<li>
<b>federal space</b> -
<a href="https://sapphic.engineer/noe" rel="me"
><!--email off-->@noe@sapphic.engineer<!--/email off--></a
>
||
<a href="https://porcelain.doll.repair/noe" rel="me"
><!--email off-->@noe@porcelain.doll.repair<!--/email off--></a
>
||
<a href="https://void.rehab/noe" rel="me"
><!--email off-->@noe@void.rehab<!--/email off--></a
>
</li>
<li>
<b>cold storage</b> -
<a href="https://codeberg.org/noe" rel="me"
><!--email off-->@noe@codeberg.org<!--/email off--></a
>
</li>
<li>
<b>legacy code</b> -
<a href="https://github.com/mekanoe" rel="me"
><!--email off-->@mekanoe@github.com<!--/email off--></a
>
</li>
<li>
<b>the matrix</b> -
<a href="https://matrix.to/#/@noe:void.rehab" rel="me"
><!--email off-->@noe:void.rehab<!--/email off--></a
>
</li>
</ul>
<h3>art webbed sites</h3>
<ul>
<li>
<a href="https://art.mekanoe.com">art.mekanoe.com</a> (requires
javascript)
</li>
<li>
<a href="https://doll.repair">doll.repair</a> (warning: empty
spaces; trauma-driven art therapy)
</li>
</ul>
</section>
<section>
<h2>reading</h2>
<p>
this one writes for many reasons; please heed the content warnings
where they exist. your mental health is important.
</p>
<h3>technical</h3>
<ul>
<li><i>(standby)</i></li>
</ul>
<h3>fictional</h3>
<ul>
<li>
<a href="https://sapphic.engineer/notice/AdTGYQsbo8EkYbZMDA"
>story story unit#001</a
>
- she fixes you
</li>
</ul>
</section>
</main>
<footer>
<section>
<h2>other creatures</h2>
<p></p>
<div class="friends">
<!-- Others -->
<div>
<a href="https://stardust.elysium.gay" target="_blank"
><img
src="/88x31/stardust.png"
width="88"
height="31"
alt="Stardust"
/></a>
<a href="https://sneexy.pages.gay" target="_blank"
><img src="/88x31/sneexy.gif" alt="Sneexy" width="88" height="31"
/></a>
<a href="https://rest.1a-insec.net/" target="_blank"
><img src="/88x31/1a.png" alt="1A" width="88" height="31"
/></a>
<a href="https://zvava.org/" target="_blank"
><img src="/88x31/zvava.png" alt="zvava" width="88" height="31"
/></a>
</div>
<!-- self row (hi, please feel free to use these <3) -->
<div class="divider"></div>
<div>
<a href="https://noe.sh" target="_blank"
><img src="/yay/88x31.png" width="88" height="31" alt="noe"
/></a>
<a href="https://noe.sh/pronouns/" target="_blank"
><img src="/yay/88x31-vp.png" width="88" height="31" alt="it/its"
/></a>
<img
src="/yay/88x31-nap.png"
width="88"
height="31"
alt="not a person"
/>
<a href="https://sapphic.engineer" target="_blank"
><img
src="/yay/88x31-se.png"
width="88"
height="31"
alt="sapphic.engineer"
/></a>
</div>
</div>
</section>
<section>
<h2>live creature reactions</h2>
<ul>
<!--email off-->
<li>"it keeps biting me" - @mia@void.rehab</li>
<li>
"..designated SCP-41666 by the Fedi Council" -
@quasar@social.translunar.academy
</li>
<li>"insane lesbian" - @sneexy@lea.pet</li>
<li>"This is very cool" - @gotrans@heckin.how</li>
<li>"oh god what have you done" - @Nyaomi@eepy.moe</li>
<li>"why have you done this" - @yassie_j@0w0.is</li>
<li>"you're insane that's amazing" - @vee@kvinneby.vendicated.dev</li>
<li>"oh my god it happened again" - @ezri@crimew.gay</li>
<!--/email off-->
</ul>
</section>
</footer>
</div>
</body>