The truth is - mobile screen is too small to display the background and give the woah-effect. It is gone now. This also allows me to drastically reduce multiplier for background generation. It needs 40% less characters now. Loads faster. This is peak of software dev. Going to remove time.sleep(1) next year, saving it for my blog about webpage optimization. Stay tuned. Have to stay ahead of my competition. Could have gone with static page generated by Hugo of Jekyll. Or went with WordpPress 7kb theme I saw on HackerNews. But I did not, this is a static page and I am currently writing the update in a <\p\> tag. (I am wasting approximately 30 seconds of my life by not writing to .md file and using a static generator to build the page)((Joke)).


This website is going through its emo phase, do not be surprised if it will look completely different next time you visit it. Good joke. Nobody visits this page, yet. But it serves me well for learning purposes. The first iteration was a completely hardcoded layout with absolute positions which were laid out with margins counting from the top... footer was 500px margin-top, because div before footer was 300px from top. Not the best idea.

Last month I went through a ton of my bookmarks and discovered tens of css-grid tutorials I hid in my bookmarks a year ago. Perfect opportunity to learn in this weird time, right? Few days went by and the whole page was migrated to a not-very-perfect css-grid. But it works way better. Easier to make it responsive too!

Today I have decided to remove the "feature" of endless expansion, which resulted in a very bloated look on fullscreen. This is important to those 3 people browsing the web in fullscreen, instead of having 10 different windows open. Also made the background stretch to cover the whole page, looks a bit cooler imo. Do you know how that background is generated, or do you want to sleep well?

Do not read further, you have been warned.

Background generation is done using JavaScript. Each time a page is loaded or resized, a function is called that takes your browser's width and height then divides it by amount of content height in pixels. Then the result is multiplied by a multiplier, a guess of mine, based on "research" which consisted of me resizing browser on various devices until the multiplier generated enough characters to fill the screen on all devices. A full-width window might need up to 30.000 characters to fill it all up. That's a lot. But JavaScript is pretty fast, so you will probably see no impact on performance. Computers are pretty fast, aren't they?

Note: If your fan starts spinning, that's just JavaScript, not a crypto miner, promise.

New look with limited content width and full body background:

new look

Old look with freely expanding content and limited background:

old look