Rewriting My Neocities Website Was Fun!

This is my first #100DaysToOffload post; what this means is that I’ll post more and about more diverse stuff. My drafts folder are nearly exploding so it’s about time! A dedicated post about this will be published soon (hopefully nervous giggling).

Edit

It’s been published (4 days later and not in half a year!).

Edit

This post has been featured in exozyine!

As you might know, almost a year ago I got a website on Neocities: the modern-age Geocities with not so modern personal websites. I always liked the idea of having website there, but never actually got my hands on it… until now, woo-hoo!

On the 31st of May I started rewriting it. 4 days later, it seems to be better than what it was in every aspect, so I decided to write this post sharing some insights on how it was done ^_^

All started by copy-pasting sadgrl’s Simple Skinny 00s layout, since I suck at this. The layout seemed perfect so I started tweaking it. After stealing the button shading styles from DeviantArt and getting this nice background from the same sadgrl’s website, I had this:

Fast-forward a few hours, I had some very basic thingy going!

The icons are from Tango, an icon theme that had it’s last release 15 years ago, back in 2009. Project’s website is down, but download link still works somehow: http://tango.freedesktop.org/releases/tango-icon-theme-0.8.90.tar.bz2

See that footer? yes, it uses a deprecated marquee HTML element, it’s just too good to not be used. I even posted about it on Mastodon.

At this point it was 4:00 AM and I had to go sleep 0_0

Yeah, I enjoyed the rewrite a bit too much.

Aaanyway, the next day I added the cbox chat, polished the footer, and teased it to my Mastodon followers.

About chat box: cbox doesn’t allow adding custom CSS in the free plan, so I couldn’t add the text shadow for the carved text effect, what I did is applied a drop-shadow() filter to the whole <iframe> which did the job.

Then I added a fake music player to the top-right corner (which was an absolute pain to create, I could’ve used CSS grid to avoid all the alignment issues, but it’s just confusing so I settled on this hacky unresponsive mess), further polished the design, fixed the mobile version, removed the ability to move and resize the chat box (it was buggy and quite useless), and drawn a favicon and a bookmark inspired by one on the old DeviantArt. In fact, a lot of things were inspired by DeviantArt of 2010’s

Mobile	Tablet

Uninteresting Fact

The music player initially displayed PrinceWhateverer’s Miscommunication as it’s very relatable, but since I aimed for the 2010’s vibe, I decided to change it to WoodenToaster’s Rainbow Factory since it was released in 2011 and were quite popular back then.

DeviantArt	Mine

Uninteresting Fact

Initially the bookmark said “Work In Process”, but I realised that it won’t exit this state anytime soon, so it were changed to “Forever WIP”

And that’s about it! there’s one issue that bothers me, the footer; it’s absolute positioned relatively to the “paper” and it overlays on top of the scrollbar, which is meh.

One more thing I want to mention is Neocities CLI. If you have ever used Neocities you know the pain of upload files to it via the web interface, it does provide WebDAV mount for supporters, BUT there’s another way, the official CLI tool!

It allows pushing local files or whole directories directly to your Neocities website, it’s distributed as a Ruby gem but it works just fine.

Seriously, this thing saved my nerves.

Thanks for reading! Visit the website here and feel free to drop something in the chat box ;)