Portfolio Website Home Page

<div class="container">
  <!-- Hero Banner Section -->
  <section class="py-5 overflow-hidden">
    <div id="heroPortfolioCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
      <!-- Carousel Indicators -->
      <div class="carousel-indicators mb-0">
        <button type="button" data-bs-target="#heroPortfolioCarousel" data-bs-slide-to="0" class="active bg-primary"></button>
        <button type="button" data-bs-target="#heroPortfolioCarousel" data-bs-slide-to="1" class="bg-primary"></button>
        <button type="button" data-bs-target="#heroPortfolioCarousel" data-bs-slide-to="2" class="bg-primary"></button>
      </div>

      <div class="carousel-inner rounded-5 shadow-lg bg-white" style="min-height: 500px;">
        <!-- Slide 1: Welcome -->
        <div class="carousel-item active p-4 p-md-5" data-bs-interval="5000">
          <div class="row align-items-center g-5 animation-container">
            <div class="col-lg-6 order-2 order-lg-1 text-center text-lg-start">
              <span class="badge bg-primary-subtle text-primary px-3 py-2 rounded-pill mb-3 fw-bold">Available for Hire</span>
              <h1 class="display-3 fw-black mb-2">I'm <span class="text-primary">Alex Rivera</span></h1>
              <h2 class="h3 fw-light text-secondary mb-4">Senior Full-Stack Developer</h2>
              <p class="lead text-muted mb-5">Crafting high-performance web applications and intuitive user experiences with over 8 years of industry expertise.</p>
              <div class="d-flex flex-column flex-md-row gap-3 justify-content-center justify-content-lg-start">
                <a href="#contact" class="btn btn-primary btn-lg px-4 py-3 rounded-pill shadow">
                  <i class="bi bi-send-fill me-2"></i> Hire Me Now
                </a>
                <a href="#" class="btn btn-outline-dark btn-lg px-4 py-3 rounded-pill">
                  <i class="bi bi-download me-2"></i> Download CV
                </a>
              </div>
            </div>
            <div class="col-lg-6 order-1 order-lg-2 text-center position-relative">
              <div class="profile-blob-bg mx-auto">
                <img src="https://i.pravatar.cc/500?u=a042581f4e29026704d" alt="Alex Rivera" class="img-fluid rounded-circle border border-5 border-white shadow-lg profile-img animate-float">
              </div>
            </div>
          </div>
        </div>

        <!-- Slide 2: Tech Stack -->
        <div class="carousel-item p-4 p-md-5" data-bs-interval="5000">
          <div class="row align-items-center g-5">
            <div class="col-lg-6 order-2 order-lg-1 text-center text-lg-start">
              <h2 class="display-4 fw-bold mb-4">Modern Stack <br><span class="text-success">Clean Code</span></h2>
              <p class="lead text-muted mb-4">Specializing in React, Node.js, and Cloud Architecture to build scalable solutions for modern businesses.</p>
              <div class="row g-3 mb-5">
                <div class="col-4 text-center">
                  <i class="bi bi-patch-check-fill text-success fs-1"></i>
                  <p class="small fw-bold mt-2">Scale</p>
                </div>
                <div class="col-4 text-center">
                  <i class="bi bi-speedometer2 text-info fs-1"></i>
                  <p class="small fw-bold mt-2">Speed</p>
                </div>
                <div class="col-4 text-center">
                  <i class="bi bi-shield-lock-fill text-warning fs-1"></i>
                  <p class="small fw-bold mt-2">Security</p>
                </div>
              </div>
              <button class="btn btn-dark btn-lg px-5 rounded-pill shadow-sm">View Portfolio</button>
            </div>
            <div class="col-lg-6 order-1 order-lg-2 text-center">
              <div class="p-5 bg-light rounded-circle d-inline-block shadow-inner">
                <i class="bi bi-laptop text-primary display-1 animate-pulse"></i>
              </div>
            </div>
          </div>
        </div>

        <!-- Slide 3: Collaborative -->
        <div class="carousel-item p-4 p-md-5" data-bs-interval="5000">
          <div class="row align-items-center g-5">
            <div class="col-lg-6 order-2 order-lg-1 text-center text-lg-start">
              <h2 class="display-4 fw-bold mb-4">Focus on <br><span class="text-info">UI/UX Design</span></h2>
              <p class="lead text-muted mb-4">I believe that every line of code should contribute to a seamless and beautiful user journey.</p>
              <div class="d-flex gap-3 justify-content-center justify-content-lg-start flex-wrap">
                <span class="badge rounded-pill bg-light text-dark border p-3 fs-6">#MobileFirst</span>
                <span class="badge rounded-pill bg-light text-dark border p-3 fs-6">#Accessibility</span>
                <span class="badge rounded-pill bg-light text-dark border p-3 fs-6">#UserTesting</span>
              </div>
              <div class="mt-5">
                <a href="#" class="btn btn-info text-white btn-lg px-5 rounded-pill shadow-sm fw-bold">My Process</a>
              </div>
            </div>
            <div class="col-lg-6 order-1 order-lg-2 text-center">
              <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&q=80&w=600" alt="Work Process" class="img-fluid rounded-4 shadow rotate-img">
            </div>
          </div>
        </div>
      </div>

      <!-- Custom Controls -->
      <button class="carousel-control-prev w-auto ps-3" type="button" data-bs-target="#heroPortfolioCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon bg-dark rounded-circle p-3" aria-hidden="true"></span>
      </button>
      <button class="carousel-control-next w-auto pe-3" type="button" data-bs-target="#heroPortfolioCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon bg-dark rounded-circle p-3" aria-hidden="true"></span>
      </button>
    </div>
  </section>

  <!-- Style for animations & decorative elements -->
  <style>
    .profile-img {
      max-width: 380px;
      z-index: 2;
    }

    .profile-blob-bg {
      background: linear-gradient(45deg, #0d6efd22, #0dcaf022);
      border-radius: 62% 38% 52% 48% / 51% 43% 57% 49%;
      padding: 20px;
      animation: blobAnimate 8s ease-in-out infinite;
    }

    .animate-float {
      animation: float 6s ease-in-out infinite;
    }

    .animate-pulse {
      animation: pulse 3s infinite;
    }

    .rotate-img {
      transform: rotate(3deg);
      transition: transform 0.5s ease;
    }

    .rotate-img:hover {
      transform: rotate(0deg);
    }

    @keyframes blobAnimate {
      0% {
        border-radius: 62% 38% 52% 48% / 51% 43% 57% 49%;
      }

      50% {
        border-radius: 40% 60% 35% 65% / 45% 55% 45% 55%;
      }

      100% {
        border-radius: 62% 38% 52% 48% / 51% 43% 57% 49%;
      }
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-20px);
      }
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
        opacity: 1;
      }

      50% {
        transform: scale(1.1);
        opacity: 0.8;
      }

      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    .fw-black {
      font-weight: 900;
    }

    .carousel-item {
      transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
    }

    @media (max-width: 768px) {
      .profile-img {
        max-width: 250px;
      }

      .display-3 {
        font-size: 2.5rem;
      }
    }

  </style>
</div>