a try on angularjs

app.js

'use strict';

var easyCvApp = angular.module('easyCvApp', [])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }]);
  easyCvApp.config(['$locationProvider', function($location) {
  $location.html5Mode(true); 
}]);

main.html

<div class="row-fluid">
<div class="span2 bs-docs-sidebar">
        <ul class="nav nav-list bs-docs-sidenav affix">
          <li ng-repeat="section in cv.sections" ><a href="javascript: void(0)" ng-href="#{{cv.slugtitle(section.title)}}"><i class="icon-chevron-right"></i>{{section.title}}</a></li>
        </ul>
</div>

<div class="span10 hero-unit">
  <div class="row-fluid">
    <div class="span16">
      <h1>{{cv.title}}</h1>
    </div>
  <div class="row-fluid">
    <div class="span4">
      <div class="profilepic" ng-bind-html-unsafe="cv.gravatar()"></div>
    </div>
    <div class="span8">
      <h2>{{cv.name}} {{cv.fname}}</h2>
      <h3>{{cv.subtitle}}</h3>
      <p>{{cv.infos}}</p>
    </div>
  </div>
  
  
  <div>
    <p>{{cv.birthdate}}</p>
    <p>{{cv.nationality}}</p>
  </div>
  <ul class="contact">
      <li ng-repeat="contact in cv.contacts">{{contact.type}}:{{contact.value}}</li>
  </ul>
  <ul class="social">
      <li ng-repeat="social in cv.socials">{{social.type}}:{{social.url}}</li>
  </ul>
  <section ng-repeat="section in cv.sections" id="{{cv.slugtitle(section.title)}}" name="{{cv.slugtitle(section.title)}}" class="history">
    <h2>{{section.title}}</h2>
    <p>{{section.content}}</p>
    <p>{{section.intro}}</p>
    <ul class="list">
      <li ng-repeat="el in section.list">{{el.year}}:{{el.position}}
        <ul class="duty">
          <li ng-repeat="duty in el.duties">{{duty}}</li>
        </ul>
        Recommand:<ul>
        <li ng-repeat="contact in el.recommand">
          {{contact.title}}. {{contact.fname}} {{contact.name}} 
          <ul>
            <li ng-repeat="el in contact.contacts">
              {{el.type}}:{{el.value}}
            </li>
          </ul>
        </li>
      </ul>
      </li>
  </ul>
  </section>
</div>
</div>

main.js

'use strict';

easyCvApp.controller('MainCtrl', function($scope, $http) {
  $scope.cv = {};
  $http.get('data/cv.json')
       .then(function(res){
          $scope.cv = res.data.cv;
          $scope.cv.gravatar = function(){
            var img = new Image,
            hash = md5($scope.cv.email),
            canvas = document.createElement("canvas"),
            ctx = canvas.getContext("2d"),
            src = 'http://www.gravatar.com/avatar/'+hash+'?s=200';
            
            img.crossOrigin = "Anonymous";
            img.setAttribute("data-colorcount","4");

            img.onload = function() {
                var $img = $(img);
                // Dominant Color
                var dominantColor = getDominantColor(img);
                // Palette
                var colorCount = $img.attr('data-colorcount') ? $img.data('colorcount') : 10;
                var medianPalette = createPalette(img, colorCount);
                console.log(medianPalette);
                console.log(dominantColor);
            }

            img.src = src;
            // make sure the load event fires for cached images too
            if ( img.complete || img.complete === undefined ) {
                img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
                img.src = src;
            }
            return '<img src="http://www.gravatar.com/avatar/'+hash+'?s=200" />'
          };

          $scope.cv.slugtitle = function(title){
            return Helper.slugify(title);
          }
        });
});