Jade Everstone v.3 - Demiroid
December 23, 2024
I nicknamed this version 'demiroid' after Io, my main 'sona and the site's mascot since they've also gotten an overhaul this year.
I wanted to make a big blog post going over some of the goals I had in mind and major changes. Buckle in, it's a long one.
The Goals
-
Clean up old HTML & rid this site from my old coding habits, notably, excessive inline CSS. A lot of these were carry-over habits from toyhouse, where inline CSS is needed if you don't have premium (or want a non-premium friendly code) but is unnecessary bloat otherwise. This also includes adding semantic html, tweaks to the site's file structure, using a static site generator vs coding everything manually, under the hood things.
-
Make the site easier to update. This site is now built with 11ty! The main reason for this change was due to the site's size, I've reached the point where manually updating each page to the new layout became tedious. Fine for experimental & 'fun' pages, terrible for the main parts of the site. Being able to make any layout changes going forward via a template vs having to manually copy-paste page contents or go into a page to edit is a lot more efficient in the long run. As a bonus, the site can be edited offline now and it's 'future proofed' in the event I want to change the layout again.
-
Reduce Bootstrap CSS to only the grid. It was an ok starting point. But as I got more comfortable with making my own CSS, most of Bootstrap's stylings became unnecessary & lead to a lot of bloat if I needed to restyle an element. The grid is kept so can use it for smaller, infrequent elements.
-
Get rid of Javascript navs. They were a work-around for when my pages were manually coded, as Neocites (where I'm hosted as of posting) doesn't allow for dynamic site elements. This makes the site hard to navigate for users who prefer to disable it. Switching to a static site generator negates the need for them
-
Improve the site's overall look. Some of it is personal prefrences, but a lot of the site's colors felt muddy after a while. As of making this post, the site's now on a light theme.
The Challenges
There were alot of them... oh boy.
The first one is creative blocks. Without getting too deep into it, 2024 has been a rough year for me personally. So motivation to work on a lot of my projects became sporatic, this website being one of them. There'd be times I'd work on it nearly non-stop for days, and then weeks where I'd be too demotivated to even check where I left off. And it didn't help that whenever I needed to make edits to the site I'd have to stare at old code I wasn't proud of. it also didn't help that early on I was still planning on building each page with manual copy-and-paste.
The frustration of feeling like I needed to get the layout perfect on the first gois what lead me to switching over to a static site generator. I went with 11ty since I've heard about it from a few other sites. While I think switching to a static site generator was the best thing that I did in the update, it brought up it's own set of delays. I had to make tweaks to all of the pages to make them work with a template. For the most part, this wasn't too hard, just time consuming.
The main problems started was when I wanted to do more than just templates. The Everlogs was the most difficult in this department. I think I spent a month figuring out how to get timestamps, tags, and paginations working correctly. I'm still not sure what I did, and I'm scared to touch those parts of the template incase I break it again, lol.
I think it's safe to say this is my biggest project of 2024 with how much time got sunk into it. I made it out the other end, and what I came up with is a site I'm ok having around for a while.
Some pages have moved around!
As mentioned earlier, there were some tweaks to the file structure. For some of the affected pages, the reason is that 11ty by default generates each page as an 'index' (so instead of /art/projects.html it's /art/projects/). I tried to catch as many broken links onsite before rolling out the update, but for some of the one's you might've found offsite, you might run into a handful of broken links.
The changes to the blog's file structure is different. With migrating this section of the site to 11ty, I reorganized the posts to be sorted by year & cleaned up the links. The reasoning was admittedly, for my own editing convenience. So I don't have to paw through a wall of markdown files when I want to make a new post. But it does come with the side-affect of rendering all of my offsite post links obsolete.
For the main site, you can check the sitemap to see where pages went, and for the Everlogs you can check the homepage or the tags page to find posts.
Pages on the Old Layout
While the end goal is to port everything over eventually, I feel if I were to wait until everything was ready, it would never get done. And I feel this overhaul faced enough creative blocks & delays as-is. So several pages are still gonna be on the old CSS for now. Most Notably:
- Project pages: I want to avoid breaking these as much as I can. Some of them have custom styling that need porting as well.
- Labs pages: Due to most pages not following the main site's layout, these would need a total recode! Plus with these being the more 'for fun' / experimental pages of the site, these are low priority in terms of re-doing.
Sunset Pages
Part of the site's clean-up involves saying goodbye to a handful of old pages. These pages & their resonings can be found below:
- The Video Rec Room: Formerly a place I'd use to share my favorite youtube videos. Stopped updating since I feel YouTube's instability makes such a page hard to maintain onsite.
- The Webmaster: A more 'for fun' about me page. Honestly I just hated the layout, and I think if I want to do a more personal about me I want it to be on HTML & CSS I'm actually proud of.
- Stamps Collection: Stamp collecting has moved to being 'personal website' thing vs just a DeviantArt thing, and I made sure the theming is removed from the latter. But with how heavily I associate stamps with DA, i feel my distain towards that hellsite is far too strong these days to want to keep that page up.
- Design Showcase: This page was only up as part of a final for a graphic design course I took in college. I might do something with the artwork on there, but as it stands it was really out of place.
- The Frog Squad: While there are compositional elements I liked, I feel this one should be reworked.
Future Pages?
Similar to the pages that haven't been ported over, I'm holding off on making these so I can get this site done. But in the meantime, look forward to:
- OCs: While I use Toyhouse as my archive for character info, I'd like to mirror some of my more important OCs over here. Especially if they're attatched to ongoing projects.
- Comic Shorts & Mini Comics: The former was on the main comics page, but is getting moved to a section of it's own to keep things tidy. Mini comics on the other hand is new! Previously I've only distributed these through IRL events, but I want to have somewhere onsite to host some of these mini-zines too.
- Web Shrines: I could use the break from the mainsite. These will likely be updated at an inconsistent pace.