<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<a class="anchor" id="a-competencies"></a>
<!-- /.row -->
<section class="">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="sectionTitle">Competencies</div>
<div id="skillgraph" class="panel panel-default row">
<div class='panel-title text-Left '></div>
<div class='row skill-row'>
<span class='skillLabel'>Design Layer</span>
<span class='skillData-Wrapper'>
<span class='skillData bg-blue text-center' data-percent='50'>Intermediate</span></span>
</div>
<div class='row skill-row'>
<span class='skillLabel'>Front End {View} </span><code>(Skills: HTML, css, sass, blade, jquery, bootstrap, Laravel Blade)</code>
<span class='skillData-Wrapper'>
<span class='skillData bg-rust' data-percent='60'>Intermediate</span></span>
</div>
<div class='row skill-row'>
<span class='skillLabel'>Middle Layer {Controller}</span><code>(Skills: php, Laravel)</code>
<span class='skillData-Wrapper'>
<span class='skillData bg-blue' data-percent='80'>Strong</span></span>
</div>
<div class='row skill-row'>
<span class='skillLabel'>Data Layer {Model}</span><code>(Skills: MS SQL, MySQL, Laravel Eloquent)</code>
<span class='skillData-Wrapper'>
<span class='skillData bg-rust' data-percent='80'>Strong</span></span>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
</section>
.bg-lightgray, .skillData-Wrapper {
background-color: #ddd;
}
.skillData-Wrapper {
width: 100%;
}
#skillgraphWrapper-break {
display: inline-block;
position: relative;
width: 100%; }
#skillgraphWrapper-break:after {
margin-left: 85px;
content: '';
position: absolute;
height: 100%;
width: -moz-calc(100% - 85px + 15px);
width: -webkit-calc(100% - 85px + 15px);
width: calc(100% - 85px + 15px);
top: 0;
left: 0;
background: linear-gradient(to right, #000 2px, transparent 2px);
background-size: 10%;
background-color: rgba(255, 0, 0, 0.2); }
#skillgraph {
padding: 1em; }
.skill-row-break {
border-color: red;
border-width: 2px;
border-style: solid; }
.skill-row {
margin: 0 0 20px 0; }
.skillLabel {
float: left;
width: 100%;
color: black; }
.skillData, .skillData-Wrapper {
line-height: 0.1 0.7em;
height: 0.1 0.7em;
width: .1em;
float: left;
color: white;
text-align: center; }
.skillData-Wrapper {
width: 100%; }
.bg-blue {
background-color: #0f434c; }
.bg-red {
background-color: red; }
.bg-rust {
background-color: #33a4c9;
}
/* section classes */
.sectionTitle {
padding: 0 0 0px 70px;
margin: 50px 0;
position: relative;
}
.sectionTitle:before {
background-color: #33a4c9;
border-radius: 25px;
content: ' ';
display: block;
height: 50px;
left: 0;
position: absolute;
top: 0px;
width: 50px;
}
.sectionTitle-font, .sectionTitle {
font-size: 2.5rem;
}
section {
font-size: 1.8rem;
}
function loadSkillgraph() {
$(".skillData").each(function(index, element) {
// element == this
var mydata = $(element).data();
var cnt = 0;
//recursive call with a time delay so user can see graph draw.
function go() {
if (cnt++ < mydata['percent']) {
setTimeout(go, 10);
}
$(element).css('width', cnt + '%');
}
go();
});
}
loadSkillgraph();
