In May of 2014 I've launched a small personal blog about metroidvanias (video games genre). It was a hasty launch with a lot of tinkering afterwards. A year later I've decided to remake it from scratch.
Initial site used Wordpress as a backend with the Ink theme by CodeStag. I've made a few tweaks and ended up making a rather extensive child theme for a task that was actually more of removing clutter, than adding stuff.
I have to admit though, after you remove stuff from the screen it's hard not to become obsessed with things like animations.
So I tuned the typography, changed and added some animations, moved a few things around a bit. And every time there was something in need of fixing I got that feeling of inner panic that I have when I see someone else's code and have no idea what the fuck's going on there. I'm not a stranger to stuff like HTML and CSS, I've written a few lines of code here and there. But there's a huge difference between making JS prototype and writing production code.
That didn't stop me from adding fullscreen-width images to blog posts a few months before it became possible with a simple setting in original theme.
So in May of 2014 I've ended up with something that was looking good, but was too much of a hassle to work with. There was still a lot to be done under the hood like removing the usage of Fontawesome (which is awesome, but too much of an overkill for a site with 3 icons).
This is how the last Wordpress version of the homepage looked like.
I've started by making a basic HTML-boilerplate for all 4 (and a half) templates the site was using. I've loosely copied the existing site layout and started polishing various layout elements in no particular order.
Negative mix-blend-mode for a floating menu icon and logo.
Moving the menu to the top and changing the icon animation.
And while I'm at it add this cool search input behavior.
At the same time I was working on something you could have noticed on the previous image. I've always liked Museo, high-legible low-contrast geometric font with nice cyrillic glyphs.
Based on that fancy new search I've made a new template for search results differentiating it from the homepage and providing some text description for blog entries.
There was also a matter of adding proper style for mobile and tablet.
At some point I started thinking that it would be actually a good idea to look for a different backend. Instead of a highly complex and feature-heavy Wordpress I would've prefer something simple, fast and flexible. I was in need of CMS where really important things like server-side image resizing (for mobiles) were taken care of. And this backend also should've been flexible to add few things missing in the base package. I've ended up choosing flat-file GRAV which is awesomely fast and extendable.
Yeah, I've ended up writing a plugin for my image output serving it just right for bLazy. No, this plugin source is private and pretty horrible I think. Nonetheless it includes regexp even (yay, mummy, I'm a developer).
And fixing stupid little stuff like text selecting.
And adding a big blurred shadow to the title of covers so it would be legible on hover.
There's still is a lot of stuff to be done. I need to make that floating header to show on scroll up and end of the page only. And maybe Safari will stop to lag so horribly with mix-blend-mode on floating elements, so I wouldn't have use same graceful degradation which IE uses.
I worry less about it since I've checked my Google Analytics, and desktop visitors still mostly use either Chrome or Firefox.
There's tons of small stuff like refined 404 page. And many things just seemed hard for me, but turned out to be quite easy when I approached them.
Loading more items ended up being nothing more than a special template and 20 lines of JS.
You can't really stop trying to make something better, but at the end of August it felt like this site was ready to be re-launched, since I even had two new entries for the blog.
So this is a homepage of Sequence Break after the re-launch.
