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

new projects layout

Browse Source
master
chakib benziane 10 years ago
parent 56fc8bb090
commit 9dd08ca4cd
9 changed files with 213 additions and 48 deletions
Show Stats Download Patch File Download Diff File

10
cof/controllers.coffee
Unescape Escape View File

@ -7,6 +7,16 @@
'/img/uman2.png'
]
$scope.selectedItem = 'simplifield'
$scope.select = (item)->
if $scope.selectedItem is item
$scope.selectedItem = undefined
else
$scope.selectedItem = item
projectsCtrl.$inject = ['$scope']

88
css/bootstrap.css vendored
Unescape Escape View File

@ -7948,6 +7948,14 @@ body h2 {
transition: all 50ms ease;
}
.main .projects a:hover {
text-decoration: none !important;
}
.main .projects .details.selected {
display: block !important;
}
.main .projects img,
.main .projects video {
width: 100% !important;
@ -7955,10 +7963,64 @@ body h2 {
}
.main .projects .left-panel {
position: fixed;
height: 37rem;
overflow: hidden;
}
.main .projects .left-panel hr {
margin-top: 0;
}
.main .projects .left-panel h5 a {
-webkit-transition: 500ms letter-spacing ease-out;
-moz-transition: 500ms letter-spacing ease-out;
-ms-transition: 500ms letter-spacing ease-out;
-o-transition: 500ms letter-spacing ease-out;
transition: 500ms letter-spacing ease-out;
}
.main .projects .left-panel h5 a:hover {
letter-spacing: 2px;
text-decoration: none !important;
-webkit-transition: 100ms letter-spacing ease-in;
-moz-transition: 100ms letter-spacing ease-in;
-ms-transition: 100ms letter-spacing ease-in;
-o-transition: 100ms letter-spacing ease-in;
transition: 100ms letter-spacing ease-in;
}
.main .projects .left-panel h5 {
padding-right: 1em;
}
.main .projects .left-panel h5.selected {
background: #3dc4de;
}
.main .projects .left-panel h5.selected a {
letter-spacing: 2px;
}
.main .projects .left-panel h5.selected * {
font-weight: bold;
color: white;
}
.main .projects .left-panel h5:active {
background-color: #3dc4de;
}
.main .projects .left-panel h5:active * {
font-weight: bold;
color: white;
}
.main .projects .left-panel h4 {
margin-top: 1.5em;
color: #399caf;
}
.main .projects .details {
/*position: fixed;*/
@ -8076,11 +8138,7 @@ body h2 {
}
.main .projects a:hover {
color: #57ddf7;
}
.main .projects a:hover:not(.nolink) {
text-decoration: underline !important;
color: #3dc4de;
}
.main .projects .title {
@ -8101,15 +8159,25 @@ body h2 {
bottom: 0;
width: 100%;
text-align: center;
background: #fff;
-webkit-box-shadow: 0 -30px 40px #ffffff;
-moz-box-shadow: 0 -30px 40px #ffffff;
box-shadow: 0 -30px 40px #ffffff;
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
animation-delay: 1.5s;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-ms-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
.dock.isProjects {
width: auto;
text-align: left;
}
.dock.isProjects a {
font-size: .5em;
}
.dock .hoverText {
@ -8151,7 +8219,7 @@ body h2 {
.dock a:hover .projects,
.dock a.active .projects {
color: #57ddf7;
color: #3dc4de;
}
.dock a:hover .blog,

2
css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
index.html
Unescape Escape View File

@ -25,7 +25,7 @@
<div class="container-fluid main ng-cloak">
<div ng-view></div>
</div>
<div class="container-fluid dock animated fadeInUp ng-cloak" ng-controller="dockCtrl">
<div class="container-fluid dock animated fadeInUp ng-cloak" ng-class="{isProjects: selected == 1}" ng-controller="dockCtrl">
<div ng-class="hovered && 'hovered'"class="hoverText">
<h3>{{icons[hoveredIndex].text}}</h3>
</div>

10
js/controllers.js
Unescape Escape View File

@ -1,9 +1,17 @@
// Generated by CoffeeScript 1.7.1
(function() {
this.projectsCtrl = function($scope) {
return $scope.carousels = {
$scope.carousels = {
uman: ['/img/uman1.png', '/img/uman2.png']
};
$scope.selectedItem = 'simplifield';
return $scope.select = function(item) {
if ($scope.selectedItem === item) {
return $scope.selectedItem = void 0;
} else {
return $scope.selectedItem = item;
}
};
};
projectsCtrl.$inject = ['$scope'];

70
less/theme.less
Unescape Escape View File

@ -116,6 +116,14 @@ body {
.projects {
a:hover {
text-decoration: none !important;
}
.details.selected {
display: block !important;
}
img, video {
width: 100% !important;
height: auto !important;
@ -124,6 +132,52 @@ body {
.left-panel {
height: 37rem;
overflow: hidden;
position: fixed;
hr {
margin-top: 0px;
}
h5 a {
.transition(500ms letter-spacing ease-out);
&:hover {
.transition(100ms letter-spacing ease-in);
letter-spacing: 2px;
text-decoration: none !important;
}
}
h5 {
padding-right: 1em;
}
h5.selected {
background: @projectsColor;
a {
letter-spacing: 2px
}
* {
color: white;
font-weight: bold;
}
}
h5:active {
background-color: @projectsColor;
* {
color: white;
font-weight: bold;
}
}
h4 {
color: desaturate(darken(@projectsColor, 10%), 20%);
margin-top: 1.5em;
}
}
@ -243,9 +297,6 @@ body {
color: @projectsColor;
}
&:hover:not(.nolink) {
text-decoration: underline !important
}
}
.title {
text-align: right;
@ -264,9 +315,18 @@ body {
width: 100%;
position: fixed;
bottom: 0;
.transition(all 200ms ease-in);
text-align: center;
background: #fff;
.box-shadow(0 -30px 40px #fff);
&.isProjects {
width: auto;
text-align: left;
a {
font-size: .5em;
}
}
.hoverText {
top: -5%;

2
less/variables.less
Unescape Escape View File

@ -12,7 +12,7 @@
@dockIconColor: rgb(224,224,224);
@profilColor: rgb(81, 250, 128);
@projectsColor: rgb(87, 221, 247);
@projectsColor: #3dc4de;
@blogColor: rgb(255, 140, 150);
@contactColor: rgb(249, 255, 107);

13
partials/freelance.html
Unescape Escape View File

@ -4,16 +4,21 @@
</div>
<div class="row-fluid">
<div class="span4">
<h3>Full Stack Developer</h3>
<h3>UI & UX Design</h3>
<p>
Build web applications from scratch using cutting edge web technologies
UI/UX design based on the principles of Information Software Design by <a href="http://worrydream.com/MagicInk/MagicInk.pdf" target="_blank">Bret Vitcor</a>
</p>
</div>
<div class="span4">
<h3>UI & Design</h3>
<h3>Full Stack Developer</h3>
<p>
Do frontend and UI design based on the principles of Information Software Design by <a href="http://worrydream.com/MagicInk/MagicInk.pdf" target="_blank">Bret Vitcor</a>
Building web applications through the whole stack.
</p>
<small class="label">Mongo</small>
<small class="label">Express</small>
<small class="label">Agnular</small>
<small class="label">Node</small>
</div>
<div class="span4">

64
partials/projects.html
Unescape Escape View File

@ -1,23 +1,30 @@
<div class="projects row-fluid animated fadeIn ng-cloak">
<div custom-scroll class="title offset1 span5 ng-cloak left-panel">
<div class="title span3 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>
<h2><a hover-show="jibli" target="_blank" href="http://jib.li">Jib.li</a></h2>
<h2><a hover-show="github" target="_blank" href="http://github.com/sp4ke"><i class="icon-github icon-2x"></i></a></h2>
<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 hover-show="github" target="_blank" href="http://github.com/sp4ke"><i class="icon-github icon-2x"></i></a></h5>
<h4>talks</h4>
<hr>
<h2><a hover-show="devops" target="_blank" href="http://www.slideshare.net/spykspyel/python-dev-ops">Python & DevOps</a></h2>
<h2><a hover-show="promises" target="_blank" href="http://sp4ke.com/angular-promises/slides/template.html">Angular then Promises</a></h2>
<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>
<h4>hacks</h4>
<hr>
<h3><a hover-show="tmp-browse" target="_blank" href="https://github.com/sp4ke/tmpbrowse">tmpbrowse</a></h4>
<h3><a hover-show="howto" target="_blank" href="https://github.com/sp4ke/howto">howto</a></h4>
<h3><a hover-show="catdog-hunter" target="_blank" href="https://chrome.google.com/webstore/detail/catdog-hunter/cffhajgcjcbifcefedhkeekflnjpmdlh">CatDog Hunter</a></h4>
<h3><a hover-show="magic-button" target="_blank" href="//projects/bootstra-magic-button">Bootstrap Magic Buttons</a></h4>
<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>
@ -28,8 +35,11 @@
<!-- Project Details -->
<div class="details simplifield span5 hide animated fadeIn">
<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>
@ -52,8 +62,9 @@
</div>
</div>
<div class="details uman span5 hide animated fadeIn">
<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>
@ -75,7 +86,7 @@
</div>
</div>
<div class="details morrisby span5 hide animated fadeIn">
<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">
@ -107,7 +118,7 @@
</div>
<div class="details zapawa span5 hide animated fadeIn">
<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">
@ -133,7 +144,7 @@
</div>
<div class="details jibli span5 hide animated fadeIn">
<div class="details jibli span5 offset4 hide animated fadeIn" ng-class="{selected: selectedItem == 'jibli'}">
<h4>Fullstack development</h4>
<hr>
<div class="text-left">
@ -156,35 +167,38 @@
ZeroMQ, Celery
</em>
</div>
<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 hide animated fadeIn">
<div class="details github span5 offset4 hide animated fadeIn">
My code on github
</div>
<div class="details devops span5 hide animated fadeIn">
<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 hide animated fadeIn">
<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 hide animated fadeIn">
<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 animated fadeIn">
<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 hide animated fadeIn">
<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 hide animated fadeIn">
<div class="details howto span5 offset4 hide animated fadeIn">
<br />
<br />
A stupidly simple cli interface to get tl;dr answers from Stack Overflow