Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
236 lines (188 sloc) 11.9 KB
// Set up the amount of possible background images we have.
// Feels wrong hard-coding it, but I'm not a PHP dev.
$bgImages = 6;
// See if someone has set a query string to permalink a specific background image, check it is valid.
// first of all let's sanitise any input or default to out-of-range if none present
$bg = isset($_GET['bg']) ? intval($_GET['bg']) : 0;
// we know $bg is an int one way or the other, so check it's in range and randomise if not
if ($bg < 1 || $bg > $bgImages) {
$bg = rand(1,$bgImages);
<!DOCTYPE html>
<html lang=en class=bg-<?= $bg ?>>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<meta name=apple-mobile-web-app-capable content=yes>
<title>;Harry Roberts; web designer and developer, type nerd and trials rider.</title>
<link rel=stylesheet href=/css/style.css>
<link rel="shortcut icon" href=/icon.png>
<link rel=apple-touch-icon-precomposed href=/icon.png>
<script src=></script>
<!--[if lt IE 9]>
<script src="//"></script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1856861-10']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
<div class=page>
<h1 class=accessibility>Harry Roberts, web designer and developer</h1>
<article class=intro>
<a href=/ class=logo><img src=img/content/logo.png alt="Harry Roberts logo"></a>
<p class=tagline>Web developer and type nerd<span class=accessibility> from Leeds, UK</span></p>
<p>Hi, I&rsquo;m <b>Harry Roberts</b>. I am a 22 year old web designer, developer, writer, speaker, type nerd and trials rider from Leeds, UK. I am currently <b>Senior <abbr title="User Interface">UI</abbr> Developer</b> at BSkyB.</p>
<p>I share, write and tweet about web development, I am passionate about best practices, ethics and building websites properly, I am on <a href=>Smashing Magazine</a>&rsquo;s Experts Panel and I am a <a href=>.net magazine awards finalist</a>.</p>
<h2>Skills and competencies</h2>
<ul class=tag-list>
<li>Front-end architecture</li>
<li><abbr title="User eXperience">UX</abbr></li>
<li><abbr title="User Interface">UI</abbr></li>
<dt><a href=>CSS Wizardry</a></dt>
<dd>My blog and portfolio, CSS Wizardry is an Alexa top 100,000 ranked website with a host of articles and resources for web designers and developers&hellip;</dd>
<dt><a href=></a></dt>
<dd>My (much neglected) personal website for hosting my trials videos and the like&hellip;</dd>
<li><a href=><s><cite>Digital Barn</cite>&mdash;11 February, 2012. Barnsley, UK</s></a></li>
<li><a href=><s><cite>Front-Trends</cite>&mdash;26&ndash;27 April, 2012. Warsaw, Poland</s></a></li>
<li><a href=><cite>Canvas Conf.</cite>&mdash;7 September, 2012. Birmingham, UK</a></li>
<li><a href=><cite>Digital Barn</cite>&mdash;22 September, 2012. Barnsley, UK</a></li>
<p>Handpicked articles of mine&hellip;</p>
<li><a href=>Reset restarted</a></li>
<li><a href=>Writing efficient CSS seletors</a></li>
<li><a href=>Writing CSS for others<small>&mdash;Smashing Magazine</small></a></li>
<li><a href=>Technical Type Tips<small>&mdash;Smashing Magazine</small></a></li>
<li><a href=>Your logo is an image, not a <code>&lt;h1&gt;</code></a> and <a href=>More logo markup tips</a></li>
<li><a href=>HTML(5) and text-level semantics</a></li>
<li><a href=>Namespacing fragment identifiers</a></li>
<li><a href=>Building better grid systems</a></li>
<h2>Out and about</h2>
<p>Follow/stalk me on the following:</p>
<ul class="social cf">
<li class=twitter><a href= title="My CSS Wizardry Twitter account">Twitter</a></li>
<li class=github><a href= title="My code on GitHub">GitHub</a></li>
<li class=dribbble><a href= title="Works-in-progress on Dribbble">Dribbble</a></li>
<li class=forrst><a href= title="Odd bits and pieces on Forrst">Forrst</a></li>
<li class=google-plus><a href= title="Add me on Google+">Google+</a></li>
<li class=instagram><a href= title="My photos on Instagram">Instagram</a></li>
<li class=zootool><a href= title="Things I bookmark on ZooTool">ZooTool</a></li>
<li class=vimeo><a href= title="My videos on Vimeo">Vimeo</a></li>
<li class=youtube><a href= title="My videos on YouTube">YouTube</a></li>
<li class=rss><a href= title="Subscribe to CSS Wizardry&rsquo;s RSS Feed">CSS Wizardry RSS</a></li>
<ul class=projects>
<a href=>
<img src=img/content/projects/inuit.css.gif alt="inuit.css logo">
<p>inuit.css is a pragmatic, production ready CSS framework which provides developers with a solid baseline for responsive and extensible web projects. <b class=go>Check it out</b></p>
<a href=>
<h3>Fluid Grids</h3>
<p><cite>Fluid Grids</cite> is a tiny app that proved a big hit. I created a PHP script that would give me a fluid grid system if I gave it some fixed values. It proved pretty useful so I skinned it up and gave it away. <b class=go>Give it a go</b></p>
<a href=>
<p><cite>in:focus</cite> is a small Q&amp;A site on which I interview the web&rsquo;s best. <b class=go>Read the interviews</b></p>
<a href=>
<p>Find even more projects on <b class=go>my resources page</b></p>
<p>Some of the albums I&rsquo;ve been listening to on Spotify lately.</p>
<li><a href= title="Open with Spotify"><b>High Contrast</b>&mdash;<cite>High Society</cite></a></li>
<li><a href= title="Open with Spotify"><b>Netsky</b>&mdash;<cite>Netsky</cite></a></li>
<li><a href= title="Open with Spotify"><b>London Elektricity</b>&mdash;<cite>Syncopated City</cite></a></li>
<li><a href= title="Open with Spotify"><b>Bonobo</b>&mdash;<cite>Black Sands</cite></a></li>
<li><a href= title="View on Bandcamp"><b>Lunar C</b>&mdash;<cite>The Lunar CD</cite></a></li>
<p><a href=>Check me on Spotify&hellip;</a></p>
<p>A (loose) top five favourite films&hellip; kinda.</p>
<li><a href= title="View on IMDb"><cite>The Consequences of Love</cite></a></li>
<li><a href= title="View on IMDb"><cite>Leon: The Professional</cite></a></li>
<li><a href= title="View on IMDb"><cite>The Departed</cite></a></li>
<li><a href= title="View on IMDb"><cite>Fight Club</cite></a></li>
<li><a href= title="View on IMDb"><cite>Full Metal Jacket</cite></a></li>
<p><a href=",%20check%20out%20">Recommend me some more&hellip;</a></p>
<h2>Hit me up&hellip;</h2>
<p>Feel free to get in touch by either <a href=",%20">Tweeting at me</a> or sending an email to <a>hry [at] rbrts [dot] me</a>.</p>
<p>This hub-site is &copy; Harry Roberts <?= date("Y") ?>. It is built with HTML(5) and CSS(3); the source is available on <a href=>GitHub</a> (poke through, please don&rsquo;t steal) and the idea for it was born from seeing <a href=>Antonio Carusone&rsquo;s beautiful personal page</a>. The logo was designed by <a href=>Bryan James</a> and all photography is by <a href=>Suzanna Haworth</a>. Hosting is provided by <a href=>Dan Bentley</a>.</p>
<h3>Background images</h3>
<p>All background images are of me and taken by Suzanna Haworth.</p>
<ul class=images>
<li class=bg-link-1><a href= title="Me at Tarty Days trials festival">View background image<span class="accessibility"> one</span></a></li>
<li class=bg-link-2><a href= title="Me in Leeds">View background image<span class="accessibility"> two</span></a></li>
<li class=bg-link-3><a href= title="Me riding trials in Leeds">View background image<span class="accessibility"> three</span></a></li>
<li class=bg-link-4><a href= title="Me climbing Snowdon">View background image<span class="accessibility"> four</span></a></li>
<li class=bg-link-5><a href= title="Me on the summit of Ben Nevis">View background image<span class="accessibility"> four</span></a></li>
<li class=bg-link-6><a href= title="Me on stage at Front-Trends 2012">View background image<span class="accessibility"> four</span></a></li>
Something went wrong with that request. Please try again.