Personal Portfolio

Developer
KinderPreet Singh
Size
10,087 Kb
Views
6,072
  1. Personal Portfolio Previews
  2. Personal Portfolio HTML Codes
  3. Personal Portfolio CSS Codes
  4. Personal Portfolio JS Codes

How do I make an personal portfolio?

This is my personal portfolio built as per the challenge given at the freeCodeCamp website.. What is a personal portfolio? How do you make a personal portfolio? This script and codes were developed by KinderPreet Singh on 07 January 2023, Saturday.

Personal Portfolio Previews
IQ Test

Personal Portfolio - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Personal Portfolio</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head>	<meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="author" content="Kinder Preet Singh"> <meta name="description" content="Demo portfolio of Kinder Preet"> <meta name="keywords" content="portfolio, preet, kinder, kinder preet , html, css, bootstrap, javascript, jquery, freecodecamp">	<title>KinderPreet Singh</title>
</head> <body> <header id="header" class="">	<section role="navigation">	<nav role="navigation" class="navbar navbar-inverse bg-inverse navbar-toggleable-sm fixed-top"><!-- navbar-inverse --> <button class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target="#myNavigation" aria-controls="myNavigation" aria-expanded="false" aria-label="Toggle navigation" type="button">	<span class="navbar-toggler-icon"></span> </button> <a href="#" class="navbar-brand">KP</a> <div class="collapse navbar-collapse" id="myNavigation"> <div class="navbar-nav"> <a href="#jumbotron" class="p-3 nav-item nav-link text-center" href="#"><i class="fa fa-home" aria-hidden="true" ></i> Home</a> <!-- <div class="nav-item-outer-div"> --> <a href="#about_me" class="p-3 nav-item nav-link text-center" href="#"><i class="fa fa-male" aria-hidden="true" ></i> </i> About</a> <a href="#portfolio" class="p-3 nav-item nav-link text-center" href="#"><i class="fa fa-briefcase" aria-hidden="true" ></i> Portfolio</a> <a href="#ping_me" class="p-3 nav-item nav-link text-center" href="#"><i class="fa fa-address-card" aria-hidden="true" ></i> Contact me</a> </div><!-- <div class="navbar-nav"> --> </div><!-- <div class="collapse navbar-collapse"> --> <!-- </div><div class="container"> -->	</nav>	</section> </header><!-- /header -->	<article role="article">	<section class="jumbotron" id="jumbotron">	<div class="container">	<h1 class="text-center">KinderPreet Singh</h1>	<p class="type_it text-center"></p>	</div>	</section>	<hr class="style13">	<section class="home_about" id="about_me">	<div class="container-fluid">	<div class="container-fluid">	<h3 class="text-center">About me</h3>	<div class="row align-items-center">	<div class="col-12 col-sm-7 col-md-7 col-lg-8 col-xl-8">	<p class="hide_me">Hello there, I am Kinder, a self-taught web developer. I have graduated in BCA from Sikkim Manipal University.	I think of code as an art. I write code on the bleeding edge that's tuned for performance, well structured and responsive in nature. I have a experience of creating mobile-first websites, extensive knowledge of cross browser/multi-device support. Up-to-date familiarity with emerging W3C standards and understanding of Web Accessibility.	My skills include: html, css, javascript, jQuery, bootstrap, scss and github.</p>	</div>	<div class="col-12 col-sm-5 col-md-5 col-lg-4 col-xl-4">	<img class="img-thumbnail hide_me" src="http://res.cloudinary.com/kindercappy/image/upload/v1497900133/me_500x500_cuodau.jpg" alt="">	</div>	</div>	</div>	</div>	</section>	</article>
<hr class="style13">
<aside role="complementary">	<section class="home_portfolio" id="portfolio">	<h3 class="text-center">Portfolio</h3>	<!-- <div class="home_portfolio"> -->	<div class="container-fluid">	<div class="row">	<div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-5">	<div id="toggle">	<div id="poptext">Dreal reel production</div>	<div class="arrow bounce" id="bounce">
<!--	<i class="fa fa-chevron-down" aria-hidden="true"></i> -->	</div>	<div id="box" style="display:none;"><h2>Dreal reel production</h2>	<p>This website was for a production house. The site is fully responsive. The project is made using bsic technologies like <b>HTML5, CSS3 and JacaScript</b></p>	</div>	<a href="http://www.dreamreelproduction.com/" target="_blank">	<img class="img_transition img-thumbnail" src="http://res.cloudinary.com/kindercappy/image/upload/v1497900134/dream_reel_500x271_fwoyej.png" alt="">	</a>	</div>	</div>	<div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-5">	<div id="toggle2">	<div id="poptext2">Satguru Travels</div>	<div class="arrow bounce" id="bounce2">
<!--	<i class="fa fa-chevron-down" aria-hidden="true"></i> -->	</div>	<div id="box2" style="display:none;"><h2>Satguru Travels</h2>	<p>This website was for a cab company. The site is fully responsive. The project is made using bsic technologies like <b>HTML5, CSS3 and JacaScript</b></p>	</div>	<a href="http://www.taxisatguru.com/" target="_blank">	<img class="img_transition2 img-thumbnail" src="http://res.cloudinary.com/kindercappy/image/upload/v1497900138/taxi_500x271_ifrtot.png" alt="">	</a>	</div>	</div>	<div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-5">	<div id="toggle3">	<div id="poptext3">Tribute Page</div>	<div class="arrow bounce" id="bounce3">
<!--	<i class="fa fa-chevron-down" aria-hidden="true"></i> -->	</div>	<div id="box3" style="display:none;"><h2>Tribute Page</h2>	<p>This project is a sample tribute page made for freecodecamp challenge. It is built with <b>HTML5, CSS3, JavaScript and Bootstrap</b> 4</p>	</div>	<a href="https://codepen.io/kindercappy/pen/vZGeJV" target="_blank">	<img class="img_transition3 img-thumbnail" src="http://res.cloudinary.com/kindercappy/image/upload/v1497900131/tribure_page_freeCodeCamp_500x200_phbmwq.png" alt="">	</a>	</div>	</div>	</div>	</div>	</div>	</section>
</aside>
<hr class="style13">
<footer role="contentinfo" role="form">	<section class="home_contact px-3 py-5" id="ping_me">	<form action="index_submit" method="get" accept-charset="utf-8">	<h3 class="text-center btn.faded">Contact me<h3/h3>	<div class="form-group">	<input class="form-control py-2 my-3" type="text" name="name" placeholder="Your name">	<input class="form-control py-2 my-3" type="email" name="email" placeholder="Your email">	<input class="form-control py-2 my-3" type="text" name="message" placeholder="Your message"> <button class="btn" type="button" name="send"><i class="fa fa-paper-plane-o fa-lg" aria-hidden="true"></i> Send</button>	</div>	<div class="form-group py-5 text-center">	<a href="https://www.facebook.com/kinder.cappy" title="Ping me on twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>	<a href="https://www.linkedin.com/in/kinder-preet-singh-250659b6/" title="Ping me on LinkedIn" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>	</div>	</form>	</section>
</footer> <script>window.jQuery || document.write("<script src='jquery.min.js'>\x3C/script>")</script> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.typeit/4.4.0/typeit.min.js'></script>
<script src='https://use.fontawesome.com/35f52f28c6.js'></script> <script src="js/index.js"></script>
</body>
</html>

Personal Portfolio - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Croissant+One|Exo+2|Krona+One|Marcellus+SC|Taviraj");
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab|Merriweather|Josefin+Slab|Oswald|Bree+Serif);
body { font-family: 'Taviraj', serif; padding-top: 6rem;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Croissant One', cursive;
}
#jumbotron { margin-bottom: 5rem;
}
#about_me { margin-top: 5rem; margin-bottom: 5rem;
}
#portfolio { margin-top: 5rem; margin-bottom: 5rem;
}
#contact_us { margin-top: 5rem;
}
hr.style13 { height: 10px; border: 0; box-shadow: 0 10px 10px -10px #8c8b8b inset;
}
@media (max-width: 576px) { body { font-family: 'Taviraj', serif; padding-top: 3rem; }
}
@media (min-width: 577px) and (max-width: 767px) { body { font-family: 'Taviraj', serif; padding-top: 3rem; }
}
#toggle, #toggle2, #toggle3 { padding: 5px;
}
#poptext, #poptext2, #poptext3 { background-color: #EEE8D6; height: 23px; font-size: 15px; padding-left: 23px; overflow: hidden; background: url("http://res.cloudinary.com/kindercappy/image/upload/v1497902830/arrows_ikxv1b.png") no-repeat 5px 0px; cursor: pointer; margin: 0 0; border-radius: 10px; box-shadow: 0 0 10px 1px transparent; transition: box-shadow .5s; width: 80%;
}
#poptext:hover, #poptext2:hover, #poptext3:hover { box-shadow: 0 0 10px 1px #000000;
}
#box, #box2, #box3 { opacity: .7; z-index: 100; position: absolute; background-color: #000000; display: none; text-shadow: 0 1px 2px #000; -webkit-border-radius: 19px; -moz-border-radius: 19px; border-radius: 19px;
}
#box h2, #box2 h2, #box3 h2 { font: normal 1.3em Amaranth; color: #ff974e; text-align: left;
}
#box p, #box2 p, #box3 p { color: #FFF; text-align: left;
}
#poptext.highlight, #poptext2.highlight, #poptext3.highlight { background: url("http://res.cloudinary.com/kindercappy/image/upload/v1497902830/arrows_ikxv1b.png") no-repeat 5px -18px transparent;
}
@media (max-width: 576px) { #box, #box2, #box3 { margin-right: 2rem; margin-left: .5rem; padding: 1rem; } #box h2, #box2 h2, #box3 h2 { margin: 0; font-size: 1rem; } #box p, #box2 p, #box3 p { margin: 0; color: #FFF; text-align: left; font-size: .8rem; }
}
@media (min-width: 577px) and (max-width: 767px) { #box, #box3 { margin-right: 3rem; padding: 1rem; } #box h2, #box3 h2 { margin: 0; font-size: 1rem; } #box p, #box2 p, #box3 p { margin: 0; font-size: .8rem; }
}
@media (min-width: 768px) and (max-width: 991px) { #box, #box2, #box3 { margin-right: 2rem; padding: 1rem; } #box h2, #box2 h2, #box3 h2 { margin: 0; font-size: 1rem; } #box p, #box2 p, #box3 p { margin: 0; font-size: .8rem; }
}
@media (min-width: 992px) and (max-width: 1199px) { #box, #box2, #box3 { margin-right: 3rem; padding: 1.5rem; } #box h2, #box2 h2, #box3 h2 { margin: 0; font-size: 1.3rem; } #box p, #box2 p, #box3 p { margin: 0; font-size: 1rem; }
}
@media (min-width: 1200px) { #box, #box2, #box3 { margin-right: 4rem; padding: 2rem; } #box h2, #box2 h2, #box3 h2 { margin: 0; font-size: 2rem; } #box p, #box2 p, #box3 p { margin: 0; font-size: 1rem; }
}
@media (min-width: 768px) { nav { box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); height: 100px; } nav .navbar-nav { height: 100px; width: 100%; } nav .nav-item { width: 50%; border-bottom: 1px solid white; border-top: 1px solid white; height: 60px; margin: 20px 10px; transition: height .3s; } nav .nav-item:hover { height: 70px; }
}
@media (max-width: 767px) { .nav-item { margin: 0 auto; -webkit-transition: border-right 3s ease,border-left .5s ease; -moz-transition: border-right 3s ease,border-left .5s ease; -o-transition: border-right 3s ease,border-left .5s ease; -ms-transition: border-right 3s ease,border-left .5s ease; transition: border-right .5s ease-in,border-left .5s ease-in; border-right: 1px solid transparent; border-left: 1px solid transparent; } .nav-item:hover { border-right: 1px solid white; border-left: 1px solid white; }
}
.navbar-brand { padding-left: 10px; padding-right: 10px; border-radius: 5px;
}
@media (min-width: 577px) and (max-width: 767px) { .home_portfolio .transition { -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -o-transform: scale(1.6); transform: scale(1.1); } .home_portfolio img { -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; width: 250px; margin: .5rem; }
}
@media (min-width: 768px) and (max-width: 991px) { .home_portfolio .transition { -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -o-transform: scale(1.6); transform: scale(1.2); } .home_portfolio img { -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; width: 300px; margin: 1rem; }
}
@media (min-width: 992px) and (max-width: 1199px) { .home_portfolio .transition { -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -o-transform: scale(1.6); transform: scale(1.2); } .home_portfolio img { -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; width: 380px; margin: 1rem; }
}
@media (min-width: 1200px) { .home_portfolio { width: 70%; margin: 0 auto; } .home_portfolio h3 { padding-bottom: 5rem; font-size: 2rem; } .home_portfolio #toggle2 { margin-left: 2rem; margin-right: -2rem; } .home_portfolio .transition { -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -o-transform: scale(1.6); transform: scale(1.2); } .home_portfolio img { -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; width: 600px; margin: 1rem; }
}
.type_it { padding: 1rem; font-size: 2em; color: #FFFFFF;
}
@media (max-width: 576px) { .type_it { font-size: 1em; }
}
.jumbotron { background: #45484d; background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); background: -webkit-linear-gradient(top, #45484d 0%, #000000 100%); background: linear-gradient(to bottom, #45484d 0%, #000000 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); height: 100vh;
}
.jumbotron h1 { color: #FFFFFF; margin: 0 auto;
}
.home_contact { background: #45484d; background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); background: -webkit-linear-gradient(top, #45484d 0%, #000000 100%); background: linear-gradient(to bottom, #45484d 0%, #000000 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); border-radius: 5rem;
}
.home_contact h3 { color: #FFFFFF;
}
.home_contact a { background-color: transparent; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: .8rem; padding-bottom: .8rem; border-radius: 20px; font-size: 2rem; transition: background-color 1s;
}
.home_contact a:hover { background-color: white;
}
@media (max-width: 576px) { .home_contact { width: 90%; margin: 0 auto; border-radius: 5rem; }
}
@media (min-width: 577px) and (max-width: 767px) { .home_contact { height: 50%; width: 90%; margin: 0 auto; }
}
@media (min-width: 768px) and (max-width: 991px) { .home_contact { width: 70%; margin: 0 auto; height: 70%; }
}
@media (min-width: 992px) and (max-width: 1199px) { .home_contact { width: 70%; margin: 0 auto; height: 80%; }
}
@media (min-width: 1200px) { .home_contact { width: 80%; margin: 0 auto; height: 90%; }
}
.home_about img { width: 300px; height: 300px; margin: 0 auto;
}
.home_about p { padding: 1.5rem; border-radius: 1rem;
}
.home_about .img-thumbnail { border-radius: 1rem;
}
.hide_me { opacity: 0; background-color: #f7f7f7;
}
@media (min-width: 577px) and (max-width: 767px) { .home_about p { width: 80%; margin: 0 auto; } .home_about img { width: 250px; height: 250px; }
}
@media (min-width: 1200px) { .home_about p { width: 80%; margin: 0 auto; } .home_about img { width: 300px; height: 300px; }
}
@-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateX(0); transform: translateX(0); } 40% { -moz-transform: translateX(-50px); transform: translateX(-50px); } 60% { -moz-transform: translateX(-50px); transform: translateX(-50px); }
}
@-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 40% { -webkit-transform: translateX(-50px); transform: translateX(-50px); } 60% { -webkit-transform: translateX(-50px); transform: translateX(-50px); }
}
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } 40% { -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -webkit-transform: translateX(-50px); transform: translateX(-50px); } 60% { -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -webkit-transform: translateX(-50px); transform: translateX(-50px); }
}
.arrow { position: relative; left: 21%; width: 15px; height: 15px; background-size: contain;
}
@media (max-width: 576px) { .arrow { left: 15%; }
}
@media (min-width: 992px) and (max-width: 1199px) { .arrow { left: 15%; }
}
@media (min-width: 1200px) { .arrow { left: 8%; }
}
.bounce { -moz-animation: bounce 3s infinite; -webkit-animation: bounce 3s infinite; animation: bounce 3s infinite;
}
.arrow_invisible { visibility: hidden;
}

Personal Portfolio - Script Codes JS Codes

/** * index.js * - All our useful JS goes here, awesome! */
$(document).ready(function(){	// console.log("JavaScript is amazing!");	// console.log("Javascript is amazing"); $("nav a").on('click', function(event) { // Make sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Prevent default anchor click behavior	event.preventDefault(); // Store hash	var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area	$('html, body').animate({	scrollTop: $(hash).offset().top - 170	}, 1500, function(){ // Add hash (#) to URL when done scrolling (default click behavior)	window.location.hash = hash- 120;	}); } // End if	}); //type it plugin	$('.type_it').typeIt({	strings: ["Hi, I am Kinder.","I believe a great design can make a good idea even better.","I create websites that have both:",["BEAUTY and BRAIN."]],	speed:40,	autoStart:true,	breakLines:true	});	//Everytime the window is scrolled..Fade the about section	$(window).scroll(function(){	//Check the location of the declared element	$('.hide_me').each(function(){	var bottom_of_object = $(this).position().top + $(this).outerHeight();	var bottom_of_window = $(window).scrollTop() + $(window).height();	// if the object is completely visible in the window, fade it in	if (bottom_of_window > bottom_of_object) {	$(this).animate({'opacity': '1' }, 2000 );	}	});	});	var poptext = "#poptext";	var poptext2 = "#poptext2";	var poptext3 = "#poptext3";	var bounce = "#bounce";	var bounce2 = "#bounce2";	var bounce3 = "#bounce3";	var box = "#box";	var box2 = "#box2";	var box3 = "#box3";	var clicked = true;	var clicked2 = true;	var clicked3 = true;	//portfolio description	$(poptext).click(function () {	$(poptext).toggleClass("highlight");	$(box).animate({	height: 'toggle',	opacity: 'toggle',	width: 'toggle'	}, 500);	if (clicked) {	$(bounce).addClass("arrow_invisible");	clicked = false;	return;	}	if (!clicked) {	$(bounce).removeClass("arrow_invisible");	clicked = true;	}	});	$(poptext2).click(function () {	$(poptext2).toggleClass("highlight");	$(box2).animate({	height: 'toggle',	opacity: 'toggle',	width: 'toggle'	}, 500);	if (clicked2) {	$(bounce2).addClass("arrow_invisible");	clicked2 = false;	return;	}	if (!clicked2) {	$(bounce2).removeClass("arrow_invisible");	clicked2 = true;	}	});	$(poptext3).click(function () {	$(poptext3).toggleClass("highlight");	$(box3).animate({	height: 'toggle',	opacity: 'toggle',	width: 'toggle'	}, 500);	if (clicked3) {	$(bounce3).addClass("arrow_invisible");	clicked3 = false;	return;	}	if (!clicked3) {	$(bounce3).removeClass("arrow_invisible");	clicked3 = true;	}	});	//transition effect for portfolio images	$('.img_transition').hover(function() { $(".img_transition").addClass('transition');	}, function() {	$(".img_transition").removeClass('transition');	});	$('.img_transition2').hover(function() { $(".img_transition2").addClass('transition');	}, function() {	$(".img_transition2").removeClass('transition');	});	$('.img_transition3').hover(function() { $(".img_transition3").addClass('transition');	}, function() {	$(".img_transition3").removeClass('transition');	}); // $(window).resize(function() {	var windowsize = $(window).width(); checkWidth(); $(window).resize(checkWidth); $(window).resize(console.log(windowsize))
}); function checkWidth(){	if ($(window).width() < 767) {	$(".nav-link").click(function (event) {	var clickover = $(event.target);	var _opened = $(".navbar-collapse").hasClass("navbar-collapse");	if (_opened === true && !clickover.hasClass("navbar-toggler")) { $("button.navbar-toggler").click();	}	});	} }
Personal Portfolio - Script Codes
Personal Portfolio - Script Codes
Home Page Home
Developer KinderPreet Singh
Username kindercappy
Uploaded January 07, 2023
Rating 3
Size 10,087 Kb
Views 6,072
Do you need developer help for Personal Portfolio?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

KinderPreet Singh (kindercappy) Script Codes
Name
Insertion Sort
Tribute
Random Quote Generator
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!