<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Personal Portfolio</title>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<ul class="nav navbar-nav">
<li class="target active text-uppercase" id="home-button"><a href="#">Home</a></li>
<li class="target text-uppercase" id="about-button"><a href="#">About</a></li>
<li><img src="https://lh3.googleusercontent.com/-Nu2Z6J4uK58/U-F2EgeqytI/AAAAAAAABz4/x2LIF51p1uYEPJ46VvVZUBQNJHthuGHfgCEw/w140-h140-p/SMP%2BProfile%2BPic%2B1.png" id="me"/></li>
<li class="target text-uppercase" id="portfolio-button"><a href="#">Portfolio</a></li>
<li class="target text-uppercase" id="contact-button"><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="icon"><a href="https://codepen.io/SamrajM/" target="_blank"><i class="fa fa-codepen"></i></a></li>
<li class="icon"><a href="https://twitter.com/SamrajMoorjani" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li class="icon"><a href="https://github.com/smoorjani" target="_blank"><i class="fa fa-github"></i></a></li>
<li class="icon last"><a href="https://www.linkedin.com/in/samraj-m-a74372120
" target="_blank"><i class="fa fa-linkedin"></i></a></li>
</ul>
</nav>
<div class="pages-container">
<div class="page active-page" id="home-page">
<h1>Samraj Moorjani</h1>
<h2></h2>
</div>
<div class="page" id="about-page">
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-5">
<h1>About me</h1>
<p>I am a high schooler currently working on educating myself about Android App Development. I have a working knowledge of C++, Java, Javascript, HTML, CSS, and more. I work around Adobe Photoshop, After Effects, Sony Vegas, Cinema4D, and more.</p>
</div>
</div>
</div>
<div class="page" id="portfolio-page">
<div class="row">
<div class="col-sm-0 col-md-2"></div>
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<a href="" target="_blank"><img src="#" alt="Alan Turing Tribute"></a>
<div class="caption">
<h3>Project 1</h3>
<p>sumary</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<a href="" target="_blank"><img src="#" alt="Personal Portfolio"></a>
<div class="caption">
<h3>Project 2</h3>
<p>summary</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<a href="#" target="_blank"><img src="#" alt="Project 3"></a>
<div class="caption">
<h3>Project 3</h3>
<p>summary</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-2">
<div class="thumbnail">
<a href="#" target="_blank"><img src="#" alt="Project 4"></a>
<div class="caption">
<h3>Project 4</h3>
<p>summary</p>
</div>
</div>
</div>
</div>
</div>
<div class="page" id="contact-page">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
<div class="jumbotron">
<h1>Contact me</h1>
<p>You can contact me on <span class="mail">smoorjani@live.com</span> or...</p>
<a href="https://codepen.io/SamrajM/" target="_blank"><i class="fa fa-codepen fa-2x"></i></a>
<a href="https://twitter.com/SamrajMoorjani" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
<a href="https://github.com/smoorjani" target="_blank"><i class="fa fa-github fa-2x"></i></a>
<a href="https://www.linkedin.com/in/samraj-m-a74372120
" target="_blank"><i class="fa fa-linkedin fa-2x"></i></a>
</div>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/SamrajM/personal-portfolio-KrBZAg */
body {
font-family: 'Roboto', sans-serif;
color: #fff;
}
nav {
height: 40px;
}
#me {
border-radius: 50%;
height: 80px;
border: 5px solid #fff;
}
#about-button {
padding-right: 10px;
}
#portfolio-button {
padding-left: 10px;
}
.icon {
margin-left: -15px;
}
.last {
margin-right: 10px;
}
.page {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#home-page {
background: url('http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-12.jpg');
background-size: cover;
text-align: center;
}
#home-page h1 {
font-family: 'Lobster', serif;
font-size: 6em;
margin-top: 370px;
}
#home-page h2 {
font-family: 'Roboto', sans-serif;
margin-top: -10px;
font-size: 1.5em;
font-weight: bold;
}
#about-page {
background: url('http://www.pixelstalk.net/wp-content/uploads/2016/03/Free-Dark-Blue-Wallpaper-HD.jpg');
background-size: cover;
text-align: justify;
}
#about-page h1 {
font-size: 3em;
font-weight: bold;
font-family: 'Lobster', 'Roboto', serif;
text-align: center;
}
#about-page .row {
font-size: 1.1em;
margin-top: 24%;
}
#portfolio-page {
background: url('http://wallpapercave.com/wp/hpehPUv.jpg');
background-size: cover;
}
.row {
margin-top: 10%;
width: 100%;
}
.row div {
padding-top: 20px;
}
#contact-page {
background: url('http://www.pixelstalk.net/wp-content/uploads/2016/03/Background-dark-blue-wallpaper-HD.jpg');
background-size: cover;
text-align: center;
color: #fff;
}
.jumbotron {
background: none;
}
.mail {
color: white;
}
.jumbotron .fa {
color: #fff;
margin: 0px 3px;
}
.jumbotron .fa:hover {
color: palevioletred;
}
/*Downloaded from https://www.codeseek.co/SamrajM/personal-portfolio-KrBZAg */
$(document).ready(function() {
$('.page').not('.active-page').hide();
$('.target').click(function() {
$('.target').removeClass('active');
$(this).addClass('active');
switch($(this).attr('id')) {
case 'home-button':
changePage('#home-page');
break;
case 'about-button':
changePage('#about-page');
break;
case 'portfolio-button':
changePage('#portfolio-page');
break;
case 'contact-button':
changePage('#contact-page');
break;
}
});
$(window).bind('mousewheel', function(e){
if (e.originalEvent.wheelDelta / 120 > 0) {
var prevPage = $('.active-page').prev().attr('id');
if (prevPage.length > 0) {
changePage('#' + prevPage);
$('.target').removeClass('active');
switch(prevPage) {
case 'home-page':
$('#home-button').addClass('active');
break;
case 'about-page':
$('#about-button').addClass('active');
break;
case 'portfolio-page':
$('#portfolio-button').addClass('active');
break;
case 'contact-page':
$('#contact-button').addClass('active');
break;
}
}
}
else {
var nextPage = $('.active-page').next().attr('id');
if (nextPage.length > 0) {
changePage('#' + nextPage);
$('.target').removeClass('active');
switch(nextPage) {
case 'home-page':
$('#home-button').addClass('active');
break;
case 'about-page':
$('#about-button').addClass('active');
break;
case 'portfolio-page':
$('#portfolio-button').addClass('active');
break;
case 'contact-page':
$('#contact-button').addClass('active');
break;
}
}
}
});
});
function changePage(page) {
var currentPage = $('.active-page');
if('#' + currentPage.attr('id') == page) return 0;
currentPage.fadeOut(600);
currentPage.removeClass('active-page');
$(page).fadeIn(600);
$(page).addClass('active-page');
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Font Awesome
Google Font API
Twitter Bootstrap
jQuery
v2.1.3
