I've always wanted to have a small piece of the internet for myself. The reason for that is so I can share knowledge and other things with people and also kinda document my journey.

I'm currently writing this at 1am after finishing the first version of this.

My goal was:

• Fast page loads
• Easily navigable pages
• Simple but visually pleasing

How do I achieve fast page loads?

Well, nothing loads faster than static HTML.

So I started searching for a way to make a static blog generator. Most people recommended Hugo and Jekyll. I nearly installed Hugo, but something told me to keep searching, and after a bit, I came across Eleventy. I liked it at first glance and decided to try it.

Eleventy was super easy to get into and had the features that I needed without too much hassle.

What about CSS?

I didn't really have time to write my own custom CSS.

Suddenly, a post from reddit I saw maybe a month ago came to my mind. Someone on r/SideProjects posted that they made a small lightweight CSS boilerplate, and it caught my eye immediately. It was simple but visually appealing. I didn't save the post but later I found it.

It was this one.

Too simple...

After integrating the CSS boilerplate, the site looked clean and functional, but I felt it needed a bit more personality to stand out. The pages looked too simple.

To avoid that, I decided to add art pieces of my favourite artist Hasui Kawase, to break the simplicity.

They did a great job and I was satisfied.

A few custom things..

I didn't want anyone reading my articles to become blind, so I opted for implementing dark/light mode switch.

That meant that I needed to customize the CSS a bit, and for simplicity, I did it with just adding dark-mode class to the body tag and a button that toggles them. I also saved the preferred mode to local storage so if anyone comes back or refreshes, the mode would be the same.

Here is the small script that achieves that:

const modeToggleBtn = document.getElementById('modeToggle');
const savedMode = localStorage.getItem('darkMode');

if (savedMode === 'enabled') {
    document.body.classList.add('dark-mode');
    modeToggleBtn.textContent = 'light'; 
} else {
    modeToggleBtn.textContent = 'dark'; 
}

modeToggleBtn.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');

    if (document.body.classList.contains('dark-mode')) {
        localStorage.setItem('darkMode', 'enabled');
        modeToggleBtn.textContent = 'light'; 
    } else {
        localStorage.setItem('darkMode', 'disabled');
        modeToggleBtn.textContent = 'dark'; 
    }
});

The second thing I did was fix the date display for the posts. I wrote a tutorial about it and you can check it out here.

Conclusion

It was a really interesting process and I'm happy with how it turned out at the end.

Of course, I will try to improve it as much as I can in the future.