Hello readers, Today in this blog you’ll learn how to create a Fully Responsive Personal Portfolio Website using HTML CSS & JavaScript. I already shared many blogs on web design stuff like [Navigation Bar, Cards, Image Slider, Owl Carousel, Buttons, and many more] but still, I haven’t created a full website and now it’s time to create a portfolio website.
Personal portfolio sites are consistent that need to be taken care of throughout your work. It gives a convenient way for potential clients to view your work while also letting you expand on your skills/experiences and services.
On this site [Personal Portfolio], there are six sections on one page – Home, About, Services, Skills, Teams, and Contact, and each section is attractive and eye-catching. On the home page of this site, on the top, there is a sticky navigation bar with a logo on the left side and some navigation links are on the right side.
On the left side of the home page, there are texts which are about the author’s name, profession, and a button labeled “Hire me” as you can see in the image.
Video Tutorial of Responsive Personal Portfolio Website
In the video, you’ve seen the Responsive One Page Personal Portfolio Website and I hope you’ve understood the little bit codes of this design. I tried my best to make this video understandable for all viewers and I’ve shown each line output in the video. If this video is a little helpful for you, don’t forget to like it and leave a comment.
If you like this portfolio and want to get the source codes of this tutorial, I have provided all the codes of this program below and I’ve also provided the download link of this program where you can easily download the source files of this program.
You can use this portfolio with your creative customization and can take this portfolio to the next level with your creativity.
You might like this:
Responsive Personal Portfolio Website [Source Codes]
To create this website (Personal Portfolio Website), you need to create three Files: HTML File, CSS File, and JavaScript File. After creating these files just paste the following codes into your file.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on this website won’t appear. You’ve to download files from the given download button to use images also.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio Website</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
</head>
<body>
<div class="scroll-up-btn">
<i class="fas fa-angle-up"></i>
</div>
<nav class="navbar">
<div class="max-width">
<div class="logo"><a href="#">Portfo<span>lio.</span></a></div>
<ul class="menu">
<li><a href="#home" class="menu-btn">Home</a></li>
<li><a href="#about" class="menu-btn">About</a></li>
<li><a href="#services" class="menu-btn">Services</a></li>
<li><a href="#skills" class="menu-btn">Skills</a></li>
<li><a href="#teams" class="menu-btn">Teams</a></li>
<li><a href="#contact" class="menu-btn">Contact</a></li>
</ul>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Prakash Shahi</div>
<div class="text-3">And I'm a <span class="typing"></span></div>
<a href="#">Hire me</a>
</div>
</div>
</section>
<!-- about section start -->
<section class="about" id="about">
<div class="max-width">
<h2 class="title">About me</h2>
<div class="about-content">
<div class="column left">
<img src="images/profile-1.jpeg" alt="">
</div>
<div class="column right">
<div class="text">I'm Prakash and I'm a <span class="typing-2"></span></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi ut voluptatum eveniet doloremque autem excepturi eaque, sit laboriosam voluptatem nisi delectus. Facere explicabo hic minus accusamus alias fuga nihil dolorum quae. Explicabo illo unde, odio consequatur ipsam possimus veritatis, placeat, ab molestiae velit inventore exercitationem consequuntur blanditiis omnis beatae. Dolor iste excepturi ratione soluta quas culpa voluptatum repudiandae harum non.</p>
<a href="#">Download CV</a>
</div>
</div>
</div>
</section>
<!-- services section start -->
<section class="services" id="services">
<div class="max-width">
<h2 class="title">My services</h2>
<div class="serv-content">
<div class="card">
<div class="box">
<i class="fas fa-paint-brush"></i>
<div class="text">Web Design</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem quia sunt, quasi quo illo enim.</p>
</div>
</div>
<div class="card">
<div class="box">
<i class="fas fa-chart-line"></i>
<div class="text">Advertising</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem quia sunt, quasi quo illo enim.</p>
</div>
</div>
<div class="card">
<div class="box">
<i class="fas fa-code"></i>
<div class="text">Apps Design</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem quia sunt, quasi quo illo enim.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- skills section start -->
<section class="skills" id="skills">
<div class="max-width">
<h2 class="title">My skills</h2>
<div class="skills-content">
<div class="column left">
<div class="text">My creative skills & experiences.</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, ratione error est recusandae consequatur, iusto illum deleniti quidem impedit, quos quaerat quis minima sequi. Cupiditate recusandae laudantium esse, harum animi aspernatur quisquam et delectus ipsum quam alias quaerat? Quasi hic quidem illum. Ad delectus natus aut hic explicabo minus quod.</p>
<a href="#">Read more</a>
</div>
<div class="column right">
<div class="bars">
<div class="info">
<span>HTML</span>
<span>90%</span>
</div>
<div class="line html"></div>
</div>
<div class="bars">
<div class="info">
<span>CSS</span>
<span>60%</span>
</div>
<div class="line css"></div>
</div>
<div class="bars">
<div class="info">
<span>JavaScript</span>
<span>80%</span>
</div>
<div class="line js"></div>
</div>
<div class="bars">
<div class="info">
<span>PHP</span>
<span>50%</span>
</div>
<div class="line php"></div>
</div>
<div class="bars">
<div class="info">
<span>MySQL</span>
<span>70%</span>
</div>
<div class="line mysql"></div>
</div>
</div>
</div>
</div>
</section>
<!-- teams section start -->
<section class="teams" id="teams">
<div class="max-width">
<h2 class="title">My teams</h2>
<div class="carousel owl-carousel">
<div class="card">
<div class="box">
<img src="images/profile-1.jpeg" alt="">
<div class="text">Someone name</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="images/profile-2.jpeg" alt="">
<div class="text">Someone name</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="images/profile-3.jpeg" alt="">
<div class="text">Someone name</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="images/profile-4.jpeg" alt="">
<div class="text">Someone name</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="card">
<div class="box">
<img src="images/profile-5.jpeg" alt="">
<div class="text">Someone name</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div>
</div>
</section>
<!-- contact section start -->
<section class="contact" id="contact">
<div class="max-width">
<h2 class="title">Contact me</h2>
<div class="contact-content">
<div class="column left">
<div class="text">Get in Touch</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos harum corporis fuga corrupti. Doloribus quis soluta nesciunt veritatis vitae nobis?</p>
<div class="icons">
<div class="row">
<i class="fas fa-user"></i>
<div class="info">
<div class="head">Name</div>
<div class="sub-title">Prakash Shahi</div>
</div>
</div>
<div class="row">
<i class="fas fa-map-marker-alt"></i>
<div class="info">
<div class="head">Address</div>
<div class="sub-title">Surkhet, Nepal</div>
</div>
</div>
<div class="row">
<i class="fas fa-envelope"></i>
<div class="info">
<div class="head">Email</div>
<div class="sub-title">[email protected]</div>
</div>
</div>
</div>
</div>
<div class="column right">
<div class="text">Message me</div>
<form action="#">
<div class="fields">
<div class="field name">
<input type="text" placeholder="Name" required>
</div>
<div class="field email">
<input type="email" placeholder="Email" required>
</div>
</div>
<div class="field">
<input type="text" placeholder="Subject" required>
</div>
<div class="field textarea">
<textarea cols="30" rows="10" placeholder="Message.." required></textarea>
</div>
<div class="button-area">
<button type="submit">Send message</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- footer section start -->
<footer>
<span>Created By <a href="https://www.codingnepalweb.com">CodingNepal</a> | <span class="far fa-copyright"></span> 2020 All rights reserved.</span>
</footer>
<script src="script.js"></script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
/* import google fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
html{
scroll-behavior: smooth;
}
/* custom scroll bar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* all similar content styling codes */
section{
padding: 100px 0;
}
.max-width{
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
.about, .services, .skills, .teams, .contact, footer{
font-family: 'Poppins', sans-serif;
}
.about .about-content,
.services .serv-content,
.skills .skills-content,
.contact .contact-content{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
section .title{
position: relative;
text-align: center;
font-size: 40px;
font-weight: 500;
margin-bottom: 60px;
padding-bottom: 20px;
font-family: 'Ubuntu', sans-serif;
}
section .title::before{
content: "";
position: absolute;
bottom: 0px;
left: 50%;
width: 180px;
height: 3px;
background: #111;
transform: translateX(-50%);
}
section .title::after{
position: absolute;
bottom: -8px;
left: 50%;
font-size: 20px;
color: crimson;
padding: 0 5px;
background: #fff;
transform: translateX(-50%);
}
/* navbar styling */
.navbar{
position: fixed;
width: 100%;
z-index: 999;
padding: 30px 0;
font-family: 'Ubuntu', sans-serif;
transition: all 0.3s ease;
}
.navbar.sticky{
padding: 15px 0;
background: crimson;
}
.navbar .max-width{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: #fff;
font-size: 35px;
font-weight: 600;
}
.navbar .logo a span{
color: crimson;
transition: all 0.3s ease;
}
.navbar.sticky .logo a span{
color: #fff;
}
.navbar .menu li{
list-style: none;
display: inline-block;
}
.navbar .menu li a{
display: block;
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover{
color: crimson;
}
.navbar.sticky .menu li a:hover{
color: #fff;
}
/* menu btn styling */
.menu-btn{
color: #fff;
font-size: 23px;
cursor: pointer;
display: none;
}
.scroll-up-btn{
position: fixed;
height: 45px;
width: 42px;
background: crimson;
right: 30px;
bottom: 10px;
text-align: center;
line-height: 45px;
color: #fff;
z-index: 9999;
font-size: 30px;
border-radius: 6px;
border-bottom-width: 2px;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
}
.scroll-up-btn.show{
bottom: 30px;
opacity: 1;
pointer-events: auto;
}
.scroll-up-btn:hover{
filter: brightness(90%);
}
/* home section styling */
.home{
display: flex;
background: url("images/banner.jpg") no-repeat center;
height: 100vh;
color: #fff;
min-height: 500px;
background-size: cover;
background-attachment: fixed;
font-family: 'Ubuntu', sans-serif;
}
.home .max-width{
width: 100%;
display: flex;
}
.home .max-width .row{
margin-right: 0;
}
.home .home-content .text-1{
font-size: 27px;
}
.home .home-content .text-2{
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3{
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span{
color: crimson;
font-weight: 500;
}
.home .home-content a{
display: inline-block;
background: crimson;
color: #fff;
font-size: 25px;
padding: 12px 36px;
margin-top: 20px;
font-weight: 400;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
}
.home .home-content a:hover{
color: crimson;
background: none;
}
/* about section styling */
.about .title::after{
content: "who i am";
}
.about .about-content .left{
width: 45%;
}
.about .about-content .left img{
height: 400px;
width: 400px;
object-fit: cover;
border-radius: 6px;
}
.about .about-content .right{
width: 55%;
}
.about .about-content .right .text{
font-size: 25px;
font-weight: 600;
margin-bottom: 10px;
}
.about .about-content .right .text span{
color: crimson;
}
.about .about-content .right p{
text-align: justify;
}
.about .about-content .right a{
display: inline-block;
background: crimson;
color: #fff;
font-size: 20px;
font-weight: 500;
padding: 10px 30px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
}
.about .about-content .right a:hover{
color: crimson;
background: none;
}
/* services section styling */
.services, .teams{
color:#fff;
background: #111;
}
.services .title::before,
.teams .title::before{
background: #fff;
}
.services .title::after,
.teams .title::after{
background: #111;
content: "what i provide";
}
.services .serv-content .card{
width: calc(33% - 20px);
background: #222;
text-align: center;
border-radius: 6px;
padding: 50px 25px;
cursor: pointer;
transition: all 0.3s ease;
}
.services .serv-content .card:hover{
background: crimson;
}
.services .serv-content .card .box{
transition: all 0.3s ease;
}
.services .serv-content .card:hover .box{
transform: scale(1.05);
}
.services .serv-content .card i{
font-size: 50px;
color: crimson;
transition: color 0.3s ease;
}
.services .serv-content .card:hover i{
color: #fff;
}
.services .serv-content .card .text{
font-size: 25px;
font-weight: 500;
margin: 10px 0 7px 0;
}
/* skills section styling */
.skills .title::after{
content: "what i know";
}
.skills .skills-content .column{
width: calc(50% - 30px);
}
.skills .skills-content .left .text{
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
.skills .skills-content .left p{
text-align: justify;
}
.skills .skills-content .left a{
display: inline-block;
background: crimson;
color: #fff;
font-size: 18px;
font-weight: 500;
padding: 8px 16px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid crimson;
transition: all 0.3s ease;
}
.skills .skills-content .left a:hover{
color: crimson;
background: none;
}
.skills .skills-content .right .bars{
margin-bottom: 15px;
}
.skills .skills-content .right .info{
display: flex;
margin-bottom: 5px;
align-items: center;
justify-content: space-between;
}
.skills .skills-content .right span{
font-weight: 500;
font-size: 18px;
}
.skills .skills-content .right .line{
height: 5px;
width: 100%;
background: lightgrey;
position: relative;
}
.skills .skills-content .right .line::before{
content: "";
position: absolute;
height: 100%;
left: 0;
top: 0;
background: crimson;
}
.skills-content .right .html::before{
width: 90%;
}
.skills-content .right .css::before{
width: 60%;
}
.skills-content .right .js::before{
width: 80%;
}
.skills-content .right .php::before{
width: 50%;
}
.skills-content .right .mysql::before{
width: 70%;
}
/* teams section styling */
.teams .title::after{
content: "who with me";
}
.teams .carousel .card{
background: #222;
border-radius: 6px;
padding: 25px 35px;
text-align: center;
overflow: hidden;
transition: all 0.3s ease;
}
.teams .carousel .card:hover{
background: crimson;
}
.teams .carousel .card .box{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.teams .carousel .card:hover .box{
transform: scale(1.05);
}
.teams .carousel .card .text{
font-size: 25px;
font-weight: 500;
margin: 10px 0 7px 0;
}
.teams .carousel .card img{
height: 150px;
width: 150px;
object-fit: cover;
border-radius: 50%;
border: 5px solid crimson;
transition: all 0.3s ease;
}
.teams .carousel .card:hover img{
border-color: #fff;
}
.owl-dots{
text-align: center;
margin-top: 20px;
}
.owl-dot{
height: 13px;
width: 13px;
margin: 0 5px;
outline: none!important;
border-radius: 50%;
border: 2px solid crimson!important;
transition: all 0.3s ease;
}
.owl-dot.active{
width: 35px;
border-radius: 14px;
}
.owl-dot.active,
.owl-dot:hover{
background: crimson!important;
}
/* contact section styling */
.contact .title::after{
content: "get in touch";
}
.contact .contact-content .column{
width: calc(50% - 30px);
}
.contact .contact-content .text{
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
.contact .contact-content .left p{
text-align: justify;
}
.contact .contact-content .left .icons{
margin: 10px 0;
}
.contact .contact-content .row{
display: flex;
height: 65px;
align-items: center;
}
.contact .contact-content .row .info{
margin-left: 30px;
}
.contact .contact-content .row i{
font-size: 25px;
color: crimson;
}
.contact .contact-content .info .head{
font-weight: 500;
}
.contact .contact-content .info .sub-title{
color: #333;
}
.contact .right form .fields{
display: flex;
}
.contact .right form .field,
.contact .right form .fields .field{
height: 45px;
width: 100%;
margin-bottom: 15px;
}
.contact .right form .textarea{
height: 80px;
width: 100%;
}
.contact .right form .name{
margin-right: 10px;
}
.contact .right form .field input,
.contact .right form .textarea textarea{
height: 100%;
width: 100%;
border: 1px solid lightgrey;
border-radius: 6px;
outline: none;
padding: 0 15px;
font-size: 17px;
font-family: 'Poppins', sans-serif;
transition: all 0.3s ease;
}
.contact .right form .field input:focus,
.contact .right form .textarea textarea:focus{
border-color: #b3b3b3;
}
.contact .right form .textarea textarea{
padding-top: 10px;
resize: none;
}
.contact .right form .button-area{
display: flex;
align-items: center;
}
.right form .button-area button{
color: #fff;
display: block;
width: 160px!important;
height: 45px;
outline: none;
font-size: 18px;
font-weight: 500;
border-radius: 6px;
cursor: pointer;
flex-wrap: nowrap;
background: crimson;
border: 2px solid crimson;
transition: all 0.3s ease;
}
.right form .button-area button:hover{
color: crimson;
background: none;
}
/* footer section styling */
footer{
background: #111;
padding: 15px 23px;
color: #fff;
text-align: center;
}
footer span a{
color: crimson;
text-decoration: none;
}
footer span a:hover{
text-decoration: underline;
}
/* responsive media query start */
@media (max-width: 1104px) {
.about .about-content .left img{
height: 350px;
width: 350px;
}
}
@media (max-width: 991px) {
.max-width{
padding: 0 50px;
}
}
@media (max-width: 947px){
.menu-btn{
display: block;
z-index: 999;
}
.menu-btn i.active:before{
content: "\f00d";
}
.navbar .menu{
position: fixed;
height: 100vh;
width: 100%;
left: -100%;
top: 0;
background: #111;
text-align: center;
padding-top: 80px;
transition: all 0.3s ease;
}
.navbar .menu.active{
left: 0;
}
.navbar .menu li{
display: block;
}
.navbar .menu li a{
display: inline-block;
margin: 20px 0;
font-size: 25px;
}
.home .home-content .text-2{
font-size: 70px;
}
.home .home-content .text-3{
font-size: 35px;
}
.home .home-content a{
font-size: 23px;
padding: 10px 30px;
}
.max-width{
max-width: 930px;
}
.about .about-content .column{
width: 100%;
}
.about .about-content .left{
display: flex;
justify-content: center;
margin: 0 auto 60px;
}
.about .about-content .right{
flex: 100%;
}
.services .serv-content .card{
width: calc(50% - 10px);
margin-bottom: 20px;
}
.skills .skills-content .column,
.contact .contact-content .column{
width: 100%;
margin-bottom: 35px;
}
}
@media (max-width: 690px) {
.max-width{
padding: 0 23px;
}
.home .home-content .text-2{
font-size: 60px;
}
.home .home-content .text-3{
font-size: 32px;
}
.home .home-content a{
font-size: 20px;
}
.services .serv-content .card{
width: 100%;
}
}
@media (max-width: 500px) {
.home .home-content .text-2{
font-size: 50px;
}
.home .home-content .text-3{
font-size: 27px;
}
.about .about-content .right .text,
.skills .skills-content .left .text{
font-size: 19px;
}
.contact .right form .fields{
flex-direction: column;
}
.contact .right form .name,
.contact .right form .email{
margin: 0;
}
.right form .error-box{
width: 150px;
}
.scroll-up-btn{
right: 15px;
bottom: 15px;
height: 38px;
width: 35px;
font-size: 23px;
line-height: 38px;
}
}
Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.
$(document).ready(function(){
$(window).scroll(function(){
// sticky navbar on scroll script
if(this.scrollY > 20){
$('.navbar').addClass("sticky");
}else{
$('.navbar').removeClass("sticky");
}
// scroll-up button show/hide script
if(this.scrollY > 500){
$('.scroll-up-btn').addClass("show");
}else{
$('.scroll-up-btn').removeClass("show");
}
});
// slide-up script
$('.scroll-up-btn').click(function(){
$('html').animate({scrollTop: 0});
// removing smooth scroll on slide-up button click
$('html').css("scrollBehavior", "auto");
});
$('.navbar .menu li a').click(function(){
// applying again smooth scroll on menu items click
$('html').css("scrollBehavior", "smooth");
});
// toggle menu/navbar script
$('.menu-btn').click(function(){
$('.navbar .menu').toggleClass("active");
$('.menu-btn i').toggleClass("active");
});
// typing text animation script
var typed = new Typed(".typing", {
strings: ["YouTuber", "Developer", "Blogger", "Designer", "Freelancer"],
typeSpeed: 100,
backSpeed: 60,
loop: true
});
var typed = new Typed(".typing-2", {
strings: ["YouTuber", "Developer", "Blogger", "Designer", "Freelancer"],
typeSpeed: 100,
backSpeed: 60,
loop: true
});
// owl carousel script
$('.carousel').owlCarousel({
margin: 20,
loop: true,
autoplay: true,
autoplayTimeOut: 2000,
autoplayHoverPause: true,
responsive: {
0:{
items: 1,
nav: false
},
600:{
items: 2,
nav: false
},
1000:{
items: 3,
nav: false
}
}
});
});
That’s all, now you’ve successfully created a Responsive Personal Portfolio Website using HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
If you face any problem during downloading or after downloading the source code files then feel free to comment down or contact us through the contact page.
It’s amazing, like i can now move my fingers in css and js, thx
Excellent Bro, My Fav Coder <3
Sir, love your project playlist, helping me a lot.
When I click the “menu-bar” icon the “menu” doesn’t show up. I have looked up all the code but not working. Can you help me with that?
Sir can you tell me how to improve my command over html css and java
like you have very good command over these
1st of all the this portfolio is awesome I m a not pro In these. I used your template but I have a question how can I get messages when someone send me message though my website thnx
thank you so much bro
Best Bro tq For you
Thanks dude
it was nice code ….
my js script is not running well
You may did some mistakes with the codes. Please, download the source code files from the given download button and make sure you’re connected to the Internet.
Hi, how do i make the footer sticky? Thanks
Can I create this from my phone ??
Hey Man, you are awesome! I subscribed to your youtube channel. The only thing that was giving me issues was the “fas fa-bars”
I do not have any misspellings, I dont know if anyone else had this issue. I’d love your input!
This portfolio, looks amazing bro!
The bars would not show up for some strange reason* meant to put that in my previous comment
What was the problem..? Is the icon not showing or something else..?
Yes for me the icon not showing (section “contact”) (that was giving me issues was the “fas fa-”)
I use just html and css ( no JavaScript )
thanks for video
thank you so much
Bro, I’m a big fan of anime and I wanna make a website based on anime like with slide shows and all that, I really can’t find any, could you please make one like that. Plssss
It would be great if you could do it 🙂
hello brother..why cant i run the website in live server?
Make sure to install the live server extension in your vscode..?
wow, thank you so much,
can I practice with this design?
Yes, you can!
Hi, My name Is Shivam
Can I use this website as my own portfolio website
Please tell me
I really want a portfolio website
Yes, you can use it.
Thank You
Thank you for this tutorials. So many helpfull for beginners.
Glad to hear that!
thank you yarr broo lots of love. you help us
You’re welcome bro <3
am so happy , thanks for free portfilio
It was really awesome, how can some one appreciate this gesture
bro is this responsive (contact us) javascript
thanks
Bro you are awesome bro !!
Can i use this with myown changes for a school website
or will there be copyright issues ?
Yes, you can use it and there are no copyright issues.
Hello Sir,
When I upload this coding file into my WordPress the error “Style.css stylesheet doesn’t have a valid theme header”. Can you please let me know how can I fix this??
Waiting for your good response.
Thank you!
It’s too good and useful
Happy to hear that!
Thanks
Hello! Can i use this portfio for my purposes but with some corrections?
Yes, you can use it.
Can I use this all for free… no issues for copyright
Yes, you can use it and there will be no copyright issues.
pls how can i get this online
Script.js file not working
Make sure you’re connected to the Internet.
Very Good , Thank you
Pretty good
Thank you so much
Bro your so help full congraturations
Happy to help you
Sir,Do you have the backend part
No, if you want make this contact form working. Here is the blog of it – https://www.codingnepalweb.com/create-working-contact-form-in-php/
lmfao can i use it?
Yes, you can use it.
i am a ke bad nahi chal rhi h website
Make sure you’re connected to the Internet
Great work. It helped me a lot to learn some good frontend design in such a fast, easier and effective way. Thanks
Hello CodingNepal, this is an awesome template ! How to get the contact form to work?
Regards
delanza
Here is a blog for it – https://www.codingnepalweb.com/create-working-contact-form-in-php/
Hey while running the file on local sever it works well whatever changes i have made it shows there but while publishing it online in nishantnayak.com.npi cannot see my changes like i updated profile i update skill section.
When you upload your files to the server and, do some changes in the files then, it won’t immediately reflect on your site because of the site cache. You can clear the cache or try to open the site in the incognito window.
i can not download code file can you please help me with that
Make sure you’ve disabled your AdBlocker for this site.
This is great job, a lot of fun stuff happening here and one can learn a lot, though there is one major flaw with this portfolio. It doesn’t have any section to show projects, which portfolio is all about anyway. I guess I can turn that “people I work with” into the “projects”, but it would be more fun to have you add that section because you have the whole idea what kind of style would it fit here. Anyway, a lot of this could be used so it doesn’t hurt me to learn a bit and code a section myself, but a lot is happening here that I don’t understand, so it will be harder to catch everything that happens. Cheers.
Thank you so much and you can easily customize this portfolio and add your required sections. I assumed you know basic HTML & CSS.
Sir, How Can I Get Messages to my email from the contact page?
If you have basic knowledge of PHP then here is the blog on Working Contact Form in PHP and you can easily add it inside this portfolio.
Nice work…Really loved it.
Thank you so much.
Nice work bro keep it up!
Thanks bro. Keep visiting.
Sir please make a video on how to make a e-commerce website.
Okay, I’ll think about it.
Amazing …, Teng’s
Thank you so much
how to download the source code?
Nice work…Really loved it.
Thank you so much
bro can you help me out
i want to make a website for study material so that all the students in our institute can download notes from there and I can upload notes
if yes plz let me know that will be a great help and greatly appreciated man
Hello if you want to make a functional and dynamic website then backend languages are required for it.
there’s an error everytime i try downloading the source code, the tab crashes for some reason
You can try open this page on incognito mode or send us screenshot link but make sure you’ve disabled your AdBlocker on our site.
no idea why index file had a php file extension…??? i changed it to html and the website seems to function normally…
I think you didn’t read the blog properly. Please read the blog carefully!
Thanks bro
Welcome bro
Hey Bro, I just want to ask can I change the credits like Created By Coding Nepal can I change it to my name or my company name?
Yes, you can change it. No issue!
contact form its not work 🙁
i use work backend
Did you configure your XAMPP??
How do you get them to send me email?
I didn’t understandnd
Hi mate. I know that you’ve stated many times, that there’ll be no copyright issues linked to using your design and your code and modifying it to suit one’s own needs. But does this count for business use as well? I’d use it and modify it to create a website for my local language school. Is that good with you? Thanks in advance.
Yes, it’s free without any limitation.
It’s very trouƄle-free to find out any topic on net as compared to textbooks,
as I found this piece of writing at this website.
Hi sir please notice me, i have a problem with the sticky class also with the animation of Blogger Youtuber parag. I already download the source code and run it. The result is same even in you're work.
I'm just working on plain note++.
Now my question is do u use any elements that nid a internet(cause i don't have) to run those feature?
Thank you sir.
Hi sir
I have a problem to those sticky class and youtuber to blogger animation.
I already downlaod you're work(source code) and same thing happen sticky class not work also the animation.
Do u use any element that imternet (cause i dont have) needid?
I'm just working on plain note++ and run in to chrome
Alou
Code file has expired. It’s not downloading
Can I use this in my own website?
thank you so much
You are awesome Bro Thank you So much
Thanks so much sir for this piece of work. It has help me a lot and i appreciate that. The Lord bless you.
Wow ! it really works and there are no virus in the file.
Failed while inserting data into database!
i am geatting this error
It was really nice one
You're most welcome
It's all about learning bro
You are awesome Bro, Bro show us the way to become like you
thanks for ur tutorial 🙂
Read this blog – https://www.codingnepalweb.com/2020/09/how-to-send-email-with-php-from-localhost.html
how i recive message on send message
I have pinned a comment. Please read the first comment of this video to get a solution.
Can you please, provide the script sites and icons. Because they are not showing. The site you provided was not working. What can i do?
unzip means??
Sorry I do not know about google sites
Is it possible to implement this on google sites?
unzip and service icons are not visible in google chrome
You're welcome bro 🙂
No it's only frontend design
Here is the blog – https://www.codingnepalweb.com/2021/01/responsive-image-lightbox-using-javascript.html
wow thank you, you are great!!!
I modified a little bit, just changed the "my team" section to "my works". And now i'm trying to add a modal popup to images so when I click on photo this make bigger :). Hope I succes 😛
can you its backend
Thank you So much bro
Just click on this link the download button above.
Thank you 🙂
Yes you can
Yes no copyright issues.
I take 2 weeks to do this Portfolio website I got many new things when while typing coding this website vvvv nice sir and i have question can upload this website ?
No copright issues ?
Licence?
I can't find images and background image here. Can you help me out ?
Hi Bro awsome design i love it i am making a portfolio website can i use it and add my own changes
Thank you
Awesome tutorials are great
You've to learn Photoshop and I didn't edit this image..I've used non copyright image.
For that we need backend languages…please check our PHP videos or blogs.
Thank you 🙂
you are awesome
what should i alter or edit in code so the message goes to my gmail. plz help. thanks a bunch for providing this great theme for free. mail me at:[email protected]
I want to know how to make image so better for use in website like in this website you use a boy with no background
You can download all images and code files from the above download button.
You're welcome 🙂
You're welcome 🙂
Sorry for that
Thanks
Can you please create a same contact form for me so when people contact me i get an email. Please create the same css contact but add my email to it so when people email me i get an email.
My Email is [email protected]
Please send me the zip file of the whole website include the contact for
Thanks
thanks dude
I want to practice your website, but I do not have the images used on your website. What if you would benefit from the images?
Above there big a big button labeled as "Download code files", just click on that button and you'll redirect to another page. In that page, there is timer and you've to just wait. Once timer completed, the zip file automatically download.
Can y please attached the image and the whole zip file with everyhting in it
Include
Images
Files
Thanks
Yes bro but I'll try to add my voice in my upcoming videos.
Thank you.
Prakash
Video tutorial me music ke jagah bolte to aur achchha hota.
Hye! Thank you so much to provide the code. Can i know your name?
Amazing Design
Yes you download from above link.
Thank you.
Can i get banner images??
You're the best for doing what you do
Amazing Design
Yes but don't forget to view our FAQ's.
I can use this source on my website? I love your design and wish use in my portfolio web, hi from Brazil!
Yes but don't forget to view our FAQ's.
I'm web developper. U do the good Job. May i use for my web site?
You're welcome 🙂
Thank you very helpful! Keep it up. May God Bless you!
No, you can watch video tutorial of this website for understanding the codes.
You're welcome
Download files instead of copying codes.
js not working
thankyou so much sir
do you have documentation of this website??
Please download files, there you get codes with all images which are used in this website.
Yes there is ZIP file of this website. Please download from the above link.
Can you attaached website zip file. Please!
That wiil be very kind of you.
Thnkas
Read the blog carefully.
no errors found in js file.but it is not working menu-btn and other js file things.can you please help.
Thank you bro
How I wished i cld be with u guyz'i may be kidding to others buh u guyz re d best
You're welcome 🙂
Thank you very much
Thank you very much
Atom
awesome design
Thank you very much !
Great Bro. Very Helpfull.
sir,what do you useing app for code ?
Sure and I've also uploaded a blog about how to create Chatbot using PHP.
can you make chat app next?
Download all files from the above download link.
is it possible to send the correct files to [email protected]?
You're welcome 🙂
Thank you 🙂
proud of you
can I use the template commercially without credit or attribution?
hi, what size is the background image in the home section? My about section the line is showing up in my home section above the about me title. I don't know why.
nevermind I found it… thanks
Yes!
thanks bro love u from india i usualy visit your website every day for free sourcecode thanks bro keep making videos like this
it is free for use?
Thank you
nice design
You're welcome 🙂
TnQ
Yes you can use!
You're welcome bro…Keep visiting!
Hi there,
can i used this source for my portfolio can i edit this and used it?
[email protected] DM
Thank you bro
Thank you bro
You're welcome bro…Keep visiting!
I am from Bangladesh, thank you very much, brother, I love your country very much and I pray that you will not forget what you have done for us, may Allah bless you.
You're welcome bro…Keep visiting!
bro u are lagend thanks bro
Thank you!
Great design
You're welcome bro 🙂
Thank you So much bro
No there is no js codes have written to restricted these keys. Please download files instead of copying.
I found a bug! If I try the contact and I press the t or s
letters then I can't knock them down.
You're welcome…Keep visiting!
Thank you for all tutorial. They were very effective.
Note: I've commented some lines of code because I got multiple errors in codes while uploading this post. So I recommend you download the source code files from the above link instead of copying codes. But If you're going to copy codes then uncomment the commented lines after pasting the following codes.
js file error plz provide correnct
Thank you!
Amazing …
Thanks