Responsive Personal Portfolio Website
Personal Portfolio Website:- Hello readers, Today In this article I am going to show you how to create a Responsive Personal Portfolio Website using HTML, CSS, and JavaScript. I have already designed many types of websites. This is a fully responsive personal portfolio website for which I have used JavaScript. In addition, common HTML and CSS programming codes have been used.
You easily create a Responsive Personal Portfolio Website Using HTML CSS and javascript then this article will definitely help you. For this, you need to have an idea about basic HTML CSS, and javascript then you can understand the following codes. It is designed in a completely modern way.
Some Information About This Responsive Personal Portfolio Website
On this Portfolio Site, there are six sections on one page – Home, About, Skills, Works, 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, with a button labeled as “Hire me” and a bottom Social link as you can see in the image. Right Side author image.
Watch the video tutorial to create Responsive Personal Portfolio Website
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made this Responsive Personal Portfolio Website step by step completely beautifully. So you can learn how to make these Responsive Personal Portfolio Website. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this Responsive Personal Portfolio Website Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Responsive Image Slider Using HTML and CSS
- Complete JavaScript Form Validation
- Glassmorphism Login Form Html CSS & JavaScript
Personal Portfolio Website | Source Codes
You have to create HTML, CSS & JS File For this menu. After creating these files just paste the following codes into your file.
The First Step, 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. You’ve to download files from the given download button to use images also.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portfolio website complete</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
<!-- =====BOX ICONS===== -->
<link href='https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<!--===== HEADER =====-->
<header class="l-header">
<nav class="nav bd-grid">
<div>
<a href="#" class="nav__logo">Marlon</a>
</div>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item"><a href="#home" class="nav__link active">Home</a></li>
<li class="nav__item"><a href="#about" class="nav__link">About</a></li>
<li class="nav__item"><a href="#skills" class="nav__link">Skills</a></li>
<li class="nav__item"><a href="#work" class="nav__link">Work</a></li>
<li class="nav__item"><a href="#contact" class="nav__link">Contact</a></li>
</ul>
</div>
<div class="nav__toggle" id="nav-toggle">
<i class='bx bx-menu'></i>
</div>
</nav>
</header>
<main class="l-main">
<!--===== HOME =====-->
<section class="home bd-grid" id="home">
<div class="home__data">
<h1 class="home__title">Hi,<br>I'am <span class="home__title-color">Marlon</span><br> Web Designer</h1>
<a href="#" class="button">Contact</a>
</div>
<div class="home__social">
<a href="" class="home__social-icon"><i class='bx bxl-linkedin'></i></a>
<a href="" class="home__social-icon"><i class='bx bxl-behance' ></i></a>
<a href="" class="home__social-icon"><i class='bx bxl-github' ></i></a>
</div>
<div class="home__img">
<img src="assets/img/perfil.png" alt="">
</div>
</section>
<!--===== ABOUT =====-->
<section class="about section " id="about">
<h2 class="section-title">About</h2>
<div class="about__container bd-grid">
<div class="about__img">
<img src="assets/img/about.jpg" alt="">
</div>
<div>
<h2 class="about__subtitle">I'am Marlon</h2>
<p class="about__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate cum expedita quo culpa tempora, assumenda, quis fugiat ut voluptates soluta, aut earum nemo recusandae cumque perferendis! Recusandae alias accusamus atque.</p>
</div>
</div>
</section>
<!--===== SKILLS =====-->
<section class="skills section" id="skills">
<h2 class="section-title">Skills</h2>
<div class="skills__container bd-grid">
<div>
<h2 class="skills__subtitle">Profesional Skills</h2>
<p class="skills__text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit optio id vero amet, alias architecto consectetur error eum eaque sit.</p>
<div class="skills__data">
<div class="skills__names">
<i class='bx bxl-html5 skills__icon'></i>
<span class="skills__name">HTML5</span>
</div>
<div class="skills__bar skills__html">
</div>
<div>
<span class="skills__percentage">95%</span>
</div>
</div>
<div class="skills__data">
<div class="skills__names">
<i class='bx bxl-css3 skills__icon'></i>
<span class="skills__name">CSS3</span>
</div>
<div class="skills__bar skills__css">
</div>
<div>
<span class="skills__percentage">85%</span>
</div>
</div>
<div class="skills__data">
<div class="skills__names">
<i class='bx bxl-javascript skills__icon' ></i>
<span class="skills__name">JAVASCRIPT</span>
</div>
<div class="skills__bar skills__js">
</div>
<div>
<span class="skills__percentage">65%</span>
</div>
</div>
<div class="skills__data">
<div class="skills__names">
<i class='bx bxs-paint skills__icon'></i>
<span class="skills__name">UX/UI</span>
</div>
<div class="skills__bar skills__ux">
</div>
<div>
<span class="skills__percentage">85%</span>
</div>
</div>
</div>
<div>
<img src="assets/img/work3.jpg" alt="" class="skills__img">
</div>
</div>
</section>
<!--===== WORK =====-->
<section class="work section" id="work">
<h2 class="section-title">Work</h2>
<div class="work__container bd-grid">
<div class="work__img">
<img src="assets/img/work1.jpg" alt="">
</div>
<div class="work__img">
<img src="assets/img/work2.jpg" alt="">
</div>
<div class="work__img">
<img src="assets/img/work3.jpg" alt="">
</div>
<div class="work__img">
<img src="assets/img/work4.jpg" alt="">
</div>
<div class="work__img">
<img src="assets/img/work5.jpg" alt="">
</div>
<div class="work__img">
<img src="assets/img/work6.jpg" alt="">
</div>
</div>
</section>
<!--===== CONTACT =====-->
<section class="contact section" id="contact">
<h2 class="section-title">Contact</h2>
<div class="contact__container bd-grid">
<form action="" class="contact__form">
<input type="text" placeholder="Name" class="contact__input">
<input type="mail" placeholder="Email" class="contact__input">
<textarea name="" id="" cols="0" rows="10" class="contact__input"></textarea>
<input type="button" value="Enviar" class="contact__button button">
</form>
</div>
</section>
</main>
<!--===== FOOTER =====-->
<footer class="footer">
<p class="footer__title">Marlon</p>
<div class="footer__social">
<a href="#" class="footer__icon"><i class='bx bxl-facebook' ></i></a>
<a href="#" class="footer__icon"><i class='bx bxl-instagram' ></i></a>
<a href="#" class="footer__icon"><i class='bx bxl-twitter' ></i></a>
</div>
<p>© 2020 copyright all right reserved</p>
</footer>
<!--===== SCROLL REVEAL =====-->
<script src="https://unpkg.com/scrollreveal"></script>
<!---JS CDN Link---->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!--Custom JS File-->
<script src="js.js"></script>
</body>
</html>Second Step, you have to 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.
CSS CODE:
/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:[email protected];600;700&display=swap");
/*===== VARIABLES CSS =====*/
:root{
--header-height: 3rem;
--font-semi: 600;
}
/*===== Colores =====*/
:root{
--first-color: #4070F4;
--second-color: #0E2431;
}
/*===== Fuente y tipografia =====*/
:root{
--body-font: 'Poppins', sans-serif;
--big-font-size: 2rem;
--h2-font-size: 1.25rem;
--normal-font-size: 0.938rem;
}
@media screen and (min-width: 768px){
:root{
--big-font-size: 3.5rem;
--h2-font-size: 2rem;
--normal-font-size: 1rem;
}
}
/*===== Margenes =====*/
:root{
--mb-1: 0.5rem;
--mb-2: 1rem;
--mb-3: 1.5rem;
--mb-4: 2rem;
--mb-5: 2.5rem;
--mb-6: 3rem;
}
/*===== z index =====*/
:root{
--z-back: -10;
--z-normal: 1;
--z-tooltip: 10;
--z-fixed: 100;
}
/*===== BASE =====*/
*,::before,::after{
box-sizing: border-box;
}
html{
scroll-behavior: smooth;
}
body{
margin: var(--header-height) 0 0 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
color: var(--second-color);
}
h1,h2,p{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
img{
max-width: 100%;
height: auto;
display: block;
}
/*===== CLASS CSS ===== */
.section-title{
position: relative;
font-size: var(--h2-font-size);
color: var(--first-color);
margin-top: var(--mb-2);
margin-bottom: var(--mb-4);
text-align: center;
}
.section-title::after{
position: absolute;
content: "";
width: 64px;
height: 0.18rem;
left: 0;
right: 0;
margin: auto;
top: 2rem;
background-color: var(--first-color);
}
.section{
padding-top: 3rem;
padding-bottom: 2rem;
}
/*===== LAYOUT =====*/
.bd-grid{
max-width: 1024px;
display: grid;
grid-template-columns: 100%;
grid-column-gap: 2rem;
width: calc(100% - 2rem);
margin-left: var(--mb-2);
margin-right: var(--mb-2);
}
.l-header{
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
background-color: #fff;
box-shadow: 0 1px 4px rgba(146,161,176,.15);
}
/*===== NAV =====*/
.nav{
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
font-weight: var(--font-semi);
}
@media screen and (max-width: 768px){
.nav__menu{
position: fixed;
top: var(--header-height);
right: -100%;
width: 80%;
height: 100%;
padding: 2rem;
background-color: var(--second-color);
transition: .5s;
}
}
.nav__item{
margin-bottom: var(--mb-4);
}
.nav__link{
position: relative;
color: #fff;
}
.nav__link:hover{
position: relative;
}
.nav__link:hover::after{
position: absolute;
content: "";
width: 100%;
height: 0.18rem;
left: 0;
top: 2rem;
background-color: var(--first-color);
}
.nav__logo{
color: var(--second-color);
}
.nav__toggle{
color: var(--second-color);
font-size: 1.5rem;
cursor: pointer;
}
/*Active menu*/
.active::after{
position: absolute;
content: "";
width: 100%;
height: 0.18rem;
left: 0;
top: 2rem;
background-color: var(--first-color);
}
/*=== Show menu ===*/
.show{
right: 0;
}
/*===== HOME =====*/
.home{
height: calc(100vh - 3rem);
row-gap: 1rem;
}
.home__data{
align-self: center;
}
.home__title{
font-size: var(--big-font-size);
margin-bottom: var(--mb-5);
}
.home__title-color{
color: var(--first-color);
}
.home__social{
display: flex;
flex-direction: column;
}
.home__social-icon{
width: max-content;
margin-bottom: var(--mb-2);
font-size: 1.5rem;
color: var(--second-color);
}
.home__social-icon:hover{
color: var(--first-color);
}
.home__img{
position: absolute;
right: 0;
bottom: 0;
width: 295px;
}
/*BUTTONS*/
.button{
display: inline-block;
background-color: var(--first-color);
color: #fff;
padding: .75rem 2.5rem;
font-weight: var(--font-semi);
border-radius: .5rem;
}
.button:hover{
box-shadow: 0 10px 36px rgba(0,0,0,.15);
}
/* ===== ABOUT =====*/
.about__container{
row-gap: 2rem;
text-align: center;
}
.about__subtitle{
margin-bottom: var(--mb-2);
}
.about__img{
justify-self: center;
}
.about__img img{
width: 200px;
border-radius: .5rem;
}
/* ===== SKILLS =====*/
.skills__container{
row-gap: 2rem;
text-align: center;
}
.skills__subtitle{
margin-bottom: var(--mb-2);
}
.skills__text{
margin-bottom: var(--mb-4);
}
.skills__data{
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
font-weight: var(--font-semi);
padding: .5rem 1rem;
margin-bottom: var(--mb-4);
border-radius: .5rem;
box-shadow: 0 4px 25px rgba(14,36,49,.15);
}
.skills__icon{
font-size: 2rem;
margin-right: var(--mb-2);
color: var(--first-color);
}
.skills__names{
display: flex;
align-items: center;
}
.skills__bar{
position: absolute;
left: 0;
bottom: 0;
background-color: var(--first-color);
height: .25rem;
border-radius: .5rem;
z-index: var(--z-back);
}
.skills__html{
width: 95%;
}
.skills__css{
width: 85%;
}
.skills__js{
width: 65%;
}
.skills__ux{
width: 85%;
}
.skills__img{
border-radius: .5rem;
}
/* ===== WORK =====*/
.work__container{
row-gap: 2rem;
}
.work__img{
box-shadow: 0 4px 25px rgba(14,36,49,.15);
border-radius: .5rem;
overflow: hidden;
}
.work__img img{
transition: 1s;
cursor: pointer;
}
.work__img img:hover{
transform: scale(1.1);
}
/* ===== CONTACT =====*/
.contact__input{
width: 100%;
font-size: var(--normal-font-size);
font-weight: var(--font-semi);
padding: 1rem;
border-radius: .5rem;
border: 1.5px solid var(--second-color);
outline: none;
margin-bottom: var(--mb-4);
}
.contact__button{
display: block;
border: none;
outline: none;
font-size: var(--normal-font-size);
cursor: pointer;
margin-left: auto;
}
/* ===== FOOTER =====*/
.footer{
background-color: var(--second-color);
color: #fff;
text-align: center;
font-weight: var(--font-semi);
padding: 2rem 0;
}
.footer__title{
font-size: 2rem;
margin-bottom: var(--mb-4);
}
.footer__social{
margin-bottom: var(--mb-4);
}
.footer__icon{
font-size: 1.5rem;
color: #fff;
margin: 0 var(--mb-2)
}
/* ===== MEDIA QUERIES=====*/
@media screen and (min-width: 768px){
body{
margin: 0;
}
.section{
padding-top: 4rem;
padding-bottom: 3rem;
}
.section-title{
margin-bottom: var(--mb-6);
}
.section-title::after{
width: 80px;
top: 3rem;
}
.nav{
height: calc(var(--header-height) + 1rem);
}
.nav__list{
display: flex;
padding-top: 0;
}
.nav__item{
margin-left: var(--mb-6);
margin-bottom: 0;
}
.nav__toggle{
display: none;
}
.nav__link{
color: var(--second-color);
}
.home{
height: 100vh;
}
.home__data{
align-self: flex-end;
}
.home__social{
padding-top: 0;
padding-bottom: 2.5rem;
flex-direction: row;
align-self: flex-end;
}
.home__social-icon{
margin-bottom: 0;
margin-right: var(--mb-4);
}
.home__img{
width: 457px;
bottom: 15%;
}
.about__container, .skills__container{
grid-template-columns: repeat(2,1fr);
align-items: center;
text-align: initial;
}
.about__img img{
width: 300px;
}
.work__container{
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2,1fr);
column-gap: 2rem;
}
.contact__form{
width: 360px;
}
.contact__container{
justify-items: center;
}
}
@media screen and (min-width: 1024px){
.bd-grid{
margin-left: auto;
margin-right: auto;
}
.home__img{
right: 10%;
}
}
Third Step, you have to create a JS file with the name of js.js and paste the given codes in your js file. Remember, you’ve to create a file with .js extension.
JS Code:
/*===== MENU SHOW =====*/
const showMenu = (toggleId, navId) =>{
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId)
if(toggle && nav){
toggle.addEventListener('click', ()=>{
nav.classList.toggle('show')
})
}
}
showMenu('nav-toggle','nav-menu')
/*===== ACTIVE AND REMOVE MENU =====*/
const navLink = document.querySelectorAll('.nav__link');
function linkAction(){
/*Active link*/
navLink.forEach(n => n.classList.remove('active'));
this.classList.add('active');
/*Remove menu mobile*/
const navMenu = document.getElementById('nav-menu')
navMenu.classList.remove('show')
}
navLink.forEach(n => n.addEventListener('click', linkAction));
/*===== SCROLL REVEAL ANIMATION =====*/
const sr = ScrollReveal({
origin: 'top',
distance: '80px',
duration: 2000,
reset: true
});
/*SCROLL HOME*/
sr.reveal('.home__title',{});
sr.reveal('.button',{delay: 200});
sr.reveal('.home__img',{delay: 400});
sr.reveal('.home__social-icon',{ interval: 200});
/*SCROLL ABOUT*/
sr.reveal('.about__img',{});
sr.reveal('.about__subtitle',{delay: 400});
sr.reveal('.about__text',{delay: 400});
/*SCROLL SKILLS*/
sr.reveal('.skills__subtitle',{});
sr.reveal('.skills__text',{});
sr.reveal('.skills__data',{interval: 200});
sr.reveal('.skills__img',{delay: 600});
/*SCROLL WORK*/
sr.reveal('.work__img',{interval: 200});
/*SCROLL CONTACT*/
sr.reveal('.contact__input',{interval: 200});
now you’ve successfully created this Responsive Personal Portfolio Website using HTML, CSS, and Javascript. If your code does not work or facing any error/problem to comment down or contact us through the contact page. otherwise, you can download all source code with the images.
