The first project is the website you currenty are on: cedricduriau.dev.
My goal was to make a website from scratch, using HTML, CSS and JavaScript only, without involving a single third party library. I started researching minimalistic websites sharing the same ideology and discovered TinyProjects, a website owned by a developer named Ben with the purpose to document his tiny projects and their conception.
As you may guess already, the first project Ben started working on was the very site he would host the content on, called TinyWebsite. I liked everything about it, it does exaxctly what's it supposed to do, nothing fancy yet charmingly minimalistic.
With all the pieces of the puzzle present, there was nothing left for me except to get to it, so I did.
If you want full details on how to build your own TinyWebsite, I highly recommend you to read Ben's guide on it. Everything is broken down into simple parts for you to quickly be up and running.
Development wise it's nice and easy, HTML and CSS. You can add some JavaScript to spice things up and as Ben did for example, implement a dark theme toggle.
Deployment wise Google Firebase takes care of it all. Setting it up is fairly straight forward, developing live with the emulator is a joy and deploying is as simple as running one command. Here are the respective commands for starting the emulator and deploying an application.
firebase emulators:start firebase deploy --only hosting
Because of my love for efficiency, I wanted to have a single-point-of-definition approach towards the common parts of HTML across the website.
The navigation bar and footer elements displayed on every page are stored in separate HTML files. These files do not follow the standard HTML structure specifically to allow dynamically inserting them into other pages, regardless of placement.
With these files isolated, the following snippet takes care of the rest. Check out the page's source code for more!
<!-- navigation bar start -->
<div id="nav-placeholder"></div>
<script>
fetch('/elements/nav.html').then(function (response) {
return response.text();
}).then(function (body) {
document.querySelector('#nav-placeholder').innerHTML = body;
});
</script>
<!-- navigation bar end -->
Sometimes, you just have to cut the ropes and start somewhere. I was open to starting from scratch, researching the subject and trying out new ideas. This turned out to be very productive, teaching me a lot in the process and I ended up with something I'm happy with.
Now I can finally focus on the main goal, finishing and documenting the many projects left on my shelf. Check them out here.