Responsive Portfolio Website Design for Web Developer Using HTML, CSS, and JavaScript (Free Source Code)

Responsive portfolio website design is vital for any web developer who aims at developing a responsive queue, which will attract clients promptly. Unlike other designs, this one achieves a perfect balance between professional look and simplicity, making it ideal for showcasing your expertise and achievements.

In this article, I am going to give you the free source code for your own Responsive Portfolio Website Design of Web Developer Using HTML, CSS and JavaScript easily.

GitHub Source: Responsive Portfolio Website Design for Web Developer

Features

Animation: The graphic animations used in the portfolio make the website more attractive.
Compatibility: This website is conformable with all most popular browsers.
Clean Code: The code is clean, which enhances the process of making modifications, updating, or adding new functions.
Responsive Navigation Bar: Navigation bar is fixed, responsive and has smooth scrolling across the different type of screen size and does not distort the structure and position of its elements.
Interactive Hover Effects: Some components like contact-info and navigation links contain hover effects that give them a new look and make interactions more engaging.
Well-Styled Header: The header (.top-header) is aligned center with font weight and color option which gives professional look.
Flexible Layouts: It also justifies the distribution of various sections, be it the footer or the header, and aligns them in the cleanest direction and makes them responsive.
Thematic Footer Design: Footer uses top, middle, and bottom sections with Social Icons, Menus, and Copyright Notices having both light & dark classes.
Transition Effects: Smooth transitions, these increase the stylistic value during element transposition.
Customizable Elements: Elements like .nav-logo, .nav-menu, and .featured-text-info are convenient classes that allow changing the content and the appearance of a class quickly by applying new parameters.
Consistent Font Styles: Font sizes, weights, and colors are set intentionally to give a professional look to all the sections of the template.
Dynamic Color Themes: A considerable amount of time and effort is paid to choosing the colors of both the light and dark mode in order to maintain the sufficient contrast and to provide the comfortable user experience.

Responsive Portfolio Website Design is written according to best programming practices!

Technologies Used

HTML (Hypertext Markup Language)
CSS (Cascading Style Sheets)
JS (JavaScript)

Recommended for You

Video Tutorial

Watch on YouTube

Steps to Build Portfolio

Create Project Folder: The first step is to open a new folder on the system where one will place all the files for the project.
Replace Image Assets: Replace your own images with the default images.
Create index.html: Create the basic structure of this portfolio website in HTML and develop it in a file with the extension index.html.
Create style.css: Use CSS to style your website and create a file to be named style.css for layouts, colors, and animations.
Create script.js: For interactivity use JavaScript which should be created in a file named script.js that will provide capabilities for toggles and animations.
Copy & Paste the Code: Here is your source code implementation for your project below, now start your work without much trouble.

HTML

Here is the HTML code for your index.html file:

<!DOCTYPE html>
<html lang="en">
<!-- 
======================================================
This code is developed by Shokat Javed at JV Codes
Website: www.jvcodes.com
======================================================
-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Links -->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="images/fav.png" type="image/x-icon">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <title>Portfolio | JV Codes</title>
</head>
<body>
    <div class="container">
    <!-- -- Navigation Section -- -->
      <nav id="header">
        <div class="nav-logo">
            <p class="nav-name">Javed</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="mode">
            <div class="moon-sun" id="toggle-switch">
                <i class="fa fa-moon" id="moon"></i>
                <i class="fa fa-sun" id="sun"></i>
            </div>
        </div>
        <div class="nav-menu-btn">
            <i class="uil uil-bars" onclick="myMenuFunction()"></i>
        </div>
      </nav>
    <!-- -- Main -- -->
    <main class="wrapper">
       <!-- -- Hero Section -- -->
       <section class="featured-box" id="home">
        <div class="featured-text">
          <div class="featured-text-card">
              <span>Shokat Javed</span>
          </div>
          <div class="featured-name">
              <p>I'm <span class="typedText"></span></p>
          </div>
          <div class="featured-text-info">
              <p>Passionate frontend developer dedicated to crafting visually captivating and seamlessly 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="images/avatar.jpg" 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 Section -- -->
       <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 highly skilled in HTML, CSS, and JavaScript, along with a range of modern frameworks and libraries, enabling me to craft engaging and interactive web experiences. Additionally, I have hands-on experience with popular content management systems (CMS) such as WordPress, allowing me to seamlessly manage and optimize content.
                    </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>JavaScript</span>
                        <span>Bootstrap</span>
                        <span>Tailwind CSS</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>Node.js</span>
                        <span>Express.js</span>
                        <span>PHP</span>
                        <span>Laravel</span>
                        <span>Django</span>
                        <span>JAVA</span>
                        <span>Python</span>
                        <span>Spring Boot</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>
                        <span>Firebase</span>
                        <span>SQLite</span>
                    </div>
                </div>
            </div>
          </div>
       </section>
       <!-- -- Project Section -- -->
       <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>85+ Finished Projects</label>
          </div>
          <div class="project-box">
              <i class="uil uil-users-alt"></i>
              <h3>Clients</h3>
              <label>79+ Happy Clients</label>
          </div>
          <div class="project-box">
              <i class="uil uil-award"></i>
              <h3>Experience</h3>
              <label>9+ 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>Have an idea for a project? Let&rsquo;s turn it into reality! Contact me here, and let&rsquo;s get started.</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: info@jvcodes.com</p>
                  <p><i class="uil uil-phone"></i> Tel: +92 305 627 5237</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>Shokat Javed .</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; color: rgb(216, 86, 0);">Shokat Javed</a> - All rights reserved</p>
        </div>
    </footer>
    </div>

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

CSS

Here is the complete code for style.css file to style the portfolio:

/*
=====================================================
This code is developed by Shokat Javed at JV Codes
Website: www.jvcodes.com
=====================================================
*/

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

:root{
    --first-color: rgb(216, 86, 0);
}

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

/* -- Global scroll -- */
html{
    scroll-behavior: smooth;
}

/* -- Scroll bar design -- */
::-webkit-scrollbar{
    width: 10px;
    border-radius: 25px;
}
::-webkit-scrollbar-track{
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb{
    background: #747373;
    border-radius: 30px;
}
::-webkit-scrollbar-thumb:hover{
    background: #a1a1a1;
}

/* -- Global button -- */
.btn{
    font-weight: 500;
    padding: 12px 20px;
    background: #e7e7e7;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: .4s;
}
.btn>i{
    margin-left: 10px;
}
.btn:hover{
    background: var(--first-color);
    color: rgb(255, 255, 255);
}

/* -- Global icon -- */
i{
    font-size: 16px;
}

/* -- Base setting -- */
body{
    background: rgb(250, 250, 250);
}
.container{
    width: 100%;
    position: relative;
}

/* -- Navigation menu -- */
nav {
    position: fixed;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 90px;
    line-height: 90px;
    background: rgb(250, 250, 250);
    padding-inline: 9vw;
    transition: 0.3s;
    z-index: 100;
}

body.dark nav {
    background: #1a1919;
}

.nav-logo {
    position: relative;
}

body.dark .nav-name {
    font-size: 30px;
    font-weight: 600;
    color: rgb(30, 200, 220);
}

.nav-name {
    font-size: 30px;
    font-weight: 600;
    color: rgb(30, 159, 171);
}

.nav-logo span {
    position: absolute;
    top: -15px;
    right: -20px;
    font-size: 5em;
    color: rgb(68, 68, 68);
}

body.dark .nav-logo span {
    color: rgb(200, 200, 200);
}

.nav-menu,
.nav_menu_list {
    display: flex;
}

.nav-menu .nav_list {
    list-style: none;
    position: relative;
}

.nav-link {
    text-decoration: none;
    color: rgb(68, 68, 68);
    font-weight: 500;
    padding-inline: 15px;
    margin-inline: 20px;
}

body.dark .nav-link {
    color: rgb(255, 255, 255);
}

.nav-menu-btn {
    display: none;
}

.nav-menu-btn i {
    font-size: 28px;
    cursor: pointer;
}

.active-link {
    position: relative;
    color: var(--first-color);
    transition: 0.3s;
}

body.dark .active-link {
    color: var(--first-color);
}

.mode {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.moon-sun {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    background: #e7e7e7;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease;
}
.moon-sun:hover{
    background: var(--first-color);
}

.moon-sun :is(#moon, #sun) {
    position: absolute;
    color: #2e2e2e;
    font-size: 20px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.moon-sun:hover :is(#moon, #sun) {
    color: #ffffff;
}

#moon {
    opacity: 1;
    transform: scale(1);
    
}

#sun {
    opacity: 0;
    transform: scale(0.5);
}

body.dark #moon {
    opacity: 0;
    transform: scale(0.5);
}

body.dark #sun {
    opacity: 1;
    transform: scale(1);
}

body.dark {
    background-color: #1a1919;
    color: #ffffff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark .featured-text-info {
    font-size: 15px;
    margin-bottom: 30px;
    color: rgb(255, 255, 255);
}

body.dark .featured-name {
    font-size: 50px;
    font-weight: 600;
    color: rgb(255, 255, 255);
    margin-block: 20px;
}

body.dark .top-header {
    text-align: center;
    margin-bottom: 5em;
}

body.dark .top-header h1 {
    font-weight: 600;
    color: rgb(255, 255, 255);
    margin-bottom: 10px;
}

body.dark h3 {
    font-size: 20px;
    font-weight: 600;
    color: rgb(255, 255, 255);
    margin-bottom: 15px;
}

body.dark .about-info {
    background: rgba(0, 0, 0, 0.4);
}

body.dark .about-info p {
    color: #ffffff;
}

body.dark .project-box {
    background: rgba(0, 0, 0, 0.4);
}


/* -- Wrapper design -- */
.wrapper{
    padding-inline: 10vw;
}

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

/* -- Featured tex -- */
.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(--first-color);
    color: rgb(255, 255, 255);
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 5px;
}
.featured-name{
    font-size: 50px;
    font-weight: 600;
    color: rgb(68, 68, 68);
    margin-block: 20px;
}
.typedText{
    text-transform: capitalize;
    color: var(--first-color);
}
.featured-text-info{
    font-size: 15px;
    margin-bottom: 30px;
    color: rgb(68, 68, 68);
}
.featured-text-btn{
    display: flex;
    gap: 20px;
}
.featured-text-btn>.blue-btn{
    background: var(--first-color);
    color: #f1f1f1;
}
.featured-text-btn>.blue-btn:hover{
    background: var(--first-color);
}
.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);
}

/* -- Feature image -- */
.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: rgb(68, 68, 68);
   background: rgb(255, 255, 255);
   border-radius: 30px;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}
.scroll-btn i{
    font-size: 20px;
}

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

/* -- Resuseable styles -- */
.top-header{
    text-align: center;
    margin-bottom: 5em;
}
.top-header h1{
    font-weight: 600;
    color: rgb(68, 68, 68);
    margin-bottom: 10px;
}
.top-header span{
    color: #999;
}
h3{
    font-size: 20px;
    font-weight: 600;
    color: rgb(68, 68, 68);
    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: rgb(255, 255, 255);
    box-shadow: 1px 8px 10px 2px rgba(0, 0, 0, 0.1);
    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);
    background: #f1f1f1;
    border-radius: 30px;
}
.about-btn button:hover{
    background: var(--first-color);
}

/* -- About / Skill 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: rgb(255, 255, 255);
    padding: 2px 10px;
    border-radius: 5px;
}

/* -- Project 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: rgb(255, 255, 255);
    border-radius: 20px;
    box-shadow: 1px 8px 10px 2px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.project-box>i{
    font-size: 50px;
    color: var(--first-color);
    margin-bottom: 25px;
}
.project-box label{
    font-size: 15px;
    color: #777;
}
.project-box::after, .contact-info::after{
    content: "";
    position: absolute;
    bottom: -100%;
    background: var(--first-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: rgb(255, 255, 255);
    z-index: 2;
}

/* -- Contct 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(--first-color);
    border-radius: 10px;
    box-shadow: 1px 8px 10px 2px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}
.contact-info>h2{
    color: rgb(255, 255, 255);
    margin-bottom: 20px;
}
.contact-info>p{
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgb(255, 255, 255);
    margin-block: 5px;
}
.contact-info p>i{
    font-size: 18px;
}
.contact-info::after{
    background: rgb(255, 255, 255);
}
body.dark .contact-info::after {
    background: rgb(14, 13, 13);
}
.contact-info:hover.contact-info h2,
.contact-info:hover.contact-info p,
.contact-info:hover.contact-info i{
    color: #777;
    z-index: 2;
}

body.dark .contact-info:hover.contact-info h2,
body.dark .contact-info:hover.contact-info p,
body.dark .contact-info:hover.contact-info i {
    color: #ffffff;
}

/* -- 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(--first-color);
    color: rgb(255, 255, 255);
}
.form-button>.btn:hover{
    background: var(--first-color);
}
.form-button i{
    font-size: 18px;
    rotate: -45deg;
}

/* -- Footer Section -- */
footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    row-gap: 30px;
    background: #F8F8F8; /* Default background */
    padding-block: 40px 60px;
}

body.dark footer {
    background: #1a1919; /* Dark background for dark mode */
    color: #ffffff; /* Light text color for better contrast */
}

.top-footer p {
    font-size: 25px;
    font-weight: 600;
    color: rgb(68, 68, 68); /* Default text color */
}

body.dark .top-footer p {
    color: #ffffff; /* Adjust text color for dark mode */
}

.middle-footer .footer-menu {
    display: flex;
}

.footer_menu_list {
    list-style: none;
}

.footer_menu_list a {
    text-decoration: none;
    color: rgb(68, 68, 68); /* Default link color */
    font-weight: 500;
    margin-inline: 20px;
}

body.dark .footer_menu_list a {
    color: #cccccc; /* Adjust link color for dark mode */
}

.footer-social-icons {
    display: flex;
    gap: 30px;
}

.bottom-footer {
    font-size: 14px;
    margin-top: 10px;
    color: rgb(68, 68, 68); /* Default text color */
}

body.dark .bottom-footer {
    color: #bbbbbb; /* Adjust text color for dark mode */
}

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

/* -- 720px - Responsive settings -- */
@media only screen and (max-width: 720px) {
    .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: 220px;
        width: 100%;
        margin-top: 100px;
    }
    .image, .image img{
        width: 220px;
        height: 220px;
    }
    .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%;
    }

    .scroll-btn{
        width: 150px;
        height: 40px;
        gap: 4px;
     }
}

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

JavaScript

Here is the complete code for script.js file:

document.addEventListener('DOMContentLoaded', () => {
  const toggleSwitch = document.getElementById('toggle-switch');
  const body = document.body;
  toggleSwitch.addEventListener('click', () => {
      body.classList.toggle('dark');
  });
});

/* -- Navigation Function -- */
function myMenuFunction(){
  var menuBtn = document.getElementById("myNavMenu");
  if(menuBtn.className === "nav-menu"){
    menuBtn.className += " responsive";
  } else {
    menuBtn.className = "nav-menu";
  }
}

/* -- Add shadow to the navigation bar when 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.8)";
    navHeader.style.height = "70px";
    navHeader.style.lineHeight = "70px";
  } else {
    navHeader.style.boxShadow = "none";
    navHeader.style.height = "90px";
    navHeader.style.lineHeight = "90px";
  }
}

/* -- Typing revealing effect -- */
var typingEffect = new Typed(".typedText",{
  strings : ["Web Designer","YouTuber","Developer","Coder","AI Expert","Marketer"],
  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)

Download Source Code

All this source code is given here without any copyright issue and can be downloaded free of cost by clicking on the link given below. You can use it as it is or make any changes that you want, to present your portfolio website that defines your taste and skill.

Download Source Code

Conclusion

This Responsive Portfolio Website Design for Web Developer Using HTML, CSS, and JavaScript will help you to design a beautiful and stylish portfolio that convey your works appropriately.

Kindly give credit to JV Source Codes if you are to use this code by linking to our site. Please do not forget to subscribe to the channel for more interesting videos. If you encounter any problems, feel free to use the comment section and I will be glad to assist.

Responsive Portfolio Website Design for Web Developer Using HTML, CSS, and JavaScript (Free Source Code)

Features

Technologies Used

Recommended for You

Video Tutorial

Steps to Build Portfolio

HTML

CSS

JavaScript

Download Source Code

Conclusion

Simple Responsive Navigation Menu Bar in HTML and CSS

Elastic Animation Navigation Menu Bar in HTML and CSS

Hero Section with Content Left Using HTML and CSS

Responsive Image Gallery in HTML and CSS

Image Comparison Slider in HTML, CSS and JavaScript

JV Responsive Card Slider in HTML, CSS and JavaScript

Leave a Reply Cancel reply

Contact us

Lets Get in Touch

Headquarters

Free Source Codes

Company

Features

Technologies Used

Recommended for You

Video Tutorial

Steps to Build Portfolio

HTML

CSS

JavaScript

Download Source Code

Conclusion

Similar Posts

Leave a Reply Cancel reply

Contact us

Lets Get in Touch

Headquarters

Free Source Codes

Company