New look!

My home page has been restructured a redesigned. One interesting new feature is a blurred version of the teaser image as background.

What is new?

  • Materializecss: The page does not use bootstrap and darkstrap anymore, but is now built upon materializecss with a custom dark theme.
  • Blurred teaser image as page background: The page’s header now features a blurred version of the teaser image. Since CSS3 blurring is quite expensive concerning performance, the blurred image is generated using an automated preprocessing step.
  • Automatic table of contents: I added a small Javascript snippet which will add an entry to the table of contents on the right for each <h1> and <h2>tag.
$("h1,h2").each(function(i) {
  var id = $(this).attr("id");
  var html = "<li><a href='#" + id + "'>" + $(this).html() + "</a></li>";
  • Restructured site: The landing site of the home page is now the blog. Google analytics has shown that many users were confused by the accordion on the landing page.
  • Improved post layout: The layout of the post page has been refined. Here is a before-after comparison.

How does the blurring work?

As part of the build process, a script creates a small blurred version of all teaser images. It uses image-magick’s convert to create the image with the following command:

convert -geometry 250x -blur 0x5 chameleon.jpg blurred_chameleon.jpg
The original teaser image.
The blurred version.
The original teaser image.
The blurred image.

Using the following style information to the body element will set the blurred image as background for each page.

<body class="{{page.colors}}" 
      style="background-image: url(/img/blurred/{{page.teaser}});">


blog comments powered by Disqus