danbarber/cv
1
0
Fork 0
mirror of https://github.com/danbee/cv synced 2025-03-04 08:59:12 +00:00
Code Issues Releases Wiki Activity

Content is pretty much there. More layout tweaks. hCard for contact

Browse Source 
info.
This commit is contained in:
Dan Barber 2011-06-17 18:47:02 +01:00
parent d0e895200e
commit 787112ef75
10 changed files with 229 additions and 324 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
apple-touch-icon-114x114-precomposed.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

BIN
apple-touch-icon-57x57-precomposed.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 640 B

BIN
apple-touch-icon-72x72-precomposed.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 747 B

BIN
apple-touch-icon-precomposed.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 640 B

BIN
apple-touch-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 640 B

342
css/style.css
View File

@ -61,24 +61,12 @@ cursor: help; }
/* 1.ROOT */
html {
overflow-y: scroll;
background: #F9F5EB }
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: rgb(40,40,40);
background-color: transparent;
}
body { margin: 0 auto; padding: 0 0; font: 100%/1.4 "museo-sans-1","museo-sans-2", sans-serif;
font-weight: 100; color: rgb(40,40,40); background-color: transparent; }
#page {
margin: 0 auto;
padding: 0 0;
width: 90% /* 252px */;
}
.container { margin: 0 auto; padding: 0 0; width: 90% /* 252px */; }
/* 2.HEADINGS */
@ -87,14 +75,17 @@ h2,
h3,
h4,
h5,
h6 { font-family: "museo-slab-1","museo-slab-2", "Helvetica Neue", Helvetica, Arial, serif; font-weight: 700;
text-shadow: 1px 1px 2px white;}
h6 { font-family: "museo-slab-1","museo-slab-2", "Helvetica Neue", Helvetica, Arial, serif; font-weight: black;
text-shadow: 1px 1px 1px white;}
h1 { margin-bottom: .1em; font-size: 3em; /* 48 / 16 = 3 */ line-height: 1.2; font-weight: 900; text-align: center; width: 100%; }
h1 { margin-top: 0; margin-bottom: .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/m/danbarberlogo.png) center center no-repeat; background-size: 95px; }
background: url(../img/l/danbarberlogo.png) center center no-repeat; background-size: 95px; }
h2 { margin-bottom: .75em; font-size: 1.7em; /* 36 / 16 = 2 */ line-height: 1.2; text-align: center; color: #464646; }
/* 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: .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; }
@ -106,144 +97,97 @@ 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 */ }
address { margin-bottom: 0.75em; font-size: 1em; /* 16 / 16 = 1 */ }
ul,
ol {
margin: 0 0 0 -24px;
padding-left: 24px; }
ol { margin: 0 0 0 -24px; padding-left: 24px; }
ul {
list-style-type: disc; }
ul ul { padding-left: 0; }
ol {
list-style-type: decimal; }
ul { list-style-type: disc; }
ol { list-style-type: decimal; }
li ul,
li ol {
margin: 0;
font-size: 1em; /* 16 / 16 = 1 */ }
li ol { margin: 0; font-size: 1em; /* 16 / 16 = 1 */ }
section { border-top: 2px solid black; padding-top: 1em; margin-bottom: 2em; }
.container>section { border-top: 2px solid #666; padding-top: 1em; margin-bottom: 2em; }
section ul, section ol { list-style: none; }
.container>section ul, .container>section ol { list-style: none; }
dl,
dd {
margin-bottom: 1.5em; }
dd { margin-bottom: 1.5em; }
dt {
font-weight: normal; }
dt { font-weight: normal; }
blockquote {
margin: 0 0 1.5em -24px;
padding-left: 24px;
border-left: 1px solid rgb(200,200,200);
font-style: italic; }
blockquote { margin: 0 0 1.5em -24px; padding-left: 24px; border-left: 1px solid rgb(200,200,200); font-style: italic; }
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none; }
q:after { content: ''; content: none; }
b,
strong {
font-weight: bold; }
strong { font-weight: bold; }
i,
em {
font-style: italic; }
em { font-style: italic; }
sup,
sub {
position: relative;
font-size: 75%;
line-height: 0; }
sub { position: relative; font-size: 75%; line-height: 0; }
sup {
top: -.5em; }
sup { top: -.5em; }
sub {
bottom: -.25em; }
sub { bottom: -.25em; }
address {
font-style: normal; }
address { font-style: normal; }
pre {
margin-bottom: 1.5em;
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word; }
pre { margin-bottom: 1.5em; white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
pre,
code {
font: .875em 'andale mono', 'lucida console', monospace;
line-height: 1.5; }
code { font: .875em 'andale mono', 'lucida console', monospace; line-height: 1.5; }
small {
font-size: 1em; /* 16 / 16 = 1 */ }
small { font-size: 1em; /* 16 / 16 = 1 */ }
/* 4.LINKS */
a,
a:visited {
outline: none;
color: rgb(23,119,175);
text-decoration: none; }
a:visited { outline: none; color: rgb(23,119,175); text-decoration: none; }
a:hover {
outline: none;
color: rgb(40,40,40);
text-decoration: underline; }
a:hover,
a:focus { outline: none; color: rgb(40,40,40); text-decoration: underline; }
a:active,
a:focus {
outline: none;
color: rgb(0,0,0); }
a:active { outline: none; color: rgb(0,0,0); }
/* 5.FIGURES & IMAGES */
figure {
margin-bottom: 1.5em; }
figure { margin-bottom: 1.5em; }
figure img,
figure object,
figure embed {
margin-bottom: .75em;
max-width: 100%; }
figure embed { margin-bottom: .75em; max-width: 100%; }
figcaption {
display: block;
font-weight: normal; }
figcaption { display: block; font-weight: normal; }
/* 6.TABLES */
table {
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 1.4em;
width: 100%;
font-size: .875em; /* 14 / 16 = .875 */ }
table { border-collapse: collapse; border-spacing: 0; margin-bottom: 1.4em; width: 100%; font-size: .875em; /* 14 / 16 = .875 */ }
th {
font-weight: bold; }
th { font-weight: bold; }
th, td, caption {
padding: .25em 10px .25em 5px; }
th, td, caption { padding: .25em 10px .25em 5px; }
tfoot {
font-style: italic; }
tfoot { font-style: italic; }
caption {
background-color: transparent; }
caption { background-color: transparent; }
/* 7.FORMS (See css/mylibs/forms.css) */
@ -256,120 +200,64 @@ background-color: transparent; }
/* 14.GLOBAL OBJECTS */
.clearfix {
zoom: 1; }
.clearfix { zoom: 1; }
.clearfix:before,
.clearfix:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden; }
.clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after {
clear: both; }
.clearfix:after { clear: both; }
/* 15.VENDOR-SPECIFIC */
body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }
body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
a:link {
-webkit-tap-highlight-color: rgb(52,158,219); }
a:link { -webkit-tap-highlight-color: rgb(52,158,219); }
::-webkit-selection {
background: rgb(23,119,175);
color: rgb(250,250,250);
text-shadow: none; }
::-webkit-selection { background: rgb(23,119,175); color: rgb(250,250,250); text-shadow: none; }
::-moz-selection {
background: rgb(23,119,175);
color: rgb(250,250,250);
text-shadow: none; }
::-moz-selection { background: rgb(23,119,175); color: rgb(250,250,250); text-shadow: none; }
::selection {
background: rgb(23,119,175);
color: rgb(250,250,250);
text-shadow: none; }
::selection { background: rgb(23,119,175); color: rgb(250,250,250); text-shadow: none; }
/* input[type=search] {
-webkit-appearance: none; }
/* input[type=search] { -webkit-appearance: none; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
display: none; } */
input[type="search"]::-webkit-search-cancel-button { display: none; } */
::-webkit-input-placeholder {
padding: 10px;
font-size: .875em;
line-height: 1.4; }
::-webkit-input-placeholder { padding: 10px; font-size: .875em; line-height: 1.4; }
input:-moz-placeholder {
padding: 10px;
font-size: .875em;
line-height: 1.4; }
input:-moz-placeholder { padding: 10px; font-size: .875em; line-height: 1.4; }
.ie7 img,
.iem7 img {
-ms-interpolation-mode: bicubic; }
.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; }
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; }
.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; }
.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 { position: absolute; clip: rect(0 0 0 0); overflow: hidden; margin: -1px; padding: 0; height: 1px; width: 1px; border: 0; }
/* Allow an element to be focusable via keyboard */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
position: static;
clip: auto;
overflow: visible;
height: auto;
margin: 0;
width: auto; }
.visuallyhidden.focusable:focus { position: static; clip: auto; overflow: visible; height: auto; margin: 0; width: auto; }
/* Hide but maintain layout */
.invisible {
visibility: hidden; }
.invisible { visibility: hidden; }
/* 16.TEMPLATE SPECIFICS */
#goog-fixurl ul {
list-style-type: none; }
#goog-fixurl ul { list-style-type: none; }
#goog-fixurl input {
margin-bottom: 1.5em; }
#goog-fixurl input { margin-bottom: 1.5em; }
/* 17.MODERNIZR */
@ -377,46 +265,28 @@ margin-bottom: 1.5em; }
/*Print __________________________________________________________________________________________________________ */
@media print {
* {
background: transparent !important;
color: black !important;
text-shadow: none !important;
filter: none !important;
-ms-filter: none !important; }
* { background: transparent !important; color: black !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; }
a, a:visited {
color: #444 !important;
text-decoration: underline; }
a, a:visited { color: #444 !important; text-decoration: underline; }
a[href]:after {
content: " (" attr(href) ")"; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after {
content: " (" attr(title) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: ""; }
a[href^="#"]:after { content: ""; }
pre, blockquote {
border: 1px solid #999;
page-break-inside: avoid; }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead {
display: table-header-group; }
thead { display: table-header-group; }
tr, img {
page-break-inside: avoid; }
tr, img { page-break-inside: avoid; }
@page {
margin: .5cm; }
@page { margin: .5cm; }
p, h2, h3 {
orphans: 3;
widows: 3; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 {
page-break-after: avoid; }
h2, h3 { page-break-after: avoid; }
}/*/mediaquery*/
/*480px __________________________________________________________________________________________________________ */
@ -425,8 +295,8 @@ page-break-after: avoid; }
/* 1.ROOT */
body { font-size: 1.05em; }
/* 2.HEADINGS */
h1 { margin-top: 0.5em; text-align: left; margin-bottom: 0; }
h1:before { float: right; font-size: 2em; width: 130px; background-size: 60%; background-position: top center; position: relative; top: 0em; text-align: right; margin-bottom: -0.5em; }
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 */
@ -436,6 +306,10 @@ h2 { text-align: left; }
/* 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 */
@ -446,6 +320,35 @@ h2 { text-align: left; }
}/*/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 { float: left; width: 63%; }
#experience { float: left; width: 63%; }
#skills { float: right; width: 30%; margin-left: 7%; }
#portfolio { float: left; width: 63%;}
#interests { float: right; width: 30%; margin-left: 7%; }
#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) {
@ -453,7 +356,7 @@ h2 { text-align: left; }
body { font-size: 1.1em; }
/* 2.HEADINGS */
h1 { font-size: 5em; margin-bottom: 0em; }
h1:before { background-size: 100%; background-position: top center; position: relative; top: 0em; }
h1:before { width: 130px; background-size: 130px; background-position: top center; position: relative; top: 0em; }
h2 { font-size: 2em; }
/* 3.TYPOGRAPHY */
/* 4.LINKS */
@ -463,10 +366,6 @@ h2 { font-size: 2em; }
/* 8.BANNER */
/* 9.NAVIGATION */
/* 10.CONTENT */
#experience { float: left; width: 63%; }
#skills { float: right; width: 30%; margin-left: 7%; }
#portfolio { float: left; width: 63%;}
#interests { float: right; width: 30%; margin-left: 7%; }
/* 11.MAIN */
/* 12.COMPLIMENTARY */
/* 13.CONTENTINFO */
@ -481,7 +380,7 @@ h2 { font-size: 2em; }
@media only screen and (min-width: 992px) {
/* 1.ROOT */
#page { width: 890px; }
.container { width: 890px; }
/* 2.HEADINGS */
/* 3.TYPOGRAPHY */
/* 4.LINKS */
@ -529,8 +428,9 @@ h2 { font-size: 2em; }
/* 1.ROOT */
/* 2.HEADINGS */
h1:before { background-image: url(../img/h/danbarberlogo.png); }
/* 3.TYPOGRAPHY */
h1:before { background-image: url(../img/h/danbarberlogo.png); }/* 4.LINKS */
/* 4.LINKS */
/* 5.FIGURES & IMAGES */
/* 6.TABLES */
/* 7.FORMS */

BIN
img/h/danbarberlogo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.4 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
img/l/danbarberlogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
img/m/danbarberlogo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.1 KiB

211
index.html
View File

@ -1,10 +1,9 @@
<!DOCTYPE html>
<!--
320 and Up boilerplate extension
Author: Andy Clarke
Version: 0.9b
URL: http://stuffandnonsense.co.uk/projects/320andup
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"><![endif]-->
@ -38,22 +37,9 @@ URL: http://stuffandnonsense.co.uk/projects/320andup
<script type="text/javascript" src="http://use.typekit.com/ewi2mjz.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!-- For iPhone 4 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-touch-icon.png">
<!-- For iPad 1-->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png">
<!-- For iPhone 3G, iPod Touch and Android -->
<link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png">
<!-- For Nokia -->
<link rel="shortcut icon" href="img/l/apple-touch-icon.png">
<!-- For everything else -->
<link rel="shortcut icon" href="/favicon.ico">
<!--iOS. Delete if not required -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-startup-image" href="img/splash.png">
<!--Microsoft. Delete if not required -->
<meta http-equiv="cleartype" content="on">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@ -64,57 +50,62 @@ URL: http://stuffandnonsense.co.uk/projects/320andup
<body class="clearfix">
<div id="page">
<header role="banner" class="clearfix">
<header role="banner" class="clearfix">
<div class="container">
<h1 id="main_heading">Dan Barber</h1>
<h2>Web Designer &amp;&nbsp;Developer</h2>
</header>
</div>
</header>
<div class="content clearfix">
<div class="content clearfix">
<div role="main">
<div class="clearfix">
<div class="container clearfix">
<section id="profile">
<h3>Profile</h3>
<p>I have 11 years of experience building web sites and web applications, from small simple services to large enterprise level systems. I focus on simple, usable interfaces and prefer to work by prototyping ideas.</p>
<p>I have 11 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.</p>
</section>
<section id="skills">
<h3>Skills</h3>
<ul>
<li>
<h4>HTML/CSS</h4>
<p>Excellent knowledge of standards and browser engines.</p>
<h4>Web Technologies</h4>
<ul>
<li>HTML5/CSS3</li>
<li>Javascript/jQuery</li>
<li>Ruby on Rails</li>
<li>PHP</li>
</ul>
</li>
<li>
<h4>Ruby on Rails</h4>
<p>Intermediate level.</p>
<h4>Databases</h4>
<ul>
<li>SQL</li>
<li>PostgreSQL</li>
<li>MySQL</li>
<li>SQLite3</li>
</ul>
</li>
<li>
<h4>PHP</h4>
<p>Expert level.</p>
</li>
<li>
<h4>SQL/&shy;MySQL/&shy;PostgreSQL</h4>
<p>Excellent knowledge of SQL and configuration.</p>
</li>
<li>
<h4>Javascript/jQuery</h4>
<p>Sound working knowledge</p>
</li>
<li>
<h4>Typography</h4>
<p>Good working knowledge.</p>
</li>
<li>
<h4>Photoshop/GIMP</h4>
<p>Good working knowledge.</p>
<h4>Design</h4>
<ul>
<li>Photoshop/GIMP</li>
<li>Illustrator</li>
<li>InDesign</li>
<li>Typography</li>
</ul>
</li>
<li>
<h4>Linux Servers</h4>
<p>Web (Apache), MySQL, PostgreSQL, DNS, Samba</p>
<ul>
<li>Web (Apache)</li>
<li>MySQL</li>
<li>PostgreSQL</li>
<li>DNS</li>
<li>Samba</li>
</ul>
</li>
<li>
<h4>Networking</h4>
@ -122,94 +113,108 @@ URL: http://stuffandnonsense.co.uk/projects/320andup
</li>
</ul>
</section>
<section id="experience">
<h3>Experience</h3>
<ul>
<li>
<div>
<h4>Abiquo</h4>
<p>June 2010&ndash;Present</p>
<p>[to be written]</p>
<p class="period"><time datetime="2010-06-04">June 2010</time>&ndash;<time>Present</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>Aug 2008&ndash;June 2010</p>
<p class="period"><time datetime="2008-08-26">Aug 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>Nov 2002&ndash;Aug 2008</p>
<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>
</li>
<li>
<h4>Granite Internet</h4>
<p>2000&ndash;2002</p>
<p class="period"><time>2000</time>&ndash;<time>2002</time></p>
<p>Designed and developed and maintained several property company websites based on a single code base. Setup Windows, Linux and FreeBSD servers.</p>
</li>
<li>
<h4>North Devon Journal</h4>
<p>1998&ndash;2000</p>
<p class="period"><time>1998</time>&ndash;<time>2000</time></p>
<p>Set advertisements using QuarkXpress and was responsible for laying out the classified pages. Developed a love for typography.</p>
</li>
</ul>
</section>
</div>
<section id="portfolio">
<h3>Portfolio</h3>
<ul>
<li>
<h4>NeoMPC</h4>
<p><a href="http://pixelhum.com/neompc">pixelhum.com/neompc</a></p>
<p>Web based MPD client. Design and execution. Built on PHP and jQuery and uses mpd.class.php.</p>
</li>
<li>
<h4>Footwork Solutions</h4>
<p><a href="http://footworksolutions.co.uk">footworksolutions.co.uk</a></p>
<p>Company logo and site design. I built the HTML for the Drupal template.</p>
</li>
<li>
<h4>Halo</h4>
<p>haloteam.com</p>
<p>Hosted care co-ordination system for drug treatment agencies. Design, initial implementation and ongoing development of key modules.</p>
</li>
<li>
<h4>Dan Barber Photo</h4>
<p><a href="http://danbarberphoto.com">danbarberphoto.com</a></p>
<p>My own photography portfolio site. Designed and implemented the whole site using Ruby on Rails and jQuery, including backend admin pages.</p>
</li>
<li>
<h4>Dan &amp; Katie</h4>
<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>
</ul>
</section>
<div class="container clearfix">
<section id="portfolio">
<h3>Portfolio</h3>
<section id="interests">
<h3>Interests</h3>
<ul>
<li>Drumming</li>
<li>Music</li>
<li>Sound Engineering &amp; Recording</li>
<li>Photography</li>
<li>Cycling</li>
</ul>
</section>
<ul>
<li>
<h4>NeoMPC</h4>
<p><a href="http://pixelhum.com/neompc">pixelhum.com/neompc</a></p>
<p>Web based MPD client. Design and execution. Built on PHP and jQuery and uses mpd.class.php.</p>
</li>
<li>
<h4>Footwork Solutions</h4>
<p><a href="http://footworksolutions.co.uk">footworksolutions.co.uk</a></p>
<p>Company logo and site design. I built the HTML for the Drupal template.</p>
</li>
<li>
<h4>Halo</h4>
<p>haloteam.com</p>
<p>Hosted care co-ordination system for drug treatment agencies. Design, initial implementation and ongoing development of key modules.</p>
</li>
<li>
<h4>Dan Barber Photo</h4>
<p><a href="http://danbarberphoto.com">danbarberphoto.com</a></p>
<p>My own photography portfolio site. Designed and implemented the whole site using Ruby on Rails and jQuery, including backend admin pages.</p>
</li>
<li>
<h4>Dan &amp; Katie</h4>
<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>
</ul>
</section>
<section id="interests">
<h3>Interests</h3>
<ul>
<li>Drumming</li>
<li>Music</li>
<li>Sound Engineering &amp; Recording</li>
<li>Photography</li>
<li>Cycling</li>
</ul>
</section>
<section id="contact" class="vcard">
<h3>Contact</h3>
<p class="fn n"><span class="given-name">Dan</span> <span class="family-name">Barber</span></p>
<p class="adr"><span class="street-address">41D Longacre</span><br />
<span class="locality">Plymouth</span><br />
<span class="postal-code">PL7 4RQ</span><br />
<span class="country-name">United Kingdom</span></p>
<p><a class="email" href="mailto:dan.barber@pixelhum.com">dan.barber@pixelhum.com</a></p>
<p class="tel">+44 (0) 1752 546981</p>
<p><a class="url" href="http://pixelhum.com">http://pixelhum.com</a></p>
</section>
</div>
</div>
<div role="complementary">
</div>
</div>
<footer role="contentinfo" class="clearfix">
</footer>
</div>
<footer role="contentinfo" class="clearfix">
</footer>
<!-- 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"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.5.1.min.js">\x3C/script>')</script>