  </head>
  <body>
    <!--=============== HEADER PROFILE ===============-->
    <header class="profile container">
      <!-- Theme Button -->
      <i class="ri-moon-line change-theme" id="theme-button"></i>
      <div class="profile__container grid">
        <div class="profile__data">
          <div class="profile__cover"></div>
          <div class="profile__border">
            <div class="profile__perfil">
              <img src="./assets/img/perfil.jpg">           
              <img class="khung" src="./assets/img/khung-rong.png">
            </div>
          </div>
          <h2 class="profile__name">Hoàng Thế Bảo <img src="https://i.imgur.com/7Qz7OTL.gif" alt="Verified" style="height:20px;"</h2>
          <h3 class="typewriter-text" id="typewriter"></h3>
          <script>
            setTimeout(function() {
              const textArray = [
                "Hello Everybody",
                "My name is Hoang The Bao.",
                "I really like website design :3"
              ];
              let index = 0;
              let letterIndex = 0;
              let isDeleting = false;
            
              function typeWriter() {
                const currentText = textArray[index];
                const speed = isDeleting ? 50 : 100; // Tốc độ gõ chữ
            
                if (!isDeleting && letterIndex < currentText.length) {
                  document.getElementById("typewriter").innerHTML += currentText.charAt(letterIndex);
                  letterIndex++;
                  setTimeout(typeWriter, speed);
                } else if (isDeleting && letterIndex > 0) {
                  document.getElementById("typewriter").innerHTML = currentText.substring(0, letterIndex - 1);
                  letterIndex--;
                  setTimeout(typeWriter, speed);
                } else {
                  isDeleting = !isDeleting;
                  if (!isDeleting) {
                    index++;
                  }
                  setTimeout(typeWriter, 500); // Thời gian chờ giữa các câu
                  if (index >= textArray.length) {
                    index = 0;
                  }
                }
              }
            
              typeWriter();
            }, 3000); // 3 giây sau khi trang web load
          </script>
          <ul class="profile__social">
            <a href="https://www.instagram.com/tria.baguss/" target="_blank" class="profile__social-link">
            <i class="ri-instagram-line"></i>
            </a>
            <a href="https://www.linkedin.com/in/triabagus/" target="_blank" class="profile__social-link">
            <i class="ri-linkedin-box-line"></i>
            </a>
            <a href="https://github.com/triabagus" target="_blank" class="profile__social-link">
            <i class="ri-github-line"></i>
            </a>
          </ul>
        </div>
        <div class="profile__info grid">
          <div class="profile__info-group">
            <h3 class="profile__info-number">7</h3>
            <p class="profile__info-description">
              Years of <br> work
            </p>
          </div>
          <div class="profile__info-group">
            <h3 class="profile__info-number">+124</h3>
            <p class="profile__info-description">
              Completed <br> projects
            </p>
          </div>
          <div class="profile__info-group">
            <h3 class="profile__info-number">96</h3>
            <p class="profile__info-description">
              Satisfied <br> customers
            </p>
          </div>
        </div>
        <div class="profile__buttons">
          <!-- Insert your CV -->
          <a download="" href="assets/pdf/CV-TriaBagus.pdf" class="button">
          Download CV <i class="ri-download-line"></i>
          </a>
          <div class="profile__buttons-small">
            <!-- Insert a real number plus country code -->
            <a href="https://api.whatsapp.com/send?phone=62334769154&text=Hello, more information!" class="button button__gray button__small">
            <i class="ri-whatsapp-line"></i>
            </a>
            <a href="https://triabagus.xyz" target="_blank" class="button button__gray button__small">
            <i class="ri-macbook-line"></i>
            </a>
          </div>
        </div>
      </div>
    </header>
    <!--=============== MAIN ===============-->
    <main class="main">
      <section class="filters container">
        <!--=============== FILTERS TABS ===============-->
        <ul class="filters__content">
          <button class="filters__button filter-tab-active" data-target="#projects">
          Projects    
          </button>
          <button class="filters__button" data-target="#skills">
          Skills
          </button>
        </ul>
        <div class="filters__sections">
          <!--=============== PROJECTS ===============-->
          <div class="projects__content grid filters__active" data-content id="projects">
            <article class="projects__card">
              <img src="assets/img/project1.jpg" alt="Projects image" class="projects__img">
              <div class="projects__modal">
                <div>
                  <span class="projects__subtitle">Web</span>
                  <h3 class="projects__title">Payment Site</h3>
                  <a href="#" class="projects__button button button__small">
                  <i class="ri-link"></i>
                  </a>
                </div>
              </div>
            </article>
            <article class="projects__card">
              <img src="assets/img/project2.jpg" alt="Projects image" class="projects__img">
              <div class="projects__modal">
                <div>
                  <span class="projects__subtitle">Web</span>
                  <h3 class="projects__title">Portfolio website</h3>
                  <a href="#" class="projects__button button button__small">
                  <i class="ri-link"></i>
                  </a>
                </div>
              </div>
            </article>
            <article class="projects__card">
              <img src="assets/img/project3.jpg" alt="Projects image" class="projects__img">
              <div class="projects__modal">
                <div>
                  <span class="projects__subtitle">Movil</span>
                  <h3 class="projects__title">Fast food app</h3>
                  <a href="#" class="projects__button button button__small">
                  <i class="ri-link"></i>
                  </a>
                </div>
              </div>
            </article>
            <article class="projects__card">
              <img src="assets/img/project4.jpg" alt="Projects image" class="projects__img">
              <div class="projects__modal">
                <div>
                  <span class="projects__subtitle">Movil</span>
                  <h3 class="projects__title">Travel app</h3>
                  <a href="#" class="projects__button button button__small">
                  <i class="ri-link"></i>
                  </a>
                </div>
              </div>
            </article>
            <article class="projects__card">
              <img src="assets/img/project5.jpg" alt="Projects image" class="projects__img">
              <div class="projects__modal">
                <div>
                  <span class="projects__subtitle">Design</span>
                  <h3 class="projects__title">Music app design</h3>
                  <a href="#" class="projects__button button button__small">
                  <i class="ri-link"></i>
                  </a>
                </div>
              </div>
            </article>
          </div>
          <!--=============== SKILLS ===============-->
          <div class="skills__content grid" data-content id="skills">
            <div class="skills__area">
              <h3 class="skills__title">
                Frontend developer
              </h3>
              <div class="skills__box">
                <div class="skills__group">
                  <div class="skills__data">
                    <i class="ri-checkbox-circle-line"></i>
                    <div>
                      <h3 class="skills__name">HTML</h3>
                      <span class="skills__level">Basic</span>
                    </div>
                  </div>
                  <div class="skills__data">
                    <i class="ri-checkbox-circle-line"></i>
                    <div>
                      <h3 class="skills__name">CSS</h3>
                      <span class="skills__level">Advanced</span>
                    </div>
                  </div>
                  <div class="skills__data">
                    <i class="ri-checkbox-circle-line"></i>
                    <div>
                      <h3 class="skills__name">JavaScript</h3>
                      <span class="skills__level">Intermediate</span>
                    </div>
                  </div>
                </div>
                <div class="skills__group">
                  <div class="skills__data">
                    <i class="ri-checkbox-circle-line"></i>
                    <div>
                      <h3 class="skills__name">React</h3>
                      <span class="skills__level">Intermediate</span>
                    </div>
                  </div>
                  <div class="skills__data">
                    <i class="ri-checkbox-circle-line"></i>
                    <div>
                      <h3 class="skills__name">Bootstrap</h3>
                      <span class="skills__level">Intermediate</span>
                    </div>
                  </div>
                  <div class="skills__data">
                    <i class="ri-checkbox-circle-line"></i>
                    <div>
                      <h3 class="skills__name">Git</h3>
                      <span class="skills__level">Intermediate</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="skills__area">
              <h3 class="skills__title">
                Backend developer
              </h3>
              <div class="skills__box">
                <div class="skills__group">
                  <div class="skills__data">
                    <i class="ri-checkbox-circle-line"></i>
                    <div>
                      <h3 class="skills__name">PHP</h3>
                      <span class="skills__level">Intermediate</span>
                    </div>
                  </div>
                  <div class="skills__data">
                    <i class="ri-checkbox-circle-line"></i>
                    <div>
                      <h3 class="skills__name">MySQL</h3>
                      <span class="skills__level">Advance</span>
                    </div>
                  </div>
                  <div class="skills__data">
                    <i class="ri-checkbox-circle-line"></i>
                    <div>
                      <h3 class="skills__name">Firebase</h3>
                      <span class="skills__level">Intermediate</span>
                    </div>
                  </div>
                </div>
                <div class="skills__group">
                  <div class="skills__data">
                    <i class="ri-checkbox-circle-line"></i>
                    <div>
                      <h3 class="skills__name">Python</h3>
                      <span class="skills__level">Basic</span>
                    </div>
                  </div>
                  <div class="skills__data">
                    <i class="ri-checkbox-circle-line"></i>
                    <div>
                      <h3 class="skills__name">Node Js</h3>
                      <span class="skills__level">Advance</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
    <!--=============== FOOTER ===============-->
    <footer class="footer container">
      <span class="footer__copy">
      &#169; All rigths reserved
      </span>
    </footer>
    <!--=============== SCROLLREVEAL ===============-->
    <script src="assets/js/scrollreveal.min.js"></script>
    <!--=============== MAIN JS ===============-->
    <script src="assets/js/main.js"></script>