<!DOCTYPE html>
<html lang="en" >
<head>
<script>if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}</script>
<meta charset="UTF-8">
<meta name="referrer" content="origin">
<meta name="Description" content="Hi! This is my personal website and it also houses comprehensive guides about my projects">
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
<link rel="manifest" href="manifest.json" />
<link rel="stylesheet" href="css/menu.css" />
<meta name="theme-color" content="#373B44">
<link rel="apple-touch-icon" sizes="57x57" href="assets/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="assets/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="assets/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="assets/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="assets/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="assets/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="assets/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="assets/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#373B44">
<meta name="msapplication-TileImage" content="assets/ms-icon-144x144.png">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-108635191-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-108635191-1');
</script>
<title>Hi!</title>
</head>
<body>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-weight: 500;
font-family: 'HelveticaNeue';
}
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
}
section:nth-of-type(2n) {
background-color: rgb(52, 152, 219);
}
.intro {
height: 90vh;
}
.content {
display: table-cell;
vertical-align: middle;
}
h1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
p {
font-size: 1.5em;
font-weight: 500;
color: #C3CAD9;
}
a {
font-weight: 700;
color: #373B44;
position: relative;
}
a:hover {
opacity: 0.8;
}
a:active {
top: 1px;
}
footer {
padding: 1% 5%;
text-align: center;
background-color: #373B44;
color: white;
}
footer a {
color: #FE4B74;
font-weight: 500;
text-decoration: none;
}
@-webkit-keyframes letter-in {
0% {
top: 1.2em;
}
100% {
top: 0em;
}
}
@keyframes letter-in {
0% {
top: 1.2em;
}
100% {
top: 0em;
}
}
@-webkit-keyframes letter-out {
0% {
top: 0em;
}
100% {
top: -1.2em;
}
}
@keyframes letter-out {
0% {
top: 0em;
}
100% {
top: -1.2em;
}
}
div.changing-title {
font-size: 8vw;
height: 1.2em;
position: relative;
width: 100%;
overflow-y: hidden;
margin-left: 1em;
transform: translate3d(0, 0, 0);
}
div.changing-title h1 {
font-size: 1em;
position: absolute;
left: 0;
top: 0;
margin: 0;
}
div.changing-title h1 .letter {
position: relative;
top: 1.2em;
}
div.changing-title h1 .letter.in {
-webkit-animation-name: letter-in;
animation-name: letter-in;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
div.changing-title h1 .letter.out {
top: 0em;
-webkit-animation-name: letter-out;
animation-name: letter-out;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
</style>
<!-- Menu by Captain Anonymous who forked it from Dmitry Kiselyov-->
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li class='active'><a href='#'>Projects</a>
<ul>
<li><a href='https://navanchauhan.github.io/Mjolnir'>Mjölnir</a>
</li>
<li><a href='https://navanchauhan.github.io/Grub-Repair-Toolkit'>GYGB</a>
</li>
</ul>
</li>
</li>
<li><a href='./Contact.html'>Contact</a></li>
</ul>
</div>
<script async src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js'></script>
<script async src="js/index.js"></script>
<script async src="js/menu.js"></script>
<!--<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>-->
<section class="intro">
<!--Sections created by ckor https://twitter.com/ckor -->
<div class="content"><!--Changing Header by Austin Dudas-->
<div class="changing-title"><h1>Hi! I am Navan</h1></div></h1>
</div>
</section>
<section>
<div class="content">
<h1>I started coding when I was 8 and ironically learnt C before HTML</h1>
</div>
</section>
<section>
<div class="content">
<h1>Funnily, I learnt C# before HTML</h1>
</div>
</section>
<section>
<div class="content">
<h1>See my <a href="https://github.com/navanchauhan">GitHub Repo.</a></h1>
</div>
</section>
<footer>
Helped by countless designers, check source code for more info</a>
</footer>
</body>
</html>