A New Look - Going Full Vectorheart
If you’ve visited before, you might have noticed things look a little… different. Gone is the polite grey-and-blue look, and in its place is a whole lot of cobalt, chunky pipes and angled lines. Welcome to the new MasterOf.Dev, now in glorious vectorheart!
Wait, what’s vectorheart?
Somewhere in an old, steel, CD briefcase in my house is a stack of Official PlayStation Magazine demo discs, from disk #1 until the last one my dad would buy me. On a couple of those discs were demos for Ace Combat 3: Electrosphere and Wipeout 3. I played those demos…a lot, and while I couldn’t have told you why at the time, I always loved how they looked. Not just the games themselves, but everything around them. The menus, the logos, the little bits of UI that felt like they’d been designed by someone from a slightly cooler future than the one I was living in. I always had a thing for the sci-fi and cyberpunk.
Fast forward to now. After playing the recently released Ace Combat 8, I fell down a bit of a rabbit hole into the history of the series and rediscovered Electrosphere. In the process, I found out something I never knew - that style actually has a name. Vectorheartz. Flat colours, simple shapes, thick lines, curves and hard 45 degree angles, lots of whitespace and the occasional hazard stripe for good measure. Basically, the late-90s idea of what a slick, corporate future would look like.
As someone who’s always liked that style (even before I knew what to call it), I ended up studying it a lot more, looking at everything from game UI to album covers and posters from the people still making this stuff today. And somewhere along the way I realised my own website was… fine. It was fine. It was perfectly functional, a bit of grey, a splash of bright blue, some diagonal stripes. While it was ‘me’, it was a generalized, basic form of me. The corporate me. Functional, but not very fun. So, with a lot of research, trial and error, it resulted in this!
The New Look
The whole site is now built around a small palette - a deep navy, a saturated cobalt blue and an icy white - with almost nothing else. No gradients, no glows, no drop shadows. Everything decorative is SVG, drawn as thick rounded pipes that run along and bend at 45 degrees, plus the odd circle or disc. The bottom left of the main content panel itself has a chamfered corner, the headings are in Audiowide, a font that I feel is quite similar to the fonts used in those PS1 games. There are tiny monospaced labels scattered around giving you entry numbers, file numbers and read times. Are they strictly necessary? Not at all, in fact they were quite annoying to add. Do they add a little bit of extra fun? Sure. Plus, they make me happy!
One thing I was strict about was motion. Nothing on the site animates on its own while you’re just sitting there reading. After all, I do care about accessibility and website performance. If I’m going whole hog on this style, the lease I can do is not burn your GPU rendering spinning orbs or 3D gimmicks. Even so, page transitions certainly are animated. The line art draws itself in when you arrive on a page, and things react when you interact with them, but once a page has settled it stays settled. I want it to feel like the classic overengineered but otherwise usable UI of a cyberpunk future, not something I would have made 10 years ago when I discovered all the CSS animation technologies…
View Transitions
This is the bit I’m most pleased with. The site always used view transitions - it was one of the reasons I moved from Gatsby to Astro (Although not the main reason. Moving away from Gatsby to anything was the main reason, but that’s another story). With view transitions now being stable in all browsers, though, I’ve decided to put more into it. The page content slides away along that same 45 degree diagonal and the new page slides in to replace it. Go back and it runs in reverse. If you click through to a post from the blog list, the title and date actually morph from their spot in the list into place on the post itself, and back again when you return. It’s the sort of thing that’s completely unnecessary for a personal blog, which is exactly why I had to have it. I know I mentioned literally one paragraph ago that I wanted to be somewhat tasteful and not abuse new(ish) technologies, but view transitions are way too cool. Plus I learned a lot!
The About Page
The about page got a pretty big overhaul too. My portrait is now sat inside a big circle hooked up to the rest of the page by a set of pipes, and the text flows around it rather than just stopping dead in a column next to it. This is done using CSS Shapes, specifically shape-outside - something I’ve not really had to fiddle with before, as I almost always work with plain boxes. It’s one of those CSS features that’s been around for ages but I’ve never had a good excuse to use. Now I do!
The contact links also got a promotion, from a plain bulleted list to a proper grid with each service’s logo and name as a header, and I’ve added my Bluesky while I was at it.
The Lab
You might have also noticed a new item in the navigation - the Lab. This is a new home for small experiments and toys that run right here in your browser. The first one is a Base16 Theme Picker, born from my eternal curse to never be able to choose a colour scheme. Given I use NixOS with Stylix, the colour theme does propagate into both my KDE/GTK apps, as well as the SystemD terminal, so I figure it’s something I want to get right. Anyway, it shows you two themes side by side on real terminal output and code, eye test style (“One or two? One… or two?”), and narrows hundreds of schemes down to your favourite. You might find it useful too if you use Base16 themes anyway, or utilize Stylix yourself.
More experiments will follow. Probably. Eventually. Maybe I’ll create the next cookie clicker? We’ll see.
Under the Hood
It wasn’t just a restyle, either. Previously, all of the content on this site was pulled from a Strapi CMS hosted in Railway. The problem is that the Strapi install was getting increasingly outdated, and keeping it alive and happy was becoming more effort than it was worth for a blog I update about once every couple of years (Sorry). So it’s gone! Every post and page is now plain Markdown living right alongside the site’s code. No CMS, no database, no server to babysit. If I want to write a post, I write a file. It’s what Astro told me to do all those years ago, and I’m finally listening.
Speaking of Astro, I also upgraded the site from Astro 4 all the way up to Astro 7, and from Tailwind 3 to Tailwind 4. That went…better than anticipated. God I love Astro.
What’s Next?
Honestly? Hopefully more posts. I said that back in 2017 and again in 2020, so I’m not making any promises, but now that writing a post is just opening a text file, I’ve run out of excuses. And if you spot anything broken or looking odd on the new design, let me know on Bluesky. I’d love to hear what you think.
Anyway, that’s enough from me. Go click between some pages and watch the pipes draw themselves in. I’ll be here, admiring my 45 degree angles. Or sleeping. It’s been a rough few…years.