<!DOCTYPE HTML>
<html lang="en-US" manifest="/markstar.appcache">
<head>
    <title>Mark Starling</title>

    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,width=device-width,initial-scale=1.0">
    <meta name="author" content="Mark Starling">
    <meta name="description" content="I'm Mark Starling, a Solutions Architect at MMT Digital, and love everything code.">
    <meta http-equiv="Content-Language" content="en" />

    <meta property="og:title" content="Mark Starling" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="http://markstar.co.uk" />
    <meta property="og:description" content="I'm Mark Starling, a Solutions Architect at MMT Digital, and love everything code." />

    <meta property="og:image" content="img/mark-starling.jpg" />
    <meta property="og:image:type" content="image/jpeg" />
    <meta property="og:image:width" content="128" />
    <meta property="og:image:height" content="128" />

    <link href='http://fonts.googleapis.com/css?family=Droid+Sans|Titillium+Web:200' rel='stylesheet' type='text/css'>
    <link href="css/markstar.min.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="welcome">
    <section>

        <a class="profile-image" href="http://markstar.co.uk" title="Mark Starling"><img src="img/mark-starling.jpg" width="128" height="128" /></a>

        <h1>Welcome</h1>

        <p>I'm Mark Starling, a Client Solutions Director at <a href="http://mmtdigital.co.uk" title="MMT Digital">MMT Digital</a>.</p>

    </section>
</div>

<div class="title">
    <section>
        <h2>Squared</h2>
    </section>
</div>

<div class="squared">
    <section class="clearfix">
        <a class="image-link" href="http://squaredga.me" title="Squared"><img src="img/squared.jpg" alt="Screen shot of Squared." /></a>

        <p>Squared is my latest <a title="Side Projects presentation by Sacha Greif" href="https://speakerdeck.com/sachag/side-projects">side project</a>;
            a challenging puzzle game built entirely using front-end web technologies.</p>

        <p>Squared is a <a href="http://en.wikipedia.org/wiki/Responsive_web_design" title="Responsive Web Design">responsive</a>
            game built using HTML5, CCS3 and JavaScript. It uses a number JavaScript libraries including:
            <a href="http://jquery.com/" title="jQuery">jQuery</a>,
            <a href="http://requirejs.org/" title="Require.js">Require.js</a>,
            <a href="http://handlebarsjs.com/" title="Handlebars">Handlebars</a>,
            <a href="https://github.com/marcuswestin/store.js/" title="Store.js">Store.js</a> and
            <a href="http://modernizr.com/" title="Modernizr">Modernizr</a>. And was built using the increasingly popular
            CSS preprocessor, <a href="http://sass-lang.com/" title="Syntactically Awesome Style Sheets">SASS</a>.</p>

        <p>Are you up to the challenge?</p>

        <a class="cta" href="http://squaredga.me" title="Squared">Play Squared</a>
    </section>
</div>

<div class="social">
    <section>
        <!--<a href="#">&#xe000;</a>-->
        <a class="twitter" title="@mark_star on Twitter" href="http://www.twitter.com/mark_star">&#xe001;</a>
        <a class="google-plus" title="Mark Starling on Google Plus" href="http://plus.google.com/u/0/111931592522535936907">&#xe002;</a>
        <a class="dribbble" title="markstar on Dribbble" href="http://dribbble.com/markstar">&#xe003;</a>
        <a class="github" title="markstar on Github" href="http://github.com/markstar">&#xe004;</a>
        <a class="bitbucket" title="markstar on Bitbucket" href="http://bitbucket.org/markstar">&#xe005;</a>
    </section>

</div>

</body>
</html>
