index.html

<!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>Document</title>

  <!-- stylesheet links -->
  <link rel="stylesheet" href="/CSS/navBar.css" />
  <link rel="stylesheet" href="/CSS/intro.css" />
  <link rel="stylesheet" href="/CSS/aboutMe.css" />
  <link rel="stylesheet" href="/CSS/skills.css" />
  <link rel="stylesheet" href="/CSS/index.css" />
</head>

<body>
  <canvas></canvas>

  <nav id="navbar">
    <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 305.16 138.47">
      <defs>
        <style>
          .cls-1 {
            fill: black;
          }
        </style>
      </defs>
      <g id="Layer_2" data-name="Layer 2">
        <g id="Layer_1-2" data-name="Layer 1">
          <path class="cls-1"
            d="M161.15,7.76A16.63,16.63,0,0,0,146.6,0H94.47a3.35,3.35,0,0,0-3.32,3.32v9.5H85V3.33c0-4.27-6.64-4.28-6.64,0v9.5H72.15V3.33A3.36,3.36,0,0,0,68.83,0H19.13C15.39,0,11.86.13,8.42,1.94.66,6-2.15,15.94,1.75,23.61,4.63,29.3,10.59,32.3,16.8,32.3H28.11c9.07,0,18.17.15,27.24,0h.59c4.27,0,4.28-6.64,0-6.64H19.76c-3.2,0-6.3.23-9.1-1.68a9.61,9.61,0,0,1-2.28-13.4,9.43,9.43,0,0,1,1.93-2c2.53-1.92,5.36-1.92,8.34-1.92H65.52v6.18H34.68c-5.07,0-10.18-.2-15.24,0h-.22c-4.28,0-4.28,6.65,0,6.65H65.53V43.55l.07,54.61v4.3a17.05,17.05,0,0,0,10.59,15.87c7.51,3,16.35-.75,19.85-7.93A20.9,20.9,0,0,0,97.91,101l-.06-49.57v-32h31.56c5.06,0,10.18.2,15.24,0h.22c4.28,0,4.28-6.65,0-6.65h-47V6.62H143.6c2.38,0,5-.24,7.23.64a9.62,9.62,0,0,1,5.26,12.56,10,10,0,0,1-1.43,2.42c-2.49,3-5.8,3.41-9.38,3.41h-37.8c-4.27,0-4.28,6.64,0,6.64h36.86c4.28,0,8.46-.23,12.13-2.83A16.36,16.36,0,0,0,161.15,7.76ZM91.2,42.24l.06,54.51v5.34c0,4-1.79,7.86-5.51,9.72-5.77,2.88-12.24-1.26-13.34-7.36a24.55,24.55,0,0,1-.16-4.45l-.06-50.21V19.48h6.23V102c0,4.27,6.64,4.28,6.64,0V19.48H91.2Z" />
          <path class="cls-1"
            d="M165.7,71v44.36a3.23,3.23,0,0,1-3.22,3.23h0a3.23,3.23,0,0,1-3.22-3.23v-5.51a28.32,28.32,0,0,1-9.22,7.52,25.09,25.09,0,0,1-11.19,2.52,24.76,24.76,0,0,1-18.42-7.82,26.09,26.09,0,0,1-7.63-18.24,26.91,26.91,0,0,1,7.44-19.3A25.17,25.17,0,0,1,139,66.46a24,24,0,0,1,11.32,2.66,25.79,25.79,0,0,1,8.9,8V71a3.22,3.22,0,0,1,3.22-3.22h0A3.22,3.22,0,0,1,165.7,71Zm-26.1,1.77A19.76,19.76,0,0,0,122.15,83a20.61,20.61,0,0,0,0,20.52,20,20,0,0,0,7.42,7.63,19.33,19.33,0,0,0,10,2.73,20.48,20.48,0,0,0,10.1-2.71,19,19,0,0,0,7.39-7.32,21,21,0,0,0,2.59-10.4,20.22,20.22,0,0,0-5.81-14.74A19.21,19.21,0,0,0,139.6,72.76Z" />
          <path class="cls-1"
            d="M182.93,67.77h0a3.31,3.31,0,0,1,3.32,3.3h0v55.16c0,4.27-.77,7.37-2.31,9.32a7.64,7.64,0,0,1-6.34,2.91h-.29a7.43,7.43,0,0,1-7.18-7.47h0a10.43,10.43,0,0,0,4.72,1.35,4.33,4.33,0,0,0,4-2.19c.5-.92.75-2.92.75-5.84V71.08a3.31,3.31,0,0,1,3.31-3.31Zm-.09-20.92a5.14,5.14,0,0,1,3.81,1.59,5.4,5.4,0,0,1,0,7.59,5.21,5.21,0,0,1-3.81,1.58,5.38,5.38,0,1,1,0-10.76Z" />
          <path class="cls-1"
            d="M200.26,115.31V51.42a3.26,3.26,0,0,1,3.26-3.26h0a3.27,3.27,0,0,1,3.27,3.26V76.5A27.28,27.28,0,0,1,216,69a25.74,25.74,0,0,1,29.55,5.28,26.2,26.2,0,0,1,7.63,19,25.86,25.86,0,0,1-7.7,18.82,25.1,25.1,0,0,1-18.52,7.8,23.59,23.59,0,0,1-11.24-2.62,26.32,26.32,0,0,1-8.91-8v6.07a3.29,3.29,0,0,1-3.27,3.27h0a3.27,3.27,0,0,1-3.27-3.27Zm26.15-1.73a19.75,19.75,0,0,0,17.4-10.23,20.73,20.73,0,0,0,0-20.59,20.06,20.06,0,0,0-7.41-7.64,19.1,19.1,0,0,0-9.9-2.73,20.3,20.3,0,0,0-10.18,2.73,18.91,18.91,0,0,0-7.4,7.36,20.79,20.79,0,0,0-2.59,10.41,20.23,20.23,0,0,0,5.8,14.76A19.21,19.21,0,0,0,226.41,113.58Z" />
          <path class="cls-1"
            d="M267.34,46.85a5.14,5.14,0,0,1,3.81,1.59,5.39,5.39,0,1,1-7.55,0A5.11,5.11,0,0,1,267.34,46.85Zm0,20.92h0A3.26,3.26,0,0,1,270.6,71h0v44.27a3.28,3.28,0,0,1-3.27,3.27h0a3.27,3.27,0,0,1-3.26-3.27V71a3.25,3.25,0,0,1,3.25-3.27h0Z" />
          <path class="cls-1"
            d="M285.09,67.77h0a3.34,3.34,0,0,1,3.34,3.34v4.13a23.3,23.3,0,0,1,6.3-6.56,12.34,12.34,0,0,1,6.87-2.22h.06c3,0,4.43,5.37,2.87,7.89h0A5.52,5.52,0,0,0,302,73a6.26,6.26,0,0,0-1.35-.18,9.39,9.39,0,0,0-6.31,2.69q-3,2.69-4.62,8.33-1.23,4.35-1.21,17.56v13.85a3.36,3.36,0,0,1-3.34,3.34h0a3.34,3.34,0,0,1-3.37-3.31V71.11a3.32,3.32,0,0,1,3.32-3.34Z" />
    </svg>

    <div id="hamburger">
      <div class="hamburger-line"></div>
      <div class="hamburger-line"></div>
      <div class="hamburger-line"></div>
    </div>

    <ul id="nav-links">
      <li><a href="#">About</a></li>
      <li><a href="#">Skills</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Contact</a></li>
      <li>
        <a href="https://www.facebook.com/monabbir.ahmmad/">
          <img src="https://img.icons8.com/fluency-systems-regular/344/facebook-new--v1.png" alt="facebook">
        </a>
        <a href="https://www.linkedin.com/in/monabbir-ahmmad-tajbir-467144235/">
          <img src="https://img.icons8.com/fluency-systems-regular/344/linkedin.png" alt="linkedin">
        </a>
        <a href="https://github.com/Monabbir-Ahmmad">
          <img src="https://img.icons8.com/fluency-systems-regular/344/github.png" alt="github">
        </a>
        <a href="mailto:monabbir.ahmmad@gmail.com">
          <img src="https://img.icons8.com/fluency-systems-regular/344/email-sign.png" alt="linkedin">
        </a>
      </li>
    </ul>
  </nav>

  <div id="intro-container" class="intro-container section">
    <h1 id="typeWriter" class="intro-item"></h1>
    <h1 class="intro-item">
      Software Engineer | Full Stack Developer
    </h1>

    <div id="intro-btn-about" class="intro-item">Learn about me</div>
  </div>

  <div id="about-container" class="section dark">
    <h1 class="about-title">About Me</h1>

    <div class="about-details-container">
      <div class="about-details-wrapper">
        <div class="about-profile">
          <h1>Profile</h1>

          <div class="about-profile-item">
            <h2>Full name</h2>
            <h3>Monabbir Ahmmad Tajbir</h3>
          </div>

          <div class="about-profile-item">
            <h2>Birth date</h2>
            <h3>December 31, 2000</h3>
          </div>

          <div class="about-profile-item">
            <h2>Gender</h2>
            <h3>Male</h3>
          </div>

          <div class="about-profile-item">
            <h2>Language</h2>
            <h3>Bangle, English</h3>
          </div>

          <div class="about-profile-item">
            <h2>Occupation</h2>
            <h3>Student, Software Engineer</h3>
          </div>

          <div class="about-profile-item">
            <h2>Country</h2>
            <h3>Bangladesh</h3>
          </div>

        </div>
      </div>
      <div class="about-details-wrapper">
        <img src="Resourse/MyPic.png" alt="Pic" />
        <p id="about-bio">
          I'm Monabbir Ahmmad Tajbir, an aspiring Software Engineer from
          Bangladesh. I'm currently pursuing a bachelor's degree in Software
          Engineering at the Institute of Information and Communication
          Technology, Shahjalal University of Science and Technology.
        </p>
      </div>
    </div>

    <div id="about-btn-skills">
      <p>Check out my skills</p>
      <h2>⟱</h2>
    </div>
  </div>

  <div id="skills-container" class="section">
    <h1 class="skills-title">Skills</h1>
    <div class="skills-details-container">
      <div class="skills-details-wrapper">

      </div>
    </div>
  </div>

  <!-- JS scripts -->
  <script type="module" src="/JS/index.js"></script>
  <script type="module" src="/JS/navBar.js"></script>
  <script type="module" src="/JS/ParticleEntity.js"></script>
  <script type="module" src="/JS/particleEffect.js"></script>
  <!-- JS scripts -->

</body>

</html>