blob42
/
sp4ke.github.com
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add project

Browse Source
master
chakib benziane 10 years ago
parent 6d8151658b
commit 56fc8bb090
8 changed files with 147 additions and 22 deletions
Show Stats Download Patch File Download Diff File

11
cof/directives.coffee
Unescape Escape View File

@ -28,13 +28,15 @@ angular
carousel: '='
link: (scope, elm, attrs)->
carousel = scope.carousel
img = elm.find('img')[0]
img = elm.find('img')[1]
cIndex = 0
img.src = carousel[cIndex]
setInterval(->
$(img).toggleClass('fadeIn fadeOut')
setTimeout(->
$(img).css({opacity: 0.1})
$(img).hide()
,
100
)
@ -44,9 +46,10 @@ angular
else
cIndex = 0
img.src = carousel[cIndex]
setTimeout(->
$(img).css({opacity: 1})
img.src = carousel[cIndex]
$(img).toggleClass('fadeOut fadeIn')
$(img).show()
,
200
)

43
css/bootstrap.css vendored
Unescape Escape View File

@ -7992,6 +7992,49 @@ body h2 {
width: 100%;
}
.main .projects .details.simplifield .demo {
width: 80%;
margin-right: auto;
margin-left: auto;
}
.main .projects .details.simplifield .demo img {
position: relative;
z-index: 10;
}
.main .projects .details.simplifield .demo video {
position: absolute;
top: 0;
top: 7%;
left: 0;
z-index: 1;
}
.main .projects .details.uman .carousel {
width: 80%;
margin-right: auto;
margin-left: auto;
}
.main .projects .details.uman .carousel img:first-child {
position: relative;
z-index: 10;
}
.main .projects .details.uman .carousel img:nth-child(2) {
position: absolute;
top: 0;
left: 50%;
z-index: 1;
width: 92% !important;
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.main .projects .details.zapawa .demo {
width: 80%;
margin-right: auto;

2
css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

BIN
img/uman1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 810 KiB

After

Width:  |  Height:  |  Size: 137 KiB

BIN
img/uman2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 MiB

After

Width:  |  Height:  |  Size: 251 KiB

14
js/directives.js
Unescape Escape View File

@ -37,25 +37,23 @@
link: function(scope, elm, attrs) {
var cIndex, carousel, img;
carousel = scope.carousel;
img = elm.find('img')[0];
img = elm.find('img')[1];
cIndex = 0;
img.src = carousel[cIndex];
return setInterval(function() {
$(img).toggleClass('fadeIn fadeOut');
setTimeout(function() {
return $(img).css({
opacity: 0.1
});
return $(img).hide();
}, 100);
if (cIndex < carousel.length - 1) {
cIndex += 1;
} else {
cIndex = 0;
}
img.src = carousel[cIndex];
return setTimeout(function() {
return $(img).css({
opacity: 1
});
img.src = carousel[cIndex];
$(img).toggleClass('fadeOut fadeIn');
return $(img).show();
}, 200);
}, 4500);
}

43
less/theme.less
Unescape Escape View File

@ -157,6 +157,49 @@ body {
width: 100%
}
&.simplifield {
.demo {
width: 80%;
margin-left: auto;
margin-right: auto;
img {
z-index: 10;
position: relative;
}
video {
position: absolute;
top: 0;
left: 0;
z-index: 1;
top: 7%;
}
}
}
&.uman {
.carousel {
width: 80%;
margin-left: auto;
margin-right: auto;
img:first-child {
z-index: 10;
position: relative;
}
img:nth-child(2) {
position: absolute;
top: 0px;
left: 50%;
width: 92% !important;
.translate(-50%, 0%);
z-index: 1;
}
}
}
&.zapawa {
.demo {
width: 80%;

56
partials/projects.html
Unescape Escape View File

@ -2,6 +2,7 @@
<div custom-scroll class="title offset1 span5 ng-cloak left-panel">
<h4>projects</h4>
<hr>
<h2><a hover-show="simplifield" target="_blank" href="http://www.simplifield.com/">Simplifield <small>(fr)</small></a></h2>
<h2><a hover-show="uman" href="http://u-manfilms.tv/">Uman films </a><small>(fr)</small></h2>
<h2><a class="nolink" hover-show="morrisby" href="">Morrisby <small>(uk)</small></a></h2>
<h2><a class="nolink" hover-show="zapawa" href="">Zapawa <small>(uk)</small></a></h2>
@ -27,6 +28,30 @@
<!-- Project Details -->
<div class="details simplifield span5 hide animated fadeIn">
<h4>Frontend UI/UX</h4>
<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 span5 hide animated fadeIn">
<h4>Design - Development</h4>
<hr>
@ -35,16 +60,16 @@
<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>Bootstrap, Angular, Less</small>
<small><span class="label">Bootstrap</span>, <span class="label">AngularJS</span>, <span class="label">Less</span></small>
<hr>
<div class="span10 text-center" carousel="carousels.uman">
<div class="text-center carousel" carousel="carousels.uman">
<img src="/img/iMac.png" alt="">
<img class="animated fadeIn" alt="">
</div>
</div>
@ -58,12 +83,20 @@
Developped the frontend side of a questionnaire and an assessment application.
</p>
<p>
The apps were designed for browsers and tablets.
The apps were designed for browsers and tablets and was targeted to school environments.
</p>
<p>
The apps were targeted to school environments. Developped an offline and cache aggressive algorithms to make the assessment user experience smooth even in bad connectivity situations.
</p>
<p>Technologies: <em>Angular JS, Bootstrap, Less</em></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>
@ -84,7 +117,12 @@
<p>A backoffice for restaurants was also prototyped for tablets. </p>
<br>
<p>Technologies: <em>Bootstrap, Angular JS, Less</em></p>
<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="">