Portfolio-Hero-Section

<section class="hero-section">

  <!-- Animated dots background -->
  <canvas id="waveCanvas"></canvas>


  <!-- HERO SLIDER -->
  <div class="hero-slider">


    <!-- =========================
         SLIDE 1
    ========================== -->

    <div class="hero-slide active">

      <div class="slide-number">
        01 / 03
      </div>

      <div class="hero-content">

        <p class="hero-small-text">
          KHUSHI NATH / FULL STACK DEVELOPER
        </p>

        <h1>
          CREATIVE
          <span>DEVELOPER</span>
        </h1>

        <p class="hero-description">
          I build modern, responsive and user-friendly
          digital experiences with clean and scalable code.
        </p>

        <a href="#projects" class="hero-btn">
          EXPLORE MY WORK
          <span>↓</span>
        </a>

      </div>

    </div>


    <!-- =========================
         SLIDE 2
    ========================== -->

    <div class="hero-slide">

      <div class="slide-number">
        02 / 03
      </div>

      <div class="hero-content">

        <p class="hero-small-text">
          FRONTEND / DEVELOPMENT
        </p>

        <h1>
          INTERFACE
          <span>CREATOR</span>
        </h1>

        <p class="hero-description">
          I create clean, responsive and engaging interfaces
          using modern frontend technologies.
        </p>

        <a href="#skills" class="hero-btn">
          VIEW MY SKILLS
          <span>↓</span>
        </a>

      </div>

    </div>


    <!-- =========================
         SLIDE 3
    ========================== -->

    <div class="hero-slide">

      <div class="slide-number">
        03 / 03
      </div>

      <div class="hero-content">

        <p class="hero-small-text">
          CODE / CREATIVITY / PASSION
        </p>

        <h1>
          BUILDING
          <span>THE FUTURE</span>
        </h1>

        <p class="hero-description">
          Turning ideas into modern digital products
          with creativity, technology and clean code.
        </p>

        <a href="#contact" class="hero-btn">
          LET'S CONNECT
          <span>↗</span>
        </a>

      </div>

    </div>


    <!-- =========================
         ARROWS
    ========================== -->

    <button
      class="hero-arrow hero-prev"
      id="prevBtn"
      aria-label="Previous slide"
    >
      ←
    </button>

    <button
      class="hero-arrow hero-next"
      id="nextBtn"
      aria-label="Next slide"
    >
      →
    </button>


    <!-- =========================
         DOTS
    ========================== -->

    <div class="hero-dots">

      <button
        class="hero-dot active"
        data-slide="0"
        aria-label="Slide 1"
      ></button>

      <button
        class="hero-dot"
        data-slide="1"
        aria-label="Slide 2"
      ></button>

      <button
        class="hero-dot"
        data-slide="2"
        aria-label="Slide 3"
      ></button>

    </div>


    <!-- =========================
         PROGRESS BAR
    ========================== -->

    <div class="hero-progress">

      <div
        class="hero-progress-bar"
        id="progressBar"
      ></div>

    </div>

  </div>

</section>