Confession time: deciding on the aesthethics took more time than it should have, and by the time I was done I was already thinking of a layout change.
I also have to admit YAML indentation took a bit to get warmed up to. There were quite a few error messages when trying to log in to NetlifyCMS, all thanks to ill-placed indents or bad nesting arrangements in the config.yml file.
What to include?
A portfolio website should include, well, a collection of your work. A contact page would also be nice, as many can't be bothered to check the website footer where social links are usually placed.
It was by checking the websites of other software developers I realized many of them had a blog section. Dev.to or Hashnode are convenient blogging platforms which double down as social networks, but there is value in keeping your writing somewhere under your control - all that talk about "land you own" versus "rented land" - so a blog joined the to-do list.
Decisions, decisions
After coming to terms with the fact I'd have a blog of my own after so many Wordpress and Blogger failed attempts, I looked for a static website generator that would be easy to deploy to Netlify and allowed HTML templates. Jamstack.org let me browse a lot of interesting options, but then I settled on 11ty because it also works with all sorts of other template literals. Adoption isn't as widespread as you'd see with Gatsby or Hugo site generators, but there's an interesting community.
Jamstack.org also has a list of Content Management Systems, and this time around it was easy to pick one. NetlifyCMS is GIT-based and deploys to Netlify, so the search was pretty quick.
Search engine and Image optimization
Generation of SEO was an interesting exercise. A meta-info html partial is included in the base html layout and is supplied with the page information, such as page title, to generate appropriate meta properties.
This is also useful when applied to client websites. They would only need to supply a "post summary" when in the CMS to have a fitting meta description generated, boosting their SEO without having to be savvy about it.
If they upload a featured image, a responsive <picture> is also created which allows for loading images in different sizes and file extensions, depending on device capabilities, with a fallback <img> tag. Lessened image weight increases the page's overall performance - specially on smaller screens - and therefore could also help lowering bounce rates.
The look
Ryan Filler has a great series on Dark Mode which really helped me not only with implementing a dark mode on this website but also choosing colors. While I did use Coolors to generate palettes (and I could spend hours just having fun in that website), I used Ryan's color contrast checker tool to make sure my choices passed the WCAG color contrast ratio.
I eventually talked to my mother about how hard it was to pick the right colors, and she mentioned how she wished more people worried about this issue. As she gets older and her vision gradually declines, a good contrast ratio does wonders for her ability to read certain websites. Her comment meant that, yes, while I had to give up on a lilac or winter-early-morning-sky-blue here and there, I was on the right track.
There are some things I'm looking to change when it comes to the colors, but I'm overall pretty happy with being able to balance the day and night looks.
What's next
I'm thinking of adding more possibilities of remote content management. As of now, posts (whether blog or TIL) can be added through NetlifyCMS, but testing the option of adding portfolio items turned out successful and it's something I want to fully implement.
Also on the to-do list is a better automatic integration between portfolio items hero images and their display on the home page.
Another thing I'm looking to change is changing the list of posts to cards rather than links. However, I don't feel that look would quite work with the website as it is so this will have to wait until a layout overhaul - which will probably happen soon.
Credits
Header photo by Anas Alshanti on Unsplash
Dark Mode Series by Ryan Filler
11ty base blog by Zach Leatherman
11ty Rocks! by Stephanie Eckles