my website
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>website of chfour official website</title> <link rel="stylesheet" href="style.css"> <style> #fops { height: auto; max-width: 100%; margin-block: 2rem; } :root { display: flex; align-items: flex-end; min-height: 100vh; } body { line-height: initial; }
#timenow { font-feature-settings: "tnum"; }
footer a { text-decoration: none; color: inherit !important; opacity: 0.7; transition: opacity 200ms; } footer a:is(:hover, :focus-visible) { opacity: 1; } footer a code { white-space: normal; word-break: break-all; font: inherit; }
#links { display: flex; flex-wrap: wrap; gap: 1em; max-width: 30rem; } #links > li > a, details > summary { display: inline-flex; flex-direction: column; text-decoration: none; color: inherit; } #links > li > a > * { width: max-content; } :is(#links > li > a, details > summary) > :first-child { font-weight: bold; color: var(--color-link); } :is(#links > li > a, details > summary) > :nth-child(2) { font-size: 0.8em; } details { margin-block: 1rem; } details > summary { cursor: pointer; } details > summary > :first-child { display: list-item; list-style-type: disclosure-closed; } details[open] > summary > :first-child { list-style-type: disclosure-open; } details > :nth-child(2) { margin-top: 1rem; } .button > img { image-rendering: pixelated; } .button { transition: 0.1s cubic-bezier(0,1,.35,.87) transform; } .button:not(.placeholder):hover { transform: translateY(-0.2rem); } .button:not(.placeholder):active { transform: translateY(0.1rem); } .buttons { display: flex; flex-wrap: wrap; gap: 0.2rem; max-width: 30rem; margin-block: 1rem; } .button.placeholder { width: 88px; height: 31px; display: block; border: 2px dashed #aaa; box-sizing: border-box; } </style></head><body> <img id="fops" src="platinum_fop_45_o.svg" alt="" width="250" height="250"> <main> <ul class="inline-list slashed" style="max-width: 30rem; line-height: 1.2; text-align: justify;"> <li>Linux, Nix & NixOS</li> <li>C, Python, HTML+CSS and co</li> <li>electronics, "embedded" & test gear</li> <li>RF (incl. amateur radio)</li> <li>time and frequency metrology</li> <li>trains and almost everything surrounding trains</li> <li>very amateur photography</li> </ul>
<p>exceptionally uncreative</p> <p>she/it, some flavor(s) of queer, taken</p> <p>[platinum] fox, furry</p> <p>20 years old and counting</p> <p>from Silesia, Poland<span id="timenow"></span></p>
<p>known as <b>chfour</b></p>
<ul class="inline-list" id="links"> <li><a rel="me" href="https://merping.synth.download/@chfour"> <span>fediverse</span> <span>@chfour@merping.synth.download</span> </a></li> <li><a href="https://signal.me/#eu/uwW5t81nJulRdHjWEkNUE2omPv9HzXhzUzar2yvP14ULx50MgdZBwpxrhWX3RfA3"> <span>signal</span> <span>chfour.32</span> </a></li> <li><a href="discord.html"> <span>discord</span> <span>foxpu55y</span> </a></li> <li><a href="https://tangled.org/eeep.ee/"> <span>tangled</span> <span>eeep.ee</span> </a></li> <li><a href="https://github.com/chfour"> <span>github</span> <span>chfour</span> </a></li> <li><a href="https://files.eeep.ee/"> <span>file dumpster</span> <span>files.eeep.ee</span> </a></li> <!--<li><a href="blog/"> <span>"blog"</span> <span>& rants & projects</span> </a></li>--> </ul> <details> <summary> <span>buttons</span> <span>little link rectangles</span> </summary>
<span class="buttons" style="gap: 1rem; align-items: center;"> <a href="#" class="button" id="mybutton"> <img src="button" width="88" height="31" alt="my button, a cropped rotated fox face emoji in shades of gray, meant to look like a platinum fox"> </a> <span>←</span> <span> me! click to copy<noscript><strong> (requires javascript lol)</strong></noscript> <br><span style="font-size: 0.8em;">hotlinking ok, or do whatever really lol</span> </span> </span> <p>in no particular order:</p> <span class="buttons"> <a class="button" href="https://zenfyr.dev/"><img src="https://zenfyr.dev/88_31/88_31.webp" alt="zenfyr" title="zenfyr" width="88" height="31"></a> <a class="button" href="https://uncia.online"><img src="https://uncia.online/btn.png" alt="uncia!" title="uncia!" width="88" height="31"></a> <a class="button" href="https://sillydomain.name"><img src="https://sillydomain.name/assets/buttons/benjae.png" alt="benjae" title="benjae" width="88" height="31"/></a> <a class="button" href="https://sneexy.synth.download"><img src="https://synth.download/assets/buttons/sneexy.svg" alt="Sneexy" title="Sneexy" width="88" height="31"></a> <a class="button" href="https://beepi.ng"><img src="https://beepi.ng/88x31.png" alt="unnick" title="unnick" width="88" height="31"></a> <a class="button" href="https://holly.mlem.systems"><img src="https://holly.mlem.systems/img/badges/holly.png" alt="holly" title="holly" width="88" height="31"></a> <a class="button" href="https://maidado.xyz/"><img src="buttons-hosted/maidado.xyz.gif" alt="mai" title="mai" width="88" height="31"></a> <a class="button" href="https://notfire.cc/"><img src="https://notfire.cc/design/images/buttons/notfire-cc-88x31-af-darkv.gif" alt="notfire" title="notfire" width="88" height="31"></a> <a class="button" href="https://remlit.site/"><img src="https://remlit.site/static/btn/kattgutte.png" alt="harper" title="harper" width="88" height="31"></a> <a class="button" href="https://meowing.zip"><img src="https://meowing.zip/assets/88x31/button.png" alt="gayfamicom" title="gayfamicom" width="88" height="31"></a> <a class="button" href="https://atapi.space/"><img src="https://atapi.space/assets/img/buttons/atapi.gif" alt="atapi" title="atapi" width="88" height="31"></a> <a class="button" href="https://aquamarine.gay/"><img src="https://aquamarine.gay/assets/web-buttons/aa-button-v3.gif" alt="aquamarine" title="aquamarine" width="88" height="31"></a> <a class="button" href="https://get-cheesed.neocities.org/"><img src="https://get-cheesed.neocities.org/assets/cheese-button.png" alt="cheese" title="cheese" width="88" height="31"></a> <a class="button" href="https://leggi.es/"><img src="https://leggi.es/img/8831/deneb_amber.gif" alt="deneb" title="deneb" width="88" height="31"></a> <a class="button" href="https://rabbithawk256.dev/"><img src="buttons-hosted/rabbithawk256.dev.png" alt="rabbithawk256" title="rabbithawk256" width="88" height="31"></a> <span class="button placeholder"></span> </span> </details> </main> <footer> <a id="src" href="https://tangled.org/eeep.ee/website3" aria-label="website source" title="website source"> <code>/nix/store/VERY5p3c14lsecretv4luereplaceme0-chfour-website</code> </a> </footer> <script> document.querySelector('#mybutton').addEventListener('click', (ev) => { navigator.clipboard.writeText('<a href="https://eeep.ee/"><img src="https://eeep.ee/button" alt="chfour" width="88" height="31"></a>'); ev.preventDefault(); }); const timenow = document.getElementById("timenow"); const formatter = new Intl.DateTimeFormat("pl-PL", {timeZone: "Europe/Warsaw", timeStyle: "short"}); // won't be *totally perfectly exact* // but with window.requestAnimationFrame() it made my cpu usage go up by some 10% no joke const update = () => timenow.textContent = ` (${formatter.format(new Date())})`; update(); setInterval(update, 5000); </script></body></html>