Web development in 2016. Recreating my personal website.

I once developed a lot of websites. Having switched mostly to backend now, my personal website at http://markusthoemmes.de got stale and had no content on it at all. So I figured, a 404 Not Found error might not be too appealing when entering that domain, so I wanted to put together at least a simple landing page stating the most important facts with links to social profiles.

The “design” of the website. Cheesy tagline included!

Eye-candy! Some comment on the design.

I won’t go into too much detail here, as there are a lot of tutorials out there to better explain how CSS Blend Modes or CSS Gradients work. The design is mainly built around those two effects. As you can see in the image above, the background consists of a picture of mountains (taken by myself while hiking across the alps) overlaid with an opaque blue-to-green gradient.

The content is mainly “white”, blended into the background with blend mode overlay making for a nice consistent feeling with regards to the colors of the design.

The social buttons are based on the awesome Socicon icon font. That makes for crisp, scalable icons even on retina displays. They appear to be cut out of the circles they are living on. That’s actually an illusion. They are set in 50% opaque black on 100% white circles. Applying the blend mode then makes them seem like they are cut out. Awesome!

Being a developer, I found it very important to add Github and StackOverflow profiles more prominently than LinkedIn and Xing. I feel like there’s much more valuable information about me on those than on “professional networks”.

Telling the machines who I am, what I do, how I look

Interestingly enough, the markup needed to make the website machine readable is just about as much as the markup needed for the content on the website itself.

First, I added some markup to the content, making it machine-readable for indexers based on structured data. The markup you see below is using the Person schema from schema.org and it is essentially telling parsers that

  1. I’m a person (duh.)
  2. My name is “Markus Thömmes”
  3. My job title is “Software Engineer”
  4. I look like this (URL to a picture)
<div class=”info” itemscope itemtype=”http://schema.org/Person">
<div class=”avatar”>
<img itemprop=”image” alt=”photo of Markus Thömmes” src=”img/avatar.jpg”>
<h1 itemprop=”name”>Markus Thömmes</h1>
<ul itemprop=”description” class=”subtitle”>
<li itemprop=”jobTitle”>Software Engineer</li>
<li>Scala enthusiast</li>
<li>Cloud-native citizen</li>

Next, I added specific markup for OpenGraph and Twitter Cards, which are formats used by Facebook and Twitter, but also by tools like Slack to pull additional metadata when pasting http://markusthoemmes.de into a comment, tweet, chat, whatever.

How additional markup makes Slack chats more informative

The markup added to cover all of those is content wise a copy of what you’ve already seen plus some special markup for either OpenGraph or Twitter Cards. Interestingly, OpenGraph relies on the property attribute, while Twitter Cards rely on the name attribute on the meta tag, which makes it possible to use them on the same tag. Less duplication of content. Sweet!

<meta name=”twitter:card” content=”summary”>
<meta name=”twitter:site” content=”@markusthoemmes”>
<meta property=”og:type” content=”profile”>
<meta name=”twitter:title” property=”og:title” content=”Markus Thömmes • Software Engineer”>
<meta name=”twitter:description” property=”og:description” content=”Cloud-native by default, with a loving relationship to beautiful code, especially if written in Scala!”>
<meta property=”og:url” content=”http://markusthoemmes.de">
<meta name=”twitter:image” property=”og:image” content=”http://markusthoemmes.de/img/avatar.jpg">

Last but not least, I added, of course, the usual suspects: title, description, keywords.

Putting it out to the public

Being done with all of this, the website needed to be put out to the public. Not having a nice FTP client on my Mac and being mostly a backend engineer now I thought: “I just want to git push and be done with it”. Github to the rescue.

Github makes it possible to host a website out of your repository. That feature is called Github Pages. They have some fancy support for Jekyll generated pages and so on, but for this simple use-case, I just went with a plain old index.html. All I needed to do is to push my code to a Github repository and activate the Pages feature for the master branch. That’s it. And everything under source-control. I like! I even included a pre-commit-hook to auto-optimize the images on the website when I add some through git. Nice basic automated build process.

With that in place, my website is then reachable under http://markusthoemmes.github.io/markusthoemmes.de. Not so nice for a business card isn’t it?

Turns out Github Pages also supports a custom URL. Just enter the domain you own (markusthoemmes.de in my case) into the Github Pages settings. This will effectively create a CNAME file in your repository, containing that domain. Then follow the instructions to setup the DNS settings for your domain at your domain provider.

Boom! A website hosted on github.com, reachable under http://markusthoemmes.de.

Wrapping it up

That wasn’t too hard, was it? I had lots of fun trying out the newest stuff in CSS. Back when I was still developing websites you could barely use all of this and the workflow was always: Photoshop first, slice it up, mark it up with lots of images. In this website now, just the real pictures are done as images. I didn’t even fire up an image editing tool (I use the amazing Affinity Photo by the way) to design anything.

Figuring out the OpenGraph and Twitter Cards meta tags was a bit tedious, but it feels nice to have a fully machine-readable representation of myself which even integrates nicely with social media platforms.

Hosting it on Github is just the icing on the cake. It fits my usual workflow the most and just makes sense to have everything under source-control. Great job Github!