CodePen Embed - Self Profile with ScrollSpy (With Bootstrap)

<body data-spy="scroll" data-target="#sticky-side-nav" data-offset="0">
    <div class="pages">
      <button type="button" class="btn btn-raised">
        <a href="https://codepen.io/navinnavi19/full/PvGmrP" target="_blank"><i class="fas fa-arrow-left"></i> No Bootstrap</a>
      </button>
    </div>
    <div class="containers">
      <div class="row">
        <div class="col" id="sticky-side-nav">
          <nav class="navbar navbar-light sticky-top">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link" href="#home"
                  ><i class="fas fa-home"></i> <span>Home Page</span></a
                >
              </li>
              <hr />
              <li class="nav-item">
                <a class="nav-link" href="#personal"
                  ><i class="fas fa-user"></i> <span>Personal Details</span></a
                >
              </li>
              <hr />
              <li class="nav-item">
                <a class="nav-link" href="#tech"
                  ><i class="fas fa-laptop-code"></i>
                  <span>Technical Skills</span>
                </a>
              </li>
              <hr />
              <li class="nav-item">
                <a class="nav-link" href="#project"
                  ><i class="fas fa-project-diagram"></i>
                  <span>Project Details</span>
                </a>
              </li>
            </ul>
          </nav>
        </div>
        <div class="col ">
          <div class="contain ">
            <section id="home" class="home">
              <h1>NAVIN</h1>
              <h2>A Self Thought Web Developer</h2>
            </section>
            <section id="personal" class="personal">
              <h2>Personal Details</h2>
              <div class="elevated-component">
                <div class="image">
                  <img
                    src="https://res.cloudinary.com/navinnavi19/image/upload/v1553952261/VANUSS/_MG_8642.jpg"
                    alt=""
                  />
                </div>
                <div class="details">
                  <p><b>Name :</b> Navin</p>
                  <p><b>Designation :</b> Security Administrator</p>
                  <p><b>Industry :</b> CRS (Cyber Risk Services)</p>
                  <p><b>Twitter :</b> @ANavin007</p>
                  <p><b>CodePen :</b> navinnavi19</p>
                </div>
              </div>
            </section>
            <section id="tech" class="technical">
              <h2>Technical Skills</h2>
              <div class="table">
                <table>
                  <tr>
                    <th>Skills</th>
                    <th>Experience</th>
                  </tr>
                  <tr>
                    <td>Information Security</td>
                    <td>12 months</td>
                  </tr>
                  <tr>
                    <td>Email Security</td>
                    <td>13 months</td>
                  </tr>
                  <tr>
                    <td>HTML, CSS, JS, Markdown</td>
                    <td>4 months</td>
                  </tr>
                  <tr>
                    <td>Bootstrap, MDC</td>
                    <td>4 months</td>
                  </tr>
                  <tr>
                    <td>Node JS</td>
                    <td>2 months</td>
                  </tr>
                  <tr>
                    <td>Angular JS</td>
                    <td>2 months</td>
                  </tr>
                </table>
              </div>
            </section>
            <section id="project" class="project">
              <h2>
                Project Details
              </h2>
              <h3>
                <a
                  href="http://angular7-udemy-the-complete-guide.s3-website.ap-south-1.amazonaws.com/"
                  target="_blank"
                  >Angular Recipe Book SPA Application</a
                >
              </h3>
            </section>
          </div>
        </div>
      </div>
    </div>
<script>
  $(document).ready(function() {
    $('body').bootstrapMaterialDesign();
  });
</script>

/* Bootstrap Page CSS */

#sticky-side-nav {
  flex-grow: 0;
}

h2 {
  font-weight: 700;
}

.containers {
  margin: 0;
  padding: 0;
  padding-right: 15px;
}

.navbar {
  padding: 0;
  height: 100vh;
  width: 18rem;
  box-shadow: 2px 0 2px 0 rgba(0, 0, 0, 0.14), 3px 0 1px -2px rgba(0, 0, 0, 0.2),
    1px 0 5px 0 rgba(0, 0, 0, 0.12);
  justify-content: center;
}

.nav-item {
  text-align: center;
}

.navbar-nav .nav-link {
  padding: 25px 25px;
  margin: 10px;
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
}

hr {
  margin: 0 auto;
  width: 50px;
}

.contain,
.col:nth-of-type(2) {
  padding: 0;
}

.contain > * {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.home h1 {
  font-size: 5rem;
  margin: 20px auto;
  font-weight: 700;
  text-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
}

.elevated-component {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  margin: 40px;
  box-shadow: 3px 3px 2px 0 rgba(0, 0, 0, 0.14),
    3px -4px 5px -2px rgba(0, 0, 0, 0.2), -3px 2px 5px 0 rgba(0, 0, 0, 0.12);
}

.elevated-component .image {
  justify-content: center;
  margin: 5px auto;
}

.personal img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
}

.elevated-component .details {
  padding: 15px;
  padding-left: 0;
  font-size: 18px;
}

.technical h2 {
  margin-bottom: 30px;
}

.table {
  padding: 20px;
  border-radius: 30px;
  font-size: 18px;
  text-align: center;
  width: auto;
  margin: 0;
  box-shadow: 3px 3px 2px 0 rgba(0, 0, 0, 0.14),
    3px -4px 5px -2px rgba(0, 0, 0, 0.2), -3px 2px 5px 0 rgba(0, 0, 0, 0.12);
}

.table td,
.table th {
  width: 200px;
  height: 20px;
  border: none;
  padding: 0.5rem;
}

.pages {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
}

.pages a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.9);
  font-weight: bold;
}

.project h2 {
  margin-bottom: 60px;
}

.project h3 {
  padding: 20px;
  margin: 10px;
  box-shadow: 3px 3px 2px 0 rgba(0, 0, 0, 0.14),
    3px -4px 5px -2px rgba(0, 0, 0, 0.2), -3px 2px 5px 0 rgba(0, 0, 0, 0.12);
}

.project a {
  text-decoration: none;
  color: black;
}

@media (max-width: 490px) {
  .project h3 {
    padding: 10px;
    font-size: 18px;
  }
}

@media (max-width: 876px) {
  .navbar {
    width: 75px;
    transition: all 0.3s ease-out;
  }

  .navbar-nav .nav-link {
    padding: 15px;
  }

  .nav-link span {
    display: none;
  }
}

@media (max-width: 656px) {
  .home h1 {
    font-size: 3rem;
  }

  .home h2 {
    font-size: 1.2rem;
  }

  .personal h2,
  .technical h2,
  .project h2 {
    font-size: 1.5rem;
    margin-bottom: 50px;
  }

  .elevated-component {
    grid-template-columns: none;
  }

  .contain .image {
    justify-content: center;
    margin: 15px auto;
    margin-bottom: 0px;
  }

  .contain img {
    width: 100px;
    height: 100px;
    padding: 0;
  }

  .contain .details {
    padding: 15px;
    font-size: 16px;
  }

  .table {
    max-width: 260px;
    padding: 5px;
    font-size: 16px;
  }

  .table td,
  .table th {
    padding: 0;
  }

  .table th {
    padding-bottom: 10px;
  }
  .project h3 {
    font-size: 18px;
  }
}

@media (max-width: 400px) {
  .home h2 {
    font-size: 1.1rem;
  }

  .elevated-component {
    margin: 10px;
  }
}

const makeNavLinksSmooth = () => {
  const navLink = document.querySelectorAll('.nav-link');

  [...navLink].forEach(link => {
    link.addEventListener('click', e => {
      e.preventDefault();
      document.querySelector(link.hash).scrollIntoView({
        behavior: 'smooth',
      });
    });
  });
};

makeNavLinksSmooth();

Run Pen

This Pen is owned by Navin Moorthy on CodePen.

See more by @navin_moorthy on CodePen

External CSS

External JavaScript