<style type="text/css" class="silex-style"></style>
<script type="text/javascript" class="silex-script"></script>
<style class="silex-inline-styles" type="text/css">
.body-initial {
background-color: rgba(255, 255, 255, 1);
}
.silex-id-1478366444112-1 {
top: 100px;
left: NaNpx;
background-color: transparent;
}
.silex-id-1478366444112-0 {
min-height: 100px;
background-color: transparent;
width: 1200px;
}
.silex-id-1474394621033-3 {
top: 5px;
left: 0px;
}
.silex-id-1474394621032-2 {
min-height: 600px;
background-color: transparent;
width: 1200px;
}
.silex-id-1478366450713-3 {
top: 100px;
left: NaNpx;
background-color: transparent;
}
.silex-id-1478366450713-2 {
min-height: 100px;
background-color: transparent;
width: 1200px;
}
.silex-id-1442914737143-3 {
min-height: 53px;
width: 349px;
top: 29px;
left: 430px;
}
.silex-id-1509476106596-0 {
min-height: 100px;
width: 400px;
background-color: transparent;
top: 100px;
left: 340px;
}
</style>
<title>AT home, please be welcome</title>
<script type="text/javascript" class="silex-json-styles">
[{"desktop":{"body-initial":{"background-color":"rgba(255,255,255,1)"},"silex-id-1474394621033-3":{"top":"5px","left":"0px"},"silex-id-1474394621032-2":{"min-height":"600px","background-color":"transparent","width":"1200px"},"silex-id-1474394605264-1":{"min-height":"100px","width":"100px","top":"100px","left":"100px"},"silex-id-1474394605263-0":{"min-height":"100px","background-color":"transparent"},"silex-id-1442914737143-3":{"min-height":"53px","width":"349px","top":"29px","left":"430px"},"silex-id-1478366444112-0":{"min-height":"100px","background-color":"transparent","width":"1200px"},"silex-id-1478366444112-1":{"top":"100px","left":"NaNpx","background-color":"transparent"},"silex-id-1478366450713-2":{"min-height":"100px","background-color":"transparent","width":"1200px"},"silex-id-1478366450713-3":{"top":"100px","left":"NaNpx","background-color":"transparent"},"silex-id-1509476106596-0":{"min-height":"100px","width":"400px","background-color":"transparent","top":"100px","left":"340px"}},"mobile":{},"componentData":{"silex-id-1509476106596-0":{"name":"skill-bars1","templateName":"skill-bars"}}}]
</script>
<meta name="website-width" content="1200">
<style type="text/css" class="silex-style-settings">
.website-width {
width: 1200px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2.2" data-silex-viewport="">
<style id="current-page-style">
.page-page-1 {
display: inherit;
}
</style>
<!-- Silex HEAD tag do not remove -->
<!-- End of Silex HEAD tag do not remove -->
<a id="page-page-1" data-silex-type="page" class="page-element page-link-active">Page 1</a></div>
<div data-silex-type="container" class="prevent-draggable container-element editable-style silex-id-1478366444112-1 section-element" data-silex-id="silex-id-1478366444112-1" style="">
<div data-silex-type="container" class="editable-style silex-element-content silex-id-1478366444112-0 silex-container-content container-element prevent-draggable website-width" data-silex-id="silex-id-1478366444112-0"></div>
</div>
<div data-silex-type="container" class="prevent-draggable container-element editable-style silex-id-1474394621033-3 section-element" data-silex-id="silex-id-1474394621033-3" style="">
<div data-silex-type="container" class="editable-style silex-element-content silex-id-1474394621032-2 silex-container-content container-element prevent-draggable website-width" data-silex-id="silex-id-1474394621032-2"></div>
</div>
<div data-silex-type="container" class="prevent-draggable container-element editable-style silex-id-1478366450713-3 section-element" data-silex-id="silex-id-1478366450713-3" style="">
<div data-silex-type="container" class="editable-style silex-element-content silex-id-1478366450713-2 silex-container-content container-element prevent-draggable website-width" data-silex-id="silex-id-1478366450713-2">
<div data-silex-id="silex-id-1442914737143-3" class="editable-style silex-id-1442914737143-3 text-element" data-silex-type="text" style="">
<div class="silex-element-content normal">
<br>
<div style="text-align: center;"><a href="//www.silex.me/">Powered by Silex</a></div>
</div>
</div>
</div>
</div>
<div data-silex-type="html" class="editable-style silex-id-1509476106596-0 html-element silex-component silex-component-skill-bars" data-silex-id="silex-id-1509476106596-0">
<div class="silex-element-content">
<style type="text/css">
.skillbar {
position: relative;
display: block;
margin-bottom: 15px;
width: 100%;
background: #eee;
height: 35px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-transition: 0.4s linear;
-moz-transition: 0.4s linear;
-ms-transition: 0.4s linear;
-o-transition: 0.4s linear;
transition: 0.4s linear;
-webkit-transition-property: width, background-color;
-moz-transition-property: width, background-color;
-ms-transition-property: width, background-color;
-o-transition-property: width, background-color;
transition-property: width, background-color;
}
.skillbar-title {
position: relative;
float: left;
width: 25%;
font-weight: bold;
font-size: 13px;
color: #ffffff;
background: #6adcfa;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.skillbar-title span {
display: block;
text-align: center;
background: rgba(0, 0, 0, 0.1);
height: 35px;
line-height: 35px;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.skillbar-bar {
float: left;
height: 35px;
width: 0px;
border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
}
.skill-bar-percent {
position: absolute;
right: 10px;
top: 0;
font-size: 11px;
height: 35px;
line-height: 35px;
color: #ffffff;
color: rgba(0, 0, 0, 0.4);
}
</style>
<script type="text/javascript">
var fillBarSize = $('.skillbar').width() * (1 - 25 / 100);
$('.skillbar').each(function(){
$(this).find('.skillbar-bar').delay(500).animate({
width: (fillBarSize * parseInt($(this).attr('data-percent')) / 100) + 'px'
},6000);
});
</script>
</div>
</div>