Added use of gravatar for the profile image, added about profile section

layout/_partial/header.ejs

@@ -1,7 +1,9 @@
 <header id="header">
     <div id="header-main" class="header-inner">
         <div class="outer">
-      <a href="<%- url_for() %>" id="logo"><i class="logo"></i><span class="site-title"><%= config.title %></span></a>
+            <a href="<%- url_for() %>" id="logo"><!--<i class="logo"></i>--><span
+                        class="site-title"><%= config.title %></span></a>
+
             <nav id="main-nav">
                 <% for (var i in theme.menu){ %>
                 <a class="main-nav-link" href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
@@ -10,7 +12,8 @@
             <% if(theme.profile) { %>
             <nav id="sub-nav">
                 <div class="profile" id="profile-nav">
-          <a id="profile-anchor" href="javascript:;"><img class="avatar" src="<%- url_for(config.avatar) %>"><i class="fa fa-caret-down"></i></a>
+                    <a id="profile-anchor" href="javascript:;"><img class="avatar" src="<%- gravatar(theme.email) %>"><i
+                                class="fa fa-caret-down"></i></a>
                 </div>
             </nav>
             <% } %>

layout/_partial/profile.ejs

@@ -1,20 +1,22 @@
 <aside id="profile">
     <div class="inner profile-inner">
         <div class="base-info profile-block">
-		  <img id="avatar" src="<%- url_for(config.avatar) %>">
+            <img id="avatar" src="<%- gravatar(theme.email) %>">
+
             <h2 id="name"><%= config.author %></h2>
+
             <h3 id="title"><%= config.author_title %></h3>
             <span id="location"><i class="fa fa-map-marker"></i><%= config.location %></span>
-      <a id="follow" href="<%= config.follow %>"><%=__('profile.follow')%></a>
+            <a id="follow" href="<%= config.follow %>"><%= __('profile.follow') %></a>
         </div>
         <div class="article-info profile-block">
             <div class="article-info-block">
                 <%= site.posts.length %>
-        <span><%= (site.posts.length > 1?__('profile.posts'):__('profile.post')) %></span>
+                <span><%= (site.posts.length > 1 ? __('profile.posts') : __('profile.post')) %></span>
             </div>
             <div class="article-info-block">
                 <%= site.tags.length %>
-        <span><%= (site.tags.length > 1?__('profile.tags'):__('profile.tag')) %></span>
+                <span><%= (site.tags.length > 1 ? __('profile.tags') : __('profile.tag')) %></span>
             </div>
         </div>
         <% if(theme.contacts) { %>
@@ -22,11 +24,19 @@
             <table class="contact-list">
                 <tr>
                     <% for(var i in theme.contacts) { %>
-          <td><a href="<%- url_for(theme.contacts[i]) %>" target="_blank" title="<%= i %>"><i class="fa fa-<%= i %>"></i></a></td>
+                    <td><a href="<%- url_for(theme.contacts[i]) %>" target="_blank" title="<%= i %>"><i
+                                    class="fa fa-<%= i %>"></i></a></td>
                     <% } %>
                 </tr>
             </table>
         </div>
         <% } %>
+        <div class="article-info profile-block bio">
+            <h2>About</h2>
+
+            <p>I'm a software developer who likes to tweak/break gadgets and complain about everything under the
+                sun. When I'm not doing that, I'm usually playing games, watching films or watching sports.
+            </p>
+        </div>
     </div>
 </aside>

source/css/_partial/profile.styl

@@ -1,3 +1,17 @@
+.bio
+  text-align: center
+
+#profile .inner .bio h2
+  font-size: 1.3em
+  font-weight: bold
+  margin-top: 15px
+
+#profile .inner .bio p
+  margin: 5px 20px 10px 20px
+  text-align: justify
+  max-width: 300px
+  line-height: 1.5em
+
 .profile-block
   padding: 15px 20px
   border-bottom: 1px solid color-border
@@ -86,7 +100,7 @@
                 white-space: nowrap
                 border-radius: 2px
                 text-transform: uppercase
-                box-shadow: 0 0 2px rgba(0,0,0,0.2)
+                box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)
                 z-index: 1
               &:before
                 top: -12px
@@ -107,7 +121,7 @@
     position: absolute
     .profile-inner
       position: relative
-      box-shadow: 0 2px 5px rgba(0,0,0,0.2)
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2)
       &:before, &:after
         z-index: 1
         content: ''