Bower magic.

.bowerrc

+{
+	"directory": "bower",
+	"json": "bower.json"
+}
\ No newline at end of file

.gitignore

+bower/

bower.json

+{
+	"name": "Inara-CV",
+	"version": "0.0.1",
+	"ignore": [
+		"**/.*",
+		"node_modules",
+		"bower"
+	],
+	"dependencies": {
+		"bootstrap": "^3.3.7",
+		"components-font-awesome": "^4.6.3"
+	}
+}
\ No newline at end of file

css/main.css

@@ -2,22 +2,44 @@
 3ColorResume
 Author: office@kamsolutions.pl
 *******************************************/
+
+
 /*******************************************
 FONTS
 *******************************************/
-@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800);
+
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800);
+
 /*******************************************
 SETTINGS
 *******************************************/
+
 @charset "utf-8";
-@-webkit-viewport   { width: device-width; }
-@-moz-viewport      { width: device-width; }
-@-ms-viewport       { width: device-width; }
-@-o-viewport        { width: device-width; }
-@viewport           { width: device-width; }
+@-webkit-viewport {
+	width: device-width;
+}
+
+@-moz-viewport {
+	width: device-width;
+}
+
+@-ms-viewport {
+	width: device-width;
+}
+
+@-o-viewport {
+	width: device-width;
+}
+
+@viewport {
+	width: device-width;
+}
+
+
 /*******************************************
 BODY
 *******************************************/
+
 body {
 	font-family: 'Open Sans', Arial, Tahoma;
 	font-weight: 400;
@@ -25,20 +47,27 @@ body{
 	color: #363636;
 	background: #ededed;
 }
+
+
 /*******************************************
 CONTAINER
 *******************************************/
+
 .container {
 	margin-top: 80px;
 	margin-bottom: 15px;
 	background: #fff;
 }
+
+
 /*******************************************
 PHOTO (AVATAR)
 *******************************************/
+
 #photo-header {
 	margin-top: -75px;
 }
+
 #photo {
 	width: 160px;
 	height: 160px;
@@ -48,11 +77,13 @@ PHOTO (AVATAR)
 	background: #ededed;
 	display: inline-block;
 }
+
 #photo img {
 	width: 150px;
 	height: 150px;
 	border-radius: 50%;
 }
+
 #text-header h1 {
 	margin: 0;
 	padding: 0;
@@ -61,55 +92,69 @@ PHOTO (AVATAR)
 	text-transform: uppercase;
 	letter-spacing: -1px;
 }
+
 #text-header h1::first-line {
 	font-size: 1.5em;
 	letter-spacing: -4px;
 	font-weight: 800;
 	line-height: 1.5em;
 }
+
 #text-header h1 span {
 	color: #F0563D;
 }
+
 #text-header h1 sup {
 	opacity: 0.5;
 }
+
 #text-header:after {
 	width: 100%;
 	height: 3px;
-  background: url(../img/line.png);
+	background: url(/img/line.png);
 	margin-top: 15px;
 	content: '';
 	display: block;
 }
+
+
 /*******************************************
 DEFAULT BOX
 *******************************************/
+
 .box {
 	margin-bottom: 15px;
 }
+
 .box h2 {
 	color: #EC7263;
 	font-size: 1.8em;
 	font-weight: 700;
 	text-transform: uppercase;
 }
+
 .box h2:before {
 	content: '//';
 	margin-right: 5px;
 }
+
 .box p {
 	font-size: 1.3em;
 	line-height: 1.5em;
 }
+
+
 /*******************************************
 EDUCATION
 *******************************************/
+
 #education {
 	margin-top: 20px;
 	position: relative;
 	padding: 1em 0;
 	list-style: none;
 }
+
 #education:before {
 	width: 5px;
 	height: 100%;
@@ -127,12 +172,14 @@ EDUCATION
 	background: linear-gradient(to bottom, #ffffff 0%, #ec7263 7%, #ec7263 89%, #ffffff 100%);
 	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
 }
+
 #education li {
 	width: 100%;
 	z-index: 2;
 	position: relative;
 	float: left;
 }
+
 #education .year {
 	width: 10%;
 	background: #fff;
@@ -141,6 +188,7 @@ EDUCATION
 	font-weight: 700;
 	display: inline-block;
 }
+
 #education .description {
 	width: 80%;
 	display: inline-block;
@@ -150,6 +198,7 @@ EDUCATION
 	padding: 10px 10px 0 10px;
 	border-bottom: 1px solid #ddd;
 }
+
 #education .description:after {
 	content: '';
 	position: absolute;
@@ -163,58 +212,74 @@ EDUCATION
 	border-width: 8px;
 	pointer-events: none;
 }
+
 #education .description h3 {
 	font-size: 1.6em;
 	margin: 0;
 	padding: 0;
 	font-weight: 700;
 }
+
 #education .description p {
 	font-size: 1.3em;
 	margin-top: 5px;
 	padding: 0;
 }
+
+
 /*******************************************
 EXPERIENCES
 *******************************************/
+
 .job {
 	margin-bottom: 15px;
 }
+
 .job .where {
 	font-size: 1.4em;
 	font-weight: bold;
 }
+
 .job .year {
 	font-size: 1.3em;
 	opacity: 0.7;
 }
+
 .job .profession {
 	font-size: 1.6em;
 	font-weight: bold;
 }
+
 .job .description {
 	font-size: 1.2em;
 	line-height: 1.5em;
 }
+
+
 /*******************************************
 CONTACT
 *******************************************/
+
 .contact-item {
 	width: 100%;
 	float: left;
 }
+
 .contact-item .icon {
 	padding: 10px;
 	border-right: 1px solid #aaa;
 	border-bottom: 1px solid #aaa;
 	opacity: 0.2;
 }
+
 .contact-item:last-child .icon {
 	border-bottom: none;
 }
+
 .contact-item .fa {
 	font-size: 2em;
 }
+
 .contact-item .title {
 	width: 80%;
 	width: calc(100% - 55px);
@@ -222,18 +287,23 @@ CONTACT
 	font-weight: 700;
 	opacity: 0.9;
 }
+
 .contact-item .title.only {
 	margin-top: 10px;
 }
+
 .contact-item .description {
 	width: 80%;
 	width: calc(100% - 55px);
 	font-size: 1.2em;
 	opacity: 0.7;
 }
+
+
 /*******************************************
 SKILLS
 *******************************************/
+
 .item-skills {
 	height: 30px;
 	background: #F0563D;
@@ -246,10 +316,12 @@ SKILLS
 	font-size: 1.3em;
 	font-weight: 600;
 }
+
 .skills-legend {
 	margin-top: 20px;
 	opacity: 0.8;
 }
+
 .skills-legend:before {
 	width: 100%;
 	height: 3px;
@@ -259,6 +331,7 @@ SKILLS
 	margin-bottom: -13px;
 	background: #c6c6c6;
 }
+
 .skills-legend div {
 	width: 25%;
 	display: inline-block;
@@ -266,6 +339,7 @@ SKILLS
 	color: #a9a9a9;
 	float: left;
 }
+
 .legend:before {
 	width: 3px;
 	height: 10px;
@@ -276,41 +350,54 @@ SKILLS
 	margin-bottom: 15px;
 	background: #c6c6c6;
 }
+
 .legend-left.legend:before {
 	margin-left: 0;
 }
+
 .legend-right.legend:before {
 	margin-right: 0;
 }
+
 .legend-left:nth-child(2) span {
 	margin-left: -25px;
 }
+
 .legend-right:nth-child(3) span {
 	margin-right: -20px;
 }
+
 .legend-right {
 	text-align: right;
 }
+
+
 /*******************************************
 LANGUAGES
 *******************************************/
+
 #language-skills .skill {
 	font-size: 1.3em;
 	margin: 10px 0;
 	padding-bottom: 10px;
 	border-bottom: 1px solid #eee;
 }
+
 #language-skills .skill .icons {
 	width: 111px;
 	height: 14px;
-  background: url(../img/star-grey.png) no-repeat;
+	background: url(/img/star-grey.png) no-repeat;
 }
+
 #language-skills .skill .icons-red {
-  background: url(../img/star-red.png) no-repeat;
+	background: url(/img/star-red.png) no-repeat;
 }
+
+
 /*******************************************
 HOBBIES
 *******************************************/
+
 .hobby {
 	color: #fff;
 	display: inline-block;
@@ -321,6 +408,7 @@ HOBBIES
 	position: relative;
 	font-size: 1.2em;
 }
+
 .hobby:before {
 	content: "\f004";
 	font-family: FontAwesome;
@@ -330,24 +418,30 @@ HOBBIES
 	top: 6px;
 	left: 7px;
 }
+
+
 /*******************************************
 MEDIA
 *******************************************/
+
 @media (min-width: 500px) {
 	#education .description {
 		width: 85%;
 	}
 }
+
 @media (min-width: 768px) {
 	#education .description {
 		width: 85%;
 	}
 }
+
 @media (min-width: 992px) {
 	#education .description {
 		width: 87%;
 	}
 }
+
 @media (min-width: 1200px) {
 	#education .description {
 		width: 90%;

index.html

 <!DOCTYPE html>
 <html lang="en">
+
 	<head>
 		<meta charset="utf-8">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 		<meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>3ColorResume</title>
-    <link href="css/bootstrap.min.css" rel="stylesheet">
-    <link href="css/font-awesome.css" rel="stylesheet">
-    <link href="css/main.css" rel="stylesheet">
+
+		<title>Inara Nigmatullina</title>
+
+		<link href="/bower/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+		<link href="/bower/components-font-awesome/css/font-awesome.min.css" rel="stylesheet">
+		<link href="/css/main.css" rel="stylesheet">
+
 		<!--[if lt IE 9]>
 			<script src="js/html5shiv.js"></script>
 			<script src="js/respond.min.js"></script>
 		<![endif]-->
+
 	</head>
+
 	<body>
 		<div class="container">
 			<div class="row">
@@ -20,7 +26,7 @@
 					<div id="photo-header" class="text-center">
 						<!-- PHOTO (AVATAR) -->
 						<div id="photo">
-              <img src="img/avatar.jpg" alt="avatar">
+							<img src="/img/avatar.jpg" alt="avatar">
 						</div>
 						<div id="text-header">
 							<h1>Hello,<br> my name is <span>Kamil</span><sup>24yo</sup> and this is my resume/cv</h1>
@@ -33,7 +39,8 @@
 					<!-- ABOUT ME -->
 					<div class="box">
 						<h2>About Me</h2>
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem, cumque distinctio magni quam expedita velit laborum sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.</p>
+						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem, cumque distinctio magni quam expedita
+							velit laborum sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.</p>
 					</div>
 					<!-- EDUCATION -->
 					<div class="box">
@@ -43,7 +50,8 @@
 								<div class="year pull-left">1990</div>
 								<div class="description pull-right">
 									<h3>I was born in Katowice</h3>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, exercitationem, totam, dolores iste dolore est aut modi.</p>
+									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, exercitationem, totam, dolores iste dolore est
+										aut modi.</p>
 								</div>
 							</li>
 							<li>
@@ -57,7 +65,8 @@
 								<div class="year pull-left">2009</div>
 								<div class="description pull-right">
 									<h3>First level graduation in Graphic Design</h3>
-                  <p>Aspernatur, mollitia, quos maxime eius suscipit sed beatae ducimus quaerat quibusdam perferendis? Iusto, quibusdam asperiores unde repellat.</p>
+									<p>Aspernatur, mollitia, quos maxime eius suscipit sed beatae ducimus quaerat quibusdam perferendis? Iusto, quibusdam
+										asperiores unde repellat.</p>
 								</div>
 							</li>
 							<li>
@@ -79,7 +88,8 @@
 							</div>
 							<div class="col-xs-9">
 								<div class="profession">Front-end developer / php programmer</div>
-                <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, et, illum perferendis veritatis velit sunt similique qui magni totam harum tempore eius laboriosam accusantium necessitatibus voluptatum? Enim, itaque dignissimos quia.</div>
+								<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, et, illum perferendis veritatis velit sunt similique
+									qui magni totam harum tempore eius laboriosam accusantium necessitatibus voluptatum? Enim, itaque dignissimos quia.</div>
 							</div>
 						</div>
 						<div class="job clearfix">
@@ -89,7 +99,10 @@
 							</div>
 							<div class="col-xs-9">
 								<div class="profession">Web Developer</div>
-                <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nihil sit nemo voluptatem praesentium. Quia, qui facere consectetur libero asperiores fugiat consequuntur deserunt culpa repudiandae sed quidem voluptas explicabo soluta.</div>
+								<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nihil sit nemo voluptatem praesentium. Quia, qui
+									facere consectetur libero asperiores fugiat consequuntur deserunt culpa repudiandae sed quidem voluptas explicabo
+									soluta.
+								</div>
 							</div>
 						</div>
 					</div>
@@ -143,8 +156,16 @@
 					<div class="box">
 						<h2>Languages</h2>
 						<div id="language-skills">
-              <div class="skill">Polish <div class="icons pull-right"><div style="width: 80%;" class="icons-red"></div></div></div>
-              <div class="skill">English <div class="icons pull-right"><div style="width: 60%;" class="icons-red"></div></div></div>
+							<div class="skill">Polish
+								<div class="icons pull-right">
+									<div style="width: 80%;" class="icons-red"></div>
+								</div>
+							</div>
+							<div class="skill">English
+								<div class="icons pull-right">
+									<div style="width: 60%;" class="icons-red"></div>
+								</div>
+							</div>
 						</div>
 					</div>
 					<!-- HOBBIES -->
@@ -158,10 +179,11 @@
 			</div>
 		</div>
 		<!-- JQUERY -->
-    <script src="js/jquery.min.js"></script>
+		<script src="/bower/jquery/dist/jquery.min.js"></script>
 		<!-- BOOTSTRAP -->
-    <script src="js/bootstrap.min.js"></script>
+		<script src="/bower/bootstrap/dist/js/bootstrap.min.js"></script>
 		<!-- SCRIPTS -->
-    <script src="js/scripts.js"></script>
+		<script src="/js/scripts.js"></script>
 	</body>
+
 </html>
\ No newline at end of file