site/me/index.html
Ruben 5f36cc80ed
All checks were successful
/ build (push) Successful in 32s
add an accessibility menu
2025-04-09 13:51:07 -05:00

303 lines
24 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>me @ synth download!</title>
<link rel="icon" type="image/png" href="/assets/favicon.png">
<link rel="stylesheet" type="text/css" href="/colors.css">
<link rel="stylesheet" type="text/css" href="/ruben.css">
<link rel="stylesheet" type="text/css" href="/font.css">
<link rel="stylesheet" type="text/css" href="/tabler.css">
<link rel="stylesheet" type="text/css" href="/tabler.css">
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" type="text/css" href="/home.css">
<link rel="canonical" href="https://synth.download/">
<link rel="me" href="https://booping.synth.download/@sneexy">
<link rel="me" href="https://beeping.synth.download/@sneexy">
<link rel="me" href="https://git.gay/sneexy">
<meta lang="en-US">
<meta property="og:url" content="https://synth.download/">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/alt-popup.js"></script>
<script defer src="https://booping.synth.download/embed.js"></script>
</head>
<body>
<!-- top navbar -->
<div class="navbar">
<a class="nav-base nav-left nav-baselink" href="/"><span class="tabler--grid-dots"></span> synth download!</a>
<details class="nav-base nav-left nav-baselink-mobile">
<summary><span class="tabler--grid-dots"></span> s <span aria-hidden="true" class="dot" style="background-color: var(--background) !important;"></span> d!</summary>
<ul>
<li>
<a href="/"><span class="tabler--home"></span> home</a>
</li>
<li>
<a href="/me"><span class="tabler--user"></span> about me</a>
</li>
<li>
<a href="https://notebook.synth.download"><span class="tabler--notebook"></span> notebook</a>
</li>
<li>
<a href="/me#links"><span class="tabler--link"></span> links</a>
</li>
</ul>
</details>
<nav class="nav-base nav-left nav-links">
<a href="/"><span class="tabler--home"></span> home</a>
<div class="dot"></div>
<a href="/me"><span class="tabler--user"></span> about me</a>
<div class="dot"></div>
<a href="https://notebook.synth.download"><span class="tabler--notebook"></span> notebook</a>
<div class="dot"></div>
<a href="/me#links"><span class="tabler--link"></span> links</a>
</nav>
<details aria-label="Accessibility Settings" class="nav-base nav-right nav-accessibility">
<summary><span aria-label="Accessibility Settings" class="tabler--accessible"></span></summary>
<ul>
<li>
<p>Accessibility Settings</p>
<p class="caption">Done with pure CSS! <span style="color: var(--red);">Settings do not save, sorry.</span></p>
</li>
<li>
<span aria-hidden="true" class="seperator"></span>
<p class="caption section" style="font-size: smaller; opacity: .9;">Font</p>
<span>
<input type="radio" id="font-jbm" name="font-setting" value="jbm" checked />
<label for="font-jbm" style="font-family: 'JetBrains Mono', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">JetBrains Mono</label><br>
</span>
<span>
<input type="radio" id="font-ahn" name="font-setting" value="ahn" />
<label for="font-ahn" style="font-family: 'Atkinson Hyperlegible Next', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Atkinson Hyperlegible Next</label><br>
</span>
<span>
<input type="radio" id="font-inter" name="font-setting" value="inter" />
<label for="font-inter" style="font-family: 'Inter', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Inter</label><br>
</span>
<p class="caption" style="padding: .2rem 0px;">Support not guaranteed, but provided as options anyways:</p>
<span>
<input type="radio" id="font-sans-serif" name="font-setting" value="sans-serif" />
<label for="font-sans-serif" style="font-family: sans-serif, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, serif !important;">Sans Serif</label><br>
</span>
<span>
<input type="radio" id="font-serif" name="font-setting" value="serif" />
<label for="font-serif" style="font-family: serif, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Serif</label><br>
</span>
<span>
<input type="radio" id="font-monospace" name="font-setting" value="monospace" />
<label for="font-monospace" style="font-family: monospace, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Monospace</label><br>
</span>
</li>
<li>
<span aria-hidden="true" class="seperator"></span>
<span>
<input type="checkbox" id="uncapitalization" name="uncapitalization" />
<label for="uncapitalization">Disable forced uncapitalization</label><br>
</span>
<span>
<input type="checkbox" id="disable-bg" name="disable-bg" />
<label for="disable-bg">Disable background gradient</label><br>
</span>
<span>
<input type="checkbox" id="disable-focus-animations" name="focus-animations" />
<label for="disable-focus-animations">Disable focus animations</label><br>
</span>
<span>
<input type="checkbox" id="disable-alttext" name="disable-alttext" />
<label for="disable-alttext">Disable alt-text popup</label>
</span>
</li>
<li>
<span aria-hidden="true" class="seperator"></span>
<p class="caption">Disabling the alt-text popup or forced uncapitalization does not affect "normal" accessibility. The alt-text pop-up is custom made in replacement of using the <span class="code">title</span> attribute, and forced uncapitalization is done using CSS's <span class="code">text-transform</span>.</p>
<p class="caption" style="padding: .6rem 0px;">Dark/Light mode toggling will be available whenever I figure out how to do so entirely just using CSS or until I decide to remake this with JavaScript.</p>
<p class="caption">Saving these settings will also be available whenever I decide to remake this using/attach some JavaScript to this instead.</p>
</li>
</ul>
</details>
<p aria-hidden="true" class="nav-base nav-right nav-systray">
<span class="tabler--bell"></span>
<span class="tabler--volume"></span>
<span class="tabler--wifi"></span>
<span class="tabler--battery-filled"></span>
</p>
</div>
<!-- simple introduction -->
<details open id="sneexy" class="window">
<summary>
<div aria-hidden="true">
<span class="tabler--user"></span>
</div>
<a href="#sneexy">Sneexy info</a>
<div aria-hidden="true">
<span class="tabler--minimize"></span>
<span class="tabler--maximize"></span>
</div>
<div aria-hidden="true">
<span class="tabler--x"></span>
</div>
</summary>
<section>
<img id="logo" loading="lazy" src="/assets/sneexy.webp" alt="Sneexy" /> <br>
<audio controls loop src="/assets/ASimpleMachine.mp3"></audio> <br>
<small>Theme song by <a href="https://yeen.town/@ChalkLlate">ChalkLlate</a>!</small>
<h1><a href="./ruben"><img loading="lazy" id="pfp" src="/assets/synth tpose spin.gif" alt="3D Low poly model of my synth character. He's a pretty chubby synth with a belly and chest made entirely out of goo, his frame is mostly made with shades of grey with lime/pastel green accents."></a> Hey, I'm <span class="rainbow">Ruben!</span></h1>
<small>Cheesed to meet ya.</small>
<p style="margin-bottom: -2px;">Big fat gooey synth who is constantly tired.</p>
<small style="font-size: 0.575rem;">...or <i>eepy</i>, but definitely more tired.</small>
<div class="selfinfo">
<div style="grid-area: pronouns;">
<p>Pronouns</p>
<ul>
<li style="color: var(--green);"><span class="tabler--thumb-up" alt="Preferred!"></span> he/him</li>
<li style="color: var(--green);"><span class="tabler--thumb-up" alt="Preferred!"></span> it/its</li>
<li><span class="tabler--thumb-up" alt="Acceptable,"></span> they/them</li>
<li style="color: var(--red);"><small><span class="tabler--thumb-down" alt="Unacceptable," style="transform: scale(.9) translateY(.2rem);"></span> anything else</small></li>
</ul>
</div>
<div style="grid-area: names;">
<p>Names</p>
<ul>
<li style="color: var(--green);"><span class="tabler--thumb-up" alt="Preferred!"></span> ruben</li>
<li><span class="tabler--thumb-up" alt="Acceptable,"></span> sneexy, sneex*</li>
<li style="color: var(--yellow);"><small><span class="tabler--user-heart" alt="Only if we're close friends!" style="transform: scale(.9) translateY(.2rem);"></span> rube, rubie (ruby)</small></li>
<li style="color: var(--red);"><small><span class="tabler--thumb-down" alt="Unacceptable," style="transform: scale(.9) translateY(.2rem);"></span> variations/anything else</small></li>
</ul>
</div>
</div>
</section>
</details>
<!-- about me -->
<details open id="about-me" class="window">
<summary>
<div aria-hidden="true">
<span class="tabler--info-circle"></span>
</div>
<a href="#about-me">About me</a>
<div aria-hidden="true">
<span class="tabler--minimize"></span>
<span class="tabler--maximize"></span>
</div>
<div aria-hidden="true">
<span class="tabler--x"></span>
</div>
</summary>
<section>
<h2><a href="#about-me">about me</a></h2>
<p>I'm just another <span class="rainbow">gay</span> Synth on the internet, <small>a zoomer, established 2006</small>. I'm autistic and have ADHD, and those two blended together are both a blessing and a curse. I like big round things, as in, bellies and such related content, but I'll try my best to minimize that here and/or content warn such things whenever I do bring them up. Don't worry, the rest of this page is safe for work</p>
<p>I sometimes have really bad mental health moments and intense mood swings, so please excuse me in those regards. Thanks. <span class="tabler--heart" style="background-color: var(--accent) !important;"></span></p>
<p>I consider myself to be a <span style="text-transform: capitalize;">professional computer toucher<span aria-hidden="true"></span></span>, and try my best to poke at computers or anything related to weird tech that interest me. I would say I've messed enough in a good share of both software and hardware related things. <small>Probably not now that I think about it, but I'm willing to learn more... whenever I can.</small></p>
<p>I'm a nerd with <a href="https://en.wikipedia.org/wiki/Free_and_open-source_software">Free and Open Source</a> stuff and also caring about my privacy whenever possible <small>considering that it doesn't really seem to exist at all in the modern world, anyways</small>. I also like messing around with Linux, trying a bit of <a style="text-transform: none;" href="https://archlinux.org">Arch</a> and a little bit of <a style="text-transform: none;" href="https://nixos.org">NixOS</a>, but found comfort with <a style="text-transform: none;" href="https://fedoraproject.org">Fedora</a>. <small>If you're interested, I'm currently running my own customized varient of <a style="text-transform: none;" href="https://fedoraproject.org/atomic-desktops/kinoite">Fedora Kinoite</a> made with <a style="text-transform: none;" href="https://blue-build.org">BlueBuild</a> that <a href="https://github.com/sneexy-boi/bluebuild-custom">you can find here</a>.</small> I'm not going to shove these down anyone's throat, and if you're someone who does that, kindly get away from me.</p>
<p>Despite what is mentioned above, I'm not really a programmer, <span style="text-transform: none;">IT support</span> guy, some professional info-sec person or anything like that. My knowledge is honestly quite limited. At most, I personally mainly know just enough Bash to make jank scripts, HTML and CSS, and a good amount of Linux and Docker/Podman to let me survive. As much as I'd like to learn to expand, I've tried Python before with full intention and motivation of properly learning it to make things and it just didn't stick at all for me, and considering that was with <i>Python</i>, I'm goign to assume my limits in terms of handling things are pretty low.</p>
<p>I also run synth.download! The thing you're looking at! Made with love and containers. <span class="tabler--heart" style="background-color: var(--red) !important;"></span></p>
<p>I <i>absolutely</i> despise capitalism with every single fiber in my living synthentic body.</span>
<p>In case it wasn't obvious or clear somehow at this point, I'm a furry. Well, if I consider myself to even fit within that space or if I do want to participate within the "furry" community, but I think I fit into that label enough to be considered one. <small>Being a human fucking <span style="text-transform: none;">SUCKS</span>, although I don't think I fully consider myself "therian" exactly.</small></p>
<p><span style="text-transform: none;">Certified<span aria-hidden="true"></span> idiot</span> <small>(although I think this one is obvious)</small></p>
<p>I'm usually pretty much both mentally and physically tired all of the time, while also usually being full of ideas that I try to execute and tire myself even more, making things even worse in the end.</p>
<p>With this, I do sometimes make things, but honestly don't expect much from me. <small>I'll make some type of gallery page soon for the things I <i>do</i> make and the things others do for me, I promise.</small></p>
</section>
</details>
<!-- socials -->
<details open id="links" class="window">
<summary>
<div aria-hidden="true">
<span class="tabler--link"></span>
</div>
<a href="#links">links</a>
<div aria-hidden="true">
<span class="tabler--minimize"></span>
<span class="tabler--maximize"></span>
</div>
<div aria-hidden="true">
<span class="tabler--x"></span>
</div>
</summary>
<section>
<h2><a href="#links">Links</a></h2>
<p>My links to all of my public facing socials and contacts. If I know you well, you may ask me for anything more private, like Signal or Matrix, etc. <small>The fastest way to get this is by checking my <i>followers only</i> pinned post if you follow me/we're mutuals on the Fediverse.</small></span></p>
<div class="socials-contacts-list">
<a class="fedi-icon" href="https://booping.synth.download/@sneexy" style="background-color: color-mix(in srgb, var(--orange) 25%, transparent); color: var(--orange);" aria-label="Fediverse/Mastodon"><span class="tabler--universe" style="pointer-events: none;"></span></a>
<a class="fedi-icon-2" href="https://booping.synth.download/@sneexy" style="background-color: color-mix(in srgb, var(--teal) 25%, transparent); color: var(--teal);" aria-label="Fediverse/Mastodon" aria-hidden="true"><span class="tabler--brand-mastodon" style="pointer-events: none;"></span></a>
<a href="mailto:&#x73;&#x6e;&#x65;&#x65;&#x78;&#x79;&#x40;&#x73;&#x79;&#x6e;&#x74;&#x68;&#x2e;&#x64;&#x6f;&#x77;&#x6e;&#x6c;&#x6f;&#x61;&#x64;" style="background-color: color-mix(in srgb, var(--red) 25%, transparent); color: var(--red);" aria-label="Email"><span class="tabler--mail" style="pointer-events: none;"></span></a>
<a href="https://listenbrainz.org/user/Sneexy" style="background-color: color-mix(in srgb, var(--sapphire) 25%, transparent); color: var(--sapphire);" aria-label="ListenBraniz"><span class="tabler--brand-metabrainz" style="pointer-events: none;"></span></a>
<a href="https://www.last.fm/user/sneexy_is_gay" style="background-color: color-mix(in srgb, var(--red) 25%, transparent); color: var(--red);" aria-label="Last.fm"><span class="tabler--brand-lastfm" style="pointer-events: none;"></span></a>
<a href="https://git.gay/sneexy" style="background-color: color-mix(in srgb, var(--maroon) 25%, transparent); color: var(--maroon);" aria-label="Git"><span class="tabler--brand-git" style="pointer-events: none;"></span></a>
<a href="https://github.com/sneexy-boi" style="background-color: color-mix(in srgb, var(--lavender) 25%, transparent); color: var(--lavender);" aria-label="GitHub"><span class="tabler--brand-github" style="pointer-events: none;"></span></a>
<a href="https://archive.org/details/@sneexy" style="background-color: color-mix(in srgb, var(--foreground) 25%, transparent); color: var(--foreground);" aria-label="Internet Archive"><span class="tabler--building-bank" style="pointer-events: none;"></span></a>
</div>
<p><span class="tabler--corner-down-right"></span> You may observe my Fediverse activity below:</p>
<iframe aria-hidden="true" src="https://booping.synth.download/embed/user-timeline/9zy33jqk7ljg0001?header=false&maxHeight=800&rounded=false&border=false" data-misskey-embed-id="v1_902c0e81-d9d7-4c03-af0e-a6e71c21e95b" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"></iframe>
</section>
</details>
<!-- "fun" facts -->
<details open id="fun-facts" class="window">
<summary>
<div aria-hidden="true">
<span class="tabler--mood-empty"></span>
</div>
<a href="#fun-facts">"Fun" facts</a>
<div aria-hidden="true">
<span class="tabler--minimize"></span>
<span class="tabler--maximize"></span>
</div>
<div aria-hidden="true">
<span class="tabler--x"></span>
</div>
</summary>
<section>
<h2><a href="#fun-facts">"Fun" facts</a></h2>
<ul>
<li>My profile pictures used to be random characters from different types of media that I would just apply a grayscale onto. Ever since then, I realized that I've very much enjoyed being a <a href="https://synthspecies.com/">Synth</a> instead.</li>
<li>I used to have an inside joke with some old friends where I <i>loved</i> cheese. 🧀</li>
<li>Originally starting going online when I was young and my only method of getting Wi-Fi was by using my netbook in the kitchen, stationed above the stove and connecting to a nearby stores local Wi-Fi connection. <small>apparently, Lowes Wi-Fi goes out VERY far.</small></li>
<li>Joined the <a href="https://fediverse.info">Fediverse</a> around 2020 or so, originally on <a href="https://mas.to">mas.to</a> before moving to <a href="https://types.pl">types.pl</a>, which has quite a nice local community <span style="text-decoration: line-through;">ignoring that I left the account to rot and die</span>, before moving to <a href="https://miruku.cafe">miruku.cafe</a> for a short bit, which introduced me to the <a href="https://misskey-hub.net">Misskey</a> software where I ended up starting to actually enjoy using the Fediverse, then moving to <a href="https://lea.pet">lea.pet</a> after some drama went down, before <i>finally</i> landing on my own self-hosted instance at <a href="https://booping.synth.download">booping.synth.download</a>. <small>Well, originally starting at <a href="https://beeping.synth.download">beeping.synth.download</a>, But I realized that <a href="https://iceshrimp.net">Iceshrimp.NET</a> is a bit <i>too</i> much in beta stage software for me.</small></li>
<li>I prefer lowercase when possible and use spaces before <i>and</i> after punctionation, sometimes maybe a double space here and there, <small>Although I attempt to avoid doing the latter on this website to try and prevent it from making it entirely inaccessible.</small> It just feels more natural for me.</li>
<li>I am <b><i>terrible</i></b> at spelling.</li>
</ul>
</section>
</details>
<!-- webrings and credits -->
<footer>
<details open id="footer" class="window">
<summary>
<a href="#footer">footer</a>
</summary>
<section>
<p class="fediring"><b><a href="https://fediring.net/previous?host=synth.download" aria-label="Previous"><span class="tabler--arrow-left" style="pointer-events: none;"></span></a> <a href="https://fediring.net">Fediring</a> <a href="https://fediring.net/next?host=synth.download" aria-label="Next"><span class="tabler--arrow-right" style="pointer-events: none;"></span></a></b></p>
<p class="fediring"><b><a href="https://keithhacks.cyou/furryring.php?prev=synth.download" aria-label="Previous"><span class="tabler--arrow-left" style="pointer-events: none;"></span></a> <a href="https://keithhacks.cyou/furryring.php">furryring</a> <a href="https://keithhacks.cyou/furryring.php?next=synth.download" aria-label="Next"><span class="tabler--arrow-right" style="pointer-events: none;"></span></a></b></p>
<p class="fediring"><b><a href="https://stellophiliac.github.io/roboring/sneexy/previous" aria-label="Previous"><span class="tabler--arrow-left" style="pointer-events: none;"></span></a> <a href="https://stellophiliac.github.io/roboring">roboring</a> <a href="https://stellophiliac.github.io/roboring/sneexy/next" aria-label="Next"><span class="tabler--arrow-right" style="pointer-events: none;"></span></a></b></p>
<section class="inner-footer">
<a href="https://forged.synth.download/sneexy/pages" style="background-color: color-mix(in srgb, var(--maroon) 25%, transparent); color: var(--maroon);" aria-label="website source!"><span class="tabler--brand-git" style="pointer-events: none;"></span></a>
<a href="https://github.com/ayu-theme/ayu-colors" style="background-color: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent);" aria-label="Ayu"><span class="tabler--palette" style="pointer-events: none;"></span></svg></a>
<a href="https://tabler.io" style="background-color: color-mix(in srgb, var(--blue) 25%, transparent); color: var(--blue);" aria-label="Tabler"><span class="tabler--brand-tabler" style="pointer-events: none;"></span></a>
<a href="https://www.jetbrains.com/lp/mono" style="background-color: color-mix(in srgb, var(--green) 25%, transparent); color: var(--green);" aria-label="JetBrains Mono"><span class="tabler--text-size" style="pointer-events: none;"></span></a>
<a href="https://www.lexend.com" style="background-color: color-mix(in srgb, var(--sapphire) 25%, transparent); color: var(--sapphire);" aria-label="Lexend"><span class="tabler--letter-case" style="pointer-events: none;"></span></i></a>
</section>
<p style="padding-bottom: 14px;"><a href="https://synthspecies.com">Synth species</a> created by <a href="https://www.furaffinity.net/user/vader-san">Vader-San</a>, synth.download is not affiliated with the creator in any way.</p>
<p>made with <span class="rainbow">love</span>, <span class="rainbow">lack of sleep</span> and <span class="rainbow">procrastination</span></p>
<p>♡2025 All wrongs reversed. Please copy and share.</p>
<img src="/assets/dumpysynth.gif" alt="GIF of a synth with a massive butt, shaking it towards the viewer" />
</section>
</details>
</footer>
<!-- element used for our alt popup -->
<div class="alt-popup" id="alt-popup" aria-hidden="true"></div>
</body>
</html>