website update

jmettes · Dec 13, 2013 · 14eb820 · 14eb820
1 parent 2f29188
commit 14eb820
Show file tree

Hide file tree

Showing 12 changed files with 80 additions and 50 deletions.
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
@@ -1,11 +1,16 @@
 <section id="sidebar">
 <header id="logo"><a href="/"><img src="https://lh6.googleusercontent.com/-QY1-Ou3b8SA/UJtz6JuWGnI/AAAAAAAAAew/9PrkhE4Sbtw/s151/drawn-circle.png" alt="jmettes" /></a></header>
 <section id="about">
-<p>Hi! I'm Jonathan</p>
-<p>I'm a muso and a web dev</p>
-<p>I like electronics, puppets, unicycling, throat-singing &amp; vector graphics</p>
+<h1>Jonathan Mettes</h1>
+<p id="first">I'm a muso and a <br/>software developer</p>
+<p id="second">Here's a collection of <br/>things I do and make</p>
 </section>
 
+<form id="search" method="get" action="http://www.google.com/search">
+<input type="hidden" name="sitesearch" value="jmettes.com" />
+<input type="text" name="q" /><input type="submit" value="search" />
+</form>
+
 <section id="links">
 <a href="http://soundcloud.com/jmettes"><img src="https://lh3.googleusercontent.com/-X_dlIkXdlT8/UJuz7zxQRqI/AAAAAAAAAh8/TIFqr7Gvz58/s31/soundcloud.png" /></a>
 <a href="https://github.com/jmettes"><img src="https://lh3.googleusercontent.com/-pOH-UYaP_jA/UJu1zzhYRGI/AAAAAAAAAis/Pu_rE_x1hRo/s20/github.png" /></a>
@@ -14,8 +19,4 @@
 <a href="http://twitter.com/jmettes"><img src="https://lh4.googleusercontent.com/-Rn613YOPl0w/UJu6p0iZoXI/AAAAAAAAAlE/3k_HM4yTgv8/s24/twitter.png" /></a>
 </section>
 
-<form id="search" method="get" action="http://www.google.com/search">
-<input type="hidden" name="sitesearch" value="jmettes.com" />
-<input type="text" name="q" /><input type="submit" value="search" />
-</form>
 </section>
diff --git a/_layouts/layout.html b/_layouts/layout.html
@@ -2,8 +2,8 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
-<title>{{ page.title }}</title>
-<link title="jmettes - Atom" type="application/atom+xml" rel="alternate" href="/atom.xml" />
+<title>Jonathan Mettes</title>
+<link title="Jonathan Mettes - Atom" type="application/atom+xml" rel="alternate" href="/atom.xml" />
 <link type="text/css" rel="stylesheet" href="/css/style.css" />
 <link rel="shortcut icon" href="/favicon.ico" />
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
@@ -31,23 +31,23 @@
 </div>
 {% if page.url == "/index.html" %}
 <script type="text/javascript">
-var fetching = false;
 var page = 2;
-var loading = $('#paginate')
-  .html('<img src=\"/images/loading.gif\"/><br/>Loading...');
+var loading = $('#paginate').html('<img src=\"/images/loading.gif\"/><br/>Loading...');
+var fetching = false;
 
-$(window).bind('scroll', function() {
-  if ($(window).scrollTop() >= $(document).height() - $(window).height() - 120 && !fetching) {
+$(document).scroll(function(e) {
+  if (($(window).scrollTop() >= $(document).height() - $(window).height() - 500) && !fetching) {
     fetching = true;
     $.ajax({
       url: '/page' + page,
       success: function(data) {
         $(loading).remove();
         $(data).find('article').appendTo('#articles');
         $(loading).appendTo('#articles');
+        fetching = false;
       },
       error: function(e) {
-        $(window).unbind('scroll');
+        $(document).unbind('scroll');
         $(loading).remove();
 
         if (e.status != 404) {
@@ -56,10 +56,10 @@
       }
     }, 2000);
     page++;
-    fetching = false;
   }
 });
 
+
 var _gaq=[["_setAccount","UA-36175883-1"],["_trackPageview"]];
 (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
 g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -2,8 +2,8 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
-<title>{{ page.title }} - jmettes</title>
-<link title="jmettes - Atom" type="application/atom+xml" rel="alternate" href="/atom.xml" />
+<title>{{ page.title }} - Jonathan Mettes</title>
+<link title="Jonathan Mettes - Atom" type="application/atom+xml" rel="alternate" href="/atom.xml" />
 <link type="text/css" rel="stylesheet" href="/css/style.css" />
 <link rel="shortcut icon" href="/favicon.ico" />
 <!--[if IE]><script src="/js/html5.js"></script><![endif]-->
@@ -12,8 +12,7 @@
 {% include sidebar.html %}
 <div id="articles">
 <article>
-<h2>{{ page.title }}</h2>
-<a href="{{ page.url }}" title="{{ page.title }}" class="permalink">#</a>
+<h2><a href="{{ page.url }}" title="{{ page.title }}">{{ page.title }}</a></h2>
 {{ content }}
 <div id="paginate">
 {% if page.next.url %}

diff --git a/_posts/2012-06-29-draw-concave-box2d-javascript.md b/_posts/2012-06-29-draw-concave-box2d-javascript.md
@@ -4,4 +4,4 @@ title: Concave shapes with Box2dweb
 ---
 [![Box2dweb concave shapes](https://lh6.googleusercontent.com/-VGTa7oa7IFA/UDTQXFcpp1I/AAAAAAAAAas/-ds6mm6nbVI/s500/concave.png)](/experiments/concave-shapes/)
 
-Some code I ported over to JavaScript that lets you draw arbitrary concave shapes - [check it out!](/experiments/concave-shapes)
+A JavaScript experiment in drawing arbitrary concave shapes - [check it out!](/experiments/concave-shapes) The experiment started out for an idea to create interesting levels for a game.
diff --git a/_posts/2012-08-20-canvas-jumper-javascript-game.md b/_posts/2012-08-20-canvas-jumper-javascript-game.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: canvasjumper - JavaScript game
+title: canvasjumper - JavaScript platformer game
 ---
 
 [![canvasjumper screenshot](https://lh4.googleusercontent.com/-AWHsCfQ7Uzc/UDHEfpi4N_I/AAAAAAAAAak/1GzhSJWsVTY/s500/canvasjumper-screenshot.png)](http://canvasjumper.com)

diff --git a/_posts/2011-11-20-schreeuwkop.md → _posts/2012-09-01-schreeuwkop.md b/_posts/2011-11-20-schreeuwkop.md → _posts/2012-09-01-schreeuwkop.md
@@ -3,10 +3,10 @@ layout: post
 title: “Schreeuwkop”
 ---
 
-![Original stencil](https://lh3.googleusercontent.com/-GtlJ3cGzk5Y/T8wvlQO5LWI/AAAAAAAAAak/OqimhIIIJaY/w500/schreeuwkop-stencil.jpg)
+![Self-portrait Mural](https://lh5.googleusercontent.com/-NW0-9IkrOx8/ULIPB1F_5uI/AAAAAAAAAok/97wRCzKw19E/w500/mural.png)
 
-In 2008, I made a self-portrait stencil out of a black A4 sheet for an art assignment.
+A self portrait mural painted in 2008 on a wall in the art department at the Canberra Institute of Technology.
 
-![Self-portrait Mural](https://lh5.googleusercontent.com/-NW0-9IkrOx8/ULIPB1F_5uI/AAAAAAAAAok/97wRCzKw19E/w500/mural.png)
+![Original stencil](https://lh3.googleusercontent.com/-GtlJ3cGzk5Y/T8wvlQO5LWI/AAAAAAAAAak/OqimhIIIJaY/w500/schreeuwkop-stencil.jpg)
 
-My teachers liked it enough to get me to paint it on a wall of the arts department!
+The original black A4 sheet stencil that was enlarged and projected to create the mural.
diff --git a/_posts/2012-10-31-logo-baznsnags.md b/_posts/2012-10-31-logo-baznsnags.md
@@ -0,0 +1,10 @@
+---
+layout: post
+title: Baz 'n' Snags website and branding
+---
+
+![Baz 'n' Snags logo](https://lh3.googleusercontent.com/-CJcxSby3XWs/Uqm7TPRyP3I/AAAAAAAAAyo/4wna2Iw3Fek/w586-h638-no/baznsnags-logo.png)
+
+I created a website and logo for an upcoming independent Australian puppet webseries [Baz 'n' Snags](http://www.baznsnags.com).
+
+[![Baz 'n' Snags website](https://lh6.googleusercontent.com/-0RszGsdYsVg/UqpaELrhREI/AAAAAAAAA0s/1IUYFWkdTvA/w500/baznsnags-website.png)](http://baznsnags.com)
diff --git a/_posts/2012-11-23-diy-tissue-box-amp.md b/_posts/2012-11-23-diy-tissue-box-amp.md
@@ -1,20 +1,20 @@
 ---
 layout: post
-title: DIY tissue box amp
+title: DIY tissue box guitar amp
 ---
 
 ![tissue box amp](http://farm9.staticflickr.com/8200/8202154712_dfff97bab7.jpg)
 
 I made a great little battery-powered practice amp thanks to the ubiquitous "Little Gem" project by [runoffgroove.com](http://www.runoffgroove.com/littlegem.html).
 
+![Little Gem schematic](https://lh3.googleusercontent.com/-X8sUApMtOhM/UNEB4o8zwOI/AAAAAAAAArY/oQHvUsvDA2U/w500/amp-diagram.png)
+
+The schematic I used for building the amp. The main component of interest is the [LM386](http://en.wikipedia.org/wiki/LM386) op-amp chip to be inserted in socket - a popular choice for battery powered amps.
+
 <iframe src="http://player.vimeo.com/video/53911083?badge=0&amp;title=0&amp;byline=0&amp;portrait=0" allowfullscreen="allowfullscreen" frameborder="0" height="281" width="500"><a href='https://vimeo.com/53911083'>Watch DIY tissue box amp jam on vimeo</a></iframe>
 
 My first time filming/editing (I used Premiere Pro)! The video highlights the build process of the amp - keep an eye out for a demo of it at the end. :-)
 
 ![My recording setup](http://farm9.staticflickr.com/8067/8201093129_36e783c3d7.jpg)
 
-My recording setup: one camera on a tripod, two tablets with chairs/boxes as make-shift stands, a mic, a laptop running [Audacity](http://audacity.sourceforge.net/) and a bunch of desk lamps.
-
-![Little Gem schematic](https://lh3.googleusercontent.com/-X8sUApMtOhM/UNEB4o8zwOI/AAAAAAAAArY/oQHvUsvDA2U/w500/amp-diagram.png)
-
-The schematic I used for building the amp. The main component of interest is the [LM386](http://en.wikipedia.org/wiki/LM386) op-amp chip to be inserted in socket - a popular choice for battery powered amps.
+My recording setup: one camera on a tripod, two tablets with chairs/boxes as make-shift stands, a mic, a laptop running [Audacity](http://audacity.sourceforge.net/) and a bunch of desk lamps.
diff --git a/_posts/2013-02-20-slide-guitar-workshop.md b/_posts/2013-02-20-slide-guitar-workshop.md
@@ -1,30 +1,28 @@
 ---
 layout: post
-title: Slide guitar workshop
+title: Slide guitar workshop at LCA 2013
 ---
 
 ![Passing out the slide guitar planks](https://lh3.googleusercontent.com/-4XwXHvaRprs/USRQN6R7FxI/AAAAAAAAAuA/7_MlsCHOzP4/w500/lca-workshop.jpg)
 
-This year I gave a [mini-conf](http://www.annodex.org/events/lca2013_mmm/pmwiki.php/Main/Timetable) workshop at [Linux Conference Australia](http://linux.conf.au). I gave each of the participants a plank of wood and a bunch of cheap parts. By the end of the workshop, I had them all rocking out on their own homebrew slide guitars!
+At the [2013 Linux Conference Australia](http://linux.conf.au), I gave [mini-conf](http://www.annodex.org/events/lca2013_mmm/pmwiki.php/Main/Timetable) workshop on building simple musical instruments out of everyday parts. I gave each of the participants a plank of wood and a bunch of cheap parts, and by the end of the workshop, I had them all rocking out on their own homebrew slide guitars!
 
 ![Giving demo of slide guitar](https://lh4.googleusercontent.com/-t0l4xJMoV0o/USRQN2JgGHI/AAAAAAAAAt4/7C9p3imCZ7E/w500/lca-workshop2.jpg)
 
 Here's a video of the build process and a bit of a demo:
 
 <iframe src="http://player.vimeo.com/video/59792793?badge=0&amp;title=0&amp;byline=0&amp;portrait=0" allowfullscreen="allowfullscreen" frameborder="0" height="281" width="500"><a href='https://vimeo.com/59792793'>Watch Building a one-string slide guitar on vimeo</a></iframe>
 
-Because of the lack of time and tools during the workshop, it was important to keep the complexity down, so I pre-drilled and "milled" the planks.
-
 ![Slide guitar diagram](https://lh5.googleusercontent.com/-VGlZNPKY33A/USRTX6PaI-I/AAAAAAAAAuc/0g8ikBvfc6c/w500/slide-diagram.png)
 
 Here's a list of the parts if you'd like to make one yourself:
 
-- [Guitar pickup](http://www.ebay.com.au/itm/390440570663)
+- Guitar pickup
 - T-section bracket
 - eye-screw
 - Electric guitar string
 - 1/4" input plug
-- metal pipe (whatever size fits your finger best)
+- metal pipe
 
 Tools needed:
 

diff --git a/_posts/2013-12-13-hackathon-act.md b/_posts/2013-12-13-hackathon-act.md
@@ -0,0 +1,18 @@
+---
+layout: post
+title: Weekend hackathon at HACT '13
+---
+
+![Passing out the slide guitar planks](https://lh5.googleusercontent.com/-K_leSuSbpMU/UqpVn58ZKSI/AAAAAAAAA0I/JWpquM5w-Ak/w500/hackathon.jpg)
+
+At [Hackathon ACT '13](http://hact.org), I teamed up with four other coders, designers and entrepreneurs to prototype an app from scratch in a weekend.
+
+![Awarded for best innovation for government](https://lh3.googleusercontent.com/-xvI_xwfOXM4/UqpRMeXIu6I/AAAAAAAAAz4/r6yVX0APgBw/w500/hact-award.jpg)
+
+Our aim was to make queuing quicker, and replacing paperwork for corporate and government service desks. Our app won an award for Best Innovation for Government.
+
+![Passing out the slide guitar planks](https://lh3.googleusercontent.com/-hGSm4L0f6QA/UqpOZXr7faI/AAAAAAAAAzk/667oW0m3kD8/w500/formaq.png)
+
+The project involved making an iPhone app for customers to fill in forms while queuing. As well as a web app for handling the filled out forms.
+
+![Passing out the slide guitar planks](https://lh3.googleusercontent.com/-Nfw7P3lvYOo/UqpOZCedItI/AAAAAAAAAzg/WFDYnwAa5cU/iphone-app.png)
diff --git a/css/style.css b/css/style.css
@@ -48,29 +48,32 @@ p code {
 #about {
   margin-left: 30px;
 }
+#about h1 {
+  font-size: 0.96em;
+  text-transform: uppercase;
+  letter-spacing: -0.05em;
+  margin-bottom: 0.5em;
+}
 #about p {
   margin: 0;
   text-shadow: 1px 1px #fff;
 }
-#about p:first-child {
-  font-size: 16px;
-  margin-bottom: 5px;
-  letter-spacing: 0.1em;
+#about #first {
+  font-size: 1em;
 }
-#about p:first-child + p {
-  font-size: 11px;
-  padding-bottom: 4px;
-  word-spacing: 0.2em;
+#about #second {
+  margin-top: .5em;
+  font-size: 0.9em;
 }
-#about p:first-child + p + p {
+/*#about p:first-child + p + p {
   font-size: 11px;
   letter-spacing: 0;
   word-spacing: 0.1em;
   width: 155px;
-}
+}*/
 #links {
   width: 155px;
-  margin: 2.5em 0 1em 30px;
+  margin: 1em 0 1em 30px;
 }
 #links img {
   padding: 0 1px;
@@ -80,6 +83,7 @@ p code {
   border-right: 2px solid #fff;
   border-bottom: 2px solid #fff;
   margin-left: 30px;
+  margin-top: 2.5em;
 }
 #search input[type="text"] {
   border: 2px solid #333;

diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
 ---
 {% for post in paginator.posts %}
 <article>
-<a href="{{ post.url }}" title="{{ page.title }}" class="permalink">#</a>
+<h2><a href="{{ post.url }}" title="{{ page.title }}">{{ post.title }}</a></h2>
 {{ post.content}}
 </article>
 {% endfor %}