index.html

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
	<head xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" itemscope="" itemtype="http://schema.org/Article">
		<meta charset="utf-8">

		<title>James Bell | Portfolio</title>
		<meta name="description" content="A showcase of my work which I will try and keep up to date!">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<meta property="og:type" content="website"/>
		<meta property="og:title" content="James Bell"/>
		<meta property="og:description" content="A showcase of my work which I will try and keep up to date!"/>
		<meta property="og:url" content="https://james-bell.co.uk"/>
		<meta property="og:image" content="https://james-bell.co.uk/dist/img/opengraph.png"/>
		<meta name="twitter:site" content="@jamesryanbell">

		<link rel="dns-prefetch" href="https://www.googletagmanager.com">
		<link rel="dns-prefetch" href="https://www.google-analytics.com">

		<style>
*{box-sizing:border-box;margin:0;border:0;padding:0}html{font-size:13px}body{background:#272822;color:#f8f8f2}main{padding:19.5px;padding:1.5rem;max-width:660.4px;max-width:50.8rem;margin:0 auto}html{font:400 13px monospace}code,pre{font-size:13px;font-size:1rem}h1,h2{font-size:13px;font-size:1rem;font-weight:400;display:inline;margin:0}p{margin:0}em{font-style:normal}main{counter-reset:line-numbers}pre{margin:0;overflow:inherit;white-space:normal;word-break:break-word}code{display:block;counter-increment:line-numbers;position:relative;margin:0;margin-left:-6.5px;margin-left:-.5rem}code:before{content:counter(line-numbers);position:absolute;top:0;bottom:0;left:-6.5px;left:-.5rem;color:#8f908a}code pre{display:inline-block;padding-left:13px;padding-left:1rem}.element{color:#f92672}.comment{color:#75715e}.comment code{padding-left:13px;padding-left:1rem;white-space:pre-line}.comment a{color:#75715e}.text{color:#f8f8f2}.logo,.logo a{color:#f7941d}.attr{color:#a6e22e}.quotes{color:#e6db74}a{text-decoration:none;color:#f8f8f2}.bullet{display:list-item;margin-left:6.5px;margin-left:.5rem}		</style>
	</head>
	<body>
		<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PMW3C9" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
		<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
				new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
				j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
				'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
				})(window,document,'script','dataLayer','GTM-PMW3C9');</script>
		<main>


	<section>
		<pre class="comment">
			<code>/**</code>
			<code>* <em class="element">@author</em> <span class="logo"><h1>James Bell</h1> <<a target="_blank" href="https://twitter.com/jamesryanbell">@jamesryanbell</a>></span></code>
			<code>* <em class="element">@description</em> <h2>A showcase of my work which I will try and keep up to date!</h2></code>
			<code>* <em class="element">@uses</em> HTML5, Sass, JS, Grunt</code>
			<code>* <em class="element">@link</em> <a target="_blank" href="https://github.com/jamesryanbell/portfolio">https://github.com/jamesryanbell/portfolio</a></code>
			<code>*/</code>
		</pre>
	</section>

	<section>
		<code><br></code>

		<code><pre><em class="element"><span class="text">&lt;</span>main<span class="text">&gt;</span></em></pre></code>

		<code><br></code>

		<pre class="comment">
			<code><pre>/**</pre></code>
			<code><pre>* Welcome to my portfolio</pre></code>
			<code><pre>* <pre>I'm happiest when I get to spend my time within Sublime tinkering with sass, node, php or another language I can get my hands on.</pre></pre></code>
			<code><pre>*/</pre></code>
		</pre>

		<code><pre><pre><em class="element"><span class="text">&lt;</span>section<span class="text">&gt;</span></em></pre></pre></code>
			<code><pre><pre><pre><em class="element"><span class="text">&lt;</span>article <em class="attr">id</em><em class="text">=</em><em class="quotes">"about-me"</em><span class="text">&gt;</span></em></pre></pre></pre></code>
				<code><pre><pre><pre><pre><p>&lt;<em class="element">p</em>&gt;As far back as I can remember I have been fascinated with technology.&lt;<em class="element">/p</em>&gt;</p></pre></pre></pre></pre></code>
				<code><pre><pre><pre><pre><p>&lt;<em class="element">p</em>&gt;Thankfully for me I've managed to make that passion my day job.&lt;<em class="element">/p</em>&gt;</p></pre></pre></pre></pre></code>
				<code><pre><pre><pre><pre><p>&lt;<em class="element">p</em>&gt;When I'm not coding I enjoy running long distances to raise money for &lt;<em class="element">a</em> <em class="attr">href</em><em class="text">=</em><em class="quotes">"http://justgiving.com/jamesryanbell"</em>&gt;<a href="http://justgiving.com/jamesryanbell">Diabetes UK</a>&lt;<em class="element">/a</em>&gt;.&lt;<em class="element">/p</em>&gt;</p></pre></pre></pre></pre></code>
			<code><pre><pre><pre><em class="element"><span class="text">&lt;/</span>article<span class="text">&gt;</span></em></pre></pre></pre></code>
		<code><pre><pre><em class="element"><span class="text">&lt;/</span>section<span class="text">&gt;</span></em></pre></pre></code>

		<code><br></code>

		<pre class="comment">
			<code><pre>/**</pre></code>
			<code><pre>* My work</pre></code>
			<code><pre>* <pre>The web has changed for the better and no longer is a random set of screenshots a true reflection of the interactive and responsive nature of the work I can produce. With this is in mind I'd rather just give you the links and let you explore.</pre></pre></code>
			<code><pre>*/</pre></code>
		</pre>

		<code><pre><pre><em class="element"><span class="text">&lt;</span>section<span class="text">&gt;</span></em></pre></pre></code>
			<code><pre><pre><pre><em class="element"><span class="text">&lt;</span>article <em class="attr">id</em><em class="text">=</em><em class="quotes">"my-work"</em><span class="text">&gt;</span></em></pre></pre></pre></code>

					<code><pre><pre><pre><pre><span class="bullet"><a target="_blank" href="https://www.anytimefitness.com.au/">Anytime Fitness Australia</a></span></pre></pre></pre></pre></code>
					<code><pre><pre><pre><pre><span class="bullet"><a target="_blank" href="https://www.tycoifs.co.uk/">Tyco Integrated Fire &amp; Security</a></span></pre></pre></pre></pre></code>
					<code><pre><pre><pre><pre><span class="bullet"><a target="_blank" href="https://www.adt.co.uk">Adt</a></span></pre></pre></pre></pre></code>
					<code><pre><pre><pre><pre><span class="bullet"><a target="_blank" href="https://www.castrol.com">Castrol</a></span></pre></pre></pre></pre></code>
					<code><pre><pre><pre><pre><span class="bullet"><a target="_blank" href="https://www.workthere.com">Workthere</a></span></pre></pre></pre></pre></code>
					<code><pre><pre><pre><pre><span class="bullet"><a target="_blank" href="http://www.alpamare.co.uk/">Alpamare</a></span></pre></pre></pre></pre></code>
					<code><pre><pre><pre><pre><span class="bullet"><a target="_blank" href="http://www.jaywingintelligence.com">Jaywing Intelligence</a></span></pre></pre></pre></pre></code>
					<code><pre><pre><pre><pre><span class="bullet">Massage Envy [Since taken down]</span></pre></pre></pre></pre></code>
					<code><pre><pre><pre><pre><span class="bullet">Jewson - Building Better Communities [Since taken down]</span></pre></pre></pre></pre></code>
					<code><pre><pre><pre><pre><span class="bullet"><a target="_blank" href="http://www.themanbehindthecurtain.co.uk/">The Man Behind The Curtain</a></span></pre></pre></pre></pre></code>
					<code><pre><pre><pre><pre><span class="bullet">Virgin Atlantic [Private project for an event]</span></pre></pre></pre></pre></code>
					<code><pre><pre><pre><pre><span class="bullet">LA fitness [Since taken down]</span></pre></pre></pre></pre></code>
					<code><pre><pre><pre><pre><span class="bullet"><a target="_blank" href="http://www.goal50game.com/">Goal 50</a></span></pre></pre></pre></pre></code>
					<code><pre><pre><pre><pre><span class="bullet"><a target="_blank" href="http://www.showcasecinemas.co.uk/">Showcase Cinemas</a></span></pre></pre></pre></pre></code>
					<code><pre><pre><pre><pre><span class="bullet">Showcase Cinemas - Big Box Office Quiz [Since taken down]</span></pre></pre></pre></pre></code>
					<code><pre><pre><pre><pre><span class="bullet"><a target="_blank" href="http://www.anglianhome.co.uk/">Anglian Home Improvements</a></span></pre></pre></pre></pre></code>
					<code><pre><pre><pre><pre><span class="bullet">Anglian Home Improvements - World Wide Window Machine [Since taken down]</span></pre></pre></pre></pre></code>
					<code><pre><pre><pre><pre><span class="bullet">Anglian Home Improvements - Win Sunshine [Since taken down]</span></pre></pre></pre></pre></code>
					<code><pre><pre><pre><pre><span class="bullet">Bloom Agency [Since taken down]</span></pre></pre></pre></pre></code>

			<code><pre><pre><pre><em class="element"><span class="text">&lt;/</span>article<span class="text">&gt;</span></em></pre></pre></pre></code>
		<code><pre><pre><em class="element"><span class="text">&lt;/</span>section<span class="text">&gt;</span></em></pre></pre></code>

		<code><br></code>

		<code><pre><em class="element"><span class="text">&lt;/</span>main<span class="text">&gt;</span></em></pre></code>

		<code><br></code>

		<pre class="comment">
			<code>/**</code>
			<code>* Get in touch</code>
			<code>* <pre>Want to get in touch and have a chat, well you're in luck! Drop me an email, a tweet or a LinkedIn message and I'll get back to you as soon as I can.</pre></code>
			<code>*/</code>
		</pre>

		<code><pre><em class="element"><span class="text">&lt;</span>footer<span class="text">&gt;</span></em></pre></code>
			<code><pre><pre>&lt;<em class="element">nav</em> <em class="attr">id</em><em class="text">=</em><em class="quotes">"get-in-touch"<span class="text">&gt;</span></em></pre></pre></code>
				<code><pre><pre><pre><em class="element"><span class="text">&lt;</span>a <em class="attr">href</em><em class="text">=</em><em class="quotes">"https://twitter.com/jamesryanbell"</em><span class="text">&gt;</span></em><a target="_blank" href="https://twitter.com/jamesryanbell">Twitter</a><em class="element"><span class="text">&lt;/</span>a<span class="text">&gt;</span></em></pre></pre></pre></code>
				<code><pre><pre><pre><em class="element"><span class="text">&lt;</span>a <em class="attr">href</em><em class="text">=</em><em class="quotes">"mailto:james@james-bell.co.uk"</em><span class="text">&gt;</span></em><a target="_blank" href="mailto:james@james-bell.co.uk">Email</a><em class="element"><span class="text">&lt;/</span>a<span class="text">&gt;</span></em></pre></pre></pre></code>
				<code><pre><pre><pre><em class="element"><span class="text">&lt;</span>a <em class="attr">href</em><em class="text">=</em><em class="quotes">"http://uk.linkedin.com/in/jamesryanbell"</em><span class="text">&gt;</span></em><a target="_blank" href="http://uk.linkedin.com/in/jamesryanbell">LinkedIn</a><em class="element"><span class="text">&lt;/</span>a<span class="text">&gt;</span></em></pre></pre></pre></code>
			<code><pre><pre><em class="element"><span class="text">&lt;/</span>nav<span class="text">&gt;</span></em></pre></pre></code>

		<code><pre><em class="element"><span class="text">&lt;/</span>footer<span class="text">&gt;</span></em></pre></code>
	</section>

		</main>

	</body>
</html>