ieeeucsd-org/src/components/projects/ProjectSection.astro

---
import annualProjects from "../../data/annualProjects.json";
import { FaGear } from "react-icons/fa6";
import { GoArrowDownRight } from "react-icons/go";
import { IoIosArrowDroprightCircle } from "react-icons/io";
import { Image } from "astro:assets";
---

<div
  class="flex flex-col md:flex-row md:gap-[1.5vw] md:h-[30vw] w-full md:w-auto mt-[20%] md:mt-0 md:ml-0"
>
  {
    Object.entries(annualProjects).map(([title, project], index) => (
      <a
        href={project.url || "#"}
        class={`project-card group relative flex-1 rounded-[1.5vw] overflow-hidden transition-all duration-500 ease-in-out md:hover:flex-[2] cursor-pointer ${index === 0 ? "expanded" : ""}`}
        data-project={index + 1}
        target={title === "Supercomputing" ? "_blank" : "_self"}
      >
        <div class="skeleton absolute inset-0 rounded-[1.5vw] z-0" />
        <Image
          src={project.image}
          alt={`${title} Project`}
          width={668}
          height={990}
          class="opacity-70 w-full md:h-full h-[30vw] object-cover rounded-[1.5vw] aspect-[2/3] transition-transform duration-500 ease-in-out md:group-hover:scale-110 my-[2vw] md:my-0"
        />
        <div class="absolute flex items-end bottom-0 left-0 px-[5%] pb-[5%] md:pt-[17%] bg-gradient-to-b from-transparent to-black via-black rounded-b-[1.5vw] text-white z-10 w-full transition-transform duration-300 md:[.expanded_&]:pb-[5%]">
          <div class="w-full">
            <p class="py-[1.5%] px-[8%] w-fit border-[0.1vw] border-white rounded-full text-nowrap md:text-[1.2vw] text-[2vw] font-light mb-[5%]">
              {title}
            </p>
            <p class="text-[2vw] md:text-[1.3vw] md:hidden md:[.expanded_&]:contents transition-all duration-300 overflow-hidden">
              {project.description}
            </p>
            <div class="w-full flex justify-end md:invisible visible md:[.expanded_&]:visible h-0 md:[.expanded_&]:h-auto">
              <div class="flex items-center md:text-[1.3vw] text-[2vw] md:[.expanded_&]:mt-[5%]">
                more details
                <IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.4vw]" />
              </div>
            </div>
          </div>
          <GoArrowDownRight className="text-[3.2vw] [.expanded_&]:text-[0px] pt-[2%]" />
        </div>

        <div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black md:text-[2vw] text-[3vw] absolute top-[3%] right-[5%]">
          <FaGear
            data-inview
            className="in-view:rotate-[500deg] duration-[3000ms] group-hover:rotate-[750deg]"
          />
        </div>
      </a>
    ))
  }
</div>

<style>
  .project-card {
    background-size: cover;
    background-position: center;
  }

  .project-card img {
    transition: transform 0.3s ease-in-out;
  }

  /* iOS-specific fixes */
  @supports (-webkit-touch-callout: none) {
    .project-card {
      height: auto;
      min-height: 30vw;
    }

    .project-card img {
      height: auto;
      min-height: 30vw;
    }
  }

  @media (min-width: 768px) {
    .project-card.expanded {
      flex: 2;
    }

    .project-card.expanded img {
      transform: scale(1.1);
    }

    .project-card.expanded p {
      opacity: 1;
    }
  }

  /* Fix for iOS Safari and mobile devices */
  @media screen and (max-width: 767px) {
    .project-card {
      width: 100%;
      margin-bottom: 5vw;
      height: auto;
    }

    .project-card img {
      height: 60vw;
      object-fit: cover;
    }
  }
</style>

<script>
  function initializeProjectCards() {
    const projectCards = document.querySelectorAll(".project-card");
    const STORAGE_KEY = "lastExpandedCardIndex";

    // Function to remove expanded class from all cards
    function removeExpandedFromAll() {
      projectCards.forEach((card) => {
        card.classList.remove("expanded");
      });
    }

    // Function to expand a card by index
    function expandCard(index: number) {
      if (window.innerWidth >= 768) {
        removeExpandedFromAll();
        projectCards[index]?.classList.add("expanded");
        localStorage.setItem(STORAGE_KEY, index.toString());
      }
    }

    // Get the last expanded card index from localStorage
    // Prevents bug where the expanded card breaks upon page reload
    const lastExpandedIndex = parseInt(
      localStorage.getItem(STORAGE_KEY) || "0",
    );
    expandCard(lastExpandedIndex);

    // Add hover listeners to each card
    projectCards.forEach((card, index) => {
      card.addEventListener("mouseenter", () => {
        expandCard(index);
      });
    });

    // Handle window resize
    window.addEventListener("resize", () => {
      const currentIndex = parseInt(localStorage.getItem(STORAGE_KEY) || "0");
      expandCard(currentIndex);
    });
  }

  initializeProjectCards();

  document.addEventListener("astro:page-load", initializeProjectCards);

  // Image loading handler
  function handleImageLoading() {
    const projectImages = document.querySelectorAll(".project-card img");

    projectImages.forEach((img) => {
      // Type assertion to fix TypeScript errors
      const image = img as HTMLImageElement;

      // Ensure the image is fully loaded, even if it's already in cache
      if (image.complete) {
        image.style.opacity = "1";
        const skeleton = image.previousElementSibling as HTMLElement;
        if (skeleton && skeleton.classList.contains("skeleton")) {
          skeleton.style.display = "none";
        }
      } else {
        image.addEventListener("load", () => {
          image.style.opacity = "1";
          const skeleton = image.previousElementSibling as HTMLElement;
          if (skeleton && skeleton.classList.contains("skeleton")) {
            skeleton.style.display = "none";
          }
        });
      }
    });
  }

  // Ensure images are loaded after a short delay
  setTimeout(handleImageLoading, 100);
  handleImageLoading();
  document.addEventListener("astro:page-load", handleImageLoading);
</script>