I've been working hard on it for quite some time now, and today, finally, is the day it's being released! In this blog post, I will go into detail on its design philosophy, how I made it, what it's for, who it's for, and overall the reason I decided to embark on the world of personal websites.
On a technical level, this website aims to be as lightweight as it can and, when possible, JS-free. All of this without losing its "Bells and Whistles," to which I'll get to in more detail later. As of writing this article, it has 0 bytes of JavaScript.
When ideating and developing this website, without a doubt, looks and accessibility were the top priority. Although there are many things I would like to improve and fix (more specifically regarding screen readers), I'm very happy with the result, especially its contrast and adaptability.
You may be wondering: but why? Well, it has always bothered me how good-looking websites are never accessible, and how accessible websites are never good-looking. I am trying to avoid falling in this "trap." As I said once:
Accessibility on the web ensures that everyone can participate equally, fostering inclusion and diversity in the digital world.
One thing I am especially happy about regarding this website, is how it has aided me in learning various technologies, such as Lume, Deno, and SCSS. Thanks to these new tools, the development process was fairly smooth and painless.
Big thanks to Amin for recommending some of these technologies to me, and for writing the amazing readable.css which this site is based upon. He really added the readable into its design.
To reduce inconsistencies caused by browser stylesheets, this site also makes use of a slightly tweaked version of normalize.css CSS library. I'm simply amazed by how much work has been put into this, and how effective it is at its job.
When I said accessibility was the top priority, I also meant it in the sense that this site can be rendered by almost any computer. The HTML and CSS are minified in such a way that the actual content is rather minimal! The resulting HTML is 2.0Kb, and the CSS 6.5Kb. The latter can be optimized, but is a good start! Especially considering modern website components can scale to megabytes...
Bells and Whistles: Extra features added for show rather than function; fancy additions or features.
You might have noticed this website has a lot of so called "Bells and Whistles". For example: its theme, the home menu's hover animation, the cool animated Classic Mac OS faces seen in articles, the three-dimensional 404 error page, among others–it's a deliberate choice that may appear contrary to the "less is more" philosophy I seem to follow. However, there's a rationale behind it.
I'm an art freak. I love art. I love artistic expression through all kinds of mediums. And I love making art. Whenever I make something I always want to give it personality, or at least some kind of face you can recognize. One aspect that has always troubled me about the minimal side of the internet is that websites tend to be rather neutral and devoid of personality. These Bells and Whistles are my means of setting this site apart from the rest. I've given it a persona (based on my iMac G3), I made it responsive and more animated, and breathed more life into it!
So in the end, I would say these Bells and Whistles do offer a function, they set my site apart! And I truly appreciate that. And hey, if you don't like it, use an RSS reader!
For everyone! I made this website as a sort of central base to my online identity. If you are a friend of mine, this is for you! If you are a coworker, this is for you! If you know me, Ivan, this is for you! This site is meant to be a means of contact and sharing of my knowledge.
Not much. And that's a good thing! From now on, I will focus on writing blog posts and improving what's already here. I will also make sure to add more of the aforementioned Bells and Whistles.
I hope you enjoyed this introduction post. Remember to stay hydrated! 🤗