Published September 2020
This website is a project I've been wanting to do for a long while but kept postponing. I'm happy I finally dug up the courage to do it...
Remember those woolen socks you got from your grandma for Christmas? They're scratchy, not machine-washable and do not look at all like something a trendy kid like you would normally be wearing. But they're hand made, and made with love, made with love for you! They've got emotional value and they are a material representation of what efforts an old lady, hardly able to cook her own meal, is willing to still do to show you her appreciation. This is a bit how I feel about this website... It's the one time I did it all by hand, all the HTML, all the CSS and everything else that you see, read and interact with (except for Bootstrap, you can't live without Bootstrap). It's not what an efficient developer would do (he/she would take a template or pay for a simple hosted web creator), this is made by hand and made with love, for you to enjoy!
I am generally much more familiar with traditional software engineering or backend coding compared to all that is frontend. Of course you're always exposed to some frontend work here and there, but usually there are frameworks that abstract most of it for you, at the cost of ending up with a somewhat more default look and feel. For this website I wanted to "get my hands dirty" and do all the HTML and CSS myself. So there aren't a lot of tools involved in building what you see here. Most of it is static content, so HTML and CSS only, the parts which require the work of a server (basically the routing and anything that is interactive) are based on Node.js and Express which is a node module.
Resources and tutorials
Bootstrap is an amazing library for everyone wanting to build a website. The amount and quality of things available, the content and quality of the documentation as well as the intuitive design-for-responsiveness approach make it an indispensable tool.
Responsive Bootstrap Website Start To Finish with Bootstrap by Drew Ryan is a great tutorial video, taking you through how bootstrap works, understanding the components, the grid system and the used classes also diving into some CSS to style it all as desired.
I used a lot of flipping card elements on my site, I feel it's a great way to mix eye-catching images with content. A simple example I was using for flipping cards on my side is found on Nicolas Kadis' Blog.
Another effect which nowadays is pretty standard on modern webpages is a parallax scrolling effect, I found this blog post by Ibrahima Ndaw to be a helpful example.
Finally on my welcome page I present my interactive CV in a timeline format, W3Schools as a nice example which helped me get that done.
Design examples
Here obviously there are as many examples as there are websites out in the internet.
I mostly got inspiration from the following 3 sites: