Reworked CV site using Stasis. Added current info.

2025-03-04 08:59:12 +00:00 · 2012-07-29 16:36:05 +01:00 · 2012-07-29 16:36:05 +01:00 · cc263dad8b
commit cc263dad8b
parent 19a0318120
24 changed files with 335 additions and 676 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,3 +1,4 @@
 .DS_*
 .sass-cache
 *.esproj
+public/
--- a/9
+++ b/9
@ -0,0 +1,9 @@
+source "http://rubygems.org"
+
+# gem "rails"
+gem "stasis"
+gem "hpricot"
+gem "haml"
+gem "sass"
+gem "redcarpet"
+gem "coffee-script"
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -0,0 +1,36 @@
+GEM
+  remote: http://rubygems.org/
+  specs:
+    coffee-script (2.2.0)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.3.3)
+    directory_watcher (1.4.1)
+    execjs (1.4.0)
+      multi_json (~> 1.0)
+    haml (3.1.6)
+    hpricot (0.8.6)
+    multi_json (1.3.6)
+    redcarpet (2.1.1)
+    redis (2.2.2)
+    sass (3.1.20)
+    slop (2.1.0)
+    stasis (0.1.23)
+      directory_watcher (~> 1.4.1)
+      redis (~> 2.2.2)
+      slop (~> 2.1.0)
+      tilt (~> 1.3.3)
+      yajl-ruby (~> 1.0.0)
+    tilt (1.3.3)
+    yajl-ruby (1.0.0)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  coffee-script
+  haml
+  hpricot
+  redcarpet
+  sass
+  stasis
--- a/controller.rb
+++ b/controller.rb
@ -0,0 +1,6 @@
+ignore /\/_.*/
+ignore /\/stylesheets\/_.*/
+ignore /Gemfile.*/
+ignore /\/\..+/
+
+layout "layouts/main.html.haml"
--- a/css/style.css
+++ b/css/style.css
@ -1,622 +0,0 @@
-/* ====================================================
- *
- * Dan Barber CV Styles
- * Based on:
- * 320 and Up boilerplate extension
- *
- * Author: Andy Clarke
- * Version: 0.9b
- * URL: http://stuffandnonsense.co.uk/projects/320andup/
- * _____________________________________________________
- *
- *  1.ROOT
- *  2.HEADINGS
- *  3.TYPOGRAPHY
- *  4.LINKS
- *  5.FIGURES & IMAGES
- *  6.TABLES
- *  7.FORMS (See css/mylibs/forms.css)
- *  8.BANNER header[role="banner"]
- *  9.NAVIGATION nav[role="navigation"]
- * 10.CONTENT
- * 11.MAIN div[role="main"]
- * 12.COMPLIMENTARY div[role="complementary"]
- * 13.CONTENTINFO footer[role="contentinfo"]
- * 14.GLOBAL OBJECTS
- * 15.VENDOR-SPECIFIC 
- * 16.TEMPLATE SPECIFICS
- * 17.MODERNIZR
- *
- * COLOURS */
-html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline; }
-
-article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
-  display: block; }
-
-abbr[title] {
-  border-bottom: 1px dotted;
-  cursor: help; }
-
-/*  1.ROOT */
-html {
-  overflow-y: scroll;
-  background: #f9f5eb; }
-
-body {
-  margin: 0 auto;
-  padding: 0 0;
-  font: 100%/1.4 "museo-sans-1", "museo-sans-2", sans-serif;
-  font-weight: 100;
-  color: #1e2832;
-  background-color: transparent; }
-
-.container {
-  margin: 0 auto;
-  padding: 0 0;
-  width: 90%; }
-
-/*  2.HEADINGS */
-h1, h2, h3, h4, h5, h6 {
-  font-family: "museo-slab-1", "museo-slab-2", "Helvetica Neue", Helvetica, Arial, serif;
-  font-weight: black;
-  text-shadow: 1px 1px 1px white;
-  text-rendering: optimizeLegibility; }
-
-h1 {
-  margin-top: 0;
-  margin-bottom: 0.1em;
-  font-size: 3em;
-  /* 48 / 16 = 3 */
-  line-height: 1.2;
-  font-weight: 900;
-  text-align: center;
-  width: 100%; }
-  h1:before {
-    content: "";
-    display: block;
-    height: 130px;
-    font-size: 3em;
-    margin-top: 0;
-    text-align: center;
-    background: url(../img/l/danbarberlogo.png) center center no-repeat;
-    background-size: 95px; }
-
-/* Hide the logomark in ie7/8 as it just doesn't work correctly. It's not essential. */
-.ie8 h1:before, .ie7 h1:before {
-  border: 1px solid red;
-  display: none; }
-
-h2 {
-  margin-bottom: 0.75em;
-  font-size: 1.7em;
-  /* 36 / 16 = 2 */
-  line-height: 1.2;
-  text-align: center; }
-
-h3 {
-  text-transform: uppercase;
-  margin-bottom: 1em;
-  font-size: 1.4em;
-  /* 24 / 16 = 1.5 */
-  line-height: 1.3; }
-
-h4 {
-  margin-bottom: 0.75em;
-  margin-top: 1.7em;
-  font-size: 1.2em;
-  /* 20 / 16 = 1.25 */
-  line-height: 1.25;
-  font-weight: 500; }
-
-h5 {
-  margin-bottom: 1.5em;
-  font-size: 1em;
-  /* 16 / 16 = 1 */ }
-
-h6 {
-  font-size: 1em;
-  /* 16 / 16 = 1 */ }
-
-/*  3.TYPOGRAPHY */
-.period {
-  font-style: italic; }
-
-p, ol, ul, dl, address {
-  margin-bottom: 0.75em;
-  font-size: 1em;
-  /* 16 / 16 = 1 */ }
-
-ul, ol {
-  margin: 0 0 0 -24px;
-  padding-left: 24px; }
-
-ul {
-  list-style-type: disc; }
-  ul ul {
-    padding-left: 0; }
-
-ol {
-  list-style-type: decimal; }
-
-li ul, li ol {
-  margin: 0;
-  font-size: 1em;
-  /* 16 / 16 = 1 */ }
-
-.container > section {
-  border-top: 2px solid #666666;
-  padding-top: 1em;
-  margin-bottom: 2em; }
-  .container > section ul, .container > section ol {
-    list-style: none; }
-
-dl, dd {
-  margin-bottom: 1.5em; }
-
-dt {
-  font-weight: normal; }
-
-blockquote {
-  margin: 0 0 1.5em -24px;
-  padding-left: 24px;
-  border-left: 1px solid #c8c8c8;
-  font-style: italic; }
-  blockquote:before, blockquote:after {
-    content: "";
-    content: none; }
-
-q:before, q:after {
-  content: "";
-  content: none; }
-
-b, strong {
-  font-weight: bold; }
-
-i, em {
-  font-style: italic; }
-
-sup, sub {
-  position: relative;
-  font-size: 75%;
-  line-height: 0; }
-
-sup {
-  top: -0.5em; }
-
-sub {
-  bottom: -0.25em; }
-
-address {
-  font-style: normal; }
-
-pre {
-  margin-bottom: 1.5em;
-  white-space: pre;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  font: 0.875em "andale mono", "lucida console", monospace;
-  line-height: 1.5; }
-
-code {
-  font: 0.875em "andale mono", "lucida console", monospace;
-  line-height: 1.5; }
-
-small {
-  font-size: 1em;
-  /* 16 / 16 = 1 */ }
-
-/*  4.LINKS */
-a {
-  outline: none;
-  color: #1777af;
-  text-decoration: none; }
-  a:visited {
-    outline: none;
-    color: #1777af;
-    text-decoration: none; }
-  a:hover, a:focus {
-    outline: none;
-    color: #282828;
-    text-decoration: underline; }
-  a:active {
-    outline: none;
-    color: black; }
-
-/*  5.FIGURES & IMAGES */
-figure {
-  margin-bottom: 1.5em; }
-  figure img, figure object, figure embed {
-    margin-bottom: 0.75em;
-    max-width: 100%; }
-
-figcaption {
-  display: block;
-  font-weight: normal; }
-
-/*  6.TABLES */
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  margin-bottom: 1.4em;
-  width: 100%;
-  font-size: 0.875em;
-  /* 14 / 16 = .875 */ }
-
-th {
-  font-weight: bold;
-  padding: 0.25em 10px 0.25em 5px; }
-
-td, caption {
-  padding: 0.25em 10px 0.25em 5px; }
-
-tfoot {
-  font-style: italic; }
-
-caption {
-  background-color: transparent; }
-
-/*  7.FORMS (See css/mylibs/forms.css) */
-/*  8.BANNER */
-/*  9.NAVIGATION */
-/* 10.CONTENT */
-/* 11.MAIN */
-/* 12.COMPLIMENTARY */
-/* 13.CONTENTINFO */
-/* 14.GLOBAL OBJECTS */
-.clearfix {
-  zoom: 1; }
-  .clearfix:before {
-    content: "\0020";
-    display: block;
-    height: 0;
-    overflow: hidden; }
-  .clearfix:after {
-    content: "\0020";
-    display: block;
-    height: 0;
-    overflow: hidden;
-    clear: both; }
-
-/* 15.VENDOR-SPECIFIC */
-body {
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%; }
-
-a:link {
-  -webkit-tap-highlight-color: #349edb; }
-
-::-webkit-selection {
-  background: #1777af;
-  color: #fafafa;
-  text-shadow: none; }
-
-::-moz-selection {
-  background: #1777af;
-  color: #fafafa;
-  text-shadow: none; }
-
-::selection {
-  background: #1777af;
-  color: #fafafa;
-  text-shadow: none; }
-
-::-webkit-input-placeholder {
-  padding: 10px;
-  font-size: 0.875em;
-  line-height: 1.4; }
-
-/* input[type=search] { -webkit-appearance: none; }
- *
- *input[type="search"]::-webkit-search-decoration, 
- *input[type="search"]::-webkit-search-cancel-button { display: none; } */
-input:-moz-placeholder {
-  padding: 10px;
-  font-size: 0.875em;
-  line-height: 1.4; }
-
-.ie7 img, .iem7 img {
-  -ms-interpolation-mode: bicubic; }
-
-div, input, textarea {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -o-box-sizing: border-box;
-  box-sizing: border-box; }
-
-/* Non-semantic helper classes */
-/* Image replacement */
-.ir {
-  display: block;
-  text-indent: -999em;
-  overflow: hidden;
-  background-repeat: no-repeat;
-  text-align: left;
-  direction: ltr; }
-
-/* Hide for screenreaders and visual browsers */
-.hidden {
-  display: none;
-  visibility: hidden; }
-
-/* Hide visually */
-.visuallyhidden {
-  position: absolute;
-  clip: rect(0 0 0 0);
-  overflow: hidden;
-  margin: -1px;
-  padding: 0;
-  height: 1px;
-  width: 1px;
-  border: 0; }
-  .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
-    position: static;
-    clip: auto;
-    overflow: visible;
-    height: auto;
-    margin: 0;
-    width: auto; }
-
-/* Allow an element to be focusable via keyboard */
-/* Hide but maintain layout */
-.invisible {
-  visibility: hidden; }
-
-/* 16.TEMPLATE SPECIFICS */
-#goog-fixurl ul {
-  list-style-type: none; }
-#goog-fixurl input {
-  margin-bottom: 1.5em; }
-
-/* 17.MODERNIZR */
-/* MEDIA QUERIES */
-/*Print __________________________________________________________________________________________________________ */
-@media print {
-  * {
-    background: transparent !important;
-    color: black !important;
-    text-shadow: none !important;
-    filter: none !important;
-    -ms-filter: none !important; }
-
-  a {
-    color: #444444 !important;
-    text-decoration: underline; }
-    a:visited {
-      color: #444444 !important;
-      text-decoration: underline; }
-    a[href]:after {
-      content: " (" attr(href) ")"; }
-
-  abbr[title]:after {
-    content: " (" attr(title) ")"; }
-
-  a[href^="javascript:"]:after, a[href^="#"]:after {
-    content: ""; }
-
-  pre, blockquote {
-    border: 1px solid #999999;
-    page-break-inside: avoid; }
-
-  thead {
-    display: table-header-group; }
-
-  tr, img {
-    page-break-inside: avoid; }
-
-  @page {
-    margin: 0.5cm; }
-
-  p, h2, h3 {
-    orphans: 3;
-    widows: 3; }
-
-  h2, h3 {
-    page-break-after: avoid; } }
-/*/mediaquery */
-/*480px __________________________________________________________________________________________________________ */
-@media only screen and (min-width: 480px) {
-  /*  1.ROOT */
-  body {
-    font-size: 1.05em; }
-
-  /*  2.HEADINGS */
-  h1 {
-    margin-top: 0.5em;
-    text-align: left;
-    margin-bottom: 0;
-    font-size: 3.3em; }
-    h1:before {
-      float: right;
-      font-size: 2em;
-      width: 78px;
-      background-size: 78px;
-      background-position: top center;
-      position: relative;
-      top: 0em;
-      text-align: right;
-      margin-bottom: -0.5em; }
-
-  h2 {
-    text-align: left; }
-
-  /*  3.TYPOGRAPHY */
-  /*  4.LINKS */
-  /*  5.FIGURES & IMAGES */
-  /*  6.TABLES */
-  /*  7.FORMS */
-  /*  8.BANNER */
-  /*  9.NAVIGATION */
-  /* 10.CONTENT */
-  /* #experience h4 { float: left; margin-top: 0; }
-   *#experience li { margin-top: 2.2em; }
-   *#experience .period { clear: none; text-align: right; position: relative; top: 0.1em; }
-   *#experience p { clear: both; } */
-  /* 11.MAIN */
-  /* 12.COMPLIMENTARY */
-  /* 13.CONTENTINFO */
-  /* 14.GLOBAL OBJECTS */
-  /* 15.VENDOR-SPECIFIC */
-  /* 16.TEMPLATE SPECIFICS */
-  /* 17.MODERNIZR */ }
-/*/mediaquery */
-/*480px __________________________________________________________________________________________________________ */
-@media only screen and (min-width: 540px) {
-  /*  1.ROOT */
-  /*  2.HEADINGS */
-  /*  3.TYPOGRAPHY */
-  /*  4.LINKS */
-  /*  5.FIGURES & IMAGES */
-  /*  6.TABLES */
-  /*  7.FORMS */
-  /*  8.BANNER */
-  /*  9.NAVIGATION */
-  /* 10.CONTENT */
-  #profile, #experience {
-    float: left;
-    width: 63%; }
-
-  #skills {
-    float: right;
-    width: 30%;
-    margin-left: 7%; }
-
-  #portfolio {
-    float: left;
-    width: 63%; }
-
-  #interests, #contact {
-    float: right;
-    width: 30%;
-    margin-left: 7%; }
-
-  /* 11.MAIN */
-  /* 12.COMPLIMENTARY */
-  /* 13.CONTENTINFO */
-  /* 14.GLOBAL OBJECTS */
-  /* 15.VENDOR-SPECIFIC */
-  /* 16.TEMPLATE SPECIFICS */
-  /* 17.MODERNIZR */ }
-/*/mediaquery */
-/*768px __________________________________________________________________________________________________________ */
-@media only screen and (min-width: 768px) {
-  /*  1.ROOT */
-  body {
-    font-size: 1.1em; }
-
-  /*  2.HEADINGS */
-  h1 {
-    font-size: 5em;
-    margin-bottom: 0em; }
-    h1:before {
-      width: 130px;
-      background-size: 130px;
-      background-position: top center;
-      position: relative;
-      top: 0em; }
-
-  h2 {
-    font-size: 2em; }
-
-  /*  3.TYPOGRAPHY */
-  /*  4.LINKS */
-  /*  5.FIGURES & IMAGES */
-  /*  6.TABLES */
-  /*  7.FORMS */
-  /*  8.BANNER */
-  /*  9.NAVIGATION */
-  /* 10.CONTENT */
-  /* 11.MAIN */
-  /* 12.COMPLIMENTARY */
-  /* 13.CONTENTINFO */
-  /* 14.GLOBAL OBJECTS */
-  /* 15.VENDOR-SPECIFIC */
-  /* 16.TEMPLATE SPECIFICS */
-  /* 17.MODERNIZR */ }
-/*/mediaquery */
-/*992px __________________________________________________________________________________________________________ */
-@media only screen and (min-width: 992px) {
-  /*  1.ROOT */
-  .container {
-    width: 890px; }
-
-  /*  2.HEADINGS */
-  /*  3.TYPOGRAPHY */
-  /*  4.LINKS */
-  /*  5.FIGURES & IMAGES */
-  /*  6.TABLES */
-  /*  7.FORMS */
-  /*  8.BANNER */
-  /*  9.NAVIGATION */
-  /* 10.CONTENT */
-  /* 11.MAIN */
-  /* 12.COMPLIMENTARY */
-  /* 13.CONTENTINFO */
-  /* 14.GLOBAL OBJECTS */
-  /* 15.VENDOR-SPECIFIC */
-  /* 16.TEMPLATE SPECIFICS */
-  /* 17.MODERNIZR */ }
-/*/mediaquery */
-/*1382px __________________________________________________________________________________________________________ */
-@media only screen and (min-width: 1382px) {
-  /*  1.ROOT */
-  /*  2.HEADINGS */
-  /*  3.TYPOGRAPHY */
-  /*  4.LINKS */
-  /*  5.FIGURES & IMAGES */
-  /*  6.TABLES */
-  /*  7.FORMS */
-  /*  8.BANNER */
-  /*  9.NAVIGATION */
-  /* 10.CONTENT */
-  /* 11.MAIN */
-  /* 12.COMPLIMENTARY */
-  /* 13.CONTENTINFO */
-  /* 14.GLOBAL OBJECTS */
-  /* 15.VENDOR-SPECIFIC */
-  /* 16.TEMPLATE SPECIFICS */
-  /* 17.MODERNIZR */ }
-/*/mediaquery */
-/*2x __________________________________________________________________________________________________________ */
-@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
-  /*  1.ROOT */
-  /*  2.HEADINGS */
-  h1:before {
-    background-image: url(../img/h/danbarberlogo.png); }
-
-  /*  3.TYPOGRAPHY */
-  /*  4.LINKS */
-  /*  5.FIGURES & IMAGES */
-  /*  6.TABLES */
-  /*  7.FORMS */
-  /*  8.BANNER */
-  /*  9.NAVIGATION */
-  /* 10.CONTENT */
-  /* 11.MAIN */
-  /* 12.COMPLIMENTARY */
-  /* 13.CONTENTINFO */
-  /* 14.GLOBAL OBJECTS */
-  /* 15.VENDOR-SPECIFIC */
-  /* 16.TEMPLATE SPECIFICS */
-  /* 17.MODERNIZR */ }
-/*/mediaquery */
-/* Sources: 
- * http://meyerweb.com/eric/tools/css/reset
- * http://people.opera.com/patrickl/experiments/keyboard/test
- * http://gist.github.com/413930
- * http://pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap
- * http://sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars
- * http://tjkdesign.com/ez-css/css/base.css
- * http://viget.com/inspire/styling-the-button-element-in-internet-explorer
- * http://code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing
- * http://html5doctor.com/html-5-reset-stylesheet/
- * http://praegnanz.de/weblog/htmlcssjs-kickstart/
- * http://camendesign.com/design/
- * http://yui.yahooapis.com/2.8.1/build/base/base.css
- * http://webaim.org/techniques/css/invisiblecontent/
- * http://drupal.org/node/897638 */
--- a/css/style.css.sass
+++ b/css/style.css.sass
@ -48,16 +48,24 @@ abbr[title]

 html
  overflow-y: scroll
-  background: #F9F5EB
+  background: white

 body
  margin: 0 auto
  padding: 0 0
  font: 100% / 1.4 "museo-sans-1", "museo-sans-2", sans-serif
  font-weight: 100
-  color: rgb(30, 40, 50)
+  color: #262626
  background-color: transparent

+#stripe
+  background: #262626
+  height: 12px
+  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1)
+  canvas
+    height: 12px
+    width: 100%
+
 .container
  margin: 0 auto
  padding: 0 0
@ -129,6 +137,9 @@ h6

 /*  3.TYPOGRAPHY

+.link
+  float: right
+
 .period
  font-style: italic

--- a/humans.txt
+++ b/humans.txt
@ -3,41 +3,12 @@


 /* TEAM */
-  <your title>: <your name>
-  Site: 
-  Twitter: 
-  Location: 
-
-/* THANKS */
-  Names (& URL): 
+  Designer & Coder: Dan Barber
+  Site: http://danbarber.me
+  Twitter: @danbee
+  Location: UK

 /* SITE */
  Standards: HTML5, CSS3
  Components: Modernizr, jQuery
-  Software:
-  
-
-                                    
-                               -o/-                       
-                               +oo//-                     
-                              :ooo+//:                    
-                             -ooooo///-                   
-                             /oooooo//:                   
-                            :ooooooo+//-                  
-                           -+oooooooo///-                 
-           -://////////////+oooooooooo++////////////::    
-            :+ooooooooooooooooooooooooooooooooooooo+:::-  
-              -/+ooooooooooooooooooooooooooooooo+/::////:-
-                -:+oooooooooooooooooooooooooooo/::///////:-
-                  --/+ooooooooooooooooooooo+::://////:-   
-                     -:+ooooooooooooooooo+:://////:--     
-                       /ooooooooooooooooo+//////:-        
-                      -ooooooooooooooooooo////-           
-                      /ooooooooo+oooooooooo//:            
-                     :ooooooo+/::/+oooooooo+//-           
-                    -oooooo/::///////+oooooo///-          
-                    /ooo+::://////:---:/+oooo//:          
-                   -o+/::///////:-      -:/+o+//-         
-                   :-:///////:-            -:/://         
-                     -////:-                 --//:        
-                       --                       -:        
+  Software: Stasis, HAML, SASS, Vim
--- a/img/h/danbarberlogo.png
+++ b/img/h/danbarberlogo.png
--- a/img/l/danbarberlogo.png
+++ b/img/l/danbarberlogo.png
--- a/index.html
+++ b/index.html
@ -121,24 +121,28 @@ URL: http://pixelhum.com/cv
            <li>
              <div>
              <h4>Pixelhum</h4>
-              <p class="period"><time datetime="2010-06-04">Aug 2010</time>&ndash;<time>Present</time></p>
-              <p><a href="http://pixelhum.com">pixelhum.com</a><br />Pixelhum is my own freelance/contract business. I build custom web applications for clients using PHP and Ruby on Rails.</p>
+              <p class="link"><a href="http://pixelhum.com">pixelhum.com</a></p>
+              <p class="period"><time datetime="2010-06-04">Aug&nbsp;2010</time>&ndash;<time>Present</time></p>
+              <p>Pixelhum is my own freelance/contract business. I build custom web applications for clients using PHP and Ruby on Rails.</p>
            </li>
            <li>
              <div>
              <h4>Abiquo</h4>
-              <p class="period"><time datetime="2010-06-04">June 2010</time>&ndash;<time>Oct 2011</time></p>
+              <p class="link"><a href="http://abiquo.com">abiquo.com</a></p>
+              <p class="period"><time datetime="2010-06-04">June&nbsp;2010</time>&ndash;<time>Oct&nbsp;2011</time></p>
              <p>Updating and maintaining Abiquo&rsquo;s websites, written in both PHP and Ruby on Rails. This includes the virtual image exchange site Thunderflash (<a href="http://thunderflash.com">thunderflash.com</a>) which I rebuilt on Rails 3.</p>
            </li>
            <li>
              <h4>Deep Blue Sound</h4>
-              <p class="period"><time datetime="2008-08-26">Aug 2008</time>&ndash;<time datetime="2010-06-04">June 2010</time></p>
+              <p class="link"><a href="http://dbsmusic.co.uk">dbsmusic.co.uk</a></p>
+              <p class="period"><time datetime="2008-08-26">Aug&nbsp;2008</time>&ndash;<time datetime="2010-06-04">June 2010</time></p>
              <p>Administering and augmenting the existing web systems including Moodle, SugarCRM and others. Deputising for the System Administrator.</p>
            </li>
            <li>
              <h4>Footwork Solutions</h4>
-              <p class="period"><time datetime="2002-11-01">Nov 2002</time>&ndash;<time datetime="2008-08-26">Aug 2008</time></p>
-              <p><a href="http://footworksolutions.co.uk">footworksolutions.co.uk</a><br />I was a lead developer and designer on the Halo care co-ordination system, including training and documentation and support. I was also the System Administrator for both the local network and remote server farm.</p>
+              <p class="link"><a href="http://footworksolutions.co.uk">footworksolutions.co.uk</a></p>
+              <p class="period"><time datetime="2002-11-01">Nov&nbsp;2002</time>&ndash;&#8203;<time datetime="2008-08-26">Aug&nbsp;2008</time></p>
+              <p>I was a lead developer and designer on the Halo care co-ordination system, including training and documentation and support. I was also the System Administrator for both the local network and remote server farm.</p>
            </li>
            <li>
              <h4>Granite Internet</h4>
@ -184,6 +188,11 @@ URL: http://pixelhum.com/cv
              <p><a href="http://wedding.coweyes.co.uk">wedding.coweyes.co.uk</a></p>
              <p>My own wedding photo site. Design and implementation of theme for ZenPhoto.</p>
            </li>
+            <li>
+              <h4>My CV</h4>
+              <p><a href="http://pixelhum.com/cv">http://pixelhum.com/cv</a></p>
+              <p>My CV is a responsive design that makes extensive use of HTML5, CSS3, typography and web fonts.</p>
+            </li>
          </ul>
        </section>

--- a/index.html.haml
+++ b/index.html.haml
@ -0,0 +1,17 @@
+.content.clearfix
+  %div{:role => "main"}
+    .container.clearfix
+      %section#profile
+        = render "sections/profile.markdown"
+      %section#skills
+        = render "sections/skills.markdown"
+      %section#experience
+        = render "sections/experience.markdown"
+    .container.clearfix
+      %section#portfolio
+        = render "sections/portfolio.markdown"
+      %section#interests
+        = render "sections/interests.markdown"
+      %section#contact.vcard
+        = render "sections/contact.html.haml"
+  %div{:role => "complementary"}
--- a/js/script.js
+++ b/js/script.js
@ -1,12 +0,0 @@
-if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
-var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
-if (viewportmeta) {
-viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
-document.body.addEventListener('gesturestart', function() {
-viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
-}, false);
-}
-}
-
-$(function() {
-});
--- a/js/script.js.coffee
+++ b/js/script.js.coffee
@ -0,0 +1,17 @@
+if navigator.userAgent.match(/iPhone/i) or navigator.userAgent.match(/iPad/i)
+  viewportmeta = document.querySelectorAll("meta[name=\"viewport\"]")[0]
+  if viewportmeta
+    viewportmeta.content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0"
+    document.body.addEventListener "gesturestart", (->
+      viewportmeta.content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6"
+    ), false
+
+$ ->
+  canvas = document.getElementById("colours")
+  context = canvas.getContext("2d")
+  colours = ['#FF5579', '#8ED600', '#00BAEB']
+  offset = 0
+  for colour in colours
+    context.fillStyle = colour
+    context.fillRect(offset, 0, 48, 12)
+    offset += 48
--- a/layouts/main.html.haml
+++ b/layouts/main.html.haml
@ -0,0 +1,18 @@
+!!!
+/
+  Dan Barber's CV
+  Author: Dan Barber
+  URL: http://pixelhum.com/cv
+/[if IEMobile 7 ] <html class="no-js iem7" manifest="default.appcache?v=1">
+/[if lt IE 7 ] <html class="no-js ie6" lang="en">
+/[if IE 7 ] <html class="no-js ie7" lang="en">
+/[if IE 8 ] <html class="no-js ie8" lang="en">
+/ [if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!
+%html.no-js{:lang => "en", :manifest => "default.appcache?v=1"}
+  / <![endif]
+  %head
+    = render "partials/_head.html.haml"
+  %body.clearfix
+    = render "partials/_header.html.haml"
+    = yield
+    = render "partials/_footer.html.haml"
--- a/partials/._header.html.haml.swp
+++ b/partials/._header.html.haml.swp
--- a/partials/_footer.html.haml
+++ b/partials/_footer.html.haml
@ -0,0 +1,18 @@
+%footer.clearfix{:role => "contentinfo"}
+/ mathiasbynens.be/notes/async-analytics-snippet Change UA-XXXXX-X to be your site's ID
+%script{:src => "//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"}
+:javascript
+  window.jQuery || document.write('<script src="js/libs/jquery-1.5.1.min.js">\x3C/script>')    / Scripts
+%script{:src => "js/plugins.js"}
+%script{:src => "js/script.js"}
+/[if (lt IE 9) &amp; (!IEMobile)]
+  <script src="js/libs/DOMAssistantCompressed-2.8.js"></script>
+  <script src="js/libs/selectivizr-1.0.1.js"></script>
+  <script src="js/libs/respond.min.js"></script>
+/ http://t.co/HZe9oJ4
+:javascript
+  var _gaq=[['_setAccount','UA-603600-3'],['_trackPageview']]; // Change UA-XXXXX-X to be your site's ID
+  (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';
+  s.parentNode.insertBefore(g,s)}(document,'script'));
+%noscript Your browser does not support JavaScript!
--- a/partials/_head.html.haml
+++ b/partials/_head.html.haml
@ -0,0 +1,25 @@
+%meta{:charset => "utf-8"}/
+%title Dan Barber - Web Developer &amp; Designer
+%meta{:content => "", :name => "description"}/
+%meta{:content => "", :name => "author"}/
+/ http://t.co/dKP3o1e
+%meta{:content => "True", :name => "HandheldFriendly"}/
+%meta{:content => "320", :name => "MobileOptimized"}/
+%meta{:content => "width=device-width, target-densitydpi=160dpi, initial-scale=1", :name => "viewport"}/
+/
+  For less capable mobile browsers
+  <link rel="stylesheet" media="handheld" href="css/handheld.css?v=1">
+/ For all browsers
+%link{:href => "css/style.css?v=1", :rel => "stylesheet"}/
+/ JavaScript at bottom except for Modernizr and Typekit
+%script{:src => "js/libs/modernizr-1.7.min.js"}
+/ Typekit
+%script{:src => "http://use.typekit.com/ewi2mjz.js", :type => "text/javascript"}
+:javascript
+  try{Typekit.load();}catch(e){}
+%link{:href => "favicon.png", :rel => "shortcut icon"}/
+/ Microsoft. Delete if not required
+%meta{:content => "on", "http-equiv" => "cleartype"}/
+%meta{:content => "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible"}/
+/ http://t.co/y1jPVnT
+%link{:href => "/", :rel => "canonical"}/
--- a/partials/_header.html.haml
+++ b/partials/_header.html.haml
@ -0,0 +1,8 @@
+%div#stripe
+  .container
+    %canvas#colours{ :width => 890, :height => 12 }
+
+%header.clearfix{:role => "banner"}
+  .container
+    %h1#main_heading Dan Barber
+    %h2 Web Designer &amp;&nbsp;Developer
--- a/sections/contact.html.haml
+++ b/sections/contact.html.haml
@ -0,0 +1,17 @@
+%h3 Contact
+%p.fn.n
+  %span.given-name Dan
+  %span.family-name Barber
+%p.adr
+  %span.street-address 41D Longacre
+  %br/
+  %span.locality Plymouth
+  %br/
+  %span.postal-code PL7 4RQ
+  %br/
+  %span.country-name United Kingdom
+%p
+  %a.email{:href => "mailto:dan.barber@pixelhum.com"} dan.barber@pixelhum.com
+%p.tel +44 (0) 1752 546981
+%p
+  %a.url{:href => "http://pixelhum.com"} http://pixelhum.com
--- a/sections/experience.markdown
+++ b/sections/experience.markdown
@ -0,0 +1,43 @@
+### Experience
+
+#### [Pixelhum](http://pixelhum.com)
+
+Aug 2010 – Present
+
+Pixelhum is my own freelance/contract business. I build custom web applications for clients using PHP and Ruby on Rails.
+
+#### [WebBased Ltd](http://www.webbased.co.uk/webbased)
+
+Dec 2011 – Present
+
+Continued development of a CRM product built using Rails 2.3. Moved version control from SVN to git and brought the Rspec test suite up to date.
+
+#### [Abiquo](http://www.abiquo.com)
+
+June 2010 – Oct 2011
+
+Updating and maintaining Abiquo’s websites, written in both PHP and Ruby on Rails. This includes the virtual image exchange site Thunderflash (thunderflash.com) which I rebuilt on Rails 3.
+
+#### [Deep Blue Sound](http://dbsmusic.co.uk)
+
+Aug 2008 – June 2010
+
+Administering and augmenting the existing web systems including Moodle, SugarCRM and others. Deputising for the System Administrator.
+
+#### [Footwork Solutions](http://footworksolutions.co.uk)
+
+Nov 2002 – Aug 2008
+
+I was a lead developer and designer on the Halo care co-ordination system, including training and documentation and support. I was also the System Administrator for both the local network and remote server farm.
+
+#### Granite Internet
+
+2000 – 2002
+
+Designed and developed and maintained several property company websites based on a single code base. Setup Windows, Linux and FreeBSD servers.
+
+#### North Devon Journal
+
+1998 – 2000
+
+Set advertisements using QuarkXpress and was responsible for laying out the classified pages. Developed a love for typography.
--- a/sections/interests.markdown
+++ b/sections/interests.markdown
@ -0,0 +1,7 @@
+#### Interests
+
+* Drumming
+* Music
+* Sound Engineering &amp; Recording
+* Photography
+* Cycling
--- a/sections/portfolio.markdown
+++ b/sections/portfolio.markdown
@ -0,0 +1,43 @@
+### Portfolio
+
+#### Soundunlimited
+
+[soundunlimited.co.uk](http://www.soundunlimited.co.uk)
+
+Complete online shop system implemented using Ruby on Rails. Rspec was used for testing.
+
+#### NeoMPC
+
+[pixelhum.com/neompc](http://pixelhum.com/neompc)
+
+Web based MPD client. Design and execution. Built on PHP and jQuery and uses mpd.class.php.
+
+#### Footwork Solutions
+
+[footworksolutions.co.uk](http://footworksolutions.co.uk)
+
+Company logo and site design. I built the HTML for the Drupal template.
+
+#### Halo
+
+haloteam.com
+
+Hosted care co-ordination system for drug treatment agencies. Design, initial implementation and ongoing development of key modules.
+
+#### Dan Barber Photo
+
+[danbarberphoto.com](http://danbarberphoto.com)
+
+My own photography portfolio site. Designed and implemented the whole site using Ruby on Rails and jQuery, including backend admin pages.
+
+#### Dan &amp; Katie
+
+[wedding.coweyes.co.uk](http://wedding.coweyes.co.uk)
+
+My own wedding photo site. Design and implementation of theme for ZenPhoto.
+
+#### My CV
+
+[danbarber.me/cv](http://danbarber.me/cv)
+
+My CV is a responsive design built using Stasis, HAML, SASS and Markdown that makes extensive use of HTML5, CSS3, typography and web fonts.
--- a/sections/profile.markdown
+++ b/sections/profile.markdown
@ -0,0 +1,3 @@
+### Profile
+
+I have 12 years of experience building web sites and web applications, from small simple websites and services to large enterprise level systems. I focus on simple, usable interfaces and prefer to work by prototyping ideas.
--- a/sections/skills.markdown
+++ b/sections/skills.markdown
@ -0,0 +1,34 @@
+### Skills
+
+#### Web Technologies
+
+* HTML5/CSS3
+* Javascript/jQuery
+* Ruby on Rails
+* PHP
+
+#### Databases
+
+* SQL
+* PostgreSQL
+* MySQL
+* SQLite3
+
+#### Design
+
+* Photoshop/GIMP
+* Illustrator
+* InDesign
+* Typography
+
+#### Linux Servers
+
+* Web (Apache)
+* MySQL
+* PostgreSQL
+* DNS
+* Samba
+
+#### Networking
+
+Good knowledge of cabling, routing and protocols.