<!--==== 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>")
			}
		}

	})
	

});

External CSS

  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js