diff --git a/articles/about.md b/articles/about.md
new file mode 100644
index 0000000..62a8455
--- /dev/null
+++ b/articles/about.md
@@ -0,0 +1,25 @@
+---
+title: About me
+hidefromhome: true
+type: page
+---
+
+I am Thomas, a software engineer. I love new challenges and learning
+new things. I earned a Master’s Degree in Computer Science graduating from
+the EPFL (Swiss Federal Institute of Technology in Lausanne), with a
+specialization in Software Systems.
+
+When not programming for my job, I like to [design](https://git.inf3.xyz/tschwery/custom-keyboard) and build mechanical keyboards,
+[shooting my bow](https://les-archers-du-bisse.ch/) and
+[cooking](https://recettes.inf3.ch) with my family.
+
+## My job
+
+I have been working as a Software Developer at [SAI-ERP](https://sai-erp.net) since 2011.
+
+I have previously worked as a student assistant at [EPFL](https://ic.epfl.ch).
+
+## Contact me
+
+Find me on [Github](https://github.com/tschwery/) / my private [GitLab instance](https://git.inf3.xyz/explore/projects) / [Linkedin](www.linkedin.com/in/thomas-schwery)  or just say by email at [thomas@inf3.ch](mailto:thomas@inf3.ch).
+
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
new file mode 100644
index 0000000..3ee24e5
--- /dev/null
+++ b/layouts/_default/single.html
@@ -0,0 +1,15 @@
+{{ partial "header.html" . }}
+
+	<main role="main">
+		<article itemscope itemtype="http://schema.org/BlogPosting">
+			<h1 class="entry-title" itemprop="headline">{{ .Title }}</h1>
+			{{ if ne .Type "page"}}
+			<span class="entry-meta"><time itemprop="datePublished" datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 02, 2006" }}</time></span>{{ .Date }}
+			{{ end }}
+			<section itemprop="entry-text">
+				{{ .Content }}
+			</section>
+		</article>
+	</main>
+
+{{ partial "footer.html" . }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 21b6c81..a10ff6d 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -15,10 +15,14 @@
 <body>
 
 <div class="container">
-
-	<header role="banner">
+	<header role="side" class="sidebar">
 		<div class="header-logo">
 			<a href="/"><img src="{{ .Site.Params.logo }}" width="60" height="60" alt="{{ .Site.Title }}"></a>
 		</div>
-		{{ if eq $isHomePage true }}<h1 class="site-title">{{ .Site.Title }}</h1><h2>{{ .Site.Params.subtitle }}</h2>{{ end }}
+		<h1 class="site-title">{{ .Site.Title }}</h1>
+		<h2>{{ .Site.Params.subtitle }}</h2>
+		<div class="navigation">
+		<h2><a href="/index.html">Home</a></h2>
+		<h2><a href="/about/index.html">About me</a></h2>
+		</div>
 	</header>
diff --git a/static/css/custom.css b/static/css/custom.css
new file mode 100644
index 0000000..57db6c3
--- /dev/null
+++ b/static/css/custom.css
@@ -0,0 +1,117 @@
+body {
+  font-family: "Roboto", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  background-color: #FCFCFC;
+}
+
+h1 { font-size: 2.1rem; }
+h2 { font-size: 1.9rem; }
+h3 { font-size: 1.7rem; }
+h4,
+h5,
+h6 { font-size: 1.5rem; }
+
+img {
+  max-width: 100%;
+  height: auto;
+  vertical-align: middle;
+  border: 0;
+}
+
+header,
+footer {
+  margin: 4rem 0;
+  text-align: center;
+}
+
+main {
+  margin: 4rem 0;
+}
+
+@media (min-width: 1150px) {
+    .sidebar {
+        position: fixed;
+        top: -40px;
+        left: 0;
+        width: 200px;
+        min-height: 100vh;
+        
+        padding: 30px;
+        background: #242930;
+        text-align: center;
+        
+        font-family: sans-serif;
+        color: #afbac4;
+    }
+
+    .sidebar .navigation {
+        padding-top: 35px;
+    }
+}
+
+@media (max-width: 1150px) {
+    .sidebar {
+        
+    }
+
+    .sidebar .navigation h2 {
+        display: inline;
+    }
+
+    .sidebar h2 a {
+        color: #1EAEDB;
+        text-decoration: none;
+        margin: 15px;
+    }
+}
+
+.sidebar a {
+    color: #afbac4;
+}
+
+.container {
+  width: 90%;
+  max-width: 600px;
+}
+
+.header-logo img {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  border: 4px solid #E1E1E1;
+}
+
+.header-logo img:hover {
+  border-color: #F1F1F1;
+}
+
+.site-title {
+  margin-top: 2rem;
+}
+
+.entry-title {
+  margin-bottom: 0;
+}
+
+.entry-title a {
+  text-decoration: none;
+}
+
+.entry-meta {
+  display: inline-block;
+  margin-bottom: 2rem;
+  font-size: 1.7rem;
+  color: #888;
+}
+
+.footer-link {
+  margin: 2rem 0;
+}
+
+.hr {
+  height: 1px;
+  margin: 2rem 0;
+  background: #E1E1E1;
+  background: -webkit-gradient(linear, left top, right top, from(white), color-stop(#E1E1E1), to(white));
+  background: -webkit-linear-gradient(left, white, #E1E1E1, white);
+  background: linear-gradient(to right, white, #E1E1E1, white);
+}
