A Pen by Christian Fleschhut.

Frontend-Dev-Skillset.markdown

Frontend Dev Skillset

Prototype for the skills section of my personal website

Built with the awesome charts.js http://www.chartjs.org/

A Pen by Christian Fleschhut on CodePen.

License.

index.haml

.container
    %h2
        Skills
    .row
        .col-sm-4
            %figure
                %canvas{ id: 'html_css', width: 150, height: 150 }
                %figcaption
                    Semantic HTML5 & CSS3
        .col-sm-4
            %figure
                %canvas{ id: 'sass', width: 150, height: 150 }
                %figcaption
                    Sass
        .col-sm-4
            %figure
                %canvas{ id: 'jquery', width: 150, height: 150 }
                %figcaption
                    jQuery
    .row
        .col-sm-4
            %figure
                %canvas{ id: 'rails', width: 150, height: 150 }
                %figcaption
                    Ruby on Rails
        %div.col-sm-4
            %figure
                %canvas{ id: 'backbone', width: 150, height: 150 }
                %figcaption
                    Backbone.js
        .col-sm-4
            %figure
                %canvas{ id: 'photoshop', width: 150, height: 150 }
                %figcaption
                    Photoshop

script.js

var options = {
  //segmentShowStroke: false,
  percentageInnerCutout: 70,
  //animation: true,
  animationEasing: 'easeOutQuint',
  //animateRotate: false,
  animateScale: true
};
var data = {
  html_css: [
    { value: 95, color: "hsl(120, 39%, 54%)" },
    { value: 5, color: "hsl(120, 10%, 90%)" }
  ],
  sass: [
    { value: 90, color: "hsl(120, 39%, 54%)" },
    { value: 10, color: "hsl(120, 10%, 90%)" }
  ],
  jquery: [
    { value: 90, color: "hsl(120, 39%, 54%)" },
    { value: 10, color: "hsl(120, 10%, 90%)" }
  ],
  rails: [
    { value: 60, color: "hsl(120, 39%, 54%)" },
    { value: 40, color: "hsl(120, 10%, 90%)" }
  ],
  backbone: [
    { value: 50, color: "hsl(120, 39%, 54%)" },
    { value: 50, color: "hsl(120, 10%, 90%)" }
  ],
  photoshop: [
    { value: 75, color: "hsl(120, 39%, 54%)" },
    { value: 25, color: "hsl(120, 10%, 90%)" }
  ]
};

var offset = 0;
$.each(data, function(key, data) {
  var canvas = document.querySelector('#' + key);
  if(canvas) {
    offset += 250;
    setTimeout(function() {
      var ctx = canvas.getContext('2d');
      var chart = new Chart(ctx);
      chart.Doughnut(data, options);
    }, offset);
  }
});

style.scss

@import "compass";
figure {
  margin: 0 0 20px;
  text-align: center;
}