<!--==== Start Code ====-->
<div class="code">
<div class="line-count">
</div>
<!--==== Start Code Items ====-->
<div class="code-items">
<!--==== Start Code Item ====-->
<div class="code-item">
<!-- /selection -->
<span class="code-selection">.I-am</span>
<!--==== Start Code Item Content ====-->
<span class="code-item-content">
<!-- /code line -->
<span class="code-item-line">
<span class="code-item-attr">Name</span>
<span class="code-item-value">
Israel Ramirez
</span>
</span>
<!-- /code line -->
<span class="code-item-line">
<span class="code-item-attr">Job</span>
<span class="code-item-value">
Front-end Developer
</span>
</span>
<!-- /code line -->
<span class="code-item-line">
<span class="code-item-attr">Web</span>
<span class="code-item-value">
<a target="_blank" href="https://isra.netlify.com/">isra.netlify.com</a>
</span>
</span>
<!-- /code line -->
<span class="code-item-line">
<span class="code-item-attr">GitHub</span>
<span class="code-item-value">
<a target="_blank" href="https://github.com/israelram">@israelram</a>
</span>
</span>
<!-- /code line -->
<span class="code-item-line">
<span class="code-item-attr">Twitter</span>
<span class="code-item-value">
<a target="_blank" href="https://twitter.com/israeldlangel">@israeldlangel</a>
</span>
</span>
<!-- /code line -->
<span class="code-item-line">
<span class="code-item-attr">E-Mail</span>
<span class="code-item-value">
israplenitud@gmail.com
</span>
</span>
</span>
<!--==== Finish Code Item Content ====-->
</div>
<!--==== Finish Code Item ====-->
<!--==== Start Code Item ====-->
<div class="code-item">
<!-- /selection -->
<span class="code-selection">.About</span>
<!--==== Start Code Item Content ====-->
<span class="code-item-content">
<!-- /code line -->
<span class="code-item-line">
<span class="code-item-attr">Country</span>
<span class="code-item-value">
México
</span>
</span>
<!-- /code line -->
<span class="code-item-line">
<span class="code-item-attr">City</span>
<span class="code-item-value">
Cerro Azul
</span>
</span>
<!-- /code line -->
<span class="code-item-line">
<span class="code-item-attr">Age</span>
<span class="code-item-value">
34
</span>
</span>
</span>
<!--==== Finish Code Item Content ====-->
</div>
<!--==== Finish Code Item ====-->
<!--==== Start Code Item ====-->
<div class="code-item">
<!-- /selection -->
<span class="code-selection">.About:before</span>
<!--==== Start Code Item Content ====-->
<span class="code-item-content">
<!-- /code line value-content -->
<span class="code-item-line value-content">
<span class="code-item-attr">Content</span>
<span class="code-item-value">
Hello! My name is Israel Omar and I am passionate about front-end programming. When programming, I am very curious and I like to try new things and understand how they work. I love learning, whether doing pair programming or on my own, and I always try to provide suggestions. I have great adaptability and I feel very motivated when I can work on new projects. Also, in my code I am applying everything I learn about Clean Code :)
</span>
</span>
</span>
<!--==== Finish Code Item Content ====-->
</div>
<!--==== Finish Code Item ====-->
<!--==== Start Code Item ====-->
<div class="code-item">
<!-- /selection -->
<span class="code-selection">.Work-experience</span>
<!--==== Start Code Item Content ====-->
<span class="code-item-content">
<!-- /code line -->
<span class="code-item-line">
<span class="code-item-attr">Experience-process</span>
<span class="code-item-value">
4.5 Year
</span>
</span>
<!-- /code line -->
<span class="code-item-line">
<span class="code-item-attr">Finished-projects</span>
<span class="code-item-value">
38
</span>
</span>
</span>
<!--==== Finish Code Item Content ====-->
</div>
<!--==== Finish Code Item ====-->
<!--==== Start Code Item ====-->
<div class="code-item">
<!-- /selection -->
<span class="code-selection">.Work-experience .first</span>
<!--==== Start Code Item Content ====-->
<span class="code-item-content">
<!-- /code line -->
<span class="code-item-line">
<span class="code-item-attr">Company-name</span>
<span class="code-item-value">
Zona Naranja Web
</span>
</span>
<!-- /code line -->
<span class="code-item-line">
<span class="code-item-attr">My-position</span>
<span class="code-item-value">
Front-end Developer
</span>
</span>
<!-- /code line -->
<span class="code-item-line">
<span class="code-item-attr">Working-process</span>
<span class="code-item-value">
10 Months
</span>
</span>
</span>
<!--==== Finish Code Item Content ====-->
</div>
<!--==== Finish Code Item ====-->
<!--==== Start Code Item ====-->
<div class="code-item">
<!-- /selection -->
<span class="code-selection">.Work-experience .second</span>
<!--==== Start Code Item Content ====-->
<span class="code-item-content">
<!-- /code line -->
<span class="code-item-line">
<span class="code-item-attr">Company-name</span>
<span class="code-item-value">
Merx
</span>
</span>
<!-- /code line -->
<span class="code-item-line">
<span class="code-item-attr">My-position</span>
<span class="code-item-value">
Front-end Developer
</span>
</span>
<!-- /code line -->
<span class="code-item-line">
<span class="code-item-attr">Working-process</span>
<span class="code-item-value">
24 Months
</span>
</span>
</span>
<!--==== Finish Code Item Content ====-->
</div>
<!--==== Finish Code Item ====-->
<!--==== Start Code Item ====-->
<div class="code-item">
<!-- /selection -->
<span class="code-selection">.Skills</span>
<!--==== Start Code Item Content ====-->
<span class="code-item-content">
<!-- /code line value-number -->
<span class="code-item-line value-number value-number-percent">
<span class="code-item-attr">HTML5</span>
<span class="code-item-value">
90<span class="value-number-percent">%</span>
</span>
</span>
<!-- /code line value-number -->
<span class="code-item-line value-number value-number-percent">
<span class="code-item-attr">CSS3</span>
<span class="code-item-value">
90<span class="value-number-percent">%</span>
</span>
</span>
<!-- /code line value-number -->
<span class="code-item-line value-number value-number-percent">
<span class="code-item-attr">Javascript</span>
<span class="code-item-value">
85<span class="value-number-percent">%</span>
</span>
</span>
</span>
<!--==== Finish Code Item Content ====-->
</div>
<!--==== Finish Code Item ====-->
<!--==== Start Code Item ====-->
<div class="code-item">
<!-- /selection -->
<span class="code-selection">.Skills .CSS</span>
<!--==== Start Code Item Content ====-->
<span class="code-item-content">
<!-- /code line value-number -->
<span class="code-item-line value-number value-number-percent">
<span class="code-item-attr">Object-Oriented CSS (SASS)</span>
<span class="code-item-value">
70<span class="value-number-percent">%</span>
</span>
</span>
</span>
<!--==== Finish Code Item Content ====-->
</div>
<!--==== Finish Code Item ====-->
<!--==== Start Code Item ====-->
<div class="code-item">
<!-- /selection -->
<span class="code-selection">.Skills .Javascript</span>
<!--==== Start Code Item Content ====-->
<span class="code-item-content">
<!-- /code line value-number -->
<span class="code-item-line value-number value-number-percent">
<span class="code-item-attr">AngularJS</span>
<span class="code-item-value">
90<span class="value-number-percent">%</span>
</span>
</span>
<!-- /code line value-number -->
<span class="code-item-line value-number value-number-percent">
<span class="code-item-attr">VueJS</span>
<span class="code-item-value">
70<span class="value-number-percent">%</span>
</span>
</span>
</span>
<!--==== Finish Code Item Content ====-->
</div>
<!--==== Finish Code Item ====-->
<!--==== Start Code Item ====-->
<div class="code-item">
<!-- /selection -->
<span class="code-selection">.Education-information</span>
<!--==== Start Code Item Content ====-->
<span class="code-item-content">
<!-- /code line -->
<span class="code-item-line">
<span class="code-item-attr">Leeway</span>
<span class="code-item-value">
Yeah
</span>
</span>
</span>
<!--==== Finish Code Item Content ====-->
</div>
<!--==== Finish Code Item ====-->
<!--==== Start Code Item ====-->
<div class="code-item">
<!-- /selection -->
<span class="code-selection">.Education-information .first</span>
<!--==== Start Code Item Content ====-->
<span class="code-item-content">
<!-- /code line -->
<span class="code-item-line">
<span class="code-item-attr">School-name</span>
<span class="code-item-value">
Sehit Idare Atese Galip Ozmen E.M.L
</span>
</span>
<!-- /code line -->
<span class="code-item-line">
<span class="code-item-attr">Year-of-study</span>
<span class="code-item-value">
2011 - 2015
</span>
</span>
<!-- /code line -->
<span class="code-item-line">
<span class="code-item-attr">Department-of-education</span>
<span class="code-item-value">
IT Technology
</span>
</span>
<!-- /code line -->
<span class="code-item-line">
<span class="code-item-attr">Education-branch</span>
<span class="code-item-value">
Web Design and Programming
</span>
</span>
</span>
<!--==== Finish Code Item Content ====-->
</div>
<!--==== Finish Code Item ====-->
<!--==== Start Code Item ====-->
<div class="code-item">
<!-- /selection -->
<span class="code-selection">.Education-information .second</span>
<!--==== Start Code Item Content ====-->
<span class="code-item-content">
<!-- /code line -->
<span class="code-item-line">
<span class="code-item-attr">School-name</span>
<span class="code-item-value">
University Preparation
</span>
</span>
<!-- /code line -->
<span class="code-item-line">
<span class="code-item-attr">Year-of-study</span>
<span class="code-item-value">
2015 - 2017
</span>
</span>
<!-- /code line -->
<span class="code-item-line">
<span class="code-item-attr">Department-of-education</span>
<span class="code-item-value">
Computer Programming
</span>
</span>
</span>
<!--==== Finish Code Item Content ====-->
</div>
<!--==== Finish Code Item ====-->
<!--==== Start Code Item ====-->
<div class="code-item description-item">
<!-- /description line -->
<div class="description-item-line">
Thank you for reading
</div>
</div>
<!--==== Finish Code Item ====-->
</div>
<!--==== Finish Code Items ====-->
</div>
<!--==== Finish Code ====-->
/* Author : Israel Ramirez
Description : My CV
Date : 11.07.2018
*/
.code,
.code .line-count,
.code .line-count span,
.code .code-items,
.code .code-items .code-item,
.code .code-items .code-item .code-item-content,
.code .code-items .code-item .code-item-content .code-item-line,
.code .code-items .code-item.description-item .description-item-line{
float: left;
position: relative;
}
.code,
.code .line-count span,
.code .code-items .code-item,
.code .code-items .code-item .code-item-content,
.code .code-items .code-item .code-item-content .code-item-line,
.code .code-items .code-item.description-item .description-item-line{
width: 100%;
}
.code .line-count{
float: left;
position: relative;
width: 60px;
}
.code .line-count span{
text-align: center;
line-height: 25px;
color: rgba(255,255,255,.5);
transition:100ms linear;
-webkit-transition:100ms linear;
-ms-transition:100ms linear;
}
.code .code-items{
width: calc(100% - 60px);
float: left;
position: relative;
}
.code .code-items .code-item{
margin-bottom: 25px;
}
.code .code-items .code-item .directional-arrow{
position: absolute;
top: 6px;
left: -15px;
cursor: pointer;
}
.code .code-items .code-item .directional-arrow:before{
content: "\f0d7";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
color: rgba(255,255,255,.5);
}
.code .code-items .code-item.close .directional-arrow:before{
content: "\f0da";
}
.code .code-items .code-item:after{
content: "}";
width: 100%;
float: left;
position:relative;
color: #fff;
line-height: 25px;
}
.code .code-items .code-item .code-selection{
width: 100%;
float: left;
position: relative;
color: #A6E22E;
line-height: 25px;
}
.code .code-items .code-item .code-selection:after{
content: "{";
color: #fff;
margin-left: 5px;
}
.code .code-items .code-item .code-item-content{
padding-left: 40px;
line-height: 25px;
}
.code .code-items .code-item .code-item-content:before{
content: "";
position: absolute;
left: 0;
top: 3px;
height: calc(100% - 6px);
width: 1px;
border-left:1px dotted rgba(255,255,255,.3);
}
.code .code-items .code-item .code-item-content .code-item-line .code-item-attr{
color: #66D9EF;
font-style: italic;
}
.code .code-items .code-item .code-item-content .code-item-line .code-item-attr:after{
content: ":";
font-style: normal;
color: #fff;
font-size: .9em;
margin-left: 2.5px;
}
.code .code-items .code-item .code-item-content .code-item-line{
margin-bottom: -1px;
}
.code .code-items .code-item .code-item-content .code-item-line .code-item-value,
.code .code-items .code-item .code-item-content .code-item-line .code-item-value a{
color: #66D9EF;
}
.code .code-items .code-item .code-item-content .code-item-line .code-item-value a:hover{
background: rgba(255,255,255,.2);
}
.code .code-items .code-item .code-item-content .code-item-line .code-item-value:after{
content: ";";
color: #fff;
font-size: .9em;
margin-left: -7.5px;
}
.code .code-items .code-item .code-item-content .code-item-line.value-content{
margin-top: 0px;
margin-bottom: -4px;
}
.code .code-items .code-item .code-item-content .code-item-line.value-content .code-item-value{
color: #E6DB74;
}
.code .code-items .code-item .code-item-content .code-item-line.value-content .code-item-value:before,
.code .code-items .code-item .code-item-content .code-item-line.value-content .code-item-value:after{
content: '"';
color: #E6DB74;
}
.code .code-items .code-item .code-item-content .code-item-line.value-content .code-item-value:before{
margin-right: -5px;
}
.code .code-items .code-item .code-item-content .code-item-line.value-content .code-item-value:after{
margin-left: -5px;
}
.code .code-items .code-item .code-item-content .code-item-line.value-number .code-item-value{
color: #AE81FF;
}
.code .code-items .code-item .code-item-content .code-item-line.value-number .code-item-value .value-number-percent{
color: #F92672;
}
.code .code-items .code-item.description-item .directional-arrow{
display: none;
}
.code .code-items .code-item.description-item:after{
content: "";
}
.code .code-items .code-item.description-item .description-item-line:before{
content: "//";
}
.code .code-items .code-item.description-item .description-item-line{
color: rgba(255,255,255,.5);
line-height: 25px;
margin-bottom: 25px;
}
body{
background: #272822;
font-family: "Consolas";
font-size: 16px;
}
::-moz-selection {
background: rgba(255,255,255,.15);
}
::selection {
background: rgba(255,255,255,.15);
}
*,
*:after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin:0;
padding:0;
text-decoration: none;
list-style-type: none;
outline: none;
}
$(function(){
// Window dp
var w = $(window).width();
var h = $(window).height();
// Append line
var lineCount = $(".code").height() / 25;
for(var i = 1; i <= lineCount; i++){
$(".line-count").append("<span>"+i+"</span>")
}
// Window hover
$(window).hover(function(e){
lineCount = $(".code").height() / 25;
var pY = e.pageY;
for(var c = 1; c <= lineCount; c++){
if(pY > $(".line-count span:nth-child("+c+")").offset().top && pY < $(".line-count span:nth-child("+c+")").offset().top + 25){
$(".line-count span:nth-child("+c+")").css({
background:"rgba(255,255,255,.1)"
})
}
}
},function(){
$(".line-count span").css({
background:"#272822"
})
});
// add direction arrow
$(".code-items .code-item").append('<span class="directional-arrow"></span>')
// click direction arrow
$(".code-items .code-item .directional-arrow").click(function(){
if($(this).parent().hasClass('close')){
$(this).parent().removeClass('close')
$(".code-item-content",$(this).parent()).show();
// Append line
$(".line-count").html("");
var lineCount = $(".code").height() / 25;
for(var i = 1; i <= lineCount; i++){
$(".line-count").append("<span>"+i+"</span>")
}
}else{
$(this).parent().addClass('close');
$(".code-item-content",$(this).parent()).hide();
// Append line
$(".line-count").html("");
var lineCount = $(".code").height() / 25;
for(var i = 1; i <= lineCount; i++){
$(".line-count").append("<span>"+i+"</span>")
}
}
})
});