Site and Blog Devlog

Published on 13 August 2023 • 5 minutes read

This blog was born two month ago, and since the first revision a lot- no, that’s not enough, hella lot of stuff has been changed, tweaked and redone from scratch, so here I will list them and my plans for the future of this blog.

«The Index»

The Index is not only homepage, it’s also a showcase, info and screensaver pages, they all live in the same pages repository, while blog is a completely separate thing with its own repository.

One important change have happened to the Index, now all its pages use the same base, style.css, and only page-specific tweaks are specified in page CSS, e.g showcase page style has @import url("style.css"); in the beginning instead of exact copy of index.css, not only this makes the file size smaller, but also makes the tweaking process a breeze, since stuff can be changed in one place and be applied to every page.

styles import — VSCodium screenshot showing off import of base style and some «body» styles

Home

Homepage is a very important page, this page links to all other pages, it gives some basic info about me and some contact links. It didn’t change a lot but there are some work been done.

Proper dark mode have been implemented (well, it were already there but I replaced it with filter hack,more on it in blog section. Now it’s enabled back and all the custom stuff have been fixed to support it).
Background color are a bit different (taken from Libadwaita).
Added shadows to all cards to give them some depth.

blog card — Blog link card with newely added shadow

Added hover effect for cards that act like a button (blog and showcase).

Blog link card being hovered with cursor

Active state for cards (when you click/press on card) have been removed since it looked weird

And more, these are that I could remember.

Showcase

Showcase have been updated to include more icons, info overlay closing animation have been fixed (previously it just disappeared without any animation) and assets were optimized.

Demo of opening/closing info overlay

Info

Info page were completely redesigned, inspired by the design of Felipe
Kinoshita’s site. It is more similar to the blog in terms of typography, has nice animated stripes background and a lot of info about me. Compared to the previous version it has way less links - only ones that I actually use.

Me scrolling through the whole page

Screensaver

Screensaver is a brand-new page, the name is self-explanatory, it’s just a pretty screensaver with colorful circles floating around, it is made around this codepen by Álvaro, from interesting it has «Enter Fulllscreen» button.

«The Blog»

The blog have seen the most of the changes, it all were flipped upside down to be prettier, and as fast as before.

Proper dark mode have been implemented from scratch, previously CSS invert filter with hue rotation were used, it worked but had too much issues: images became unsaturated, emojis creepy, shadows glowing and etc.
Navigation bar have been added, it has pretty glassy look and shadow. Inspired by the navigation bar of Micah Ilbery’s site. I really like how it looks :3

blurred nav — Navigation bar with content behind it being blurred

Added ASCII style, now instead of boring code block it uses pretty gradient fill and has this neon glow on hover.

ascii art — Regular state, it's filled with gradient going from bottom to top, with the bottom being black and top being transparent

ascii art hover — Hovered state, it becomes fully black and gains purple-blue glow

Images now scale up on hover and have round corners.

Image zooming in on hover, with it loosing rounded corners

Code blocks now have some filters applied in dark mode for better visibility, the code blocks themselves are now more round and have shadows.

Some colors have been changed, all in all should be more pleasant to the eye.
Everything now respects global variables, so e.g you can change accent color, roundness, shadows and maximum content width without going through the whole 1200+ LOC CSS, this is made not only to keep myself sane but also for you to make it easier to build upon ;)

Me changing 2 color variables and site respecting this

The structure have been changed, now uses recommended Jekyll structure for posts.
Posts now have tags, and tags have its own page.
Posts now have its own page.
Posts list on index page now generates automatically on build, this allowed to display tags and publication date.

posts list — Automatically generated list of posts on index page

Table of contents are now generated on build, now I don’t have to create it for every page manually.

copyright hover — You guess it, last built date is displayed on hover

Atom Feed is here!

newsblur feed — Screenshot of NewsBlur with this blog

Added Johnvertisements.
Probably most exiting addition, Mastodon (and any other ActivityPub/Fediverse account) powered comments! you can right now scroll down and comment! all thanks goes to Cassidy James for Mastodon-powered Blog Comments ❤️

mastodon comment — Mastodon post about my migration to Codeberg blog post being used as a comment

One More Thing™

I have a new site at Neocities! it will not replace this one, it’s just a silly playground that has this old look. You know… Geocities and stuff.

It’s empty ATM, but it has AD-HD button!

Visit it here

neocities website — The Neocities website!

The Future

We’ll see, I plan to publish more posts, at least I have an idea for the next one, I’m thinking about making the whole blog a Jekyll template (Duck Template, DuckQuill), but this will mean that I’ll need to maintain one more site basically, not sure really, I could sync it with this blog once a month so it doesn’t annoy much, IDK, will see.

Conclusion

Phew, that’s a lot, 2 months of work! truly happy how it all comes up, hope you too, this is most long-lived site thingy yet, I have learned a lot about CSS and HTML, and I really like doing this!