A CodePen by Tim Pietrusky. ID Card - Skills - Inspired by [iD vCard](http://dribbble.com/shots/463484-iD-vCard) from [Niklas Mathiesen](http://dribbble.com/nikm) **Work in progress as always :D**

index.haml

%body.bg-grid-line

%div.card
  %header 
    %h1 Skills
  %article   
    %img#thumb{:src => "http://timpietrusky.com/img/tim_pietrusky_on_rampage.jpg", :alt => "My Pic"}
    %h2 Tim Pietrusky

    %div.area
      %h3 Frontend Development
      %ul 
        %li
          HTML
          %span.bar.percent-100
        %li
          CSS
          %span.bar.percent-90
        %li
          The Force.js
          %span.bar.percent-100
      %h3 Backend Development
      %ul 
        %li
          PHP
          %span.bar.percent-90
        %li
          Java
          %span.bar.percent-80
        %li
          MySQL
          %span.bar.percent-70
      %h3 Tools
      %ul 
        %li 
          Photoshop
          %span.bar.percent-70
        %li 
          Eclipse
          %span.bar.percent-80
        %li 
          Shell
          %span.bar.percent-90
      %h3 OS
      %ul 
        %li 
          Ubuntu
          %span.bar.percent-80
        %li 
          Windows
          %span.bar.percent-50

script.js

/**
  ID Card - Skills
  
  # What? #
  Inspired by "iD vCard" from "Niklas Mathiesen"
  http://dribbble.com/shots/463484-iD-vCard


  # 2012 by Tim Pietrusky
  # timpietrusky.com
**/

style.css

* {
  box-sizing:border-box;
}

body {
  margin-top:80px;
  
 
  font-family: "HelveticaNeue-CondensedBold", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

/*
 * CSS Background Grid Lines by Jason Delia
 * http://codepen.io/jasonadelia/pen/DnrAe
 */
.bg-grid-line,
.card:after,
.card header:before {
  background-color: #333;
  background-image: 
    linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), 
    linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
  height:100%;
  background-size:50px 50px;
}

.card {
  position:relative;
  height:380px;
  width:750px;
  margin:0 auto;
  background:#ECECEC;
  border-radius:4px;
  
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .4),
    0 0 10px rgba(0, 0, 0, .55),
    0 2px 10px rgba(0, 0, 0, .6)
  ;
}

.card:hover img {
  -webkit-filter:invert(100%);
  filter:invert(100%);
  
  border:5px solid rgba(0, 0, 0, .5);
  box-shadow:0 0 3px rgba(255, 255, 255, .25);
}

/* card stripe */
.card:before {
  position:absolute;
  z-index:2;
  content:'';
  left:50%;
  top:-70px;
  margin: 0 0 0 -40px;
  height:100px;
  width:80px;
  background: rgba(255, 255, 255, .2);
  background-image: 
    linear-gradient(left, rgba(255,255,255, .4) 0%, rgba(255,255,255, .1) 50%,rgba(255,255,255, .4) 100%),
    linear-gradient(bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(top, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 40%)
  ;
  border-radius:6px;
  box-shadow:0 0 0 1px rgba(0, 0, 0, .8);
  opacity:.5;
}


/* card stripe clip */
.card:after {
    position:absolute;
    content:'';
    z-index:2;
    height:20px;
    width:20px;
    top:-55px;
    left:50%;
    margin:0 0 0 -10px;
    
    border-radius:50%;
    box-shadow:
        0 0 0 5px rgba(255, 255, 255, .6),
        0 0 10px rgba(0, 0, 0, .7),
        inset 2px 2px 2px rgba(0, 0, 0, .5)
    ;
}

.card header {
  position:relative;
  background:#ED3D34;
  height:90px;
  width:100%;
  border-top-left-radius:4px;
  border-top-right-radius:4px;
  border-bottom:2px solid rgba(180, 80, 80, .5);
  border-top:1px solid rgba(221, 108, 108, .8);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 120, 120, .8),
    0 1px 2px rgba(0, 0, 0, .4)
  ;
  
  padding:35px 20px;
  opacity:.9;
}

/* top gradient */
.card header:after {
  position:absolute;
  content:'';
  left:1px;
  top:1px;
  width:100%;
  height:10px;
  background:
    linear-gradient(bottom, rgba(255,255,255, .1) 0%, rgba(255,255,255,.05) 70%, rgba(255,255,255,0) 100%);
}

/* card hole */
.card header:before {
  position:absolute;
  z-index:1;
  content:'';
  left:50%;
  top:22px;
  margin: 0 0 0 -50px;
  height:15px;
  width:100px;
  border-radius:25px;
  box-shadow:
    inset 1px 1px 0 1px rgba(0, 0, 0, .3),
    inset -1px -1px 0 0 rgba(255, 255, 255, .5)
  ;
}

.card header h1 {
  color:#fff;
  line-height:90%;
  font-size:35px;
  margin:0;
  text-shadow:-1px -1px 1px rgba(0, 0, 0, .5);
}

.card article {
  padding:30px;
}

.card article img {
  border:5px solid transparent;
  box-shadow:0 0 3px rgba(0, 0, 0, .25);
  float:left;
  margin-right:30px;
  width:190px;
  height:200px;
  transition:all .3s ease-in-out;
}

.card article h2 {
  color:#515355;
  float:left;
  margin:0 5px 15px 0;
  font-weight:normal;
  border-bottom:2px dotted rgba(40, 40, 40, .2);
  padding:0 0 8px 0;
  width:450px;
}

.card article .area {
  position:relative;
  height:170px;
  width:470px;
  float:left;
  overflow-y:scroll;
}

.card article .area h3 {
  margin:0;
  color:#5F6163;
  font-size:20px
}

.card article .area ul {
  margin:5px 0 30px 0;
  padding:0;
  list-style:none;
}

.card article .area ul li {
  margin:20px 0 0 0;
  font-size:16px;
  color:#94957F;
  text-shadow:0 0 1px rgba(0, 0, 0, .3);
}

.card article .area ul li .bar {
  position:relative;
  width:280px;
  height:15px;
  display:inline-block;
  border-radius:50px;
  float:right;
  margin:0 15px 0 0;
  
  opacity:.9;
  
  background-color:#CACACA;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .35);
}

.card article .area ul li .bar:before {
  position:absolute;
  left:0;
  width:0;
  height:15px;
  background-image:
    linear-gradient(to right, rgba(254,213,121,.8) 0%,rgba(254,204,105,.8) 100%),
    repeating-linear-gradient(-45deg, transparent, 
      transparent 4px, 
      rgba(255,255,255,.5) 4px, 
      rgba(255,255,255,.5) 10px);
  box-shadow:
    inset 0 4px 4px rgba(255, 255, 255, .3),
    inset 0 -2px 3px rgba(0, 0, 0, .05),
    0 1px 0 0px #D29D40
  ;
  display:inline-block;
  border-radius:50px;
  content:'';
  z-index:-1;
}

.card article .area ul li .bar.percent-100:before {width:280px;}
.card article .area ul li .bar.percent-90:before {width:260px;}
.card article .area ul li .bar.percent-80:before {width:240px;}
.card article .area ul li .bar.percent-70:before {width:220px;}
.card article .area ul li .bar.percent-60:before {width:200px;}
.card article .area ul li .bar.percent-50:before {width:180px;}

.card article .area ul li:before {
  content:'\2605';
  margin-right:5px;
}

.card article .area::-webkit-scrollbar {
  width: 10px;
}
 
.card article .area::-webkit-scrollbar-track {
  background-color: rgba(217, 217, 217, .5);
  border-radius:50px;
}

.card article .area::-webkit-scrollbar-thumb {
  background: rgba(184, 184, 184, .5);
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.07)
  ;
  border-radius:50px;
}