Site and Blog Devlog

Table of Contents

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 home page, 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

Home page 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.

blog card

Blog link card with newely added shadow

Blog link card being hovered with cursor

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.

screensaver

Pretty colorful circles blending with each other

«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.

blurred nav

Navigation bar with content behind it being blurred

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

Image zooming in on hover, with it loosing rounded corners

code block

Code block in light mode

code block dark

...And in dark

Me changing 2 color variables and site respecting this

posts list

Automatically generated list of posts on index page

copyright hover

You guess it, last built date is displayed on hover

newsblur feed

Screenshot of NewsBlur with this blog

mastodon comment

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

One More Thing™

Drum Roll 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!

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