add language color

coffee/ghresume.coffee

@@ -3,16 +3,13 @@ $ = jQuery
 username = "hit9"
 api_url = "https://api.github.com/users/"
 
-# language's color from github
-
 # get wallpaper from desktoppr.co
 desktoppr_api = "https://api.desktoppr.co/1/wallpapers/random"
 $.getJSON(desktoppr_api, 
   (res)->
     $("body").css("background-image","url("+res.response.image.url+")")
   )
 
-
 # get user information
 $.getJSON(api_url+username,
   (res)->
@@ -82,5 +79,22 @@ $.getJSON(api_url+username+"/repos?type=owner",
           lang[repo.language] = 0
         lang[repo.language] += 1
       size += 1
+    tuple_arr = []
+    for key, value of lang
+      tuple_arr.push([key, value])
+    tuple_arr.sort(
+      (a, b)->
+        b[1]-a[1]
+    )
 
+    $.getJSON("vendors/github-language-colors/colors.json", 
+      (clr)->
+        # use the first 6
+        for item in tuple_arr[0...6]
+          l = item[0]
+          n = item[1]
+          $("#skills ul#lang-container").append(
+            "<li style=\"background-color:"+clr[l]+"; \">"+ parseInt(n/size * 100) + "% </li>"
+          )
+    )
 )

css/style.css

@@ -137,6 +137,23 @@ hr {
   background-color: #0099ff;
   color: #ffffff;
 }
+.container#skills ul#lang-container {
+  display: inline-block;
+}
+.container#skills ul#lang-container li {
+  margin: 0 10px;
+  height: 56px;
+  width: 56px;
+  border-radius: 50em;
+  -moz-border-radius: 50em;
+  -webkit-border-radius: 50em;
+  text-align: center;
+  line-height: 56px;
+  background-color: #0099ff;
+  font-size: 130%;
+  float: left;
+  color: #ffffff;
+}
 .container#repos h2 {
   font-weight: normal;
   font-size: 152%;

index.html

@@ -19,12 +19,10 @@
     <link rel="stylesheet" href="vendors/bootstrap/css/bootstrap.min.css"/>
     <!-- use impress demo's font, thanks! -->
     <link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
-    <link rel="stylesheet"type="text/css" href="vendors/easy-pie-chart/jquery.easy-pie-chart.css">
     <!-- rusume style sheet -->
     <link rel="stylesheet" href="css/style.css" />
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 
-    <script type="text/javascript" src="vendors/easy-pie-chart/jquery.easy-pie-chart.js"></script>
     <!-- application js -->
     <script src="js/ghresume.js" type="text/javascript" charset="utf-8"></script>
   </head>
@@ -74,6 +72,8 @@ <h2>follower</h2>
   <div class="container" id="skills">
     <h2>Skills</h2>
     <hr>
+    <ul id="lang-container">
+    </ul>
   </div>
   <div class="container" id="repos">
     <h2>Popular Repositories</h2>

js/ghresume.js

@@ -27,7 +27,7 @@
   });
 
   $.getJSON(api_url + username + "/repos?type=owner", function(res) {
-    var homepage, lang, language, repo, size, _i, _j, _len, _len1, _ref, _results;
+    var homepage, key, lang, language, repo, size, tuple_arr, value, _i, _j, _len, _len1, _ref;
     res.sort(function(a, b) {
       var ap, bp;
       ap = a.watchers_count + a.forks_count;
@@ -49,7 +49,6 @@
     }
     lang = [];
     size = 0;
-    _results = [];
     for (_j = 0, _len1 = res.length; _j < _len1; _j++) {
       repo = res[_j];
       if (repo.language) {
@@ -58,9 +57,28 @@
         }
         lang[repo.language] += 1;
       }
-      _results.push(size += 1);
+      size += 1;
     }
-    return _results;
+    tuple_arr = [];
+    for (key in lang) {
+      value = lang[key];
+      tuple_arr.push([key, value]);
+    }
+    tuple_arr.sort(function(a, b) {
+      return b[1] - a[1];
+    });
+    return $.getJSON("vendors/github-language-colors/colors.json", function(clr) {
+      var item, l, n, _k, _len2, _ref1, _results;
+      _ref1 = tuple_arr.slice(0, 6);
+      _results = [];
+      for (_k = 0, _len2 = _ref1.length; _k < _len2; _k++) {
+        item = _ref1[_k];
+        l = item[0];
+        n = item[1];
+        _results.push($("#skills ul#lang-container").append("<li style=\"background-color:" + clr[l] + "; \">" + parseInt(n / size * 100) + "% </li>"));
+      }
+      return _results;
+    });
   });
 
 }).call(this);

less/style.less

@@ -151,7 +151,17 @@ hr{
 }
 
 .container#skills{
-
+    ul#lang-container{
+        display:inline-block;
+        li{
+            margin: 0 10px; 
+            .text-circle(28px); 
+            background-color: @light-blue; 
+            font-size: @h3-size; 
+            float: left; 
+            color: @white; 
+        }
+    }
 }
 
 .container#repos{