about page tweaks

_config.yml

@@ -17,6 +17,9 @@ author:
     name:               Matthias Kretschmann
     email:              m@kretschmann.io
     uri:                http://kretschmann.io
+    twitter:            kremalicious
+    facebook:           matthiaskretschmann
+    googleplus:         +MatthiasKretschmann
 
 
 # Urls

_src/_assets/styl/page-about.styl

@@ -11,6 +11,25 @@
     .entry-content
         @extend .textcenter
 
+        img
+            @extend .avatar
+
+        p:first-child,
+        p:first-child + p
+            @extend .divider-bottom
+            color: $text-color-light
+
+            @media $breakpoint2
+                max-width: 60%
+                margin-left: auto
+                margin-right: auto
+
+        p:first-child
+            @extend .h3
+
+            + p
+                font-size: $font-size-large
+
     .footer
         .avatar,
         .footer-description
@@ -25,19 +44,3 @@
 
         .footer
             height: 350px
-
-.intro-1,
-.intro-2
-    @extend .divider-bottom
-    color: $text-color-light
-
-    @media $breakpoint2
-        max-width: 60%
-        margin-left: auto
-        margin-right: auto
-
-.intro-1
-    @extend .h3
-
-.intro-2
-    font-size: $font-size-large

_src/about/index.html

@@ -1,19 +0,0 @@
----
-layout: page
-title: About
-description: About this blog and the author
-redirect_from:
-  - /about/contact/
-  - /contact/
----
-
-<img class="avatar photo" src="/assets/img/avatar.jpeg" />
-
-<p class="lead intro-1">
-	Hi, this is my blog.
-</p>
-<p class="lead intro-2">
-	I'm a designer &amp; developer hybrid based in Berlin, Germany.
-</p>
-
-<p>Have a look at my <a href="http://matthiaskretschmann.com">portfolio</a> or hit me up on <a href="https://twitter.com/kremalicious">Twitter</a> or <a href="https://plus.google.com/+MatthiasKretschmann" rel="author">Google+</a></p>

_src/about/index.md

@@ -0,0 +1,15 @@
+---
+layout: page
+title: About
+description: About this blog and the author
+redirect_from:
+  - /about/contact/
+  - /contact/
+---
+
+![Avatar](/assets/img/avatar.jpeg)
+Hi, this is my blog.
+
+I'm a designer & developer hybrid based in Berlin, Germany.
+
+Have a look at my [portfolio](http://matthiaskretschmann.com) or hit me up on [Twitter](https://twitter.com/{{ site.author.twitter }}), [Facebook](https://facebook.com/{{ site.author.facebook }}) or [Google+](https://plus.google.com/{{ site.author.googleplus }}).