index.html

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Technical lead & senior frontend developer for over 8 years. Working on a range of
    projects from start-ups to large scale enterprise applications.">
    <meta name="author" content="Ryan Musselwhite">
    <meta name="robots" content="index,follow,noodp">
    <meta name="googlebot" content="index,follow">
    <meta name="subject" content="Web Application Design & Development">
    <meta name="url" content="http://ryanmusselwhite.com">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@ryanmusselwhite">
    <meta name="twitter:creator" content="@ryanmusselwhite">
    <meta name="twitter:url" content="http://ryanmusselwhite.com">
    <meta name="twitter:title" content="Web Application Design & Development">
    <meta name="twitter:description" content="Technical Lead & Senior Frontend Developer For 8+ Years">
    <meta name="twitter:image" content="http://ryanmusselwhite.com/img/twitterCard.png">

    <link rel="icon" type="image/png" href="/img/fav.png">
    <title>Ryan Musselwhite: Technical Lead & Senior Frontend Developer</title>

    <!-- CSS INCLUDES -->
    <link rel="stylesheet" href="/css/includes/bootstrap.min.css">
    <link href='https://fonts.googleapis.com/css?family=Lato:100,400,300,700,900' rel='stylesheet' type='text/css'>

    <!-- CSS -->
    <link rel="stylesheet" href="/css/main.css">

    <!-- FONTS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script async src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script async src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-57018511-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-57018511-1');
    </script>

</head>
<body>
<div class="container-fluid">
    <div id="mainContainer" class="mainContainer">
        <div id="mainContainer-home" class="mainContainer-home">
            <nav id="mainContainer-home-menu" class="mainContainer-home-menu navbar navbar-default">
                <a class="navbar-brand bold" href="#">RM</a>
                <ul class="nav navbar-nav nav-center">
                    <li><a href="https://uk.linkedin.com/in/ryanmusselwhite"><i class="fa fa-linkedin"></i></a>
                    </li>
                    <li><a href="https://twitter.com/ryanmusselwhite"><i class="fa fa-twitter"></i></a></li>
                    <li><a href="https://medium.com/@ryanmusselwhite"><i class="fa fa-medium"></i></a></li>
                </ul>
            </nav>
            <img class="avatarImage center-block"
                 src="https://res.cloudinary.com/dpg33lzc0/image/upload/h_100,w_100,f_auto/dpr_3.0/profile-1_tpzeou.jpg"
                 alt="Ryan Musselwhite" width="100" height="100">

            <div class="avatar"></div>
            <h1 class="text-center">RYAN MUSSELWHITE</h1>
            <h4 class="text-center">TECH LEAD & SENIOR FRONT-END DEVELOPER WITH 8+ YEARS EXPERIENCE</h4>
        </div>

        <div id="mainContainer-about" class="mainContainer-about">
            <div class="loader" id="loader">
                <div class="cssload-thecube loader" id="loader">
                    <div class="cssload-cube cssload-c1"></div>
                    <div class="cssload-cube cssload-c2"></div>
                    <div class="cssload-cube cssload-c4"></div>
                    <div class="cssload-cube cssload-c3"></div>
                </div>
            </div>
            <h1 class="text-center u-animate">Clients</h1>
            <div class="row">
                <div class="col-xs-12 col-sm-6 u-animate">
                    <div class="port-1 u-hoverBlock" data-title="ObjectiveManager"
                         data-skills="Solution Architecture, JavaScript OO, jQuery, CSS3, HTML5, CSS3 Animation,
                         Responsive, BootStrap, GIT" data-port="port-1"
                         data-content="As well as working for ObjectiveManager on their core product,
                          I was also asked to build their marketing site using up to date technologies, with the aim to
                           keep it as lightweight as possible so that non front-end developers could still easily
                           maintain the code if required."
                         data-link="https://about.objectivemanager.com/" data-gh=""
                         data-images="https://res.cloudinary.com/dpg33lzc0/image/upload/f_auto/dpr_3.0/v1528279304/1_vdoizu.jpg,https://res.cloudinary.com/dpg33lzc0/image/upload/f_auto/dpr_3.0/v1528279304/2_juauov.jpg,http://res.cloudinary.com/dpg33lzc0/image/upload/f_auto/dpr_3.0/v1528279304/3_lefcj3.jpg">
                        <h2>ObjectiveManager</h2>
                        <p>Core Product Development</p>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 u-animate">
                    <div class="port-2 u-hoverBlock" data-title="DealScoper"
                         data-skills="Solution Architecture"
                         data-port="port-2" data-content="I consulted on this project for the solution design of a new
                         application which was being built. I used previous knowledge of the legal sector as well
                         as building an application similar to this, to guide and advise the business for the
                         technical soltion required."
                         data-link="https://dealscoper.com" data-gh="" data-images="https://res.cloudinary.com/dpg33lzc0/image/upload/f_auto/dpr_3.0/v1528279305/1_bl4irr.jpg">
                        <h2>DealScoper</h2>
                        <p>Technical Advisor</p>
                    </div>
                </div>
            </div>
            <h1 class="text-center u-animate">Designs</h1>
            <div class="row">
                <div class="col-xs-12 col-sm-6 u-animate">
                    <div class="port-12 u-hoverBlock" data-title="Login Design"
                         data-skills="HTML, CSS3, JS, Responsive, BootStrap, GIT"
                         data-port="port-12" data-content="A design I created for an example of a great looking UI
                         based around a login interface."
                         data-link="http://ryanmusselwhite.com/prototype-designs/login/"
                         data-gh="https://github.com/mussrya/prototype-designs" data-images="https://res.cloudinary.com/dpg33lzc0/image/upload/f_auto/dpr_3.0/v1528279308/1_fbykut.jpg">
                        <h2>Login Design</h2>
                        <p>Login UI Design</p>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 u-animate">
                    <div class="port-11 u-hoverBlock" data-title="Trips Dashboard"
                         data-skills="HTML, CSS3, JS, Responsive, BootStrap, GIT"
                         data-port="port-11" data-content="A design I created for an example of a great looking UI
                         based around a trips dashboard interface."
                         data-link="http://ryanmusselwhite.com/prototype-designs/trips-dashboard/"
                         data-gh="https://github.com/mussrya/prototype-designs" data-images="https://res.cloudinary.com/dpg33lzc0/image/upload/f_auto/dpr_3.0/v1528279307/1_frqcle.jpg">
                        <h2>Trips Dashboard</h2>
                        <p>Trips Dashboard Design</p>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 u-animate">
                    <div class="port-3 u-hoverBlock" data-title="Stock Price"
                         data-skills="HTML, CSS3, JS, Responsive, BootStrap, GIT"
                         data-port="port-3" data-content="A design I created for an example of a great looking UI
                         based around charting."
                         data-link="http://ryanmusselwhite.com/prototype-designs/stock-graph/"
                         data-gh="https://github.com/mussrya/prototype-designs" data-images="https://res.cloudinary.com/dpg33lzc0/image/upload/f_auto/dpr_3.0/v1528279304/1_dcklxe.jpg">
                        <h2>Stock App</h2>
                        <p>Stock Price Design</p>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 u-animate">
                    <div class="port-4 u-hoverBlock" data-title="Messenger Client Design"
                         data-skills="HTML, CSS3, JS, Responsive, BootStrap, GIT"
                         data-port="port-4" data-content="A design I created for an example of an inbox/messenger
                          Client"
                         data-link="http://ryanmusselwhite.com/prototype-designs/message-dashboard"
                         data-gh="https://github.com/mussrya/prototype-designs" data-images="https://res.cloudinary.com/dpg33lzc0/image/upload/f_auto/dpr_3.0/v1528279304/1_erj66f.jpg">
                        <h2>Messenger Client</h2>
                        <p>Messenger Client Design</p>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 u-animate">
                    <div class="port-5 u-hoverBlock" data-title="Crypto Design POC"
                         data-skills="HTML, CSS3, JS, Responsive, BootStrap, GIT"
                         data-port="port-5" data-content="A design and working application to show top gainers/losers
                         and watched crypto currencies. This was an initial POC which led to the feature rich
                         Crypto App"
                         data-link="http://ryanmusselwhite.com/prototype-designs/crypto/"
                         data-gh="https://github.com/mussrya/prototype-designs" data-images="https://res.cloudinary.com/dpg33lzc0/image/upload/f_auto/dpr_3.0/v1528279305/1_exfz6r.jpg">
                        <h2>Crypto</h2>
                        <p>Crypto Prices</p>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 u-animate">
                    <div class="port-6 u-hoverBlock" data-title="Reus Boostrap Theme"
                         data-skills="jQuery, CSS3, HTML5, CSS3 Animation, Responsive, BootStrap"
                         data-port="port-6" data-content="As a side project and mostly for fun, I decided to build a
                         theme for Bootstrap which I decided to post to Git for users to download for free. This was
                         mostly a side project to try and use bootstrap to it's full effect."
                         data-link="http://ryanmusselwhite.com/reus/" data-gh="https://github.com/mussrya/reus"
                         data-images="https://res.cloudinary.com/dpg33lzc0/image/upload/f_auto/dpr_3.0/v1528279305/1_sjvmxn.jpg,https://res.cloudinary.com/dpg33lzc0/image/upload/f_auto/dpr_3.0/v1528279305/2_tlonsr.jpg,https://res.cloudinary.com/dpg33lzc0/image/upload/f_auto/dpr_3.0/v1528279306/3_ganlhl.jpg">
                        <h2>Reus Theme</h2>
                        <p>Bootstrap Responsive Design Theme</p>
                    </div>
                </div>
            </div>

            <h1 class="text-center u-animate">Side Apps</h1>
            <div class="row">
                <div class="col-xs-12 col-sm-6 u-animate">
                    <div class="port-7 u-hoverBlock" data-title="CycleAnalytics"
                         data-skills="AngularJS, NodeJS (REST API), CSS3, HTML5, CSS3 Animation, Responsive, BootStrap,
                         MongoDB, GIT" data-port="port-7" data-content="I built the CycleAnalytics site as a side
                         project to broaden my experience with building a web application end to end, featuring a
                         NodeJS API, NodeJS data grabber and an AngularJS front-end. I managed to represent
                         government data on the cycle hire stations within London in an easy to view format."
                         data-link="https://github.com/mussrya/Cycle-analytics" data-images="https://res.cloudinary.com/dpg33lzc0/image/upload/f_auto/dpr_3.0/1_yeiksp.jpg,https://res.cloudinary.com/dpg33lzc0/image/upload/f_auto/dpr_3.0/2_pkghol.jpg,https://res.cloudinary.com/dpg33lzc0/image/upload/f_auto/dpr_3.0/3_lc6iyq.jpg">
                        <h2>CycleAnalytics</h2>
                        <p>London Cycles - Big Data Analysis</p>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 u-animate">
                    <div class="port-8 u-hoverBlock" data-title="Crypto App"
                         data-skills="HTML, JS, RequireJS, ES6, CSS3, Responsive, BootStrap, GIT"
                         data-port="port-8" data-content="An application created to track crypto currency
                         top gainers/losers as well as watched currencies, wallet and active pool stats for
                         mining rigs. This is currently hidden from GIT due to being in a private repo"
                         data-images="https://res.cloudinary.com/dpg33lzc0/image/upload/f_auto/dpr_3.0/1_uqcsyu.jpg,https://res.cloudinary.com/dpg33lzc0/image/upload/f_auto/dpr_3.0/2_apmizi.jpg,https://res.cloudinary.com/dpg33lzc0/image/upload/f_auto/dpr_3.0/3_o7rlsl.jpg">
                        <h2>Crypto App</h2>
                        <p>Crypto Price / Wallet / Pool Tracker</p>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 u-animate">
                    <div class="port-9 u-hoverBlock" data-title="HowMuch"
                         data-skills="ReactJS, Redux, Webpack, Local Storage, HTML, JS, CSS3, Responsive, BootStrap, GIT"
                         data-port="port-9" data-content="An application created to allow users to track their spending.
                         The main idea behind creating this app, was to show my knowledge with React/Redux in a more
                          realistic application." data-link="http://ryanmusselwhite.com/howmuch"
                         data-gh="https://github.com/mussrya/howmuch"
                         data-images="https://res.cloudinary.com/dpg33lzc0/image/upload/f_auto/dpr_3.0/1_q6efvs.jpg,https://res.cloudinary.com/dpg33lzc0/image/upload/f_auto/dpr_3.0/2_ljuwwp.jpg,https://res.cloudinary.com/dpg33lzc0/image/upload/f_auto/dpr_3.0/3_eixpmh.jpg">
                        <h2>HowMuch App</h2>
                        <p>Expenditure Tracking App</p>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 u-animate">
                    <div class="port-10 u-hoverBlock" data-title="GitRead"
                         data-skills="AngularJS, GitHub API, CSS3, HTML5, BootStrap"
                         data-port="port-10" data-content="Whilst working for a company who used Git Issues to
                         track bugs, I decided to build an application which could easily produce a release note to
                         be sent out to the team based on a particular milestone. I mostly learnt about GitHub APIs
                         in this project as I had extensive experience with AngularJS prior to this project."
                         data-link="https://github.com/mussrya/GitHub-Release-Notes-Generator" data-gh=""
                         data-images="https://res.cloudinary.com/dpg33lzc0/image/upload/f_auto/dpr_3.0/1_olb5no.jpg,https://res.cloudinary.com/dpg33lzc0/image/upload/f_auto/dpr_3.0/2_a9ntkr.jpg,https://res.cloudinary.com/dpg33lzc0/image/upload/f_auto/dpr_3.0/3_y5usbj.jpg">
                        <h2>GitRead</h2>
                        <p>GitHub Release Notes Generator</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- SCRIPT LOAD DEFERRING -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src="/js/main.js"></script>
</body>
</html>