added technology icons

raghavgarg1257 · Jan 18, 2017 · 7b91117 · 7b91117
1 parent f50f985
commit 7b91117
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 24 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -1,5 +1,6 @@
 @import url("font-awesome.min.css");
 @import url("https://fonts.googleapis.com/css?family=Raleway:400,400italic,700,800");
+@import url("https://cdn.rawgit.com/konpa/devicon/master/devicon.min.css");
 
 /*
 	Highlights by HTML5 UP
@@ -3030,4 +3031,4 @@
 					padding: 0;
 				}
 
-	}
+	}
diff --git a/index.html b/index.html
@@ -36,7 +36,7 @@
 			    border-radius: 6px;
 			    padding: 5px 0;
 			    position: absolute;
-			    z-index: 1;  	
+			    z-index: 1;
 				bottom: 65%;
 			    left: -400%;
 			    margin-left: -25px;
@@ -60,6 +60,15 @@
 			    visibility: visible;
 			    opacity: 1;
 			}
+
+			.skill-icon-container {
+				padding: 2em 0 3em 0 !important;
+			}
+
+			.devicons {
+				font-size: 6em;
+			}
+
 		</style>
 	</head>
 	<body>
@@ -113,7 +122,7 @@ <h2>Stuff I made</h2>
 									<span class="12u"><b>Framework:</b> Phalcon PHP framework</span>
 									<span class="12u"><b>View Engine:</b> Vole Templating</span>
 									<p>A web application to manage every aspect of a branch like employees, opening times and taking booking online form the customers, this website is currently live in Sweden and USA from last 2 years. I have worked on this app in my internship with 4 other developers. I was responsible for implementing the Emailing using Sendgrid, Payments & Subscription of add-ons products of book24 like conference24, wall24 etc using Stripe and global search in the application using ELK Stack.</p>
-									
+
 
 									<div class="12u">
 										<span class="image fit"><img src="images/orenda.png" alt="" /></span>
@@ -145,28 +154,45 @@ <h2>Stuff I use</h2>
 						</header>
 						<p>These are some technologies I am proficient with.</p>
 						<ul class="icons-grid">
-							<li>
-								<!-- <span class="icon major fa-code"></span> -->
-								<h3>PHP</h3>
+							<li class="skill-icon-container">
+								<span class="devicons devicon-php-plain" style="font-size:7em"></span>
+							</li>
+							<li class="skill-icon-container">
+								<span class="devicons devicon-mysql-plain-wordmark" style="font-size:7em"></span>
 							</li>
-							<li>
-								<!-- <span class="icon major fa-code"></span> -->
-								<h3>Mysql</h3>
+							<li class="skill-icon-container">
+								<span class="devicons devicon-javascript-plain" style="font-size:6em"></span>
 							</li>
-							<li>
-								<!-- <span class="icon major fa-code"></span> -->
-								<h3>JavaScript</h3>
+							<li class="skill-icon-container">
+								<span class="devicons devicon-cplusplus-plain-wordmark" style="font-size:6em"></span>
 							</li>
-							<li>
-								<!-- <span class="icon major fa-code"></span> -->
-								<h3>C++</h3>
+							<li class="skill-icon-container">
+								<span class="devicons devicon-git-plain-wordmark" style="font-size:7em"></span>
 							</li>
+							<li class="skill-icon-container">
+								<span class="devicons devicon-amazonwebservices-plain-wordmark" style="font-size:7em"></span>
+							</li>
+							<!--
+								devicon-nodejs-plain-wordmark
+								devicon-ubuntu-plain-wordmark
+
+								devicon-linux-plain
+								devicon-atom-original-wordmark
+								devicon-mongodb-plain-wordmark
+								devicon-nginx-original-wordmark
+								devicon-meteor-plain-wordmark
+								devicon-docker-plain-wordmark
+
+								devicon-codeigniter-plain-wordmark
+								devicon-laravel-plain-wordmark
+								devicon-jquery-plain-wordmark
+							-->
 						</ul>
 					</div>
 					<a href="#footer" class="goto-next scrolly">Next</a>
 				</div>
 			</section>
-		
+
 
 		<!-- Footer -->
 			<section id="footer">
@@ -199,8 +225,8 @@ <h2>Get in touch</h2>
 						<li><div class="tooltip"><a href="#footer" class="icon alt fa-envelope"><span class="tooltiptext" id="email_id">raghavgarg1257@gmail.com</span><span class="label">Email</span></a></div></li>
 						<li><div class="tooltip"><a href="#footer" class="icon alt fa-phone"><span class="tooltiptext" id="phone_num">+91 - 98 99 111 069</span><span class="label">Phone</span></a></div></li>
 
-						
-						
+
+
 					</ul>
 					<ul class="copyright">
 						<li>&copy; Raghav Garg</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
@@ -221,10 +247,10 @@ <h2>Get in touch</h2>
 			<script src="assets/js/init.js"></script>
 			<script type="text/javascript">
 				(function(){
-					$("#thanks_msg").hide();	
-					$("#err_msg").hide();	
+					$("#thanks_msg").hide();
+					$("#err_msg").hide();
 				})();
-	
+
 			   $('[name="contact_form"]').on('submit', function(e){
 			   		// preventing deafult behaviour of form submit
 			   		e.preventDefault();
@@ -250,12 +276,12 @@ <h2>Get in touch</h2>
 				   		setTimeout(function() {
 					   		$('[name="name"]').val("");
 					   		$('[name="email"]').val("");
-					   		$('[name="message"]').val(""); 
-				   			$("#thanks_msg").show(); 
+					   		$('[name="message"]').val("");
+				   			$("#thanks_msg").show();
 				   		}, 1000);
 				   		setTimeout(function() { $("#thanks_msg").hide(); }, 5000);
 			   		} else {
-			   			$("#err_msg").show(); 
+			   			$("#err_msg").show();
 				   		setTimeout(function() { $("#err_msg").hide(); }, 2000);
 			   		}
 			   });