How to create Responsive Portfolio using HTML CSS & JavaScript

A portfolio website is a perfect way to showcase your work, skills, and projects professionally. In this project, we’ll build a fully responsive portfolio using HTML, CSS, and JavaScript. It will include key sections like About, Projects, Skills, and Contact, ensuring a smooth and engaging user experience.

We’ll use HTML for structure, CSS to style and make it mobile-friendly, and JavaScript to add interactive features like smooth scrolling, animations, and a dynamic theme switcher. Whether you’re just starting or looking to upgrade your portfolio, this project is a great way to practice and build an impressive personal website. Let’s bring your work to life!

Download Project file at end 🔥

HTML :

This HTML code creates a responsive resume/portfolio website. It has a sidebar navigation, and sections for About, Resume, Portfolio, Blog, and Contact. Each section has its own content like text, images, skills, and forms. It uses CSS for styling and includes JavaScript for interactivity. Ionicons are used for icons.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Resume / Portfolio Template</title>

  <!-- Custom CSS Link -->
  <link rel="stylesheet" href="./asstets/style.css">

  <!-- Google font link -->
  <link
    href="https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic"
    rel="stylesheet" />
</head>

<body>

  <!-- Main Container -->
  <div class="container">

    <!-- nav for mobile -->
    <nav class="nav-mobile">
      <div class="navbar-brand">
        <img src="./asstets/images/logo.jpg" alt="" class="brand-img">
        <h1 class="brand-name">John Doe</h1>
      </div>

      <ion-icon name="menu-outline" class="menu-toggler"></ion-icon>
    </nav>


    <!-- sidebar structure -->
    <div class="side-bar">

      <img src="./asstets/images/logo.jpg" alt="" class="brand-img">
      <h1 class="brand-name">John <br>Doe</h1>

      <!-- navbar -->

      <nav>
        <ul class="nav">
          <li><a href="#" class="active">About</a></li>
          <li><a href="#">Resume</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>

      <!-- social link -->

      <div class="social-btn-groups">
        <a href="#" class="btn">
          <ion-icon name="logo-twitter"></ion-icon>
        </a>
        <a href="#" class="btn">
          <ion-icon name="logo-linkedin"></ion-icon>
        </a>
        <a href="#" class="btn">
          <ion-icon name="logo-facebook"></ion-icon>
        </a>
      </div>

      <!-- sidebar footer -->
      <footer class="side-bar-footer">
        <p class="copyright">&copy; 2025 All rights<br>reserved.</p>
      </footer>

    </div>

    <!-- about section structure -->
    <section class="about page active">

      <!-- about section hero structure -->
      <div class="hero">
        <div class="hero-img-bx">
          <img src="./asstets/images/hero.jpg" alt="">
        </div>

        <div class="hero-content">
          <div class="hero-content-wrapper">
            <p class="title">Web Developer</p>
            <h1 class="name">John Doe</h1>
            <div class="desc">
              <p>Praesent sed aliquam arcu, non accumsan neque. In odio ante, vulputate ac magna vel,
                pharetra
                lobortis quam. Duis enim tortor, egestas et felis id, lobortis malesuada magna. Nunc sit amet sagittis
                nisi,
                eu semper nisl. Cras ut dictum nisl. Donec tincidunt eget orci.</p>
              <p>Aliquam mollis, leo nec commodo facilisis, turpis lorem dapibus erat, sed consectetur nunc nulla ac
                elit.
                Suspendisse dictum id dui mollis auctor. Etiam id sapien neque. Cras nec rhoncus sem. Mauris metus
                ligula,
                varius vel iaculis at, pulvinar tincidunt magna.</p>
            </div>

            <a href="#" class="btn-primary">Download CV</a>
          </div>
        </div>
      </div>


      <!-- about section service structure -->
      <div class="about-inner">
        <div class="service">

          <h2>What I Do</h2>

          <div class="grid-item">

            <div class="item">
              <div class="item-icon">
                <ion-icon name="storefront-outline"></ion-icon>
              </div>
              <div class="item-wrapper">
                <h3>Ecommerce</h3>
                <p>Pellentesque pellentesque, ipsum sit amet auctor accumsan, odio tortor bibendum massa, sit amet
                  ultricies
                  ex lectus scelerisque nibh. Ut non sodales odio.</p>
              </div>
            </div>

            <div class="item">
              <div class="item-icon">
                <ion-icon name="reader-outline"></ion-icon>
              </div>
              <div class="item-wrapper">
                <h3>Copywriter</h3>
                <p>Pellentesque pellentesque, ipsum sit amet auctor accumsan, odio tortor bibendum massa, sit amet
                  ultricies
                  ex lectus scelerisque nibh. Ut non sodales odio.</p>
              </div>
            </div>

            <div class="item">
              <div class="item-icon">
                <ion-icon name="desktop-outline"></ion-icon>
              </div>
              <div class="item-wrapper">
                <h3>Web Design</h3>
                <p>Pellentesque pellentesque, ipsum sit amet auctor accumsan, odio tortor bibendum massa, sit amet
                  ultricies
                  ex lectus scelerisque nibh. Ut non sodales odio.</p>
              </div>
            </div>

            <div class="item">
              <div class="item-icon">
                <ion-icon name="file-tray-stacked-outline"></ion-icon>
              </div>
              <div class="item-wrapper">
                <h3>Management</h3>
                <p>Pellentesque pellentesque, ipsum sit amet auctor accumsan, odio tortor bibendum massa, sit amet
                  ultricies
                  ex lectus scelerisque nibh. Ut non sodales odio.</p>
              </div>
            </div>
          </div>

        </div>

        <!-- about section testimonials structure -->
        <div class="testimonials">

          <h2>Testimonials</h2>

          <div class="testimonials-row">

            <div class="testimonials-content">
              <div class="testimonials-text">
                <blockquote><i>Nam tempor commodo mi id sodales. Aenean sit amet nibh nec sapien consequat porta a sit
                    amet
                    diam.</i></blockquote>
              </div>
              <div class="testimonials-author">
                <img src="./asstets/images/testimonial-1.jpg" alt="" class="author-img">
                <div class="author-info">
                  <h4 class="author-name">John Doe</h4>
                  <p class="author-title">Web Developer</p>
                </div>
              </div>
            </div>

            <div class="testimonials-content">
              <div class="testimonials-text">
                <blockquote><i>Nam tempor commodo mi id sodales. Aenean sit amet nibh nec sapien consequat porta a sit
                    amet
                    diam.</i></blockquote>
              </div>
              <div class="testimonials-author">
                <img src="./asstets/images/testimonial-2.jpg" alt="" class="author-img">
                <div class="author-info">
                  <h4 class="author-name">John Doe</h4>
                  <p class="author-title">Web Developer</p>
                </div>
              </div>
            </div>

          </div>

        </div>


        <!-- about section clients structure -->

        <div class="clients">
          <h2>Clients</h2>

          <div class="clients-row">
            <img src="./asstets/images/client-1.png" alt="">
            <img src="./asstets/images/client-2.png" alt="">
            <img src="./asstets/images/client-3.png" alt="">
            <img src="./asstets/images/client-4.png" alt="">
            <img src="./asstets/images/client-5.png" alt="">
            <img src="./asstets/images/client-6.png" alt="">
          </div>
        </div>


      </div>


    </section>


    <!-- resume section structure -->

    <section class="resume page">

      <h1 class="section-heading">Resume</h1>
      <h4 class="section-sub-heading">5 Years of Experience</h4>


      <div class="resume-row">
        <div class="wrapper">


          <!-- education structure -->

          <div class="edu">
            <h2>Education</h2>

            <div class="grid-item">
              <h4 class="year">2019</h4>
              <h4 class="edu-name">Fronted Development</h4>
              <p class="company">University of Studies</p>
              <p class="edu-desc">Maecenas finibus nec sem ut imperdiet. Ut tincidunt est ac dolor aliquam sodales.
                Phasellus sed mauris hendrerit,
                laoreet sem in, lobortis ante.</p>

              <div class="divider"></div>
            </div>

            <div class="grid-item">
              <h4 class="year">2018</h4>
              <h4 class="edu-name">Graphics Design</h4>
              <p class="company">University of Studies</p>
              <p class="edu-desc">Aliquam tincidunt malesuada tortor vitae iaculis. In eu turpis iaculis, feugiat risus
                quis, aliquet urna. Quisque
                fringilla mollis risus, eu pulvinar dolor.</p>

              <div class="divider"></div>
            </div>



          </div>




          <!-- experience structure -->

          <div class="exp">
            <h2>Experience</h2>

            <div class="grid-item">
              <h4 class="year">2020 - Current</h4>
              <h4 class="exp-name">Lead Software Engineer</h4>
              <p class="company">Google</p>
              <p class="exp-desc">Praesent dignissim sollicitudin justo, sed elementum quam lacinia quis. Phasellus
                eleifend tristique posuere. Sed vitae
                dui nec magna.</p>

              <div class="divider"></div>
            </div>

            <div class="grid-item">
              <h4 class="year">2016 - 2020</h4>
              <h4 class="exp-name">Senior Software Engineer</h4>
              <p class="company">Facebook</p>
              <p class="exp-desc">Maecenas tempus faucibus rutrum. Duis eu aliquam urna. Proin vitae nulla tristique,
                ornare felis id, congue libero. Nam
                volutpat euismod quam.</p>

              <div class="divider"></div>
            </div>

            <div class="grid-item">
              <h4 class="year">2013 - 2016</h4>
              <h4 class="exp-name">Junior Software Engineer</h4>
              <p class="company">Amazon</p>
              <p class="exp-desc">Duis mollis nunc quis quam viverra venenatis. Nulla nulla arcu, congue vitae nunc ac,
                sodales ultricies diam. Nullam
                justo leo, tincidunt sit amet.</p>

              <div class="divider"></div>
            </div>



          </div>


        </div>


        <div class="wrapper">

          <!-- design skill structure -->

          <div class="design-skill">
            <h2>Design Skills</h2>

            <div class="progress-detail">
              <div class="progress-name">Web Design</div>
              <div class="progress-percent">95%</div>
            </div>
            <div class="progress-bar">
              <div class="progress" style="width: 95%"></div>
            </div>

            <div class="progress-detail">
              <div class="progress-name">Print Design</div>
              <div class="progress-percent">65%</div>
            </div>
            <div class="progress-bar">
              <div class="progress" style="width: 65%"></div>
            </div>

            <div class="progress-detail">
              <div class="progress-name">Logo Design</div>
              <div class="progress-percent">80%</div>
            </div>
            <div class="progress-bar">
              <div class="progress" style="width: 80%"></div>
            </div>

            <div class="progress-detail">
              <div class="progress-name">Graphics Design</div>
              <div class="progress-percent">90%</div>
            </div>
            <div class="progress-bar">
              <div class="progress" style="width: 90%"></div>
            </div>

          </div>


          <!-- coding skill structure -->

          <div class="coding-skill">
            <h2>Coding Skills</h2>

            <div class="progress-detail">
              <div class="progress-name">JavaScript</div>
              <div class="progress-percent">90%</div>
            </div>
            <div class="progress-bar">
              <div class="progress" style="width: 90%"></div>
            </div>

            <div class="progress-detail">
              <div class="progress-name">MongoDB</div>
              <div class="progress-percent">70%</div>
            </div>
            <div class="progress-bar">
              <div class="progress" style="width: 70%"></div>
            </div>

            <div class="progress-detail">
              <div class="progress-name">Python</div>
              <div class="progress-percent">60%</div>
            </div>
            <div class="progress-bar">
              <div class="progress" style="width: 60%"></div>
            </div>

            <div class="progress-detail">
              <div class="progress-name">React/Redux</div>
              <div class="progress-percent">50%</div>
            </div>
            <div class="progress-bar">
              <div class="progress" style="width: 50%"></div>
            </div>

            <div class="progress-detail">
              <div class="progress-name">HTML/CSS</div>
              <div class="progress-percent">100%</div>
            </div>
            <div class="progress-bar">
              <div class="progress" style="width: 100%"></div>
            </div>

            <div class="progress-detail">
              <div class="progress-name">Bootstrap</div>
              <div class="progress-percent">95%</div>
            </div>
            <div class="progress-bar">
              <div class="progress" style="width: 95%"></div>
            </div>

          </div>


        </div>


      </div>

      <a href="#" class="btn-primary">Download CV</a>


    </section>

    <!-- portfolio section structure -->
    <section class="portfolio page">
      <h1 class="section-heading">Portfolio</h1>
      <h4 class="section-sub-heading">My Works</h4>

      <ul class="filter-box">
        <li class="filter-item active">All</li>
        <li class="filter-item">Media</li>
        <li class="filter-item">Mockups</li>
        <li class="filter-item">SoundCloud</li>
        <li class="filter-item">Vimeo Videos</li>
        <li class="filter-item">YouTube Videos</li>
      </ul>


      <div class="portfolio-items-group">

        <div class="portfolio-item active">
          <img src="./asstets/images/1.jpg" alt="" class="item-img">
          <h4 class="item-name">SoundCloud Audio</h4>
          <div class="item-icon">
            <ion-icon name="volume-high"></ion-icon>
          </div>
          <div class="item-category">SoundCloud</div>
        </div>

        <div class="portfolio-item active">
          <img src="./asstets/images/2.jpg" alt="" class="item-img">
          <h4 class="item-name">Media Project 1</h4>
          <div class="item-icon">
            <ion-icon name="film"></ion-icon>
          </div>
          <div class="item-category">Media</div>
        </div>

        <div class="portfolio-item active">
          <img src="./asstets/images/3.jpg" alt="" class="item-img">
          <h4 class="item-name">Vimeo Video 1</h4>
          <div class="item-icon">
            <ion-icon name="videocam"></ion-icon>
          </div>
          <div class="item-category">Vimeo Videos</div>
        </div>

        <div class="portfolio-item active">
          <img src="./asstets/images/4.jpg" alt="" class="item-img">
          <h4 class="item-name">Media Projct 2</h4>
          <div class="item-icon">
            <ion-icon name="film"></ion-icon>
          </div>
          <div class="item-category">Media</div>
        </div>

        <div class="portfolio-item active">
          <img src="./asstets/images/5.jpg" alt="" class="item-img">
          <h4 class="item-name">Mockup Design 1</h4>
          <div class="item-icon">
            <ion-icon name="image"></ion-icon>
          </div>
          <div class="item-category">Mockups</div>
        </div>

        <div class="portfolio-item active">
          <img src="./asstets/images/6.jpg" alt="" class="item-img">
          <h4 class="item-name">YouTube Video 1</h4>
          <div class="item-icon">
            <ion-icon name="videocam"></ion-icon>
          </div>
          <div class="item-category">YouTube Videos</div>
        </div>

      </div>

    </section>


    <!-- blog section structure -->
    <section class="blog page">
      <h1 class="section-heading">Blog</h1>
      <h4 class="section-sub-heading">My Diary</h4>

      <div class="blog-container">

        <div class="blog-post">
          <div class="blog-img-box">
            <img src="./asstets/images/blog_post_1.jpg" alt="">
          </div>
          <div class="blog-category">UI</div>
          <div class="blog-info">
            <p class="publish-date">06 Apr 2021</p>
            <a href="#" class="blog-title">Best Practices for Animated Progress Indicators</a>
          </div>
        </div>

        <div class="blog-post">
          <div class="blog-img-box">
            <img src="./asstets/images/blog_post_2.jpg" alt="">
          </div>
          <div class="blog-category">E-Commerce</div>
          <div class="blog-info">
            <p class="publish-date">06 Apr 2021</p>
            <a href="#" class="blog-title">Designing the Perfect Feature Comparison Table</a>
          </div>
        </div>

        <div class="blog-post">
          <div class="blog-img-box">
            <img src="./asstets/images/blog_post_3.jpg" alt="">
          </div>
          <div class="blog-category">E-Commerce</div>
          <div class="blog-info">
            <p class="publish-date">06 Apr 2021</p>
            <a href="#" class="blog-title">An Overview of E-Commerce Platforms</a>
          </div>
        </div>

        <div class="blog-post">
          <div class="blog-img-box">
            <img src="./asstets/images/blog_post_5.jpg" alt="">
          </div>
          <div class="blog-category">Design</div>
          <div class="blog-info">
            <p class="publish-date">06 Apr 2021</p>
            <a href="#" class="blog-title">Why I Switched to Sketch For UI Design</a>
          </div>
        </div>

        <div class="blog-post">
          <div class="blog-img-box">
            <img src="./asstets/images/blog_post_6.jpg" alt="">
          </div>
          <div class="blog-category">UI</div>
          <div class="blog-info">
            <p class="publish-date">06 Apr 2021</p>
            <a href="#" class="blog-title">Creative and Innovative Navigation Designs</a>
          </div>
        </div>

        <div class="blog-post">
          <div class="blog-img-box">
            <img src="./asstets/images/blog_post_1.jpg" alt="">
          </div>
          <div class="blog-category">Design</div>
          <div class="blog-info">
            <p class="publish-date">06 Apr 2021</p>
            <a href="#" class="blog-title">6 Easy Steps to Better Icon Design</a>
          </div>
        </div>

      </div>
    </section>

    <!-- contact section structure -->
    <section class="contact page">

      <h1 class="section-heading">Contact</h1>
      <h4 class="section-sub-heading">Get in Touch</h4>

      <div class="contact-info">
        
        <div class="info-box">
          <ion-icon name="call-outline"></ion-icon>
          <p>123-456-7890</p>
        </div>

        <div class="info-box">
          <ion-icon name="location-outline"></ion-icon>
          <p>California</p>
        </div>

        <div class="info-box">
          <ion-icon name="mail-outline"></ion-icon>
          <p>john@doe.com</p>
        </div>

        <div class="info-box">
          <ion-icon name="checkmark-circle-outline"></ion-icon>
          <p>Hire Available</p>
        </div>

      </div>


      <div class="contact-form">

        <form action="">

          <div class="form-grid">
            <div class="grid-left">
              <input type="text" required placeholder="Full Name">
              <input type="email" required placeholder="Email Address">
              <input type="text" required placeholder="Subject">
            </div>

            <div class="grid-right">
              <textarea placeholder="Message"></textarea>
            </div>
          </div>

          <a href="#" class="btn-primary">Send message</a>

        </form>

      </div>

    </section>

  </div>



  <!-- Custom JS Link -->
  <script src="./asstets/script.js"></script>

  <!-- ionicon CDN -->
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

</body>

</html>

CSS :

This CSS styles a resume/portfolio website with dark backgrounds, orange accents, and clean typography. It handles layout, responsiveness, hover effects, and transitions for sections like About, Resume, Portfolio, Blog, and Contact.

/* Variables */

:root {
  /* Background Colors */
  --background-dark-100: #000000;
  --background-dark-90: #222222;
  --background-dark-95: #282828;
  --background-dark-80: #333333;
  --background-dark-70: #444444;
  --background-orange: #ff714a;
  --background-dark-60: #666666;

  /* Text Colors */
  --color-white-100: #ffffff;
  --color-white-95: #f5f5f5;
  --color-white-80: #d5d5d5;
  --color-white-60: #aaaaaa;
  --color-white-70: #bbbbbb;

  /* Font Size */
  --font-size-48: 48px;
  --font-size-24: 24px;
  --font-size-21: 21px;
  --font-size-18: 18px;
  --font-size-14: 14px;
  --font-size-12: 12px;
  --font-size-11: 11px;
  --font-size-30: 30px;
  --font-size-16: 16px;
  --font-size-13: 13px;

  /* Others */
  --transition-default: 0.25s ease;
}

/* custom scrollbar style */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--background-dark-70);
}

::-webkit-scrollbar-thumb {
  background: var(--background-orange);
}

/* Reset & Default Style */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: "Poppins", sans-serif;
  color: var(--color-white-95);
}

body {
  height: 100vh;
  background: var(--background-dark-100);
}

li {
  list-style: none;
}

a { 
  display: inline-block;
  text-decoration: none;
  color: var(--color-white-95);
}

:is(h1, h2, h3, h4, h5, h6) {
  font-weight: 600;
}

h1 {
  font-size: var(--font-size-48);
  margin-bottom: 10px;
}

h2 {
  font-size: var(--font-size-21);
  margin-bottom: 30px;
  box-shadow: inset 0 -2px 0 var(--background-orange);
  width: fit-content;
}

h3 {
  font-size: var(--font-size-18);
  margin-bottom: 5px;
}

p,
blockquote {
  color: var(--color-white-80);
  font-size: var(--font-size-14);
  line-height: 1.8;
}

::selection {
  background: var(--background-orange);
  color: var(--color-white-100);
}

ion-icon {
  --ionicon-stroke-width: 20px;
}

.section-heading {
  font-size: var(--font-size-30);
  border-bottom: 2px solid var(--background-dark-60);
  padding-bottom: 5px;
}

.section-sub-heading {
  font-size: var(--font-size-14);
  text-align: right;
  font-weight: 300;
  color: var(--color-white-70);
  margin-bottom: 40px;
}

.btn-primary {
  padding: 8px 30px;
  border: 2px solid var(--background-orange);
  font-size: var(--font-size-14);
  transition: var(--transition-default);
}

.btn-primary:hover {
  background: var(--background-orange);
  color: var(--color-white-100);
}

img {
  width: 100%;
  height: auto;
}

/* main container */

.container {
  position: relative;
  max-width: 1440px;
  height: 100vh;
  margin: auto;
  overflow: hidden;
}

/* mobile navbar style */
.nav-mobile {
  position: fixed;
  display: none;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: var(--background-dark-90);
  border-bottom: 1px solid var(--background-dark-70);
  padding: 10px 20px;
  z-index: 100;
}

.nav-mobile .navbar-brand {
  display: flex;
  align-items: center;
}

.nav-mobile .brand-img {
  width: 35px;
  margin-right: 10px;
}

.nav-mobile .brand-name {
  font-size: var(--font-size-18);
  margin-bottom: 0;
}

.nav-mobile .menu-toggler {
  font-size: var(--font-size-24);
  --ionicon-stroke-width: 50px;
  cursor: pointer;
}

/* sidebar structure style */

.side-bar {
  position: absolute;
  width: 160px;
  height: 100%;
  padding: 30px 0;
  text-align: center;
  background: var(--background-dark-90);
  overflow-y: scroll;
  display: table;
  z-index: 50;
}

.side-bar .brand-img {
  width: 80px;
  margin-bottom: 20px;
}

.side-bar .brand-name {
  text-align: center;
  line-height: 1;
  font-size: var(--font-size-24);
  margin-bottom: 30px;
}

/* navbar style */

.nav li a {
  width: 100%;
  padding: 12px 0;
  border-top: 1px solid var(--background-dark-80);
  font-size: var(--font-size-14);
  transition: background var(--transition-default);
}

.nav li:last-child a {
  border-bottom: 1px solid var(--background-dark-80);
}

.nav li a:hover {
  background: var(--background-dark-80);
  box-shadow: inset -2px 0 0 var(--color-white-95);
}

.nav li a.active {
  background: var(--background-dark-80);
  box-shadow: inset -2px 0 0 var(--background-orange);
}

/* social link style */

.social-btn-groups .btn {
  padding: 4px 7px 0 7px;
  margin: 40px 2px;
  background: var(--background-dark-70);
  color: var(--color-white-60);
  transition: all var(--transition-default);
}

.social-btn-groups .btn:hover {
  background: var(--background-orange);
  color: var(--color-white-100);
}

/* sidebar footer style */
.side-bar-footer {
  display: table-row;
  vertical-align: bottom;
}

.side-bar-footer .copyright {
  font-size: var(--font-size-12);
  color: var(--color-white-60);
}

/* about section structure style */

.about,
.resume,
.portfolio,
.blog,
.contact {
  position: absolute;
  top: 110%;
  right: 0;
  transform: scale(0.5);
  width: calc(100% - 165px);
  height: 100%;
  background: var(--background-dark-90);
  overflow-y: auto;
  transition: all 0.5s ease;
}

:is(.about, .resume, .portfolio, .blog, .contact).active {
  top: 0;
  transform: scale(1);
  z-index: 10;
}

/* about section hero structure style */

.hero {
  display: flex;
}

.hero-img-bx {
  width: 50%;
  max-height: 100%;
}

.hero-img-bx img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 0;
}

.hero-content {
  width: 50%;
  max-height: fit-content;
  background: var(--background-dark-80);
  padding: 80px;
  display: table;
}

.hero-content-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.hero-content .title {
  font-size: var(--font-size-14);
  color: var(--color-white-60);
}

.hero-content .desc {
  margin-bottom: 20px;
}

.hero-content .desc p {
  margin-bottom: 10px;
}

/* about section service structure style */

.about-inner {
  padding: 80px;
}

.service {
  margin-bottom: 50px;
}

.grid-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 30px;
}

.grid-item .item {
  display: flex;
}

.grid-item .item-icon {
  font-size: 40px;
  margin-right: 30px;
  color: var(--color-white-60);
}

.item-wrapper p {
  font-size: var(--font-size-12);
}

/* about section testimonials structure style */

.testimonials {
  margin-bottom: 50px;
}

.testimonials-row {
  display: flex;
}

.testimonials-content {
  margin-right: 20px;
}

.testimonials-text {
  background: var(--background-dark-95);
  padding: 20px;
  margin-left: 50px;
  margin-bottom: 20px;
  border-radius: 5px;
  border: 1px solid var(--background-dark-70);
}

.testimonials-author {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: 50px;
}

.author-img {
  width: 80px;
  border-radius: 50%;
  border: 2px solid var(--background-dark-70);
  margin-right: 10px;
  transform: translateY(-50%);
}

.author-info .author-title {
  font-size: var(--font-size-11);
  color: var(--color-white-60);
}

/* about section clients structure style */

.clients-row {
  display: flex;
  justify-content: space-between;
}

.clients-row img {
  width: 100px;
  margin: 0 20px;
  opacity: 0.5;
}

/* Resume section structure style */
.resume,
.portfolio,
.blog,
.contact {
  padding: 50px 70px;
}

.resume-row {
  display: flex;
}

.resume-row .wrapper:nth-child(1) {
  width: 65%;
  margin-right: 40px;
}

.resume-row .wrapper :is(.edu, .exp) {
  margin-bottom: 80px;
}

.resume-row h2 {
  margin-bottom: 20px;
}

.resume-row .grid-item {
  position: relative;
  grid-template-columns: 0.5fr 1fr;
  grid-gap: 0px 50px;
  margin-bottom: 20px;
}

.resume-row .grid-item .year {
  text-align: right;
  font-size: var(--font-size-14);
}

.resume-row .grid-item .company {
  text-align: right;
  font-size: var(--font-size-12);
  color: var(--color-white-70);
}

.resume-row .grid-item :is(.edu-desc, .exp-desc) {
  font-size: var(--font-size-13);
  color: var(--color-white-80);
}

.resume-row .grid-item .divider {
  position: absolute;
  top: 0;
  left: 34.5%;
  width: 1px;
  height: calc(100% + 40px);
  background: var(--background-dark-60);
}

.resume-row .grid-item .divider::before {
  content: "";
  position: absolute;
  top: 8px;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 10px;
  background: var(--background-dark-90);
  box-shadow: 0 0 0 2px var(--background-orange);
}

/* Resume section skill progress structure style */

.resume-row .wrapper:nth-child(2) {
  width: 35%;
}

.resume-row .design-skill {
  margin-bottom: 40px;
}

.resume-row .progress-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.resume-row .progress-detail .progress-percent {
  font-size: var(--font-size-11);
  font-weight: 300;
  color: var(--color-white-60);
}

.resume-row .progress-bar {
  width: 100%;
  height: 10px;
  border-radius: 10px;
  border: 1px solid var(--background-orange);
  padding: 2px;
  margin-bottom: 10px;
}

.resume-row .progress {
  height: 100%;
  border-radius: 10px;
  background: var(--background-orange);
}

/* portfolio section structure style */
.filter-box {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.filter-item {
  padding: 5px 10px;
  border: 2px solid var(--background-dark-80);
  font-size: var(--font-size-12);
  color: var(--color-white-80);
  transition: var(--transition-default);
  cursor: pointer;
}

.filter-item:hover {
  border-color: var(--color-white-100);
}

.filter-item.active {
  border-color: var(--background-orange);
  color: var(--color-white-100);
}

.portfolio .portfolio-items-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 30px;
}

.portfolio .portfolio-item {
  position: relative;
  overflow: hidden;
  display: none;
}

.portfolio .portfolio-item.active {
  display: block;
}

.portfolio .portfolio-item .item-img {
  display: block;
  transition: all 0.5s ease;
}

.portfolio .portfolio-item:hover .item-img {
  transform: scale(1.1);
}

.portfolio .portfolio-item :is(.item-name, .item-icon, .item-category) {
  position: absolute;
  background: var(--color-white-100);
  color: var(--background-dark-90);
  padding: 2px 10px;
  opacity: 0;
  transition: all 0.5s ease;
}

.portfolio .portfolio-item:hover :is(.item-name, .item-icon, .item-category) {
  opacity: 1;
}

.portfolio .portfolio-item .item-name {
  top: 10px;
  left: 10px;
}

.portfolio .portfolio-item .item-icon {
  top: 10px;
  right: 10px;
  color: var(--background-orange);
  padding: 3px 7px 0;
  font-size: var(--font-size-18);
}

.portfolio .portfolio-item .item-icon ion-icon {
  --ionicon-stroke-width: 50px;
}

.portfolio .portfolio-item .item-category {
  bottom: 10px;
  left: 10px;
  font-size: var(--font-size-11);
}

/* blog section structure style */
.blog-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 30px;
}

.blog-post {
  position: relative;
}

.blog-post .blog-img-box {
  overflow: hidden;
}

.blog-post .blog-img-box img {
  display: block;
  transition: all 0.5s ease;
}

.blog-post .blog-img-box:hover img {
  transform: scale(1.1);
}

.blog-post .blog-category {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--background-dark-90);
  padding: 0 8px;
  font-size: var(--font-size-11);
}

.blog-post .blog-info {
  background: var(--background-dark-80);
  padding: 20px;
}

.blog-post .publish-date {
  font-size: var(--font-size-11);
  color: var(--color-white-60);
  margin-bottom: 10px;
}

.blog-post .blog-title {
  font-size: var(--font-size-18);
  font-weight: 600;
}

/* contact section structure style */

.contact-info {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 30px;
  margin-bottom: 80px;
}

.contact-info .info-box {
  background: var(--background-dark-80);
  border: 1px solid var(--background-dark-70);
  text-align: center;
  padding: 25px;
  transition: var(--transition-default);
}

.contact-info .info-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 10px -5px #0005;
}

.contact-info .info-box ion-icon {
  font-size: var(--font-size-48);
  color: var(--color-white-70);
  margin-bottom: 10px;
}

.contact-info .info-box p {
  font-size: var(--font-size-16);
  font-weight: 600;
  color: var(--color-white-95);
}

/* contact form style */

.contact-form {
  max-width: 700px;
  margin: auto;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  margin-bottom: 20px;
}

.form-grid .grid-left input,
.form-grid .grid-right textarea {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: var(--font-size-14);
  color: var(--color-white-95);
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--background-dark-70);
  outline: none;
}

.form-grid .grid-left input:not(:last-child) {
  margin-bottom: 20px;
}

.form-grid .grid-right textarea {
  height: 170px;
  resize: none;
}

Responsive code (CSS) :

This CSS adds responsive design, adapting the layout for various screen sizes. It implements a mobile menu, stacks content vertically on smaller screens (like phones), and adjusts column counts and padding for tablets and larger screens, ensuring the site looks good on all devices.

/* Responsive for 1200px */

@media screen and (max-width: 1200px) {
  /* about section clients */

  .clients-row {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .clients-row img {
    margin-bottom: 30px;
  }
}

/* Responsive for 1024px */

@media screen and (max-width: 1024px) {
  /* mobile navbar style */
  .nav-mobile {
    display: flex;
  }

  /* sidebar */
  .side-bar {
    padding: 70px 0 30px;
    width: 260px;
    box-shadow: 2px 0 10px #0002;
    opacity: 0;
    left: -300px;
    transition: all var(--transition-default);
  }

  /* active class for toggling sidebar from left */
  .side-bar.active {
    left: 0;
    opacity: 1;
  }

  /* about */
  .about,
  .resume,
  .portfolio,
  .blog,
  .contact {
    width: 100%;
  }

  /* Resume section */
  .resume,
  .portfolio,
  .blog,
  .contact {
    padding: 80px 40px;
  }

  /* contact section */
  .contact-info {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive for 768px */

@media screen and (max-width: 768px) {
  /* about section hero */

  .hero {
    flex-direction: column;
  }

  .hero-img-bx {
    width: 100%;
    height: 400px;
    font-size: 0;
  }

  .hero-content {
    width: 100%;
    padding: 40px;
  }

  /* about section service */

  .about-inner {
    padding: 40px;
  }

  .grid-item {
    grid-template-columns: 1fr;
  }

  /* about section testimonials */

  .testimonials-row {
    flex-direction: column;
  }

  .testimonials-content {
    margin-right: 0;
    margin-bottom: 20px;
  }

  /* resume section */

  .resume-row {
    flex-direction: column;
    margin-bottom: 50px;
  }

  .resume-row .wrapper {
    width: 100% !important;
  }

  .resume-row .wrapper:nth-child(1) {
    margin-right: 0;
  }

  /* portfolio section */
  .portfolio .portfolio-items-group {
    grid-template-columns: 1fr;
  }

  .blog-container {
    grid-template-columns: 1fr;
  }

  /* contact section */

  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Responsive for 400px */

@media screen and (max-width: 400px) {
  .hero-content .name {
    font-size: 40px;
  }

  .grid-item .item {
    flex-direction: column;
  }

  /* contact section */
  .contact-info {
    grid-template-columns: 1fr;
  }
}

JavaScript:

This JavaScript makes the website interactive: It toggles the mobile sidebar menu, handles navigation between sections, and filters portfolio items by category.

// sidebar toggle variables
const menuToggler = document.querySelector('.menu-toggler');
const sideBar = document.querySelector('.side-bar');

// page navigation variables
const navItemLinks = document.querySelectorAll('.nav li a');
const pages = document.querySelectorAll('.page');


// variables for filtering
const filterBtn = document.querySelectorAll('.filter-item');
const itemCategory = document.querySelectorAll('.item-category');

// toggling sidebar in mobile
menuToggler.addEventListener('click', function(){
  sideBar.classList.toggle('active');
});


// page navigation functionality

for (let i = 0; i < navItemLinks.length; i++) {
  // added onclick event in nav links
  navItemLinks[i].addEventListener('click', function(){

    // collected nav links innertext
    const itemLinkText = this.textContent.toLowerCase();

    // defined page and add active class 
    for (let i = 0; i < pages.length; i++) {

      // defining page condition
      if (pages[i].classList.contains(itemLinkText)) {
        // add active class on current page
        pages[i].classList.add('active');
        // add active class on clicked nav link
        navItemLinks[i].classList.add('active');
      } else {
        // remove active class from other pages
        pages[i].classList.remove('active');
        // remove active class from other nav links
        navItemLinks[i].classList.remove('active');
      }

    }

  });
}

// added eventListener in filter buttons
for (let i = 0; i < filterBtn.length; i++) {
  filterBtn[i].addEventListener('click', function(){

    // remove all active class from filter button
    for (let i = 0; i < filterBtn.length; i++) {
      filterBtn[i].classList.remove('active');
    }
    // added active class on filter button clicked
    this.classList.add('active');

    // show item, based on filter button click
    for (let i = 0; i < itemCategory.length; i++) {
      const itemCategoryText = itemCategory[i].textContent;
      console.log(itemCategoryText);
      switch (this.textContent) {
        case itemCategoryText:
          itemCategory[i].parentElement.classList.add('active');
          break;
        case 'All':
          itemCategory[i].parentElement.classList.add('active');
          break;
        default:
          itemCategory[i].parentElement.classList.remove('active');
      }
    }
  });
}

A responsive portfolio is essential for showcasing your skills and attracting opportunities. By combining HTML, CSS, and JavaScript, we’ve built a sleek, modern, and interactive portfolio that works on all devices. Keep refining it by adding more sections, animations, and personal touches to make it truly yours.

If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!

What's Hot

How to create Social media popup hover menu using HTML and CSS

How to create Valentine’s Love Button Animation using HTML CSS and JS

How to create Magic Indicator Menu using HTML CSS and JS

Download Project file at end 🔥

HTML :

CSS :

Responsive code (CSS) :

JavaScript:

How to create Social media popup hover menu using HTML and CSS

How to create Valentine’s Love Button Animation using HTML CSS and JS

How to create Magic Indicator Menu using HTML CSS and JS

Master Frontend in 100 Days Ebook

How to make Modern Login Form using HTML & CSS | Glassmorphism

How to make I love you Animation in HTML CSS & JavaScript

How to make Valentine’s Day Card using HTML & CSS

Featured Post

20 CSS Tricks You Probably Didn’t Know About

How to create Toast Catcher Game using HTML CSS and JS

How to make Awesome Radar Animation using HTML & CSS

Top 14 Game-Changing Websites Every Developer Should Know About

Latest Post

How to create Social media popup hover menu using HTML and CSS

How to create Valentine’s Love Button Animation using HTML CSS and JS

How to create Magic Indicator Menu using HTML CSS and JS

How to create Awesome Cool Loading Animation using HTML CSS and JS

Subscribe to Updates

What's Hot

How to create Responsive Portfolio using HTML CSS & JavaScript

Download Project file at end 🔥

HTML :

CSS :

Responsive code (CSS) :

JavaScript:

Related Posts