< 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 = "fa fa-github fa-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 < a target = "_blank" href = "http://www.simplifield.com/" > < i class = "fa fa-external-link" > < / i > < / a > < / h4 >
< div class = "text-center" >
< / 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 < a target = "_blank" href = "http://u-manfilms.tv/" > < i class = "fa fa-external-link" > < / i > < / a > < / h4 >
< 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 < a target = "_blank" href = "http://jib.li/" > < i class = "fa fa-external-link" > < / i > < / a > < / 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 >
< 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 >