620200137e
- Rearranged navigation significantly
- Navbar is now unlimited width on desktop
- Navbar is now always on top of the screen, even on the landing page
- Navbar has been replaced with hamburger menu on mobile
- Significant styling alterations to look good on phones tm
- Most of the credit goes to a certain meta tag.
- (Appearance on desktop is mostly unchanged)
- The background on mobile is now 100% image, but darkened to improve contrast
- Table pages such as /links/ and /stats/ now rearrange on mobile:
column a column a column b
column b vs column a column b
column a column a column b
column b column a column b
- font size on landing page scales with device width on tall displays
- guestbook posts use CSS grid now
- Working on a @media (prefers-contrast: more) theme as well. Can't figure out how to test it though
- Updated /stats/
- Added some new stats
- Updated CD collection size
- Updated /about/uses/
- I now use Nextcloud News instead of Yarr
- My phone runs Graphene
- I use Fennec browser on mobile instead of standard Firefox
- New background as the old one was horrible for contrast
- Added Waxlimbs - For Science! to /about/music/
- The oldest three articles on /blog/ now show a warning on hover that they're from the legacy v2 site
- Corrected various markup issues with the help of validator.w3.org/nu/
- Added alt text to a ton of images
- todo list is no longer a separate html file. it was fucking with the scaling on mobile and I couldn't be bothered
- /stuff/ remains unchanged. I'll get to it
- Hopefully that's everything lol
130 lines
14 KiB
HTML
130 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>deeptwisty.com 2nd anniversary - A History of This Bullshit</title>
|
|
<link href="../../../style.css" rel="stylesheet" type="text/css" media="all">
|
|
<style>
|
|
@font-face {
|
|
font-family: Ubuntu;
|
|
src: url('../../../stuff/fonts/ubuntu.ttf');
|
|
}
|
|
|
|
body {
|
|
background: url('bg.png') #000000;
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
a {
|
|
color: #00CED1;
|
|
}
|
|
|
|
a:hover {
|
|
color: gold;
|
|
}
|
|
|
|
[title] {
|
|
color: white;
|
|
text-shadow: 0 0 1.5px white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
h1 {
|
|
color: transparent;
|
|
-webkit-text-stroke-width: 2px;
|
|
}
|
|
|
|
#headerblue {
|
|
-webkit-text-stroke-color: blue;
|
|
text-shadow: 0 0 15px blue;
|
|
animation: hblue;
|
|
animation-duration: 10s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
@keyframes hblue {
|
|
|
|
0%,
|
|
100% {
|
|
-webkit-text-stroke-color: rgb(0, 0, 200);
|
|
text-shadow: 0 0 15px rgb(0, 0, 200);
|
|
}
|
|
|
|
15% {
|
|
-webkit-text-stroke-color: blue;
|
|
text-shadow: 0 0 15px blue;
|
|
}
|
|
}
|
|
|
|
#headergreen {
|
|
-webkit-text-stroke-color: #5ff508;
|
|
text-shadow: 0 0 15px #5ff508;
|
|
}
|
|
|
|
#headeryellow {
|
|
-webkit-text-stroke-color: gold;
|
|
text-shadow: 0 0 15px gold;
|
|
animation: hyellow;
|
|
animation-duration: 16.7ms;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
@keyframes hyellow {
|
|
from {
|
|
text-shadow: 0 0 15px #dbba00de;
|
|
}
|
|
|
|
to {
|
|
text-shadow: 0 0 15px gold;
|
|
}
|
|
}
|
|
body > code {
|
|
border-color: #0ff;
|
|
box-shadow: 0 0 4px #0ff, 0 0 4px inset #0ff;
|
|
color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1><span id="headerblue">nice</span><span id="headergreen">obl</span><span id="headeryellow">og</span></h1>
|
|
<h2 id="caption">deeptwisty.com 2nd anniversary:<br>A History of This Bullshit</h2>
|
|
<nav>
|
|
<a href="../../../">home</a>
|
|
<a href="../../">blog</a>
|
|
</nav>
|
|
<p>Yesterday, September 18th, 2022, was the second anniversary of the creation of my first website <span title="It has since been migrated off of Neocities">on Neocities</span>, the site that is now known as <a href="https://deeptwisty.com">deeptwisty.com</a>. I intended to publish this then, but life got in the way, by which I mean I wrote 90% of it and then procrastinated for two weeks on the last couple paragraphs. I figured that to commemorate the occasion I would finally dispense with the half-assed abridged history of the place on the about page or wherever and consolidate a complete history of my Personal Home Pages in one convenient location, that being this post.</p>
|
|
<h2>Tumblr</h2>
|
|
<p>My first proper social media was Tumblr. Well, the first social media site I joined was Pinterest, but that doesn't count. Anyway, Tumblr was my main social media and the center of my Online Presence™ for several years. I would pour hours into tweaking the custom theming on my blog to be just right, and I often had some sort of bio on a custom page, which is a thing Tumblr lets you do. I linked to all my other online profiles from my Tumblr page, and would prioritize linking back to it from them. This caused problems, as I was and still am the type of Tumblr user to change their username on impulse, and it was terribly inconvenient having to go through all my other accounts and change that link whenever I did (I've got it set up as a subdomain of my website now, so that should never be a problem again). Eventually, though, another service would crop up that everyone seemed to be using, and that presented me with a better way:</p>
|
|
<h2>Carrd</h2>
|
|
<p>I still use Tumblr, just not as the hub for my entire online presence. I maintain that it is still <span title="Did you know you can get an RSS feed for ANY tumblr blog by going to <blog url>/rss? True story!">far and away the best</span> centralized social media site. Anyway, a Carrd page became the central hub which linked to all my online profiles and which all my online profiles could link back to. Finally, I only had to update my frequently changing Tumblr link in one place. For the most part.</p>
|
|
<p>I perceived a certain stigma (at least on Tumblr) around having a Carrd page, and the sorts of people who made one. The stereotype was that you would have overly exhaustive BYF (Before You Follow) and DNI (Do Not Interact) lists full of sometimes <span title="Oh, I should have mentioned, GTFO if you kin Komaeda.">outlandish criteria</span>, probably have similar bullet point style lists of all your likes, dislikes, and possibly identities and triggers <span title="I get why you would want people to know that information, but I'm surprised more people didn't realize that bad actors could abuse that information SO easily.">(!)</span> and probably not be the most pleasant person to interact with. I like to think I bucked that trend. My Carrd pages were generally very simple: a profile picture, a short bio (some shit like "Will | 20 | 🇨🇦 | real life isopod"), and links to my socials. That was all. I remember adding the obligatory long-form bio and DNI list at some point, but those didn't last long.</p>
|
|
<p>I believe it was around this time when the alias <span title="Yes, it's intended to be all lower case">"deep twisty"</span> came into being. I was just starting out making music at this point, posting crummy songs to SoundCloud that I'd made in an online editor called <a href="https://earsketch.gatech.edu/landing/#/">EarSketch</a> that had you use Python to arrange pre-made loops and samples on a timeline. That shit was wack, yo, but that's beside the point. I was looking for an alias to release my music under, because I was intent on making more and my actual name wasn't gonna cut it.</p>
|
|
<p>I was quite into Subnautica around this time (I promise this is relevant) and its sequel, Subnautica: Below Zero, was in the early stages of early access around this time, like still working on early-game areas early, and I was following it closely. The devs had a twitter account that posted all the git commits for the game, and a couple of them referred to a biome they were working on, the <span title="Yes, I named a song Bridges so I could call it "deep twisty - Bridges". Shut up.">Deep Twisty Bridges</span>, as just "deep twisty". That is the origin of that name. I don't know why I felt compelled to base my brand off that, but now I'm committed. I get self-conscious about it sometimes, but honestly, <span title="Not to endorse Lapfox, but I wonder if that's why they go through aliases so fast. Like, god damn.">I've seen worse</span>. Not that I'm judging.</p>
|
|
<p>Anyway, I made a separate Carrd as a hub for this new "deep twisty" persona (I keep it separate from everything else mainly so I can show it to family without them seeing all of... this. Not that I have yet...). That worked fine until I wanted to start embedding my latest YouTube upload on the Carrd page, something Carrd locks behind a paywall. It was at this precise moment I remembered <span title="I did edit custom Tumblr themes, after all">I know how to code</span> and resolved to make the jump to a platform that lets you write your own HTML from scratch, in my case, this being</p>
|
|
<h2>NeoCities</h2>
|
|
<p>My first Neocities sites were simple affairs, basic little pages with little more to them than the Carrd sites they had replaced, albeit with some of the things Carrd would have made me pay to add, like that YouTube embed. You can still see the original version of what is now this site <a href="../../../old/1/">here</a>, though the original version of deeptwisty.com was unfortunately lost. It was nothing special, though. It had a similar aesthetic to its replacement, and it was pretty similarly laid out to this here page, even with the same background, just with WAY less text, and no cool isopod.</p>
|
|
<p>I've seen some people in this here "small web" community getting mad at people who use Neocities this way, to which I say: shut the fuck up! Everyone has to start somewhere, and messing around on a simple page like that could easily be a gateway drug into making something much bigger, like it was for me. Hearing sentiments like this is just going to discourage people. Besides, it's their website. They're not intruding on your special cool kids club by using a free service to do the thing that it's for.</p>
|
|
<p>It was also during this time when I bought the domain deeptwisty.com. I had to pay Neocities to use it, but I was more than happy to support the cause anyway. I didn't stricly <i>need</i> the domain, but boy was it cool to have my very own Dot Com. It just sounds so professional. deep twisty Dot Com.</p>
|
|
<p>The deep twisty site tended to take precedence over this here personal one for a while; the personal site was relegated to a subdirectory or subdomain like deeptwisty.com/me or me.deeptwisty.com. In fact, the transition from the former to the latter is when the original deeptwisty.com was tragically lost. I was copying over the contents of deeptwisty.com/me to its own fresh new dedicated Neocities profile and I accidentally uploaded the files to the wrong site, overwriting a large portion of the main deeptwisty.com with no way to recover it. I spent a couple days rebuilding it into roughly what you see at that domain now, and when I was done I was having enough fun with it that I wanted to keep going and decided to overhaul my other site too, and what resulted was <a href="../../../old/2">this</a>.</p>
|
|
<p>For this new version of the site, I decided I wanted to be able to actually add content to it, whereas the old site hadn't really been designed in a way that was conducive to that. I decided to do this in the most JS-reliant way possible. I had one main page with the navigation and layout, and the navigation worked by using a URL querystring to tell the page which content to load. It was pretty fuckin' neat, but I would eventually realize I wasn't a fan of how dependent it was on Javascript. My favorite feature of this revision is the theme picker, which swapped out different stylesheets and set a cookie to remember which one you prefer. The main problem with this was that I designed it so the themes could change basically everything bar the fudamentals of the layout, and it became a huge pain in the ass to add both new pages and new themes while ensuring everything stayed compatible. It was really cool though.</p>
|
|
<p>To be completely honest, I took rather a lot of inspiration for this revision from <a href="https://hosma.neocities.org/10/">this site here</a>, which is to say I basically made a worse version of it and went from there. You can still see some of that inspiration in v3, with the giant header text and centered single-column layout.</p>
|
|
<p>This revision was, as the kids say, Real Cool™, but the aforementioned problems led me to scrap it after only about 2 months, which brings us here:</p>
|
|
<h2>v3 and Self-Hosting</h2>
|
|
<p>I wanted something that could be viewed without Javascript and wasn't a colossal pain in the ass to update, hence what you see on the site now if you're reading this soon after it was posted. If I've since overhauled the site again, the version I'm referring to should be available <a href="../../../old/3/">here</a>. This version is designed to be as simple layout-wise as possible, to the point where you can read it in a text-only browser and not lose much of the experience. It's much easier to add stuff to now. My one issue with it is the navigation - unlike v2, where you could get to any page from any other in one click, v3 requires you to go back to the homepage to move between pages. It's just harder to navigate. This system is better than having to add a link to every new page on every existing page, though. Now that I can do server-side rendering, I'll probably put in a proper navbar or something of that nature at some point.</p>
|
|
<p>Speaking of which, a bit after the jump to v3 I decided to start self-hosting my websites. I didn't have any deal breaking issues with Neocities per se, but I wanted to start messing around with server-side scripting, and I wanted to host some other things that I wasn't in a position to otherwise. I originally wanted to do this with an old laptop I had lying around, but I would have had to punch through the NAT in my house and point the domain to my home IP address, neither of which I wanted to do. Instead, I cancelled my paid Neocities account and reallocated those funds to rent a VPS. I was originally going to use Linode for this, but they literally wouldn't let me sign up for an account for some reason <span title="WTF? Like, let me give you my money, dude. The only thing I can think of that could have happened is their system assumed I was some kind of spammer or bot because I was accessing their site through a VPN. I solved the CAPTCHAs and everything. What's the deal?">(?)</span> so I went with DigitalOcean instead.</p>
|
|
<p>I've had quite a lot of fun with this newfound backend access. I now have the freedom to use Javascript only when there's literally no other way to do what I want done, and I've taken advantage, moving stuff like the randomized subheader on the landing page server-side. I'm also hosting a lot of other services on this same VPS, including but not limited to a Pleroma instance, an RSS aggregator, a SearXNG instance, and a WireGuard VPN to make <span title="Currently just a Minecraft server, but the mind races with the possibilities.">more intensive stuff</span> I host on my laptop available to the internet. I'm honestly really impressed that the 1 CPU thread and 2G of RAM my server has can handle all that.</p>
|
|
<p>That brings us to now, at this moment, when I'm writing this. I'm absolutely not out of stuff to do here, if I can ever get myself to actually fucking do any of it. I've had a great time with this whole "personal website" business so far, and I'm excited to see where I go with it from here. The community around it is cool too, though lord knows I'm still learning to navigate this particular social environment. At any rate, I'll definitely take this over Twitter.</p>
|
|
<code>
|
|
cd /home/willem/cumulus\ server/www/niceopod/blog/posts/<br>
|
|
sftp root@isopod.cool:/var/www/niceopod/blog/posts/<br>
|
|
put -r deeptwistycom_2nd_anniversary_-_a_history_of_this_bullshit/
|
|
</code>
|
|
<br>
|
|
</body>
|
|
|
|
</html> |