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 #2: 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 ^_^

website before

The pre-rewrite state; boring and sad

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:

first steps

First steps; empty and sad

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

First demo; navbar got icons and footer was added

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

chat forces me to sleep

Group chat forces me to go sleep

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

fake player

Fake music player with some brony music

MobileTablet
website on mobilewebsite on tablet

Uninteresting fact #1: 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.

DeviantArtMine
bookmark deviantartbookmark mine

Uninteresting fact #2: 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.

broken scrollbar

Footer's opacity is changed for demo purposes

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.

neocities cli help

Help page; love the humor

neocities cli pushing

Pusing local directory to Neocities with deletion of files not present locally

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

website after

QR code to a Mastodon post

Comments

You can comment on this blog post by publicly replying to this post using a Mastodon or other ActivityPub/Fediverse account. Known non-private replies are displayed below.


Go to TopFile an Issue