<div class="projects row-fluid animated fadeIn ng-cloak">
    <div class="title span3 ng-cloak left-panel">
        <h4>projects</h4>
        <hr>
        <h5 ng-class="{selected: selectedItem == 'simplifield'}"><a  href="" ng-click="select('simplifield')">Simplifield </a><small>(fr)</small></h5>
        <h5 ng-class="{selected: selectedItem == 'uman'}"><a ng-click="select('uman')" href="">Uman films </a><small>(fr)</small></h5>

        <h5 ng-class="{selected: selectedItem == 'morrisby'}"><a ng-click="select('morrisby')" href="">Morrisby </a><small>(uk)</small></h5>

        <h5 ng-class="{selected: selectedItem == 'zapawa'}"><a ng-click="select('zapawa')" href="">Zapawa </a><small>(uk)</small></h5>

        <h5 ng-class="{selected: selectedItem == 'jibli'}"><a href="" ng-click="select('jibli')">Jib.li</a></h5>

        <h5><a target="_blank" href="http://github.com/sp4ke"><i class="icon-github icon-2x"></i></a></h5>
        <h4>talks</h4>
        <hr>

        <h5><a hover-show="devops" ng-click="select('devops')" target="_blank" href="http://www.slideshare.net/spykspyel/python-dev-ops">Python & DevOps</a></h5>


        <h5><a hover-show="promises" target="_blank" href="http://sp4ke.com/angular-promises/slides/template.html">Angular then Promises</a></h5>

        <h5><a hover-show="bitcoin-multisig" target="_blank" href="http://www.slideshare.net/spykspyel/bitcoin-multisignatures-and-its-applications">Bitcoin Multisifnature and its applications</a></h5>

        <h4>hacks</h4>
        <hr>
        <h5 ng-class="{selected: selectedItem == 'tmp-browse'}"><a hover-show="tmp-browse" target="_blank" href="https://github.com/sp4ke/tmpbrowse">tmpbrowse</a></h4>
        <h5 ng-class="{selected: selectedItem == 'howto'}"><a hover-show="howto" target="_blank" href="https://github.com/sp4ke/howto">howto</a></h5>
        <h5 ng-class="{selected: selectedItem == 'catdog-hunter'}"><a hover-show="catdog-hunter" target="_blank" href="https://chrome.google.com/webstore/detail/catdog-hunter/cffhajgcjcbifcefedhkeekflnjpmdlh">CatDog Hunter</a></h5>
        <h5 ng-class="{selected: selectedItem == 'magic-button'}"><a hover-show="magic-button" target="_blank" href="/projects/bootstrap-magic-button/example">Bootstrap Magic Buttons</a></h5>
        <br>
        <br>
        <br>
    </div>




    <!-- Project Details  -->

    <div class="details simplifield offset4 span5 hide animated fadeIn" ng-class="{selected: selectedItem == 'simplifield'}">
        <h4>Frontend UI/UX</h4>
        <div class="text-center">
            <a target="_blank" href="http://www.simplifield.com/"><i class="icon-eye-open icon-2x"></i></a>
        </div>
        <hr>
        <div class="text-left">
            <p>For this client my work involved developing UI and UX for the dashboard side of a web application</p>
            <p>As the API was not ready yet I made API mocks to develop the frontend directives</p>
            <h5>Key features:</h5>
            <ul>
                <li>Advanced customizable and stackable modal system based on Angular UI bootstrap modals</li>
                <li>Angular directives for graphing data with d3.js</li>
                <li>Responsive editable tables (modified fork of ng-grid)</li>
                <li>Several UI elements inspired by Google Gmail UI</li>
            </ul>

            <h5>Technologies:</h5>
            <small><span class="label">AngularJS</span>, <span class="label">Less</span>, <span class="label">D3</span>, <span class="label">Faker</span></small>
        </div>
        <hr>
        <div class="demo">
            <img src="/img/iMac.png" alt="">
            <video preload="" loop="loop" autoplay="" src="//media.sp4ke.com/simplifield.mp4"></video>
        </div>
    </div>

    <div class="details uman offset4 span5 hide animated fadeIn" ng-class="{selected: selectedItem == 'uman'}">
        <h4>Design - Development</h4>
            <a target="_blank" href="http://u-manfilms.tv/"><i class="icon-eye-open icon-2x"></i></a>
        <hr>
        <div class="text-left">
            <h5>Design</h5>
            <p>The client works in the video making industry. I made a minimalistic and 
            pure design to make the video content stands out.
             </p>
             <h5>UX</h5>
             <p>
                Optimised the user experience for easy and touch enabled video content scrolling
             </p>

             <h5>Technologies</h5>
             <small><span class="label">Bootstrap</span>, <span class="label">AngularJS</span>, <span class="label">Less</span></small>
             <hr>
             <div class="text-center carousel" carousel="carousels.uman">
                <img src="/img/iMac.png" alt="">
                <img class="animated fadeIn" alt="">
             </div>
        </div>
    </div>

    <div class="details morrisby offset4 span5 hide animated fadeIn" ng-class="{selected: selectedItem == 'morrisby'}">
        <h4>Frontend App Development - Assessment/Questionnaire</h4>
        <hr>
        <div class="text-left">
            <p>
                Developped the frontend side of a questionnaire and an assessment application. 
            </p>
            <p>
                The apps were designed for browsers and tablets and was targeted to school environments.
            </p>
            <h5>Key features:</h5>
            <ul>
                <li>Aggressive caching system (data and images)</li>
                <li>Asynchronous requests to avoid server overloads</li>
                <li>Offline and bad network aware user experience</li>
                <li>Developped as a module easy to include in any page without using an iFrame</li>
            </ul>
            <h5>Technologies: </h5>
            <small class="label">AngularJS</small>
            <small class="label">Bootstrap</small>
            <small class="label">FlatUI</small>
            <small class="label">Less</small>
        </div>

        <hr>    
        <div class="demo">
            <img src="/img/ipad-landscape-black.png" alt="">
            <video preload="" loop="loop" autoplay="" src="//media.sp4ke.com/morrisby.mp4"></video>
        </div>
        
    </div>

    <div class="details zapawa span5 offset4 hide animated fadeIn" ng-class="{selected: selectedItem == 'zapawa'}">
        <h4>Frontend UI/UX - Prototyping</h4>
        <hr>
        <div class="text-left">
            <p>My role was to prototype an online food delivery service on the frontend side.</p>

            <p>I worked on UX/UI to get the best food order user experience.</p> 
            <p>A backoffice for restaurants was also prototyped for tablets. </p>

            <br>
            <h5>Technologies:</h5>

            <small class="label">AngularJS</small>
            <small class="label">Bootstrap</small>
            <small class="label">Less</small>

            <hr>
            <div class="demo">
                <img src="/img/iMac.png" alt="">
                <img src="/img/zapawa.png" alt="">
            </div>

        </div>
    </div>


    <div class="details jibli span5 offset4 hide animated fadeIn" ng-class="{selected: selectedItem == 'jibli'}">
        <h4>Fullstack development</h4>
        <hr>
        <div class="text-left">
            <p>
                As a CTO and CoFounder on the project, 
                I designed this service all the way up from 
                backend to frontend. 

                I managed a team of developers to prototype and
                build the web service using Agile Development methods.
            </p>
            <p>
                I also designed the UI using HTML5 and Less
            </p>

            <p>
                Some of the technologies used on this project:
            </p>
            <em>Django, AngularJS, MongoDB, django tastypie, uwsgi,
                ZeroMQ, Celery
            </em>
        </div>
        <br><br>
        <div class="text-center">
            <a target="_blank" href="http://jib.li/"><i class="icon-eye-open icon-2x"></i></a>
        </div>
    </div>
    <div class="details github span5 offset4 hide animated fadeIn">
        My code on github
    </div>
    <div class="details devops span5 offset4 hide animated fadeIn">
        <h3>Python & Devops: Your own heroku .</h3>
        A presentation I made on a French Python meetup talking about uWSGI and agile deployment.
    </div>
    <div class="details catdog-hunter span5 offset4 hide animated fadeIn">
        <br />
        <br />
        A quick afternoon project to get rid of cats and dogs on reddit
    </div>
    <div class="details magic-button span5 offset4 hide animated fadeIn">
        <br />
        <br />
        A plugin that make it possible for any button to float on it's parent div.
    </div>
    <div class="details promises span5 hide offset4 animated fadeIn">
        <br />
        <br />
        An introduction to the principles of Asynchronous programming with Promises in Angular
    </div>
    <div class="details tmp-browse span5 offset4 hide animated fadeIn">
        <br />
        <br />
        A tool for front end developers to help spawn temporary browser sessions (only chrome for the moment) in a sandboxed environment to securely test your web app without worrying about clearing cache, extensions ...
    </div>
    <div class="details howto span5 offset4 hide animated fadeIn">
        <br />
        <br />
        A stupidly simple cli interface to get tl;dr answers from Stack Overflow
    </div>
</div>
