Responsive portfolio website using HTML, CSS and JavaScript

Nowadays, having a portfolio website is an essential tool for showcasing your skills, accomplishments, and personal brand. Whether you’re a designer, developer, writer, or an artist, a well-crafted portfolio website can set you apart from the competition and make a lasting impression on potential clients or employers.

In this step-by-step guide, we’ll take you through the process of creating your own portfolio website using HTML, CSS, and JavaScript. No prior coding experience required—just a willingness to learn and a touch of creativity.

You can customize this website and take this portfolio to the next level with your creative skills.

Main features of this Portfolio Website:

Hero Section:
- A brief introduction: A short, engaging bio that tells visitors who you are and what you do.
- A high-quality, professional profile picture.
About Section:
- A more detailed bio: Provide information about your background, education, work experience, and any relevant personal details that convey your personality. And a download CV link.
- Showcase your skills and expertise.
Projects Section:
- Projects completed.
- Happy clients that you have worked with.
- Experience that you have in the filed.
Contact Section:
- A clear and user-friendly contact form for visitors to get in touch with you.
- List of options that can be used to contact you.
Other features:
- Scroll animation.
- Typing effect.

To make this website, we are going to start by.

Creating a HTML File and add the following codes:

HTML Codes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- --------- UNICONS ---------- -->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">

    <!-- --------- CSS ---------- -->
    <link rel="stylesheet" href="assets/css/style.css">

    <!-- --------- FAVICON ---------- -->
    <link rel="shortcut icon" href="assets/images/favicon.png" type="image/x-icon">

    <title>Portfolio | Ludiflex</title>
</head>
<body>
   <div class="container">
    <!-- --------------- HEADER --------------- -->
      <nav id="header">
        <div class="nav-logo">
            <p class="nav-name">Doe</p>
            <span>.</span>
        </div>
        <div class="nav-menu" id="myNavMenu">
            <ul class="nav_menu_list">
                <li class="nav_list">
                    <a href="#home" class="nav-link active-link">Home</a>
                    <div class="circle"></div>
                </li>
                <li class="nav_list">
                    <a href="#about" class="nav-link">About</a>
                    <div class="circle"></div>
                </li>
                <li class="nav_list">
                    <a href="#projects" class="nav-link">Projects</a>
                    <div class="circle"></div>
                </li>
                <li class="nav_list">
                    <a href="#contact" class="nav-link">Contact</a>
                    <div class="circle"></div>
                </li>
            </ul>
        </div>
        <div class="nav-button">
            <button class="btn">Download CV <i class="uil uil-file-alt"></i></button>
        </div>
        <div class="nav-menu-btn">
            <i class="uil uil-bars" onclick="myMenuFunction()"></i>
        </div>
      </nav>


    <!-- -------------- MAIN ---------------- -->
    <main class="wrapper">
       <!-- -------------- FEATURED BOX ---------------- -->
       <section class="featured-box" id="home">
          <div class="featured-text">
            <div class="featured-text-card">
                <span>John Doe</span>
            </div>
            <div class="featured-name">
                <p>I'm <span class="typedText"></span></p>
            </div>
            <div class="featured-text-info">
                <p>Experienced frontend developer with a passion for creating visually stunning
                   and user-friendly websites.
                </p>
            </div>
            <div class="featured-text-btn">
                <button class="btn blue-btn">Hire Me</button>
                <button class="btn">Download CV <i class="uil uil-file-alt"></i></button>
            </div>
            <div class="social_icons">
                <div class="icon"><i class="uil uil-instagram"></i></div>
                <div class="icon"><i class="uil uil-linkedin-alt"></i></div>
                <div class="icon"><i class="uil uil-dribbble"></i></div>
                <div class="icon"><i class="uil uil-github-alt"></i></div>
            </div>
          </div>
          <div class="featured-image">
            <div class="image">
                <img src="assets/images/avatar.png" alt="avatar">
            </div>
          </div>
          <div class="scroll-icon-box">
            <a href="#about" class="scroll-btn">
                <i class="uil uil-mouse-alt"></i>
                <p>Scroll Down</p>
            </a>
          </div>

       </section>
       <!-- -------------- ABOUT BOX ---------------- -->
       <section class="section" id="about">
          <div class="top-header">
            <h1>About Me</h1>
          </div>
          <div class="row">
            <div class="col">
                <div class="about-info">
                    <h3>My introduction</h3>
                    <p>I am well-versed in HTML, CSS and JavaScript , and other cutting edge
                       frameworks and libraries,which allows me to implement interactive features.
                       Additionally, I have experirence working with content management systems (CMS) like
                       WordPress.
                    </p>
                    <div class="about-btn">
                        <button class="btn">Download CV <i class="uil uil-import"></i></button>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="skills-box">
                    <div class="skills-header">
                        <h3>Frontend</h3>
                    </div>
                    <div class="skills-list">
                        <span>HTML</span>
                        <span>CSS</span>
                        <span>Bootstrap</span>
                        <span>JavaScript</span>
                        <span>Vue</span>
                        <span>React</span>
                        <span>Angular</span>
                    </div>
                </div>
                <div class="skills-box">
                    <div class="skills-header">
                        <h3>Backend</h3>
                    </div>
                    <div class="skills-list">
                        <span>PHP</span>
                        <span>JAVA</span>
                        <span>Python</span>
                        <span>C++</span>
                    </div>
                </div>
                <div class="skills-box">
                    <div class="skills-header">
                        <h3>Database</h3>
                    </div>
                    <div class="skills-list">
                        <span>MySQL</span>
                        <span>PostgreSQL</span>
                        <span>MongoDB</span>
                    </div>
                </div>
            </div>
          </div>
       </section>

       <!-- -------------- PROJECT BOX ---------------- -->

       <section class="section" id="projects">
          <div class="top-header">
              <h1>Projects</h1>
          </div>
          <div class="project-container">
            <div class="project-box">
                <i class="uil uil-briefcase-alt"></i>
                <h3>Completed</h3>
                <label>15+ Finished Projects</label>
            </div>
            <div class="project-box">
                <i class="uil uil-users-alt"></i>
                <h3>Clients</h3>
                <label>25+ Happy Clients</label>
            </div>
            <div class="project-box">
                <i class="uil uil-award"></i>
                <h3>Experience</h3>
                <label>7+ Years in the field</label>
            </div>
          </div>
       </section>

       <!-- -------------- CONTACT BOX ---------------- -->

       <section class="section" id="contact">
          <div class="top-header">
            <h1>Get in touch</h1>
            <span>Do you have a project in your mind, contact me here</span>
          </div>
          <div class="row">
             <div class="col">
                <div class="contact-info">
                    <h2>Find Me <i class="uil uil-corner-right-down"></i></h2>
                    <p><i class="uil uil-envelope"></i> Email: john@doe.com</p>
                    <p><i class="uil uil-phone"></i> Tel: +250 708 770 000</p>
                </div>
             </div>
             <div class="col">
                <div class="form-control">
                    <div class="form-inputs">
                        <input type="text" class="input-field" placeholder="Name">
                        <input type="text" class="input-field" placeholder="Email">
                    </div>
                    <div class="text-area">
                        <textarea placeholder="Message"></textarea>
                    </div>
                    <div class="form-button">
                        <button class="btn">Send <i class="uil uil-message"></i></button>
                    </div>
                </div>
             </div>
          </div>
       </section>

    </main>


    <!-- --------------- FOOTER --------------- -->
    <footer>
        <div class="top-footer">
            <p>John Doe .</p>
        </div>
        <div class="middle-footer">
            <ul class="footer-menu">
                <li class="footer_menu_list">
                    <a href="#home">Home</a>
                </li>
                <li class="footer_menu_list">
                    <a href="#about">About</a>
                </li>
                <li class="footer_menu_list">
                    <a href="#projects">Projects</a>
                </li>
                <li class="footer_menu_list">
                    <a href="#contact">Contact</a>
                </li>
            </ul>
        </div>
        <div class="footer-social-icons">
            <div class="icon"><i class="uil uil-instagram"></i></div>
            <div class="icon"><i class="uil uil-linkedin-alt"></i></div>
            <div class="icon"><i class="uil uil-dribbble"></i></div>
            <div class="icon"><i class="uil uil-github-alt"></i></div>
        </div>
        <div class="bottom-footer">
            <p>Copyright &copy; <a href="#home" style="text-decoration: none;">John Doe</a> - All rights reserved</p>
        </div>
    </footer>

    </div>




    <!-- ----- TYPING JS Link ----- -->
    <script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>

   	<!-- ----- SCROLL REVEAL JS Link----- -->
    <script src="https://unpkg.com/scrollreveal"></script>

	<!-- ----- MAIN JS ----- -->
    <script src="assets/js/main.js"></script>
</body>
</html>

CSS Codes

/* ----- POPPINS FONT Link ----- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ----- VARIABLES ----- */
:root{
    --body-color: rgb(250, 250, 250);
	--color-white: rgb(255, 255, 255);

	--text-color-second: rgb(68, 68, 68);
	--text-color-third: rgb(30, 159, 171);

	--first-color: rgb(110, 87, 224);
	--first-color-hover: rgb(40, 91, 212);

	--second-color: rgb(0, 201, 255);
	--third-color: rgb(192, 166, 49);
    --first-shadow-color: rgba(0, 0, 0, 0.1);

}

/* ----- BASE ----- */
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}

/* ----- SMOOTH SCROLL ----- */
html{
	scroll-behavior: smooth;
}

/* ----- CHANGE THE SCROLL BAR DESIGN ----- */
::-webkit-scrollbar{
	width: 10px;
	border-radius: 25px;
}
::-webkit-scrollbar-track{
	background: #f1f1f1;
}
::-webkit-scrollbar-thumb{
	background: #ccc;
	border-radius: 30px;
}
::-webkit-scrollbar-thumb:hover{
	background: #bbb;
}


/* ---##-- REUSABLE CSS --##--- */

/* ----- GLOBAL BUTTON DESIGN ----- */
.btn{
	font-weight: 500;
	padding: 12px 20px;
	background: #efefef;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: .4s;
}
.btn>i{
	margin-left: 10px;
}
.btn:hover{
	background: var(--second-color);
	color: var(--color-white);
}

/* ----- GLOBAL ICONS DESIGN ----- */
i{
	font-size: 16px;
}

/* ------- BASE -------- */
body{
	background: var(--body-color);
}
.container{
	width: 100%;
	position: relative;
}

/* ----- NAVIGATION BAR ----- */
nav{
	position: fixed;
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: 90px;
	line-height: 90px;
	background: var(--body-color);
	padding-inline: 9vw;
	transition: .3s;
	z-index: 100;
}
.nav-logo{
   position: relative;
}
.nav-name{
	font-size: 30px;
	font-weight: 600;
	color: var(--text-color-third);
}
.nav-logo span{
	position: absolute;
	top: -15px;
	right: -20px;
	font-size: 5em;
	color: var(--text-color-second);
}
.nav-menu, .nav_menu_list{
	display: flex;
}
.nav-menu .nav_list{
	list-style: none;
	position: relative;
}
.nav-link{
	text-decoration: none;
	color: var(--text-color-second);
	font-weight: 500;
	padding-inline: 15px;
	margin-inline: 20px;
}
.nav-menu-btn{
	display: none;
}
.nav-menu-btn i{
	font-size: 28px;
	cursor: pointer;
}
.active-link{
	position: relative;
	color: var(--first-color);
	transition: .3;
}
.active-link::after{
	content: '';
	position: absolute;
	left: 50%;
	bottom: -15px;
	transform: translate(-50%, -50%);
	width: 5px;
	height: 5px;
	background: var(--first-color);
	border-radius: 50%;
}


/* ----- WRAPPER DESIGN ----- */
.wrapper{
	padding-inline: 10vw;
}

/* ----- FEATURED BOX ----- */
.featured-box{
	position: relative;
	display: flex;
	height: 100vh;
	min-height: 700px;
}

/* ----- FEATURED TEXT BOX ----- */
.featured-text{
	position: relative;
	display: flex;
	justify-content: center;
	align-content: center;
	min-height: 80vh;
	flex-direction: column;
	width: 50%;
	padding-left: 20px;
}
.featured-text-card span{
	background: var(--third-color);
	color: var(--color-white);
	padding: 3px 8px;
	font-size: 12px;
	border-radius: 5px;
}
.featured-name{
	font-size: 50px;
	font-weight: 600;
	color: var(--text-color-second);
	margin-block: 20px;
}
.typedText{
	text-transform: capitalize;
	color: var(--text-color-third);
}
.featured-text-info{
	font-size: 15px;
	margin-bottom: 30px;
	color: var(--text-color-second);
}
.featured-text-btn{
	display: flex;
	gap: 20px;
}
.featured-text-btn>.blue-btn{
    background: var(--first-color);
	color: var(--color-white);
}
.featured-text-btn>.blue-btn:hover{
	background: var(--first-color-hover);
}
.social_icons{
	display: flex;
	margin-top: 5em;
	gap: 30px;
}
.icon{
    display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}
.icon:hover{
	color: var(--first-color);
}

/* ----- FEATURED IMAGE BOX ----- */
.featured-image{
	display: flex;
	justify-content: right;
    align-content: center;
	min-height: 80vh;
	width: 50%;
}
.image{
	margin: auto 0;
	width: 380px;
	height: 380px;
	border-radius: 55% 45% 55% 45%;
	overflow: hidden;
	animation: imgFloat 7s ease-in-out infinite;
}
.image img{
	width: 380px;
	height: 380px;
	object-fit: cover;
}
@keyframes imgFloat {
	50%{
		transform: translateY(10px);
		border-radius: 45% 55% 45% 55%;
	}
}
.scroll-btn{
   position: absolute;
   bottom: 0;
   left: 50%;
   translate: -50%;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 150px;
   height: 50px;
   gap: 5px;
   text-decoration: none;
   color: var(--text-color-second);
   background: var(--color-white);
   border-radius: 30px;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}
.scroll-btn i{
	font-size: 20px;
}

/* ----- MAIN BOX ----- */
.section{
	padding-block: 5em;
}
.row{
	display: flex;
	justify-content: space-between;
	width: 100%;
	gap: 50px;
}
.col{
	display: flex;
	width: 50%;
}

/* -- ## --- RESUABLE CSS -- ## -- */
.top-header{
	text-align: center;
	margin-bottom: 5em;
}
.top-header h1{
	font-weight: 600;
	color: var(--text-color-second);
	margin-bottom: 10px;
}
.top-header span{
	color: #999;
}
h3{
	font-size: 20px;
	font-weight: 600;
	color: var(--text-color-second);
	margin-bottom: 15px;
}

/* ----- ABOUT INFO ----- */
.about-info{
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
    padding-block: 30px 70px;
	padding-inline: 20px;
	width: 100%;
	background: var(--color-white);
	box-shadow: 1px 8px 10px 2px var(--first-shadow-color);
	border-radius: 20px;
}
.about-info p{
	text-align: center;
	font-size: 15px;
	color: #777;
}
.about-btn button{
	position: absolute;
	right: 20px;
	bottom: 20px;
	background: var(--first-color);
	color: var(--color-white);
	border-radius: 30px;
}
.about-btn button:hover{
	background: var(--first-color-hover);
}

/* ----- ABOUT / SKILLS BOX ----- */
.skills-box{
	margin: 10px;
}
.skills-header{
	margin-bottom: 30px;
}
.skills-list{
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.skills-list span{
	font-size: 14px;
	background: var(--first-color);
	color: var(--color-white);
	padding: 2px 10px;
	border-radius: 5px;
}

/* ----- PROJECTS BOX ----- */
.project-container{
	display: flex;
	width: 100%;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.project-box{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 30%;
	height: 250px;
	background: var(--color-white);
	border-radius: 20px;
	box-shadow: 1px 8px 10px 2px var(--first-shadow-color);
    overflow: hidden;
}
.project-box>i{
	font-size: 50px;
	color: #00B5E7;
	margin-bottom: 25px;
}
.project-box label{
	font-size: 15px;
	color: #777;
}
.project-box::after, .contact-info::after{
	content: "";
	position: absolute;
	bottom: -100%;
    background: var(--second-color);
	width: 100%;
	height: 100%;
	transition: .4s;
	z-index: 1;
}
.project-box:hover.project-box::after,
.contact-info:hover.contact-info::after{
	bottom: 0;
}
.project-box:hover.project-box i,
.project-box:hover.project-box>h3,
.project-box:hover.project-box>label{
	color: var(--color-white);
	z-index: 2;
}

/* ----- CONTACT BOX ----- */
.contact-info{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px 30px;
	width: 100%;
	height: 315px;
	background: var(--second-color);
	border-radius: 10px;
	box-shadow: 1px 8px 10px 2px var(--first-shadow-color);
    overflow: hidden;
}
.contact-info>h2{
    color: var(--color-white);
	margin-bottom: 20px;
}
.contact-info>p{
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--color-white);
	margin-block: 5px;
}
.contact-info p>i{
	font-size: 18px;
}
.contact-info::after{
	background: var(--color-white);
}
.contact-info:hover.contact-info h2,
.contact-info:hover.contact-info p,
.contact-info:hover.contact-info i{
	color: #777;
	z-index: 2;
}

/* ----- CONTACT FORM ----- */
.form-control{
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}
.form-inputs{
	display: flex;
	gap: 10px;
	width: 100%;
}
.input-field{
	width: 50%;
	height: 55px;
	background: transparent;
	border: 2px solid #AAA;
	border-radius: 10px;
	padding-inline: 20px;
	outline: none;
}
textarea{
	width: 100%;
	height: 250px;
	background: transparent;
	border: 2px solid #AAA;
	border-radius: 10px;
	padding: 15px 20px;
	outline: none;
	resize: none;
}
.form-button>.btn{
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--second-color);
	color: var(--color-white);
}
.form-button>.btn:hover{
	background: #00B5E7;
}
.form-button i{
	font-size: 18px;
	rotate: -45deg;
}

/* ----- FOOTER BOX ----- */
footer{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	row-gap: 30px;
	background: #F8F8F8;
	padding-block: 40px 60px;
}
.top-footer p{
    font-size: 25px;
	font-weight: 600;
}
.middle-footer .footer-menu{
	display: flex;
}
.footer_menu_list{
	list-style: none;
}
.footer_menu_list a{
	text-decoration: none;
	color: var(--text-color-second);
	font-weight: 500;
	margin-inline: 20px;
}
.footer-social-icons{
    display: flex;
	gap: 30px;   
}
.bottom-footer{
	font-size: 14px;
	margin-top: 10px;
}


/* ----- MEDIA QUERY == 1024px / RESPONSIVE ----- */
@media only screen and (max-width: 1024px){
	.featured-text{
		padding: 0;
	}
	.image, .image img{
		width: 320px;
		height: 320px;
	}
}

/* ----- MEDIA QUERY == 900px / RESPONSIVE ----- */
@media only screen and (max-width: 900px) {
	.nav-button{
		display: none;
	}
	.nav-menu.responsive{
        left: 0;
	}
	.nav-menu{
		position: fixed;
		top: 80px;
		left: -100%;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(20px);
		width: 100%;
		min-height: 450px;
		height: 90vh;
		transition: .3s;
	}
	.nav_menu_list{
		flex-direction: column;
	}
	.nav-menu-btn{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.featured-box{
		flex-direction: column;
		justify-content: center;
		height: 100vh;
	}
	.featured-text{
		width: 100%;
		order: 2;
		justify-content: center;
		align-content: flex-start;
		min-height: 60vh;
	}
	.social_icons{
		margin-top: 2em;
	}
	.featured-image{
		order: 1;
		justify-content: center;
		min-height: 150px;
		width: 100%;
		margin-top: 65px;
	}
	.image, .image img{
		width: 150px;
		height: 150px;
	}
	.row{
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 50px;
	}
	.col{
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.about-info, .contact-info{
		width: 100%;
	}
	.project-container{
		justify-content: center;
	}
	.project-box{
		width: 80%;
	}

}

/* ----- MEDIA QUERY == 540px / RESPONSIVE ----- */

@media only screen and (max-width: 540px){
	.featured-name{
		font-size: 40px;
	}
	.project-box{
		width: 100%;
	}
	.form-inputs{
		flex-direction: column;
	}
	.input-field{
		width: 100%;
	}
}

JavaScript Codes

/* ----- NAVIGATION BAR FUNCTION ----- */
    function myMenuFunction(){
      var menuBtn = document.getElementById("myNavMenu");

      if(menuBtn.className === "nav-menu"){
        menuBtn.className += " responsive";
      } else {
        menuBtn.className = "nav-menu";
      }
    }

/* ----- ADD SHADOW ON NAVIGATION BAR WHILE SCROLLING ----- */
    window.onscroll = function() {headerShadow()};

    function headerShadow() {
      const navHeader =document.getElementById("header");

      if (document.body.scrollTop > 50 || document.documentElement.scrollTop >  50) {

        navHeader.style.boxShadow = "0 1px 6px rgba(0, 0, 0, 0.1)";
        navHeader.style.height = "70px";
        navHeader.style.lineHeight = "70px";

      } else {

        navHeader.style.boxShadow = "none";
        navHeader.style.height = "90px";
        navHeader.style.lineHeight = "90px";

      }
    }


/* ----- TYPING EFFECT ----- */
   var typingEffect = new Typed(".typedText",{
      strings : ["Designer","Youtuber","Developer"],
      loop : true,
      typeSpeed : 100, 
      backSpeed : 80,
      backDelay : 2000
   })


/* ----- ## -- SCROLL REVEAL ANIMATION -- ## ----- */
   const sr = ScrollReveal({
          origin: 'top',
          distance: '80px',
          duration: 2000,
          reset: true     
   })

  /* -- HOME -- */
  sr.reveal('.featured-text-card',{})
  sr.reveal('.featured-name',{delay: 100})
  sr.reveal('.featured-text-info',{delay: 200})
  sr.reveal('.featured-text-btn',{delay: 200})
  sr.reveal('.social_icons',{delay: 200})
  sr.reveal('.featured-image',{delay: 300})
  

  /* -- PROJECT BOX -- */
  sr.reveal('.project-box',{interval: 200})

  /* -- HEADINGS -- */
  sr.reveal('.top-header',{})

/* ----- ## -- SCROLL REVEAL LEFT_RIGHT ANIMATION -- ## ----- */

  /* -- ABOUT INFO & CONTACT INFO -- */
  const srLeft = ScrollReveal({
    origin: 'left',
    distance: '80px',
    duration: 2000,
    reset: true
  })
  
  srLeft.reveal('.about-info',{delay: 100})
  srLeft.reveal('.contact-info',{delay: 100})

  /* -- ABOUT SKILLS & FORM BOX -- */
  const srRight = ScrollReveal({
    origin: 'right',
    distance: '80px',
    duration: 2000,
    reset: true
  })
  
  srRight.reveal('.skills-box',{delay: 100})
  srRight.reveal('.form-control',{delay: 100})
  


/* ----- CHANGE ACTIVE LINK ----- */
  
  const sections = document.querySelectorAll('section[id]')

  function scrollActive() {
    const scrollY = window.scrollY;

    sections.forEach(current =>{
      const sectionHeight = current.offsetHeight,
          sectionTop = current.offsetTop - 50,
        sectionId = current.getAttribute('id')

      if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) { 

          document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.add('active-link')

      }  else {

        document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.remove('active-link')

      }
    })
  }

  window.addEventListener('scroll', scrollActive)

Creating a portfolio website with HTML, CSS, and JavaScript is not only a great way to showcase your talents but also an opportunity to enhance your web development skills. This comprehensive guide has taken you through the entire process.

Download Assets Files From the link down below:

Thank you for your attention!

Responsive portfolio website using HTML, CSS and JavaScript

Main features of this Portfolio Website:

You might also like

HTML Codes

CSS Codes

JavaScript Codes

Login and Register App using React and OneEntry Headless CMS

Modern Login And Registration form using HTML, CSS and JS

Animated Login and Register Form with Blur Effect

Leave A Reply Cancel Reply

Login and Register App using React and OneEntry Headless CMS

Modern Login And Registration form using HTML, CSS and JS

Animated Login and Register Form with Blur Effect

Animated Login and Sign Up form using HTML CSS and JavaScript

Responsive Personal Portfolio Website using HTML CSS and JavaScript

Responsive portfolio website using HTML, CSS and JavaScript

Main features of this Portfolio Website:

You might also like

HTML Codes

CSS Codes

JavaScript Codes

Related Posts

Leave A Reply Cancel Reply