Building this site from scratch

The Back Story (Every good story needs one)

When I first thought about building this site, I have already decided to host it on Github Pages and use Jekyll for the site generation. The reason is very practical: because I need to spend as little as possible to preserve my fund during my sabbatical. So the only thing I spend on this site is buying the domain, as I want it to look more “professional”.

Following that line of thought, I should have also used a professional looking theme built by other talented people. There are over 300 themes available on Jekyll Themes, and they definitely look modern and professional. More importantly, they are mostly free and open source, which is good for my wallet. I was almost going to install one of them for my site, and then I hesitated.

Let’s backtrack a little here. Professionally, I’ve always been more comfortable with backend development, as I’m more of a logical person than a creative person. Backend systems deal a lot with logic and not aesthetics, and I think I’m pretty good at it. On the other hand, it takes a bit of creativity to build beautiful and user-friendly UI, and that’s where my lack of it has been holding me back from diving deep into frontend development.

So for my past projects, where a UI was needed, I’ve always used existing frameworks like Vuetify, even the framework’s tagline says that “[it’s] a no design skills required UI Library”. Sounds like it’s made for me, doesn’t it? If I wasn’t building something that other people would use, I would just use Plain O’ HTML, CSS-less (as in, the lack of, not Leaner Style Sheets). Trust me, I did that in my past job, and it turned out that other people indeed had to use it, and I became known to be the “creator of that ugly tool”. As you can see, I never truly grabbed the opportunity to learn about how frontend development works.

The Turning Point

Now, why did I hesitate when I was going to install a ready-made theme? I was looking through the source, and saw a lot of files and folders that don’t seem to have come from the base Jekyll generator. Normally I would ignore that and just copy everything and start working on the main objective, which is to write articles and put up my projects portfolio. But this time, I wanted to start with as few dependencies as possible, because I will be maintaining the site for quite some time, and fewer issues with dependencies down the road will be desirable.

Furthermore, one of my goals during my sabbatical is to try something new, because I just didn’t have the mindspace to do so when I had a 9-5 job (this may be another story I want to tell some day about how it was hard to have side projects while having a full-time job, despite the popular belief that you can side-hustle). One of the first things I can learn is frontend development, and building this site is the perfect opportunity for me to kickstart the process.

So, I ditched the plan of using an existing theme, and started building from scratch. Every layout and every CSS class was created from the ground up, with a lot of wonderful resources online to guide me along the way (this will definitely be a story I will tell some day about what resources I used to help me build this site). I had a vision at the beginning of how the site would eventually look like, and through a lot of trials and errors, I put in the code to make it a reality. As a bonus, I also created my site logo and banner images from scratch, because I couldn’t afford to hire a professional graphics designer for it.

Happy Ending?

I’m fully aware that the end result of my first attempt is not great, I even dare say that my HTML/CSS conventions and UI/UX are mostly non-conforming for the industry, and it will definitely not get me a job as a frontend engineer or designer. But I believe that the experience of having learnt and built something in an unfamiliar domain will definitely be beneficial some day when I need to work on more challenging projects, I wouldn’t want that opportunity slip by just because I haven’t been ready for it.

More importantly, I think that the process of building something from scratch is very satisfying and fulfilling. When I see my site slowly taking shape, even though it doesn’t look 100% like what I have imagined, I’m still proud of the result that I’ve put my 100% effort into building. I’m like the new parent who will forever think that my child is the cutest and prettiest, even if she is objectively not so.

Moral Of The Story (Let’s not waste the chance of learning from it)

This will not be the end of my frontend development journey, I will continue to improve this site as I learn more about the domain. I hope that as much as this has been inspiring for myself, it will also be so for those of you who have been hesitating whether to cross-over to the other side (to backend development if you have been a frontend engineer, vice versa), or even to try something entirely unrelated to your normal profession.

It’s a small step to take, but the journey will be fulfilling if you continue walking (or your could cycle, or drive a car). Also, don’t forget to have your cup of coffee while at it, it’s going to be quite a long journey, and you wouldn’t want to nod off halfway through it and miss all the beautiful scenery!