Muhammad Taufik Tirtosudiro

Overview

They say that these days, having an impressive portfolio website is essential for a software engineer. Especially if you are trying to be noticed. Lately it dawned on me that all this time working as an engineer, I never had one. As at the time I was opening myself to new career opportunities, it was the perfect opportunity to create one.

The Challenge

I had several requirements in mind when I set out to create the website:

• The infrastructure must be able to be deployed quickly

  Since at the time I was working on several projects, I didn’t want to spend too much time working on the infrastructure side of the website. The basic site needs to be up and running as fast as possible. Ideally the process should be as close to deploying a Wordpress website as possible.

• The website should use as little resource as possible

  I really wanted to take advantage of some low-cost cloud services at the time. If I need to fire up a server for this, I wanted it to be as cheap as possible. Since I have been using Angular to create web apps at the time, I was really spoiled by the fact that Angular compiles to a static website which in turn can be deployed for free on services like Firebase or Netlify.

• The engine must support some form of content management

  Honestly, creating content directly in HTML would not be the best use of my time. Also, at the time I have been using Joplin app as my notebook app and I really, really liked writing in Markdown format. I wanted the experience to be as close as writing a note in the app.

The Approach and Solution

Initially I looked at some of the easiest ways of creating a portfolio website, to use a service like Wordpress, Squarespace or the like. However, after a quick research I found that the experience seems to be a bit limiting, or at least the knowledge that needs to be acquired for building a site to my liking would not transfer well to other projects.

I considered briefly creating a website from scratch using Angular or Vue, but somehow I felt like that would translate to doing too much work, and I wanted to find a more suitable way for the task. I kept thinking that the process should be as easy as converting a markdown document to a static website, and that was when I found Hugo framework.

Hugo is a static website generator, which takes content files in supported formats such as markdown, mixed with layout & templating support using HTML, CSS & Go Template to generate a static website. For the purpose, it’s perfect. It’s like using Vue or Angular without the coding part.

The development on the engine side of things took less than a week. I purchased the very nice DevCard Bootstrap 4 template, created a theme based on it and that’s it. All that’s left was to actually add the content.

The Results

The result is the website that you are looking at right now. The website is served using Firebase Hosting.

One of the main feature of the engine is that the resume and portfolio sections are generated dynamically from the content pages. This saves a lot of work when creating new content.

Hugo’s front matter also allows embedding configuration data on each content, so for example I can omit some of my projects from my portfolio if it gets too long, or I can also put some scoring on the contents to determine which projects to display on the home page.

All in all I am very happy with how the website ends up.