Portfolio Site

For my first blog post I thought it would be good to discuss the site itself and what technologies I used to build it.

The portfolio design itself was actually from a challenge on Frontend Mentor, where you can get Figma files and a project brief.

My repository for the site is publicly available on GitHub if you want to check out the code!

Wagtail CMS

The main site is built using Wagtail CMS. Wagtail is a library that extends the underlying Django Python web framework and gives extra functionality such as managing content pages, publishing states and a moderation workflow, all with an intuitive admin interface.

Since it is ultimately just a Django library that offers some new models and only controls the URL namespace you configure, it can either control the entire site (as with this portfolio), or just a specific part (such as a blog area, documentation etc).

Tailwind CSS

For styling the site, I used Tailwind. Since I also build with React and NextJS, I have found that Tailwind is a great option for me as I can use it across different types of applications and the more granular control means you don't get the uniform 'Bootstrap' look you can sometimes get across projects using a more opinionated styling library.

The idea behind Tailwind is providing utility classes that you can then inline directly into your HTML. There are escape hatches if you need something more custom, but as a general rule the CSS should be with your markup. During the Tailwind build, any unused classes from the library are purged and so you end up with an optimised, minified build and your CSS is nice and tightly scoped to where it is written.

I have found the cleanest way to use Tailwind with Django is to not bother with any of the third party libraries and just download the Tailwind binary directly and operate it via a couple of shell scripts. The django-browser-reload package is also useful when using this setup.

Alpine

Alpine is a small JavaScript library that gives you access to a few attributes to make your site interactive. It can be thought of as a more modern, smaller jQuery.

As with Tailwind, Alpine binds to your site via so called attributes that you add to your markup. I again am quite comfortable with this as it's essentially the same pattern as React where you don't really have the traditional separation of concerns regarding HTML, CS and scripting. On a more complex setup with large amounts of custom JavaScript, scripts in separate files reaching into the DOM via classes and ids may work better, but for adding some interactivity to a server rendered site like Django, I find Alpine (and HTMX) work well.

Nginx

As mentioned, Wagtail is essentially an extension of Django. Django is what is known as an application server.

To be more performant in production, it is usually run behind a web server (via an intermediate WSGI/HTTP interface such as Gunicorn).

Docker

Docker is a containerisation platform.