Projects Component

Overview

The projects section displays portfolio work in a responsive grid of cards. Each card can expand to reveal additional details and action buttons for viewing live demos and source code.

HTML Structure

Section Container

index.html (lines 249-253)

<section id="projects" 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">Proyectos</span>
    </h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">

Single Project Card

index.html (lines 256-284)

<div class="bg-gray-900 rounded-xl overflow-hidden shadow-md hover:shadow-red-700 transition relative">
  <!-- Project Image -->
  <div class="h-48 bg-slate-800 flex items-center justify-center">
    <img src="img/redes.jpg" alt="Redes Sociales" class="h-full object-contain" />
  </div>
  
  <!-- Project Info -->
  <div class="p-6">
    <h3 class="text-xl font-semibold mb-2 text-white">Gestor de Redes Sociales</h3>
    <p class="text-gray-400 mb-4">
      Web interactiva para administrar múltiples redes sociales desde un solo panel.
      Ideal para creadores de contenido y pymes.
    </p>
    
    <!-- Toggle Button -->
    <button onclick="toggleDetails(this)"
      class="bg-red-accent hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm transition">
      Ver más
    </button>
    
    <!-- Expandable Details -->
    <div class="details-container max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
      <div class="mt-3 flex gap-2">
        <a href="https://nilverti.netlify.app/" target="_blank"
          class="block w-full bg-gray-800 text-white text-center py-2 rounded-md hover:bg-gray-700 transition">
          🌐 Ver Web
        </a>
        <a href="https://github.com/NilverTI/Redes-Sociales" target="_blank"
          class="block w-full bg-gray-800 text-white text-center py-2 rounded-md hover:bg-gray-700 transition">
          💻 Ver Código
        </a>
      </div>
    </div>
  </div>
</div>

Expandable Details Animation

CSS Transition

estilos.css (lines 123-130)

.details-container {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease-in-out;
}

.details-container.open {
  max-height: 1000px; /* Large enough to fit content */
}

JavaScript Toggle Function

main.js (lines 153-177)

function toggleDetails(button) {
  const container = button.nextElementSibling;
  const isOpen = container.classList.contains('open');

  // Close all other expanded cards
  document.querySelectorAll('.details-container').forEach(el => {
    el.classList.remove('open');
    el.style.maxHeight = null;
  });

  // Toggle current card
  if (!isOpen) {
    container.classList.add('open');
    container.style.maxHeight = container.scrollHeight + 'px';
  }
}

// Attach event listeners to all "Ver más" buttons
document.querySelectorAll('button[onclick="toggleDetails(this)"]').forEach(btn => {
  btn.addEventListener('click', function () {
    toggleDetails(this);
  });
});

The function automatically closes other expanded cards when opening a new one, keeping the interface clean and focused.

All Projects

Gestor de Redes Sociales
Flores Virtuales
Árbol de Navidad
Animación de Corazón
Web de CICSA

<div class="bg-gray-900 rounded-xl overflow-hidden shadow-md hover:shadow-red-700 transition relative">
  <div class="h-48 bg-slate-800 flex items-center justify-center">
    <img src="img/redes.jpg" alt="Redes Sociales" class="h-full object-contain" />
  </div>
  <div class="p-6">
    <h3 class="text-xl font-semibold mb-2 text-white">Gestor de Redes Sociales</h3>
    <p class="text-gray-400 mb-4">
      Web interactiva para administrar múltiples redes sociales desde un solo panel.
      Ideal para creadores de contenido y pymes.
    </p>
    <button onclick="toggleDetails(this)"
      class="bg-red-accent hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm transition">
      Ver más
    </button>
    <div class="details-container max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
      <div class="mt-3 flex gap-2">
        <a href="https://nilverti.netlify.app/" target="_blank"
          class="block w-full bg-gray-800 text-white text-center py-2 rounded-md hover:bg-gray-700 transition">
          🌐 Ver Web
        </a>
        <a href="https://github.com/NilverTI/Redes-Sociales" target="_blank"
          class="block w-full bg-gray-800 text-white text-center py-2 rounded-md hover:bg-gray-700 transition">
          💻 Ver Código
        </a>
      </div>
    </div>
  </div>
</div>

<div class="bg-gray-900 rounded-xl overflow-hidden shadow-md hover:shadow-red-700 transition relative">
  <div class="h-48 bg-slate-800 flex items-center justify-center">
    <img src="img/flores.jpg" alt="Flores Virtuales" class="h-full object-contain" />
  </div>
  <div class="p-6">
    <h3 class="text-xl font-semibold mb-2 text-white">Flores Virtuales</h3>
    <p class="text-gray-400 mb-4">
      Web para enviar flores animadas con efectos y mensajes personalizados
      para amigas, novias o seres queridos.
    </p>
    <button onclick="toggleDetails(this)"
      class="bg-red-accent hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm transition">
      Ver más
    </button>
    <div class="details-container max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
      <div class="mt-3 flex gap-2">
        <a href="https://web-flores.netlify.app/" target="_blank"
          class="block w-full bg-gray-800 text-white text-center py-2 rounded-md hover:bg-gray-700 transition">
          🌐 Ver Web
        </a>
        <a href="https://github.com/NilverTI/Web-Flores" target="_blank"
          class="block w-full bg-gray-800 text-white text-center py-2 rounded-md hover:bg-gray-700 transition">
          💻 Ver Código
        </a>
      </div>
    </div>
  </div>
</div>

<div class="bg-gray-900 rounded-xl overflow-hidden shadow-md hover:shadow-red-700 transition relative">
  <div class="h-48 bg-slate-800 flex items-center justify-center">
    <img src="img/arbol.jpg" alt="Árbol de Navidad" class="h-full object-contain" />
  </div>
  <div class="p-6">
    <h3 class="text-xl font-semibold mb-2 text-white">Árbol de Navidad</h3>
    <p class="text-gray-400 mb-4">
      Proyecto interactivo navideño con luces animadas, mensajes personalizados y ambientación
      cálida para compartir en fiestas.
    </p>
    <button onclick="toggleDetails(this)"
      class="bg-red-accent hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm transition">
      Ver más
    </button>
    <div class="details-container max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
      <div class="mt-3 flex gap-2">
        <a href="https://web-arbol-navidad.netlify.app/" target="_blank"
          class="flex-1 bg-gray-800 text-white text-center py-2 rounded-md hover:bg-gray-700 transition">
          🌐 Ver Web
        </a>
        <a href="https://github.com/NilverTI/Web-Arbol-Navidad" target="_blank"
          class="flex-1 bg-gray-800 text-white text-center py-2 rounded-md hover:bg-gray-700 transition">
          💻 Ver Código
        </a>
      </div>
    </div>
  </div>
</div>

<div class="bg-gray-900 rounded-xl overflow-hidden shadow-md hover:shadow-red-700 transition relative">
  <div class="h-48 bg-slate-800 flex items-center justify-center">
    <img src="img/corazon.jpg" alt="Animación de Corazón" class="h-full object-contain" />
  </div>
  <div class="p-6">
    <h3 class="text-xl font-semibold mb-2 text-white">Animación de corazón</h3>
    <p class="text-gray-400 mb-4">
      Hermosa animación de un corazón creada con HTML5 y JavaScript. 
      Este proyecto presenta una dinámica visual que simula un pulso
    </p>
    <button onclick="toggleDetails(this)"
      class="bg-red-accent hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm transition">
      Ver más
    </button>
    <div class="details-container max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
      <div class="mt-3 flex gap-2">
        <a href="https://corazonanimado.netlify.app/" target="_blank"
          class="block w-full bg-gray-800 text-white text-center py-2 rounded-md hover:bg-gray-700 transition">
          🌐 Ver Web
        </a>
        <a href="https://github.com/NilverTI/Web-Animacion-Corazon" target="_blank"
          class="block w-full bg-gray-800 text-white text-center py-2 rounded-md hover:bg-gray-700 transition">
          💻 Ver Código
        </a>
      </div>
    </div>
  </div>
</div>

<div class="bg-gray-900 rounded-xl overflow-hidden shadow-md hover:shadow-red-700 transition relative">
  <div class="h-48 bg-slate-800 flex items-center justify-center">
    <img src="img/cicsa.jpg" alt="Web CICSA" class="h-full object-contain" />
  </div>
  <div class="p-6">
    <h3 class="text-xl font-semibold mb-2 text-white">Web de Cicsa</h3>
    <p class="text-gray-400 mb-4">
      Sitio web oficial del Centro Médico CICSA, especializado en la realización 
      de exámenes médicos para licencias de conducir.
    </p>
    <button onclick="toggleDetails(this)"
      class="bg-red-accent hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm transition">
      Ver más
    </button>
    <div class="details-container max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
      <div class="mt-3 flex gap-2">
        <a href="https://cicsa.netlify.app/" target="_blank"
          class="block w-full bg-gray-800 text-white text-center py-2 rounded-md hover:bg-gray-700 transition">
          🌐 Ver Web
        </a>
        <a href="https://github.com/NilverTI/CICSA" target="_blank"
          class="block w-full bg-gray-800 text-white text-center py-2 rounded-md hover:bg-gray-700 transition">
          💻 Ver Código
        </a>
      </div>
    </div>
  </div>
</div>

Card Hover Effects

Shadow Glow on Hover

estilos.css (lines 45-54)

.project-card {
  transition: all 0.3s ease;
  background: rgba(15, 15, 15, 0.7);
  backdrop-filter: blur(10px);
}

.project-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(229, 9, 20, 0.2);
}

The card uses backdrop-filter: blur(10px) for a frosted glass effect. This may not be supported in older browsers.

Adding a New Project

Prepare Project Assets

Add project image to img/ folder
Prepare project title, description, demo URL, and GitHub URL

Add Project Card HTML

<div class="bg-gray-900 rounded-xl overflow-hidden shadow-md hover:shadow-red-700 transition relative">
  <div class="h-48 bg-slate-800 flex items-center justify-center">
    <img src="img/proyecto.jpg" alt="Your Project" class="h-full object-contain" />
  </div>
  <div class="p-6">
    <h3 class="text-xl font-semibold mb-2 text-white">Your Project Name</h3>
    <p class="text-gray-400 mb-4">
      Brief description of your project and its main features.
    </p>
    <button onclick="toggleDetails(this)"
      class="bg-red-accent hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm transition">
      Ver más
    </button>
    <div class="details-container max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
      <div class="mt-3 flex gap-2">
        <a href="https://your-demo-url.com" target="_blank"
          class="block w-full bg-gray-800 text-white text-center py-2 rounded-md hover:bg-gray-700 transition">
          🌐 Ver Web
        </a>
        <a href="https://github.com/yourusername/your-repo" target="_blank"
          class="block w-full bg-gray-800 text-white text-center py-2 rounded-md hover:bg-gray-700 transition">
          💻 Ver Código
        </a>
      </div>
    </div>
  </div>
</div>

Test Functionality

Click “Ver más” to ensure the expansion animation works correctly and links open in new tabs.

Customization Examples

Change Grid Layout

<!-- Change lg:grid-cols-3 to lg:grid-cols-2 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-10">

Add Project Tags

<div class="p-6">
  <h3 class="text-xl font-semibold mb-2 text-white">Project Name</h3>
  
  <!-- Add tags -->
  <div class="flex flex-wrap gap-2 mb-3">
    <span class="bg-red-accent text-white text-xs px-2 py-1 rounded">React</span>
    <span class="bg-gray-700 text-white text-xs px-2 py-1 rounded">Node.js</span>
    <span class="bg-blue-600 text-white text-xs px-2 py-1 rounded">TypeScript</span>
  </div>
  
  <p class="text-gray-400 mb-4">Project description...</p>
</div>

Change Card Background

<!-- Add gradient background -->
<div class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-xl overflow-hidden shadow-md hover:shadow-red-700 transition relative">

Modify Image Aspect Ratio

<!-- Taller image container -->
<div class="h-64 bg-slate-800 flex items-center justify-center">
  <img src="img/project.jpg" alt="Project" class="h-full object-contain" />
</div>

<!-- Square image container -->
<div class="aspect-square bg-slate-800 flex items-center justify-center">
  <img src="img/project.jpg" alt="Project" class="w-full h-full object-cover" />
</div>

Alternative: Always Visible Links

If you prefer to show project links without the expand/collapse behavior:

<div class="p-6">
  <h3 class="text-xl font-semibold mb-2 text-white">Project Name</h3>
  <p class="text-gray-400 mb-4">Project description...</p>
  
  <!-- Always visible links -->
  <div class="flex gap-2">
    <a href="https://demo-url.com" target="_blank"
      class="flex-1 bg-red-accent hover:bg-red-600 text-white text-center py-2 rounded-md transition">
      🌐 View Demo
    </a>
    <a href="https://github.com/user/repo" target="_blank"
      class="flex-1 bg-gray-800 hover:bg-gray-700 text-white text-center py-2 rounded-md transition">
      💻 Source Code
    </a>
  </div>
</div>

Responsive Behavior

Screen Size	Columns	Gap	Tailwind Classes
Mobile (< 768px)	1	2.5rem	`grid-cols-1 gap-10`
Tablet (≥ 768px)	2	2.5rem	`md:grid-cols-2 gap-10`
Desktop (≥ 1024px)	3	2.5rem	`lg:grid-cols-3 gap-10`

Image Optimization

For better performance, optimize project images:

Compress images to reduce file size (aim for < 200KB)
Use WebP format for modern browsers
Implement lazy loading for images below the fold

Lazy Loading Images

<img src="img/project.jpg" 
     alt="Project Name" 
     class="h-full object-contain" 
     loading="lazy" />

Responsive Images

<picture>
  <source srcset="img/project-mobile.webp" media="(max-width: 768px)" type="image/webp">
  <source srcset="img/project-desktop.webp" media="(min-width: 769px)" type="image/webp">
  <img src="img/project.jpg" alt="Project" class="h-full object-contain">
</picture>

Accessibility Improvements

Keyboard Navigation

Replace onclick attribute with proper event listeners for better accessibility:

document.querySelectorAll('.toggle-details-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    toggleDetails(this);
  });
  
  // Add keyboard support
  btn.addEventListener('keydown', function(e) {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      toggleDetails(this);
    }
  });
});

ARIA Attributes

Add ARIA attributes to improve screen reader support:

<button 
  aria-expanded="false" 
  aria-controls="project-details-1"
  class="bg-red-accent hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm transition">
  Ver más
</button>
<div id="project-details-1" 
     class="details-container max-h-0 overflow-hidden transition-all duration-500 ease-in-out"
     aria-hidden="true">
  <!-- Details content -->
</div>

Alt Text for Images

Ensure all project images have descriptive alt text:

<img src="img/redes.jpg" 
     alt="Screenshot of social media management dashboard showing multiple connected accounts" 
     class="h-full object-contain" />

Animation Timing

The expansion animation uses CSS transitions:

.details-container {
  transition: max-height 0.5s ease-in-out;
}

Adjust timing as needed:

Faster: 0.3s ease-in-out
Slower: 0.8s ease-in-out
Bounce effect: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55)

Troubleshooting

Cards not expanding

Check that JavaScript is loaded and the function is defined:

console.log(typeof toggleDetails); // Should be "function"

Ensure the details-container class exists on the expandable div.

Multiple cards expanding at once

The toggleDetails function should close all other cards first:

// Close all other cards
document.querySelectorAll('.details-container').forEach(el => {
  el.classList.remove('open');
  el.style.maxHeight = null;
});

Images not displaying

Verify image paths are correct and files exist:

// In browser console
fetch('img/project.jpg').then(r => console.log(r.status)); // Should be 200

Hover effects not working

Ensure Tailwind CSS is loaded and classes are correct. Check browser developer tools for CSS errors.

Complete Project Card Template

Full Example

<div class="bg-gray-900 rounded-xl overflow-hidden shadow-md hover:shadow-red-700 transition relative">
  <!-- Project Image -->
  <div class="h-48 bg-slate-800 flex items-center justify-center">
    <img src="img/proyecto.jpg" alt="Descriptive alt text" class="h-full object-contain" loading="lazy" />
  </div>
  
  <!-- Project Content -->
  <div class="p-6">
    <!-- Title -->
    <h3 class="text-xl font-semibold mb-2 text-white">Project Name</h3>
    
    <!-- Description -->
    <p class="text-gray-400 mb-4">
      Brief project description highlighting key features and technologies used.
    </p>
    
    <!-- Toggle Button -->
    <button onclick="toggleDetails(this)"
      class="bg-red-accent hover:bg-red-600 text-white px-4 py-2 rounded-md text-sm transition">
      Ver más
    </button>
    
    <!-- Expandable Details -->
    <div class="details-container max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
      <div class="mt-3 flex gap-2">
        <!-- Demo Link -->
        <a href="https://your-demo-url.com" target="_blank" rel="noopener noreferrer"
          class="block w-full bg-gray-800 text-white text-center py-2 rounded-md hover:bg-gray-700 transition">
          🌐 Ver Web
        </a>
        
        <!-- GitHub Link -->
        <a href="https://github.com/username/repo" target="_blank" rel="noopener noreferrer"
          class="block w-full bg-gray-800 text-white text-center py-2 rounded-md hover:bg-gray-700 transition">
          💻 Ver Código
        </a>
      </div>
    </div>
  </div>
</div>

Get Started

Components

Customization

Deployment

Overview

HTML Structure

Section Container

Single Project Card

Expandable Details Animation

CSS Transition

JavaScript Toggle Function

All Projects

Card Hover Effects

Shadow Glow on Hover

Adding a New Project

Customization Examples

Change Grid Layout

Add Project Tags

Change Card Background

Modify Image Aspect Ratio

Alternative: Always Visible Links

Responsive Behavior

Image Optimization

Lazy Loading Images

Responsive Images

Accessibility Improvements

Animation Timing

Troubleshooting

Complete Project Card Template

Build docs developers (and LLMs) love

Get Started

Components

Customization

Deployment

​Overview

​HTML Structure

​Section Container

​Single Project Card

​Expandable Details Animation

​CSS Transition

​JavaScript Toggle Function

​All Projects

​Card Hover Effects

​Shadow Glow on Hover

​Adding a New Project

​Customization Examples

​Change Grid Layout

​Add Project Tags

​Change Card Background

​Modify Image Aspect Ratio

​Alternative: Always Visible Links

​Responsive Behavior

​Image Optimization

​Lazy Loading Images

​Responsive Images

​Accessibility Improvements

​Animation Timing

​Troubleshooting

​Complete Project Card Template

Build docs developers (and LLMs) love

Overview

HTML Structure

Section Container

Single Project Card

Expandable Details Animation

CSS Transition

JavaScript Toggle Function

All Projects

Card Hover Effects

Shadow Glow on Hover

Adding a New Project

Customization Examples

Change Grid Layout

Add Project Tags

Change Card Background

Modify Image Aspect Ratio

Alternative: Always Visible Links

Responsive Behavior

Image Optimization

Lazy Loading Images

Responsive Images

Accessibility Improvements

Animation Timing

Troubleshooting

Complete Project Card Template