A New Portfolio
By Johannes Wienke
I took the opportunity to use the last few weeks for a complete overhaul of my aging portfolio website. The result is the new site you are currently seeing. It uses modern technology, is mobile-first, and provides even more space to showcase the main content: the photos.
Hugo static site generator
As already for the previous incarnation of my portfolio, my decision was to use a static site generator such that I can avoid any dynamic parts on the server side. This prevents many security issues and also results in fast loading times. So far, I had used Jekyll for this site and Middleman for my tech blog. From a technological point of view I am more in favor of Middleman because of its greater flexibility. However, what both frameworks lack is good support for managing photos, which is one of the main aspects of a photography portfolio. Therefore, I searched for alternatives and finally selected Hugo as the basis for the new portfolio. With page resources photos and other assets can nicely be bundled with the page they belong to and Hugo’s image processing features make it really easy to crop or resize images automatically.
When starting this project I had the hope that I could speed up the process by building onto an existing theme. Therefore, I took some (longer) time to browse through the available Hugo themes. However, not many of them were suitable for the kind of site I was envisioning with a portfolio, photo stories, and a blog section. Many visually appealing themes are limited to single page designs, which doesn’t work for this structure. One of the closest candidates was Massively, which is also used by Urs Zihlmann for his portfolio. However, I didn’t like all aspects and also I didn’t want to end up with a completely similar page. Therefore, I finally decided to build something on my own, however, based on the CSS framework Bulma as the means to speed up the process.
Responsiveness and lazy-loading
Bulma is already mobile-first and all Bulma elements easily work on mobile platforms.
However, photos are the main content on this site and I also wanted them to be responsive such that for each device the photos are downloaded in a suitable resolution.
This especially avoids excessive downloads on mobile devices.
Fortunately, the web has matured enough to finally provide native HTML solutions for this problem and hence every large image on this site (apart from the gallery overview) now uses either
img tags with the
srcset attribute or - depending on the situation and the surrounding containers -
picture elements with multiple sources.
In addition, most images are tagged with
Modern browsers only download these images when they become visible through scrolling (or shortly before).
This again saves bandwidth.
So, what does the new site look like and what were my decisions regarding the layout?
My main idea with the home page (as already with the previous site) was to make my best images the most prominent feature. Therefore, they are presented using a fullscreen carousel.
New on this page is the brief “about me” section and a “recently published” section to put some emphasis on new posts and especially photo stories.
A new element of my site is the photo story section where I display series of related images. I have been using Exposure and Behance for such content. Exposure creates wonderfully styled stories and resonance is quite nice, however, pricing soon gets heavy. Behance, on the other hand, is free but resonance and layout possibilities are quite limited. Also, the situation with other social sharing sites is currently relatively unclear and big players are losing popularity. Therefore, I decided to create my own space for such photo stories and series with a style comparable to Exposure. This is the result:
Stories use text blocks, hero images in full width and justified galleries as the main presentation formats. All images can also be viewed in fullscreen using a lightbox. The same elements are also available to normal blog posts.
I hope that this gives a good platform for my images and serves as reasonable basis for the next few years.