Content Customization

<nav class="hidden md:block">
    <ul class="flex space-x-8">
        <li><a href="#home" class="nav-link text-white hover:text-red-accent transition">Inicio</a></li>
        <li><a href="#skills" class="nav-link text-white hover:text-red-accent transition">Habilidades</a></li>
        <li><a href="#projects" class="nav-link text-white hover:text-red-accent transition">Proyectos</a></li>
        <li><a href="#contact" class="nav-link text-white hover:text-red-accent transition">Contacto</a></li>
    </ul>
</nav>

<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">
            <circle cx="60" cy="60" r="50" fill="none" stroke="#333" stroke-width="8" />
            <circle class="skill-circle" cx="60" cy="60" r="50" 
                    style="--dash-offset: 94.2;" 
                    data-value="70" /> <!-- 70% skill level -->
            <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>
    <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>

<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>
        
        <!-- View More 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>
        
        <!-- Hidden 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>

<div class="flex space-x-5 text-xl text-gray-400 w-full md:w-auto justify-center md:justify-end">
    <a href="https://www.instagram.com/nilvert.i/" class="hover:text-pink-500 transition" target="_blank" title="Instagram">
        <i class="fab fa-instagram"></i>
    </a>
    <a href="https://github.com/NilverTI" class="hover:text-white transition" target="_blank" title="GitHub">
        <i class="fab fa-github"></i>
    </a>
    <a href="https://www.linkedin.com/in/nilverti/" class="hover:text-blue-500 transition" target="_blank" title="LinkedIn">
        <i class="fab fa-linkedin"></i>
    </a>
    <a href="https://tiktok.com/@nilvert.i" class="hover:text-pink-400 transition" target="_blank" title="TikTok">
        <i class="fab fa-tiktok"></i>
    </a>
    <a href="https://www.youtube.com/@nilvert.i" class="hover:text-red-600 transition" target="_blank" title="YouTube">
        <i class="fab fa-youtube"></i>
    </a>
</div>

<form id="contactForm" class="space-y-6">
    <div>
        <label for="name" class="block text-gray-300 mb-2">Nombre</label> <!-- Change to: Name -->
        <input type="text" id="name" name="name" class="form-input w-full px-4 py-2 rounded-md" required>
    </div>

    <div>
        <label for="email" class="block text-gray-300 mb-2">Correo electrónico</label> <!-- Change to: Email -->
        <input type="email" id="email" name="email" class="form-input w-full px-4 py-2 rounded-md" required>
    </div>

    <div>
        <label for="message" class="block text-gray-300 mb-2">Mensaje</label> <!-- Change to: Message -->
        <textarea id="message" name="message" rows="5" class="form-input w-full px-4 py-2 rounded-md" required></textarea>
    </div>

    <button type="submit" class="bg-red-accent hover:bg-red-700 text-white px-6 py-3 rounded-md w-full">
        Enviar mensaje <!-- Change to: Send Message -->
    </button>
</form>