This website is built off of three main libraries. 11ty, AlpineJS, and TailwindCSS
11ty
11ty is a static site generator that takes in files with numerous formats and can then use templating to return a fully formatted HTML page. In this website I make use of .njk for templates and complex pages, and then use .md files for simpler posts (like this one!)
AlpineJS
AlpineJS is a really nice light-weight JavaScript framework. Making simple animations, buttons, and actions is quite simple and can add a really nice touch to a website. One of the main elements I use with AlpineJS is the navigation bar on top. AlpineJS makes it exceedingly simple to have it fade out when a certain scroll threshold is met.
TailwindCSS
This is the lifeblood of this entire project! I am quite bad at CSS and find that styling with Tailwind is really intuitive. If anything ever needs padding I can just slap px-5 to the element. Rounded corners, gradients, flex, and so much more becomes extremely easy.
Inspiration
To build this website I referenced a few other websites that have absolutely gorgeous designs.
markng.com
This was one of the first portfolio websites that I found. I took inspiration from the large banner on top as well as easily digestible sections below. It is a really well designed and worth looking at.
alexandersandberg.com
I found this website by looking through public 11ty sites. This website has an extremely elegant and minimal design. When starting with 11ty I was able to reference this site to avoid some pitfalls and implement some features. The website is licensed under MIT. It also makes use of quite a few nunjucks features.
Wordcount
To create word count on posts like these, I used Bryce Wray's method.