interstellar_website/src/scripts/portfolioCard.js

class PortfolioCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: "open" });

    const icon = this.getAttribute("icon") || "fas fa-code";
    const title = this.getAttribute("title") || "Project Title";
    const desc = this.getAttribute("desc") || "Project description goes here.";
    const tags = (this.getAttribute("tags") || "").split(",");
    const link = this.getAttribute("link") || "#";
    const collaboration = this.getAttribute("collaboration") || "";

    shadow.innerHTML = `
      <!-- Font Awesome inside Shadow DOM -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
      <!-- Use global styles.css from index.html -->
      <link rel="stylesheet" href="src/styles/styles.css">

      <style>
        /* Collaboration badge styling */
        .collaboration-badge {
          display: inline-flex;
          align-items: center;
          gap: 0.4rem;
          background: linear-gradient(135deg, #3b82f6, #2563eb);
          color: white;
          padding: 0.3rem 0.8rem;
          border-radius: 20px;
          font-size: 0.75rem;
          margin-top: 0.5rem;
          margin-bottom: 1rem;
          animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
          0% {
            box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
          }
          70% {
            box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
          }
          100% {
            box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
          }
        }
        
        /* Enhanced card animations */
        .portfolio-item {
          opacity: 0;
          transform: translateY(20px);
          animation: fadeInUp 0.6s ease forwards;
          display: flex;
          flex-direction: column;
          height: 100%;
        }
        
        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        /* Portfolio title with icon */
        .portfolio-title {
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
        
        .portfolio-content {
          display: flex;
          flex-direction: column;
          flex: 1;
          padding: 1.5rem;
        }
        
        .portfolio-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5rem;
          margin-bottom: 1.5rem;
        }
        
        /* Full-width Enhanced Button Styles */
        .portfolio-btn-container {
          margin-top: auto;
          padding: 0 1.5rem 1.5rem;
        }
        
        .portfolio-btn {
          width: 100%;
          position: relative;
          overflow: hidden;
          z-index: 1;
          padding: 1rem 1.8rem;
          border-radius: 8px;
          font-weight: 600;
          letter-spacing: 0.5px;
          text-transform: uppercase;
          font-size: 0.9rem;
          transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
          border: 2px solid transparent;
          background: linear-gradient(135deg, var(--purple), var(--purple-dark));
          color: white;
          box-shadow: 0 4px 15px var(--shadow-purple);
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 0.8rem;
          text-decoration: none;
          text-align: center;
        }
        
        .portfolio-btn::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, var(--purple-dark), var(--purple-muted));
          z-index: -1;
          transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
          transform: scaleX(0);
          transform-origin: right;
        }
        
        .portfolio-btn:hover::before {
          transform: scaleX(1);
          transform-origin: left;
        }
        
        .portfolio-btn:hover {
          transform: translateY(-3px);
          box-shadow: 0 8px 25px rgba(168, 85, 247, 0.4);
          border-color: var(--purple-light);
        }
        
        .portfolio-btn:active {
          transform: translateY(0);
          box-shadow: 0 4px 15px var(--shadow-purple);
        }
        
        .portfolio-btn i {
          font-size: 1rem;
          transition: transform 0.3s ease;
        }
        
        .portfolio-btn:hover i {
          transform: translateX(4px);
        }
        
        .portfolio-btn::after {
          content: '';
          position: absolute;
          top: -50%;
          left: -50%;
          width: 200%;
          height: 200%;
          background: linear-gradient(
            to bottom right,
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0.1) 20%,
            rgba(255, 255, 255, 0) 50%,
            rgba(255, 255, 255, 0) 100%
          );
          transform: rotate(30deg) translateY(-150%);
          transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        
        .portfolio-btn:hover::after {
          transform: rotate(30deg) translateY(150%);
        }
        
        .portfolio-btn:focus {
          outline: 2px solid var(--purple-light);
          outline-offset: 2px;
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
          .portfolio-btn {
            padding: 0.9rem 1.5rem;
            font-size: 0.85rem;
          }
        }
      </style>

      <div class="portfolio-item">
        <div class="portfolio-img">
          <i class="${icon}"></i>
        </div>
        <div class="portfolio-content">
          <h3 class="portfolio-title">
            <i class="${icon}"></i> ${title}
          </h3>
          <p class="portfolio-desc">${desc}</p>
          ${
            collaboration
              ? `
            <div class="collaboration-badge">
              <i class="fas fa-users"></i> ${collaboration}
            </div>
          `
              : ""
          }
          <div class="portfolio-tags">
            ${tags
              .map((tag) => `<span class="tag">${tag.trim()}</span>`)
              .join("")}
          </div>
        </div>
        <div class="portfolio-btn-container">
          <a href="${link}" target="_blank" class="portfolio-btn">
            <i class="fas fa-arrow-right"></i> Explore Project
          </a>
        </div>
      </div>
    `;
  }
}

customElements.define("portfolio-card", PortfolioCard);