Interactive Portfolio About Section with 3D Book

<section class="md:pt-40 pt-32 pb-32 relative" id="about-me">
  <div class="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
    <div class="absolute -left-40 top-10 h-[70vh] w-[60vh] rounded-full blur-3xl opacity-25"
      style="background: radial-gradient(closest-side, rgba(255,255,255,0.15), rgba(0,0,0,0));"></div>
  </div>

  <div class="max-w-7xl mr-auto ml-auto pr-6 pl-6"
    style="mask-image: linear-gradient(90deg, transparent, black 45%, black 70%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 45%, black 70%, transparent);">
    <div class="flex items-center justify-center gap-4 animate-in">
      <span class="h-px w-14 bg-white/10"></span>
      <span class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-neutral-100">

                    About Me
                  </span>
      <span class="h-px w-14 bg-white/10"></span>
    </div>

    <div class="grid md:grid-cols-2 gap-10 items-center mt-10">
      <!-- 3D Image Card (opens like a book) -->
      <div class="flex justify-center mt-10">
        <div class="book relative w-[340px] sm:w-[420px] h-[420px] sm:h-[520px] rounded-[1.5rem]">

          <!-- Inner page (revealed when opened) -->
          <div class="inner absolute inset-0 rounded-[1.25rem] overflow-hidden shadow-2xl">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/60042a1e-d8b3-429b-9821-1b52cfad7c95_3840w.webp" alt="Working at computer" class="w-full h-full object-cover">

            <!-- bottom readability gradient -->
            <span class="pointer-events-none absolute bottom-0 left-0 right-0 h-40" style="background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));"></span>

            <!-- Staggered fade-in text -->
            <div class="book-desc absolute bottom-6 left-7 right-6 text-white pl-12">
              <h3 class="desc-h3 text-lg font-semibold mb-1">I enjoy bringing ideas to life.</h3>
              <p class="desc-p text-sm text-neutral-200/95 leading-relaxed">
                Passionate about design, I spend hours refining layouts, exploring concepts,
                and making every detail feel alive.
              </p>
            </div>

            <span class="pointer-events-none absolute inset-0 ring-1 ring-inset ring-white/10 rounded-[1.25rem]"></span>
          </div>

          <!-- Cover (front image that opens) -->
          <div class="cover absolute inset-0 rounded-[1.25rem] overflow-hidden shadow-2xl origin-left">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a3b230be-661c-4e3a-a05b-c294a52ac5f9_1600w.jpg" alt="Primary cover image" class="w-full h-full object-cover transition-[filter,transform] duration-700 ease-out">

            <!-- Blue tint on hover -->
            <div
              class="tint pointer-events-none absolute inset-0 bg-blue-500/0 transition-opacity duration-700 ease-out">
            </div>

            <!-- Hover hint (front) -->
            <div
              class="cover-note absolute bottom-5 left-5 right-6 flex items-center gap-2 pl-4 pr-3 py-1.5 text-[13px] text-white/95 bg-black/35 backdrop-blur-sm border border-white/10 rounded-full shadow-lg pointer-events-none">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" class="opacity-90">
                <path d="M8 12l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" class=""></path>
                <path d="M12 4v12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class=""></path>
              </svg>
              <span>Hover to open</span>
            </div>

            <span class="pointer-events-none absolute inset-0 ring-1 ring-inset ring-white/12 rounded-[1.25rem]"></span>
          </div>
        </div>
      </div>

      <style>
        /* 3D scene */
        .book {
          perspective: 2000px;
          transform-style: preserve-3d;
        }

        /* front cover behavior */
        .cover {
          transition: transform .7s ease;
        }

        .book:hover .cover {
          transform: rotateY(-78deg);
        }

        /* blue color shift on the cover image */
        .book:hover .cover img {
          filter: hue-rotate(195deg) saturate(140%) brightness(110%);
          transform: scale(1.02);
        }

        .book:hover .cover .tint {
          background-color: rgba(59, 130, 246, 0.18);
        }

        /* subtle depth to the inner page when revealed */
        .inner {
          transform: translateZ(-1px);
        }

        /* Front hint note: fade/slide out when opening */
        .cover-note {
          opacity: .95;
          transform: translateY(6px);
          transition: opacity .3s ease, transform .3s ease;
        }

        .book:hover .cover-note {
          opacity: 0;
          transform: translateY(0) translateX(-8px);
        }

        /* Staggered sequence for inner text */
        .book-desc {
          pointer-events: none;
        }

        .desc-h3,
        .desc-p {
          opacity: 0;
          transform: translateY(6px);
        }

        .book:hover .desc-h3 {
          opacity: 1;
          transform: translateY(0);
          transition: opacity .35s ease .20s, transform .35s ease .20s;
        }

        .book:hover .desc-p {
          opacity: 1;
          transform: translateY(0);
          transition: opacity .45s ease .38s, transform .45s ease .38s;
        }
      </style>
      <!-- Right: Content -->
      <div class="relative">
        <h2 class="text-4xl sm:text-5xl tracking-tight font-semibold text-white animate-in" data-delay="100">
          Designing with <span class="italic font-instrument-serif font-medium text-neutral-300">purpose</span>
        </h2>
        <p class="mt-4 text-neutral-300/90 text-base leading-relaxed max-w-xl animate-in" data-delay="200">
          I'm a product designer passionate about creating meaningful digital experiences. My journey began with graphic
          design, evolved through teaching at DesignCode, and now focuses on building products that solve real problems.
        </p>
        <p class="mt-4 text-neutral-300/90 text-base leading-relaxed max-w-xl animate-in" data-delay="300">
          When I'm not designing, you'll find me experimenting with new design tools, sharing knowledge with the design
          community, or exploring how emerging technologies can enhance user experiences.
        </p>

        <div class="mt-6 h-px w-28 bg-white/10 animate-in" data-delay="400"></div>
        <div class="mt-6 grid grid-cols-2 gap-6 animate-in" data-delay="500">
          <div class="rounded-xl border border-white/10 bg-white/5 px-4 py-3">
            <div class="text-2xl font-semibold text-white tracking-tight">50k+</div>
            <div class="text-xs text-neutral-400">students taught</div>
          </div>
          <div class="rounded-xl border border-white/10 bg-white/5 px-4 py-3">
            <div class="text-2xl font-semibold text-white tracking-tight">100+</div>
            <div class="text-xs text-neutral-400">projects delivered</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Testimonials -->
    <div class="mt-16 overflow-hidden">
      <div class="flex gap-6 animate-scroll-horizontal">

        <!-- 1 -->
        <article class="t-card">
          <div class="flex items-center justify-between">
            <span class="text-sm text-neutral-300">@DesignNewbie</span>
            <div class="flex items-center gap-0.5 text-yellow-400">
              <!-- stars -->
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                  class=""></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                  class=""></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                  class=""></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                  class=""></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                  class=""></path>
              </svg>
            </div>
          </div>
          <blockquote class="mt-4 text-neutral-200 leading-relaxed max-w-[52ch]">
            "Amazing design consulting session! Got actionable insights that improved our product’s user experience
            immediately. Highly recommend for strategic design guidance."
          </blockquote>
        </article>

        <!-- 2 -->
        <article class="t-card">
          <div class="flex items-center justify-between">
            <span class="text-sm text-neutral-300">@StudentSuccess</span>
            <div class="flex items-center gap-0.5 text-yellow-400">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                  class=""></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                  class=""></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                  class=""></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                  class=""></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                  class=""></path>
              </svg>
            </div>
          </div>
          <blockquote class="mt-4 text-neutral-200 leading-relaxed max-w-[52ch]">
            "The UI/UX course completely transformed my career. Clear explanations, practical projects, and expert
            guidance
            helped me land my dream job as a product designer."
          </blockquote>
        </article>

        <!-- 3 (new) -->
        <article class="t-card">
          <div class="flex items-center justify-between">
            <span class="text-sm text-neutral-300">@CreativeMind</span>
            <div class="flex items-center gap-0.5 text-yellow-400">
              <!-- stars -->
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                  class=""></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                  class=""></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                  class=""></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                  class=""></path>
              </svg>
            </div>
          </div>
          <blockquote class="mt-4 text-neutral-200 leading-relaxed max-w-[52ch]">
            "Working with this team was a great experience! The visual direction and attention to micro-interactions
            elevated our brand far beyond expectations."
          </blockquote>
        </article>

        <!-- 4 (new) -->
        <article class="t-card">
          <div class="flex items-center justify-between">
            <span class="text-sm text-neutral-300">@UXExplorer</span>
            <div class="flex items-center gap-0.5 text-yellow-400">
              <!-- stars -->
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                  class=""></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                  class=""></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                  class=""></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                  class=""></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                class="w-4 h-4 opacity-60">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                  class=""></path>
              </svg>
            </div>
          </div>
          <blockquote class="mt-4 text-neutral-200 leading-relaxed max-w-[52ch]">
            "Loved the structure and flow of the lessons. The pace felt natural, and each topic built on the previous
            one
            perfectly. Worth every minute."
          </blockquote>
        </article>

        <!-- 5 (copy of 1 for seamless loop) -->
        <article class="t-card">
          <div class="flex items-center justify-between">
            <span class="text-sm text-neutral-300">@DesignNewbie</span>
            <div class="flex items-center gap-0.5 text-yellow-400">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                  class=""></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                  class=""></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                  class=""></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                  class=""></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
                  class=""></path>
              </svg>
            </div>
          </div>
          <blockquote class="mt-4 text-neutral-200 leading-relaxed max-w-[52ch]">
            "Amazing design consulting session! Got actionable insights that improved our product’s user experience
            immediately. Highly recommend for strategic design guidance."
          </blockquote>
        </article>

      </div>
    </div>

    <style>
      .t-card {
        width: clamp(280px, 60vw, 520px);
        flex: none;
        border-radius: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.05);
        padding: 1.5rem;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
      }

      @keyframes scroll-horizontal {
        0% {
          transform: translateX(0);
        }

        100% {
          transform: translateX(-50%);
        }
      }

      .animate-scroll-horizontal {
        animation: scroll-horizontal 30s linear infinite;
      }

      .animate-scroll-horizontal:hover {
        animation-play-state: paused;
      }
    </style>

    <div class="absolute bottom-0 left-0 right-0 pointer-events-none">
      <div class="absolute bottom-0 left-1/2 -translate-x-1/2 opacity-25 w-[60%] h-8"
        style="background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.2) 30%, transparent 70%);">
      </div>
      <div class="h-px bg-white/10 w-full"></div>
    </div>
  </div>
</section>