How I made this website

This website was made as a project for some web development training in early 2021. It's inspired by the simple, cleanly fundamental website belonging to ouai architects, a Toronto art and architecture studio.

Full disclosure, this site clearly has some style quirks (and they have been tricky to troubleshoot). Behind the scenes, we have a cascading series of interlinked technologies and programming languages at play, and I haven't quite pulled the strings needed to make everything snap into place. But I'm proud of the effort; here's how it went.

Setting it up

I started with an old-fashioned set up on GitHub and Visual Studio code, and installed the static site generating system called eleventy, or 11ty. Eleventy utilizes independent template, on top of which you can rope in the power of JAMstack flows with eleventy's nimble hosting of tools like HTML, Markdown, Liquid, Nunjucks, Handlebars, Mustache, and JavaScript. I relied heavily on Nunjucks to create page templates using Markdown, HTML, and that are styled using CSS. I didn't quite make it to implementing SASS, however I do see advantages for using it in more complex websites.

This site was a challenge, despite its deceivingly simple appearance! As someone who had previous, only intermediate experience with HTML and CSS, I unearthed completely new wonders when it came time to embed page templates and configure the JavaScript required for eleventy to process my code together, and furthermore, hook in my headless CMS and then remote site builder, Netlify.

Hosting the machine

Instead of using a more traditional, all-in-one CMS like Wordpress or a Weebly application, I opted for a headless CMS called Ghost, which splits where content is stored from where it is seen. This ensures easy development of things like blog posts. Thanks to the webhooks I implemented into my eleventy scripts, my site "pulls" the content I create on Ghost's easy, clean content creation platform (where my blog lives), and it propagates into the styles I specify in the code.
Finally, I created a personal server using Digital Ocean, a cloud computing service, to kickstart the machine, and we have the relatively straightforward site you're browsing now!

This website hosts the resume content I'd like to share (the stuff that won't fit on one page), as well as a little bit about me and my work ethic, and some writing samples from months and years past.

Up next, I will eventually style the blog's appearance and learn to create a more complex, visually appealing body for the resume. I may even simplify it more for easy upkeep, or use it as a sandbox if I reignite the web development curiosity that seems to come back every few years.

Thanks for visiting in the meantime!