stars.html

## stars.html
<style>
.stars-sup {
    font-size: 75%;
    position: relative;
    top: -6px;
    left: 6px;
}
</style>
<ul class="used-technologies">
    <li>Design UX<span class="stars-sup" data-stars="4"></span></li>
    <li>Design Software<span class="stars-sup" data-stars="3"></span></li>
    <li> Database Architecture<span class="stars-sup" data-stars="4"></span></li>
    <li> .NET<span class="stars-sup" data-stars="4"></span></li>
    <li> C# latest<span class="stars-sup" data-stars="4"></span></li>
    <li> ASP.NET<span class="stars-sup" data-stars="3"></span></li>
    <li> PHP<span class="stars-sup" data-stars="3"></span></li>
    <li> Python<span class="stars-sup" data-stars="3"></span></li>
    <li> Django<span class="stars-sup" data-stars="3"></span></li>
    <li> JavaScript<span class="stars-sup" data-stars="4"></span></li>
    <li> jQuery<span class="stars-sup" data-stars="5"></span></li>
    <li> jQuery UI<span class="stars-sup" data-stars="3"></span></li>
    <li> Dojo<span class="stars-sup" data-stars="2"></span></li>
    <li> HTML5 Canvas<span class="stars-sup" data-stars="2"></span></li>
</ul>

## stars.js
$(document).ready(function () {
  //fast and simple stars ratings creation function
  var stars = [
      '&#9734&#9734&#9734&#9734&#9734', //0
      '&#9733&#9734&#9734&#9734&#9734', //1
      '&#9733&#9733&#9734&#9734&#9734', //2
      '&#9733&#9733&#9733&#9734&#9734', //3
      '&#9733&#9733&#9733&#9733&#9734', //4
      '&#9733&#9733&#9733&#9733&#9733' //5
  ];
  $('[data-stars]').each(function (i, el) {
      var numStars = $(el).data('stars');
      $(el).html('(' + stars[numStars] + ')');
}