You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
208 lines
9.3 KiB
HTML
208 lines
9.3 KiB
HTML
<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>
|