19 files changed, 222 insertions, 30 deletions

diff --git a/.gitignore b/.gitignore
index 2788dfb..7cd54a8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ tmp/
 package-lock.json
 .firebase/
 public/
+.DS_Store
diff --git a/content/2016-10-14-how-we-destroyed-development.md b/content/2016-10-14-how-we-destroyed-development.md
index cd48eec..25ad46f 100644
--- a/content/2016-10-14-how-we-destroyed-development.md
+++ b/content/2016-10-14-how-we-destroyed-development.md
@@ -3,6 +3,7 @@ layout: post
 title: How we successfully destroyed the joy of product development
 description: My take on project development.
 slug: how-we-successfully-destroyed-the-joy-of-product-development
+type: note
 date: 2016-10-14
 ---
 
diff --git a/content/2017-01-12-gce-aws-docker-digitalocean.md b/content/2017-01-12-gce-aws-docker-digitalocean.md
index 79dfb70..cd6811c 100644
--- a/content/2017-01-12-gce-aws-docker-digitalocean.md
+++ b/content/2017-01-12-gce-aws-docker-digitalocean.md
@@ -3,6 +3,7 @@ layout: post
 title: GCE, AWS, Docker and why I choose classic VM’s and DigitalOcean for my current project
 description: Reasons why I choose DigitalOcean for my project
 slug: gce-aws-docker-and-why-i-choose-classic-vms-and-digitalocean
+type: note
 date: 2017-01-12
 ---
 
diff --git a/content/2017-03-07-golang-profiling-simplified.md b/content/2017-03-07-golang-profiling-simplified.md
index 7e375f0..fc79020 100644
--- a/content/2017-03-07-golang-profiling-simplified.md
+++ b/content/2017-03-07-golang-profiling-simplified.md
@@ -3,6 +3,7 @@ layout: post
 title: Golang profiling simplified
 description: Golang profiling made easy
 slug: golang-profiling-simplified
+type: note
 date: 2017-03-07
 ---
 
diff --git a/content/2017-04-10-what-its-like-to-be-a-software-developer.md b/content/2017-04-10-what-its-like-to-be-a-software-developer.md
index 2949931..c6b6010 100644
--- a/content/2017-04-10-what-its-like-to-be-a-software-developer.md
+++ b/content/2017-04-10-what-its-like-to-be-a-software-developer.md
@@ -3,6 +3,7 @@ layout: post
 title: What it's like to be a software developer
 description: Couple of observations regarding project management
 slug: what-its-like-to-be-a-software-developer
+type: note
 date: 2017-04-10
 ---
 
diff --git a/content/2017-04-17-what-i-ve-learned-developing-ad-server.md b/content/2017-04-17-what-i-ve-learned-developing-ad-server.md
index 77b396d..c186484 100644
--- a/content/2017-04-17-what-i-ve-learned-developing-ad-server.md
+++ b/content/2017-04-17-what-i-ve-learned-developing-ad-server.md
@@ -3,6 +3,7 @@ layout: post
 title: What I've learned developing ad server
 description: Lessons I learned developing contextual ad server
 slug: what-i-ve-learned-developing-ad-server
+type: note
 date: 2017-04-17
 ---
 
diff --git a/content/2017-04-21-profiling-python-web-applications-with-visual-tools.md b/content/2017-04-21-profiling-python-web-applications-with-visual-tools.md
index 9a31cab..6e52ee0 100644
--- a/content/2017-04-21-profiling-python-web-applications-with-visual-tools.md
+++ b/content/2017-04-21-profiling-python-web-applications-with-visual-tools.md
@@ -3,6 +3,7 @@ layout: post
 title: Profiling Python web applications with visual tools
 description: Missing link when debugging and profiling python web applications
 slug: profiling-python-web-applications-with-visual-tools
+type: note
 date: 2017-04-21
 ---
 
diff --git a/content/2017-08-11-simple-iot.md b/content/2017-08-11-simple-iot.md
index 17246ba..2eac869 100644
--- a/content/2017-08-11-simple-iot.md
+++ b/content/2017-08-11-simple-iot.md
@@ -3,6 +3,7 @@ layout: post
 title: Simple IOT application supported by real-time monitoring and data history
 description: Develop simple IOT application with Arduino MKR1000 and Python
 slug: simple-iot-application
+type: note
 date: 2017-08-11
 ---
 
diff --git a/content/2018-01-16-using-digitalocean-spaces-object-storage-with-fuse.md b/content/2018-01-16-using-digitalocean-spaces-object-storage-with-fuse.md
index 6a9fbe5..f1c893a 100644
--- a/content/2018-01-16-using-digitalocean-spaces-object-storage-with-fuse.md
+++ b/content/2018-01-16-using-digitalocean-spaces-object-storage-with-fuse.md
@@ -3,6 +3,7 @@ layout: post
 title: Using DigitalOcean Spaces Object Storage with FUSE
 description: Using DigitalOcean Spaces Object Storage with FUSE
 slug: using-digitalocean-spaces-object-storage-with-fuse
+type: research
 date: 2018-01-16
 ---
 
diff --git a/content/2018-08-05-the-bullshit-web-developments-pov.md b/content/2018-08-05-the-bullshit-web-developments-pov.md
index 46dfc19..04094c2 100644
--- a/content/2018-08-05-the-bullshit-web-developments-pov.md
+++ b/content/2018-08-05-the-bullshit-web-developments-pov.md
@@ -3,6 +3,7 @@ layout: post
 title: The Bullshit Web - Development's Point of View
 description: State of front-end development and what this does to the future of web
 slug: the-bullshit-web-developments-pov
+type: note
 date: 2018-08-05
 ---
 
diff --git a/content/2019-01-03-encoding-binary-data-into-dna-sequence.md b/content/2019-01-03-encoding-binary-data-into-dna-sequence.md
index b5636c1..a3bca72 100644
--- a/content/2019-01-03-encoding-binary-data-into-dna-sequence.md
+++ b/content/2019-01-03-encoding-binary-data-into-dna-sequence.md
@@ -3,6 +3,7 @@ layout: post
 title: Encoding binary data into DNA sequence
 description: Imagine a world where you could go outside and take a leaf from a tree and put it through your personal DNA sequencer and get data like music, videos or computer programs from it.
 slug: encoding-binary-data-into-dna-sequence
+type: research
 date: 2019-01-03
 ---
 
diff --git a/content/2019-05-11-bci.md b/content/2019-05-11-bci.md
new file mode 100644
index 0000000..24e9a30
--- /dev/null
+++ b/content/2019-05-11-bci.md
@@ -0,0 +1,71 @@
+---
+layout: draft
+title: BCI
+description: Imagine a world where you could go outside and take a leaf from a tree and put it through your personal DNA sequencer and get data like music, videos or computer programs from it.
+slug: bci
+type: research
+date: 2019-05-11
+---
+
+**Table of contents**
+
+1. [Intefacing with Bluetooth device](#intefacing-with-bluetooth-device)
+   1. [Basic Concepts](#basic-concepts)
+      1. [Attributes](#attributes)
+      2. [Structure](#structure)
+      3. [Services](#services)
+      4. [Characteristics](#characteristics)
+2. [Generic text for testing CSS styles](#generic-text-for-testing-css-styles)
+3. [Resources](#resources)
+
+
+## Intefacing with Bluetooth device
+
+A Bluetooth device contains a table of data called an Attribute Table which can be accessed by other connected devices in various possible ways. That table of data and the ways in which it can be exploited falls into a technical area of Bluetooth called the Generic Attribute profile or GATT for short and you may see the term GATT in some of the documentation for APIs such as those provided by the Android platform.
+
+The Attribute Table contains something like a series of records of various types. The main types are called Services, Characteristics, and Descriptors. Let’s look at each of these terms in turn.
+
+### Basic Concepts
+
+#### Attributes
+
+Services, Characteristics and Descriptors are all types of Attribute. Hence Generic Attribute Profile, Attribute Table and something called the Attribute Protocol. All attributes have a type which is identified by a UUID (Universally Unique Identifer). Some Attributes are defined by the Bluetooth SIG, the technical standards body for Bluetooth and these have UUIDs which are 16 bits in length. Some Attributes are custom designed for a particular device by the product team and these have 128 bit UUIDs.
+
+#### Structure
+
+Services, Characteristics and Descriptors are organised in a hierarchy with Services at the top and Descriptors at the bottom. Services contain one or more Characteristics. A Characteristic owns zero or more Descriptors because Descriptors are completely optional whereas a Service must contain at least one Characteristic.
+
+#### Services
+
+A Service is a container for logically related Bluetooth data items. Those data items are in fact called Characteristics. A Service can be thought of as the owner of the Characteristics inside it. Often a Service represents a particular feature (e.g. a hardware feature) of a device like the buttons or a particular sensor. An example of a Bluetooth SIG defined Service is the Device Information Service which, as the name suggests, is a container for various items of information about the device such as its manufacturer and serial number.
+
+#### Characteristics
+
+Characteristics are items of data which relate to a particular internal state of the device or perhaps some state of the environment which the device can measure using a sensor. The current battery level is an example of internal state data whereas the ambient temperature could perhaps be measured by a sensor. Sometimes Characteristics represent configuration data such as the frequency at which you want something to be measured. In any of these cases, the way a device can expose such data to other devices to use via Bluetooth is by making them available as a Characteristic. An example of a Bluetooth SIG defined Characteristic is the Serial Number String which you’ll find inside the Device Information service.
+
+Characteristics contain various parts. They have a type, a value, some properties and some permissions.
+
+Type is something already explained above, a UUID value which indicates which particular type of Characteristic an Attribute is. Value is the value of the associated state data item.
+
+Properties define what another device can do with the characteristic over Bluetooth in terms of various defined operations such as READ, WRITE or NOTIFY. Reading a characteristic means transferring its current value from the attribute table to the connected device over Bluetooth. Writing allows the connected device to change that value in the state table. Notifications are a special message type which a device can send to a connected device whenever the value of the associated characteristic changes or perhaps periodically, controlled by a timer. Not all Characteristics support all operations. The Characteristic’s properties tell you which operations are supported.
+
+Sometimes the device will have been programmed to respond in a special way when it processes an operation like reading or writing a value from the attribute table so operations can result in more happening than simply transferring data across the connection. Perhaps changing the value of a Characteristic will result in the device changing the frequency with which it samples readings from the device accelerometer for example.
+
+Permissions are to do with security and further describe the security conditions that must be met before read or write access to the characteristic is to be granted.
+
+## Generic text for testing CSS styles
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pulvinar finibus ipsum, vitae mattis neque elementum nec. Cras vel lacinia diam, a porttitor nisl. Sed ullamcorper convallis bibendum. Ut id lectus risus. Morbi aliquam eros condimentum volutpat pretium. Praesent malesuada congue eros, vitae mollis erat laoreet nec. Quisque porta tempus turpis a mollis. Nulla at mollis sem, at scelerisque velit. Mauris non ex lectus. Morbi eget erat interdum lacus pretium vehicula vitae ac justo. Quisque vulputate interdum semper. Duis dignissim porta magna, vel faucibus leo pulvinar at. Donec nibh purus, vestibulum vel velit a, ultricies volutpat ipsum.
+
+<img src="/files/bci/spike-waves.png">
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pulvinar finibus ipsum, vitae mattis neque elementum nec. Cras vel lacinia diam, a porttitor nisl. Sed ullamcorper convallis bibendum. Ut id lectus risus. Morbi aliquam eros condimentum volutpat pretium. Praesent malesuada congue eros, vitae mollis erat laoreet nec. Quisque porta tempus turpis a mollis. Nulla at mollis sem, at scelerisque velit. Mauris non ex lectus. Morbi eget erat interdum lacus pretium vehicula vitae ac justo. Quisque vulputate interdum semper. Duis dignissim porta magna, vel faucibus leo pulvinar at. Donec nibh purus, vestibulum vel velit a, ultricies volutpat ipsum.
+
+<img src="http://satyr.io/1100x300/eee" class="large">
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pulvinar finibus ipsum, vitae mattis neque elementum nec. Cras vel lacinia diam, a porttitor nisl. Sed ullamcorper convallis bibendum. Ut id lectus risus. Morbi aliquam eros condimentum volutpat pretium. Praesent malesuada congue eros, vitae mollis erat laoreet nec. Quisque porta tempus turpis a mollis. Nulla at mollis sem, at scelerisque velit. Mauris non ex lectus. Morbi eget erat interdum lacus pretium vehicula vitae ac justo. Quisque vulputate interdum semper. Duis dignissim porta magna, vel faucibus leo pulvinar at. Donec nibh purus, vestibulum vel velit a, ultricies volutpat ipsum.
+
+
+## Resources
+
+- https://www.bluetooth.com/blog/a-developers-guide-to-bluetooth/
diff --git a/content/files/bci/spike-waves.png b/content/files/bci/spike-waves.png
new file mode 100644
index 0000000..b0fc0b3
--- /dev/null
+++ b/content/files/bci/spike-waves.png
diff --git a/gulpfile.js b/gulpfile.js
index 6d1b6c7..630ca1a 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -125,7 +125,7 @@ const processMarkdown = (file) => {
 
   let post = nunjucks.render(`${meta.layout}.njk`, {
     content: md.render(raw.join('')),
-    title: meta.title.substring(0, 65),
+    title: meta.title, //.substring(0, 65)
     description: meta.description,
     css: `<style>${css}</style>`,
     javascript: `<script>${javascript}</script>`,
diff --git a/source/assets/default.css b/source/assets/default.css
index 8f15299..304c294 100644
--- a/source/assets/default.css
+++ b/source/assets/default.css
@@ -1,7 +1,6 @@
 @charset "utf-8";
 
-@import url('https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900" rel="stylesheet">');
-@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:400,500,600,700,900" rel="stylesheet">');
+@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:400,500,600,700,900');
 
 * {
   box-sizing: border-box;
@@ -11,8 +10,9 @@
 }
 
 body {
-  font-family: 'Heebo', sans-serif;
-  font-size: 18px;
+  /*font-family: 'Heebo', sans-serif;*/
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 17px;
   line-height: 170%;
 }
 
@@ -39,22 +39,23 @@ ol a:hover {
 
 h1 {
   line-height: 140%;
-  font-weight: 900;
-  font-size: 250%;
+  font-weight: 600;
+  font-size: 210%;
 }
 
 h2,h3,h4,h5 {
   /*margin-top: 50px;*/
+  font-weight: 500;
 }
 
 img {
   max-width: 100%;
-  margin: 0 auto;
+  margin: 30px auto;
   display: block;
 }
 
 .wrapper {
-  max-width: 750px;
+  max-width: 800px;
   margin: 0 auto;
 }
 
@@ -75,7 +76,7 @@ pre, code {
 }
 
 pre {
-  font-size: 80%;
+  font-size: 85%;
   margin: 20px;
   background: #eee;
 }
@@ -195,16 +196,15 @@ menu {
 }
 
 menu a.logo {
-  background: black;
-  color: white;
-  font-weight: 800;
+  font-weight: 600;
   text-decoration: none;
-  padding: 3px 15px;
+  font-size: 130%;
+  padding: 5px 0px ;
 }
 
 menu a.logo:hover {
-  background: fuchsia;
-  color: white;
+  /*background: fuchsia;
+  color: white;*/
 }
 
 menu nav {
@@ -239,6 +239,19 @@ footer > * {
 
 /*************************************************************** ARTICLE LIST */
 
+.list .article-list {
+  margin-bottom: 60px;
+}
+
+.list .article-list:last-child {
+  margin-bottom: 10px;
+}
+
+.list h3 {
+  font-weight: 700;
+  font-size: 140%;
+}
+
 .article-list article {
   margin-bottom: 20px;
 }
@@ -246,12 +259,21 @@ footer > * {
 .article-list article h2 {
   margin: 0;
   line-height: 150%;
+  font-size: 120%;
 }
 
 .article-list a {
   text-decoration: none;
 }
 
+article img.large {
+    max-width: 1100px;
+    width: 1100px;
+    position: relative;
+    left: -150px;
+    margin: 50px 0;
+}
+
 /***************************************************************** RESPONSIVE */
 
 @media only screen and (max-width:800px) {
@@ -270,6 +292,12 @@ footer > * {
   footer {
     text-align: center;
   }
+
+  article img.large {
+    position: initial;
+    width: 100%;
+    margin: 20px 0;
+  }
 }
 
 /********************************************************************** PRINT */
diff --git a/source/layouts/draft.njk b/source/layouts/draft.njk
new file mode 100644
index 0000000..72923c9
--- /dev/null
+++ b/source/layouts/draft.njk
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="theme-color" content="#ffffff">
+
+  <meta name="google-site-verification" content="EwUGW1WlCkRIQuyQ9AE1-bLitWthw-eVMZFTAMZVZaA">
+
+  <link rel="icon" type="image/png" href="{{ vars.domain }}/files/avatar-64x64.png?ver={{ timestamp }}">
+
+  <title>{{ title }}</title>
+  <meta name="author" content="{{ vars.author }}">
+  <meta name="description" content="{{ description }}">
+
+  <meta name="og:url" content="{{ vars.domain }}/{{ slug }}">
+  <meta name="og:type" content="website">
+  <meta name="og:title" content="{{ title }}">
+  <meta name="og:description" content="{{ description }}">
+  <meta name="og:image" content="{{ vars.domain }}/files/avatar-512x512.png?ver={{ timestamp }}">
+
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:site" content="@mitjafelicijan">
+  <meta name="twitter:title" content="{{ title }}">
+  <meta name="twitter:description" content="{{ description }}">
+  <meta name="twitter:image" content="{{ vars.domain }}/files/avatar-512x512.png?ver={{ timestamp }}">
+
+  {{ css }}
+
+</head>
+
+<body>
+
+  <main class="wrapper">
+
+    {% include "navigation.njk" %}
+
+    <article>
+
+      <header>
+        <h1>{{ title }}</h1>
+        <p class="pubdate">Published on
+          <time pubdate="{{ writtenDate.original }}">{{ writtenDate.formatted }}</time>
+          by {{ vars.author }}</p>
+      </header>
+
+      {{ content|safe }}
+
+    </article>
+
+    {{ javascript }}
+
+    {% include "footer.njk" %}
+
+  </main>
+
+</body>
+
+</html>
diff --git a/source/layouts/footer.njk b/source/layouts/footer.njk
index bbb0775..a8e3aa1 100644
--- a/source/layouts/footer.njk
+++ b/source/layouts/footer.njk
@@ -1,5 +1,5 @@
 <footer>
-  <span>© 2012-{{ currentYear }}</span>
+  <span>© 2010-{{ currentYear }}</span>
   <a href="/curriculum-vitae">Curriculum Vitae</a>
   <a href="//github.com/mitjafelicijan" target="_blank" rel="noopener nofollow">Github</a>
   <a href="//twitter.com/mitjafelicijan" target="_blank" rel="noopener nofollow">Twitter</a>
diff --git a/source/layouts/index.njk b/source/layouts/index.njk
index 9784155..c4912a7 100644
--- a/source/layouts/index.njk
+++ b/source/layouts/index.njk
@@ -37,16 +37,37 @@
 
     {% include "navigation.njk" %}
 
-    <nav class="article-list">
-      {% for post in posts %}
-      <article>
-        <a href="/{{ post.slug }}">
-          <time pubdate="{{ post.dateOriginal }}" class="pubdate">{{ post.dateFormatted }}</time>
-          <h2>{{ post.title }}</h2>
-        </a>
-      </article>
-      {% endfor %}
-    </nav>
+    <div class="list">
+
+      <h3>Research</h3>
+      <nav class="article-list">
+        {% for post in posts %}
+        {% if post.type == "research" %}
+        <article>
+          <a href="/{{ post.slug }}" aria-label="Read more about {{ post.title }}">
+            <time pubdate="{{ post.dateOriginal }}" class="pubdate">{{ post.dateFormatted }}</time>
+            <h2>{{ post.title }}</h2>
+          </a>
+        </article>
+        {% endif %}
+        {% endfor %}
+      </nav>
+
+      <h3>General</h3>
+      <nav class="article-list">
+        {% for post in posts %}
+        {% if post.type != "research" %}
+        <article>
+          <a href="/{{ post.slug }}" aria-label="Read more about {{ post.title }}">
+            <time pubdate="{{ post.dateOriginal }}" class="pubdate">{{ post.dateFormatted }}</time>
+            <h2>{{ post.title }}</h2>
+          </a>
+        </article>
+        {% endif %}
+        {% endfor %}
+      </nav>
+
+    </div>
 
     {{ javascript }}
 
diff --git a/source/layouts/navigation.njk b/source/layouts/navigation.njk
index 163c3c7..8814fc1 100644
--- a/source/layouts/navigation.njk
+++ b/source/layouts/navigation.njk
@@ -1,9 +1,9 @@
 <menu>
   <div>
-    <a href="/" class="logo">@mitjafelicijan</a>
+    <a href="/" class="logo">Mitja Felicijan</a>
   </div>
   <nav>
-    <a href="//github.com/mitjafelicijan">
+    <a href="//github.com/mitjafelicijan" aria-label="Github">
       <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 92 92" style="enable-background:new 0 0 92 92;" xml:space="preserve">
         <g>
@@ -21,7 +21,7 @@
       </svg>
     </a>
 
-    <a href="//twitter.com/mitjafelicijan">
+    <a href="//twitter.com/mitjafelicijan" aria-label="Twitter">
       <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve">
         <g>