Skills Component

<section id="skills" class="py-20 bg-black bg-opacity-50">
  <div class="container mx-auto px-6">
    <h2 class="text-3xl md:text-4xl font-bold mb-16 text-center">
      Mis <span class="red-accent">Habilidades</span>
    </h2>

<div class="flex justify-center mb-8">
  <button id="viewToggle"
    class="bg-gray-800 text-white px-4 py-2 rounded-md hover:bg-gray-700 transition">
    Cambiar a vista de barras
  </button>
</div>

<div class="skill-item text-center p-6 rounded-lg hover:bg-gray-900 transition cursor-pointer">
  <div class="relative w-32 h-32 mx-auto mb-4">
    <svg width="120" height="120" viewBox="0 0 120 120" class="mx-auto">
      <!-- Background circle -->
      <circle cx="60" cy="60" r="50" fill="none" stroke="#333" stroke-width="8" />
      
      <!-- Progress circle -->
      <circle class="skill-circle" cx="60" cy="60" r="50" 
        style="--dash-offset: 94.2;" data-value="70" />
      
      <!-- Percentage text -->
      <text x="60" y="65" text-anchor="middle" fill="#fff" font-size="20">70%</text>
    </svg>
  </div>
  <h3 class="text-xl font-semibold mb-2">HTML5 & CSS3</h3>
  <p class="text-gray-400">Maquetación web semántica y estilos avanzados</p>
</div>

.skill-circle {
  stroke: #E50914;
  stroke-width: 10;
  fill: transparent;
  stroke-dasharray: 314;           /* Total circle circumference (2πr) */
  stroke-dashoffset: 314;          /* Start hidden */
  animation: fillCircle 1.5s forwards;
}

@keyframes fillCircle {
  to {
    stroke-dashoffset: var(--dash-offset); /* Animate to percentage */
  }
}

<div id="barView" class="hidden grid grid-cols-1 gap-8 mt-10 max-w-4xl mx-auto">
  <!-- Single Skill Bar -->
  <div class="skill-bar-item p-6 rounded-lg hover:bg-gray-900 transition cursor-pointer">
    <h3 class="text-xl font-semibold mb-2">HTML5 & CSS3</h3>
    <p class="text-gray-400 mb-4">Maquetación web semántica y estilos avanzados</p>
    <div class="w-full bg-gray-800 rounded-full h-4">
      <div class="bg-red-accent h-4 rounded-full" style="width: 70%"></div>
    </div>
    <p class="text-right mt-2 text-gray-400">70%</p>
  </div>
</div>

const viewToggle = document.getElementById('viewToggle');
const circularView = document.getElementById('circularView');
const barView = document.getElementById('barView');

viewToggle?.addEventListener('click', () => {
  if (!circularView || !barView) return;
  
  const isCircularHidden = circularView.classList.contains('hidden');
  
  // Toggle visibility
  circularView.classList.toggle('hidden', !isCircularHidden);
  barView.classList.toggle('hidden', isCircularHidden);
  
  // Update button text
  viewToggle.textContent = isCircularHidden 
    ? 'Cambiar a vista de barras' 
    : 'Cambiar a vista circular';

  if (!isCircularHidden) {
    // Switching to bar view - dynamically generate bars
    barView.innerHTML = '';
    document.querySelectorAll('.skill-item').forEach(item => {
      const title = item.querySelector('h3')?.textContent || '';
      const desc = item.querySelector('p')?.textContent || '';
      const val = parseInt(item.querySelector('text')?.textContent || '0');
      
      barView.innerHTML += `
        <div class="skill-bar-item p-6 rounded-lg hover:bg-gray-900 transition cursor-pointer">
          <h3 class="text-xl font-semibold mb-2">${title}</h3>
          <p class="text-gray-400 mb-4">${desc}</p>
          <div class="w-full bg-gray-800 rounded-full h-4">
            <div class="bg-red-accent h-4 rounded-full" style="width: ${val}%"></div>
          </div>
          <p class="text-right mt-2 text-gray-400">${val}%</p>
        </div>`;
    });
  } else {
    // Switching to circular view - re-animate circles
    document.querySelectorAll('.skill-circle').forEach(circle => {
      const val = parseInt(circle.getAttribute('data-value'));
      const dash = 314 - (314 * val / 100);
      circle.style.setProperty('--dash-offset', dash);
    });
  }
});

.skill-circle {
  stroke: #3B82F6; /* Blue instead of red */
  stroke-width: 10;
  fill: transparent;
  stroke-dasharray: 314;
  stroke-dashoffset: 314;
  animation: fillCircle 1.5s forwards;
}

@keyframes fillCircle {
  to {
    stroke-dashoffset: var(--dash-offset);
  }
}

.skill-circle {
  animation: fillCircle 2.5s forwards; /* Slower: 2.5s instead of 1.5s */
}