My old site, made with WordPress. It didn't look great, but I learned a lot from building it and the site as it is now is what grew out of it!
This was the first site I had ever built myself. It was a great achievement for me a year or so ago, but it's showing its age, and so I decided it needed a facelift.
The worst part of building with WordPress was the complexity of the themes. I like to make things responsive and mess with things to make it just right, and WordPress makes this easy through access to the code of themes and stylesheets that are separated out, but the complexity of it all meant that changing a few lines of CSS would turn into an multiple hour ordeal of trying to find every place in the theme where that CSS was changed with !important to figure out what was overwriting my code. It was tiring.
So that's where Eleventy comes in! I was ready to take the leap into something more hand-written, and Eleventy struck my eye as something that would be easier to work with than pure HTML and CSS but just as easy to build out and tweak.
So far, my impressions of Eleventy was correct! It has been really easy to build my site from scratch using Markdown and Nunjucks templates, the processor compiling it all into html. I have a lot of custom html added in to the Markdown which helps with having special sections, like the image above, that I don't want in every page of this type. I'm using the templates to take YAML embedded at the top of the Markdown and render that into galleries on the project pages like at the bottom of the page here.
Another perk of writing things manually is that the site is now theme-aware using @media tags! If on a system with dark mode enabled, or a system that doesn't pass a theme mode to the browser, it uses a dark color scheme. If using the site on a system with a light colour scheme, then it uses a light theme!
Also, this site has been amazing because wow, making a site based on flexboxes has been such a mess but also quite rewarding.
It's been fun building, so here's to a new age of this website!