Tul xxx Tul

Viewing: emain.js

AOS.init(); // Inicializa AOS
const textos = [
    "Artista de la Palabra",
    "Emprendedor",
    "Mentor",
    "Especialista en Marketing",
    "Cantautor",
    "Productor Musical",
    "Realizador Audiovisual"
];

const typedText = document.getElementById('typed-text');
const cursor = document.getElementById('typed-cursor');
let textoIndex = 0;
let charIndex = 0;
let borrando = false;

function escribir() {
    const textoActual = textos[textoIndex];
    if (!borrando) {
        typedText.textContent = textoActual.substring(0, charIndex + 1);
        charIndex++;
        if (charIndex === textoActual.length) {
            borrando = true;
            setTimeout(escribir, 1200);
            return;
        }
    } else {
        typedText.textContent = textoActual.substring(0, charIndex - 1);
        charIndex--;
        if (charIndex === 0) {
            borrando = false;
            textoIndex = (textoIndex + 1) % textos.length;
        }
    }
    setTimeout(escribir, borrando ? 40 : 80);
}

// Parpadeo del cursor
setInterval(() => {
    cursor.style.opacity = cursor.style.opacity === '0' ? '1' : '0';
}, 500);

escribir();

const imagenes = [
    "img/nevin/IMG_20250522_133632.png",
    "img/nevin/IMG_20250522_133729.png",
    "img/nevin/IMG_20250522_133734.png",
    "img/nevin/IMG_20250522_133738_1.png",
    "img/nevin/IMG_20250522_134323.png",
    "img/nevin/IMG_20250522_134328.png",
    "img/nevin/IMG_20250522_134331.png",
    "img/nevin/IMG_20250522_134334.png",
    "img/nevin/IMG_20250522_134555.png",
    "img/nevin/IMG_20250522_134650.png",
    "img/nevin/IMG_20250522_134717.png"
];

let idx = 0;
let showing = 1;
const img1 = document.getElementById('foto-carrusel-img-1');
const img2 = document.getElementById('foto-carrusel-img-2');

function crossfadeImagen() {
    const nextIdx = (idx + 1) % imagenes.length;
    if (showing === 1) {
        img2.src = imagenes[nextIdx];
        img2.style.opacity = 1;
        img1.style.opacity = 0;
        showing = 2;
    } else {
        img1.src = imagenes[nextIdx];
        img1.style.opacity = 1;
        img2.style.opacity = 0;
        showing = 1;
    }
    idx = nextIdx;
}

setInterval(crossfadeImagen, 1800);

// Ocultar bienvenida tras 3 segundos o al hacer scroll/tap
function ocultarBienvenida() {
    document.getElementById('bienvenida').classList.add('oculta');
}
setTimeout(ocultarBienvenida, 3000);
document.getElementById('bienvenida').addEventListener('click', ocultarBienvenida);
window.addEventListener('scroll', ocultarBienvenida);

// Carrusel para sidebar (escritorio)
let idxS = 0;
let showingS = 1;
const img1S = document.getElementById('foto-carrusel-img-1-sidebar');
const img2S = document.getElementById('foto-carrusel-img-2-sidebar');
function crossfadeImagenSidebar() {
    const nextIdx = (idxS + 1) % imagenes.length;
    if (showingS === 1) {
        img2S.src = imagenes[nextIdx];
        img2S.style.opacity = 1;
        img1S.style.opacity = 0;
        showingS = 2;
    } else {
        img1S.src = imagenes[nextIdx];
        img1S.style.opacity = 1;
        img2S.style.opacity = 0;
        showingS = 1;
    }
    idxS = nextIdx;
}
setInterval(crossfadeImagenSidebar, 1800);

// Texto animado para sidebar (escritorio)
const typedTextS = document.getElementById('typed-text-sidebar');
const cursorS = document.getElementById('typed-cursor-sidebar');
let textoIndexS = 0;
let charIndexS = 0;
let borrandoS = false;
function escribirSidebar() {
    const textoActual = textos[textoIndexS];
    if (!borrandoS) {
        typedTextS.textContent = textoActual.substring(0, charIndexS + 1);
        charIndexS++;
        if (charIndexS === textoActual.length) {
            borrandoS = true;
            setTimeout(escribirSidebar, 1200);
            return;
        }
    } else {
        typedTextS.textContent = textoActual.substring(0, charIndexS - 1);
        charIndexS--;
        if (charIndexS === 0) {
            borrandoS = false;
            textoIndexS = (textoIndexS + 1) % textos.length;
        }
    }
    setTimeout(escribirSidebar, borrandoS ? 40 : 80);
}
setInterval(() => {
    cursorS.style.opacity = cursorS.style.opacity === '0' ? '1' : '0';
}, 500);
escribirSidebar();

// Scroll suave al footer al hacer clic en "Contacto"
document.getElementById('enlace-contacto').addEventListener('click', function (e) {
    e.preventDefault();
    window.scrollTo({
        top: document.body.scrollHeight,
        behavior: 'smooth'
    });
});

// Envío AJAX del formulario de contacto
document.getElementById('form-contacto').addEventListener('submit', function (e) {
    e.preventDefault();
    var form = e.target;
    var datos = new FormData(form);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', form.action, true);
    xhr.onload = function () {
        var mensaje = document.getElementById('mensaje-resultado');
        if (xhr.responseText.trim() === 'ok') {
            mensaje.textContent = '¡Mensaje enviado correctamente!';
            mensaje.style.color = '#00d8e0';
            form.reset();
        } else {
            mensaje.textContent = 'Hubo un error al enviar el mensaje. Intenta nuevamente.';
            mensaje.style.color = '#d00000';
        }
    };
    xhr.send(datos);
});

// Scroll-spy y cambio de título de pestaña
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('nav ul li a');
const sectionTitles = {
    'sobre': 'NeViNCrist - Sobre mí',
    'formacion': 'NeViNCrist - Formación',
    'audiovisual': 'NeViNCrist - Producción Audiovisual',
    'musical': 'NeViNCrist - Proyecto Musical',
    'proyectos': 'NeViNCrist - Emprendimientos',
    'ministerio': 'NeViNCrist - Ministerio Pastoral',
    'contacto': 'NeViNCrist - Contacto'
};

function highlightNavMenu() {
    let current = '';
    sections.forEach(section => {
        const sectionTop = section.offsetTop;
        const sectionHeight = section.clientHeight;
        if (pageYOffset >= sectionTop - 100) {
            current = section.getAttribute('id');
        }
    });

    navLinks.forEach(link => {
        link.classList.remove('active');
        if (link.href.includes(current)) {
            link.classList.add('active');
            document.title = sectionTitles[current] || 'NeViNCrist | Artista de la Palabra';
        }
    });
}
window.addEventListener('scroll', highlightNavMenu);
highlightNavMenu();

// Carrusel para sección Sobre mí (móvil)
let idxSM = 0;
let showingSM = 1;
const img1SM = document.getElementById('foto-carrusel-sobremi-img-1');
const img2SM = document.getElementById('foto-carrusel-sobremi-img-2');
const imagenesSM = [
    "img/nevin/IMG_20250522_133626.png",
    "img/nevin/IMG_20250522_133632.png",
    "img/nevin/IMG_20250522_133729.png",
    "img/nevin/IMG_20250522_133734.png",
    "img/nevin/IMG_20250522_133738_1.png",
    "img/nevin/IMG_20250522_134323.png",
    "img/nevin/IMG_20250522_134328.png",
    "img/nevin/IMG_20250522_134331.png",
    "img/nevin/IMG_20250522_134334.png",
    "img/nevin/IMG_20250522_134555.png",
    "img/nevin/IMG_20250522_134650.png",
    "img/nevin/IMG_20250522_134717.png"
];
if (imagenes[0] !== "img/nevin/IMG_20250522_133626.png") {
    imagenes.unshift("img/nevin/IMG_20250522_133626.png");
}

function crossfadeImagenSobreMiMobile() {
    const nextIdx = (idxSM + 1) % imagenesSM.length;
    if (showingSM === 1) {
        img2SM.src = imagenesSM[nextIdx];
        img2SM.style.opacity = 1;
        img1SM.style.opacity = 0;
        showingSM = 2;
    } else {
        img1SM.src = imagenesSM[nextIdx];
        img1SM.style.opacity = 1;
        img2SM.style.opacity = 0;
        showingSM = 1;
    }
    idxSM = nextIdx;
}
if (window.matchMedia("(max-width: 900px)").matches) {
    setInterval(crossfadeImagenSobreMiMobile, 1800);
}

// Toggle y funcionalidades del menú hamburguesa
document.addEventListener('DOMContentLoaded', () => {
    const menuToggle = document.querySelector('.menu-toggle');
    const navUl = document.querySelector('#nav-menu');

    if (!menuToggle || !navUl) return; // Salir si los elementos no existen

    // Configurar atributos de accesibilidad
    menuToggle.setAttribute('aria-expanded', 'false');
    menuToggle.setAttribute('aria-label', 'Alternar menú de navegación');

    // Evento de clic para alternar el menú
    menuToggle.addEventListener('click', function () {
        const isOpen = this.classList.toggle('open');
        navUl.classList.toggle('open');
        this.setAttribute('aria-expanded', isOpen.toString());
    });

    // Cerrar menú al hacer clic en un enlace (para móvil)
    navUl.querySelectorAll('a[href^="#"]').forEach(link => {
        link.addEventListener('click', function () {
            // Solo cerrar si es vista móvil y no es el botón de descarga
            if (window.matchMedia("(max-width: 900px)").matches && !link.classList.contains('btn-descarga-mobile')) {
                menuToggle.classList.remove('open');
                navUl.classList.remove('open');
                menuToggle.setAttribute('aria-expanded', 'false');
            }
        });
    });

    // Cerrar menú al hacer clic fuera (para móvil)
    document.addEventListener('click', (event) => {
        // Verificar si el clic fue dentro del menú o el botón toggle
        const isClickInsideMenu = navUl.contains(event.target);
        const isClickOnToggle = menuToggle.contains(event.target);

        // Si no fue dentro y es vista móvil y el menú está abierto, cerrarlo
        if (!isClickInsideMenu && !isClickOnToggle &&
            window.matchMedia("(max-width: 900px)").matches &&
            navUl.classList.contains('open')) {
            menuToggle.classList.remove('open');
            navUl.classList.remove('open');
            menuToggle.setAttribute('aria-expanded', 'false');
        }
    });

    // Asegurar que el menú esté oculto inicialmente en móvil (al cargar o redimensionar)
    function hideMenuOnMobile() {
        if (window.matchMedia("(max-width: 900px)").matches) {
             menuToggle.classList.remove('open');
             navUl.classList.remove('open');
             menuToggle.setAttribute('aria-expanded', 'false');
        }
    }

    hideMenuOnMobile(); // Ocultar al cargar
    window.addEventListener('resize', hideMenuOnMobile); // Ocultar al redimensionar a móvil
});

// Scroll suave al hacer clic en enlaces de sección
document.querySelectorAll('nav ul li a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const targetId = this.getAttribute('href').substring(1);
        const targetSection = document.getElementById(targetId);
        
        if (targetSection) {
            // Altura del menú superior (60px en móvil, 0px en escritorio)
            const menuHeight = window.matchMedia("(max-width: 900px)").matches ? 60 : 0;
            
            // Desplazamiento con compensación para el menú
            window.scrollTo({
                top: targetSection.offsetTop - menuHeight - 20, // 20px adicionales de margen
                behavior: 'smooth'
            });
        }
    });
});

// Mejoras de interacción móvil
document.addEventListener('DOMContentLoaded', () => {
    // Swipe para carruseles en móvil
    function addSwipeSupport(containerSelector, imageSelector) {
        const container = document.querySelector(containerSelector);
        if (!container) return;

        let startX = 0;
        let endX = 0;

        container.addEventListener('touchstart', (e) => {
            startX = e.touches[0].clientX;
        });

        container.addEventListener('touchend', (e) => {
            endX = e.changedTouches[0].clientX;
            handleSwipe(containerSelector, imageSelector);
        });

        function handleSwipe(containerSelector, imageSelector) {
            const images = document.querySelectorAll(imageSelector);
            const swipeThreshold = 50; // Mínima distancia de deslizamiento

            if (startX - endX > swipeThreshold) {
                // Deslizar a la derecha
                crossfadeImagen(images);
            } else if (endX - startX > swipeThreshold) {
                // Deslizar a la izquierda
                crossfadeImagen(images);
            }
        }
    }

    // Soporte de swipe para diferentes carruseles
    addSwipeSupport('.foto-carrusel', '#foto-carrusel-img-1, #foto-carrusel-img-2');
    addSwipeSupport('.foto-carrusel-sobremi-mobile', '#foto-carrusel-sobremi-img-1, #foto-carrusel-sobremi-img-2');
});

// Optimización de carruseles para rendimiento
function optimizeCarousel(images, img1, img2) {
    let idx = 0;
    let showing = 1;

    function preloadNextImage() {
        const nextIdx = (idx + 1) % images.length;
        const img = new Image();
        img.src = images[nextIdx];
    }

    function crossfadeImagen() {
        const nextIdx = (idx + 1) % images.length;
        if (showing === 1) {
            img2.src = images[nextIdx];
            img2.style.opacity = 1;
            img1.style.opacity = 0;
            showing = 2;
        } else {
            img1.src = images[nextIdx];
            img1.style.opacity = 1;
            img2.style.opacity = 0;
            showing = 1;
        }
        idx = nextIdx;
        preloadNextImage();
    }

    return crossfadeImagen;
}

// Aplicar optimización a carruseles existentes
document.addEventListener('DOMContentLoaded', () => {
    const carouselConfigs = [
        {
            images: imagenes,
            img1: document.getElementById('foto-carrusel-img-1'),
            img2: document.getElementById('foto-carrusel-img-2')
        },
        {
            images: imagenes,
            img1: document.getElementById('foto-carrusel-img-1-sidebar'),
            img2: document.getElementById('foto-carrusel-img-2-sidebar')
        },
        {
            images: imagenesSM,
            img1: document.getElementById('foto-carrusel-sobremi-img-1'),
            img2: document.getElementById('foto-carrusel-sobremi-img-2')
        }
    ];

    // Desactivar transiciones en dispositivos móviles para mejor rendimiento
    if (window.matchMedia("(max-width: 900px)").matches) {
        document.body.classList.add('mobile-view');
    }

    // Lazy loading de recursos no críticos
    const nonCriticalStyles = [
        'https://unpkg.com/aos@2.3.1/dist/aos.css'
    ];

    nonCriticalStyles.forEach(href => {
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = href;
        link.media = 'print';
        link.onload = () => link.media = 'all';
        document.head.appendChild(link);
    });

    // Reducir frecuencia de carrusel en móviles
    const carouselInterval = window.matchMedia("(max-width: 900px)").matches ? 2500 : 1800;
    
    carouselConfigs.forEach(config => {
        if (config.img1 && config.img2) {
            const crossfadeFunc = optimizeCarousel(config.images, config.img1, config.img2);
            setInterval(crossfadeFunc, carouselInterval);
        }
    });
});
User / IP	: 216.73.216.159
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64