diff --git a/_layouts/home.html b/_layouts/home.html
index e52fb9c..5b1626f 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -9,7 +9,10 @@ layout: default
 
   {{ content }} 
 
-  {% assign post = site.posts.first %}
+    {% assign post = site.posts.first %}
+      <header class="post-header">
+    <h6 class="post-title p-name" itemprop="name headline">{{ post.title | escape }}</h1>
+  </header>
   {% assign content = post.content %}
   {% include post_detail.html %}
 
diff --git a/_posts/2020-12-18-shader.markdown b/_posts/2020-12-18-shader.markdown
index 9c4350e..a86b4d7 100644
--- a/_posts/2020-12-18-shader.markdown
+++ b/_posts/2020-12-18-shader.markdown
@@ -1,10 +1,16 @@
 ---
 layout: post-plain
-title: "Shader fun"
+title: "WebGL and Shader Experiments - Part 1"
 date: 2020-12-28
-categories: design
+categories: design coding
 ---
-<canvas id="canvas" width="1080" height="1080" style="//border:1px solid white;
+I spent a bit of time trying out WebGL today. I'd like to be able to use shaders for website elements like backgrounds because it seems like the most efficient way to get cool graphics on a screen. Shaders are some of the most elegant examples of code, able to describe complex, evolving visuals in just a few lines.
+  
+Realistically I won't be making anything really beautiful in the near future, but I'd like to understand how shaders in WebGL work. At least I will be able to pay someone more experienced to produce what I want.
+
+The program below should show a spinning pink square and is based on Mozilla's WebGL tutorial. The shape is created using an array of points, defined before the shader programs are called. 
+
+<canvas id="canvas" width="1080" height="1080" style="border:1px solid white;
 width:100%;"></canvas>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js" integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ==" crossorigin="anonymous" defer=""></script>