CoolFace
Apppublic

diyaw2405/skillstamp-peer-powered-credentials

sourceHugging Faceupdated 10mo agoView on Hugging Face
0likes
script.js70 linesDownload Raw Back to root
1 2document.addEventListener('DOMContentLoaded', () => {3    // Initialize tooltips for all feather icons4    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));5    tooltipTriggerList.map(function (tooltipTriggerEl) {6        return new bootstrap.Tooltip(tooltipTriggerEl);7    });8 9    // Smooth scrolling for anchor links10    document.querySelectorAll('a[href^="#"]').forEach(anchor => {11        anchor.addEventListener('click', function (e) {12            e.preventDefault();13            document.querySelector(this.getAttribute('href')).scrollIntoView({14                behavior: 'smooth'15            });16        });17    });18 19    // Add hover effects to skill cards20    document.querySelectorAll('custom-skill-card').forEach(card => {21        card.addEventListener('mouseenter', () => {22            card.shadowRoot.querySelector('.skill-card').classList.add('hover:scale-105', 'shadow-lg');23        });24        card.addEventListener('mouseleave', () => {25            card.shadowRoot.querySelector('.skill-card').classList.remove('hover:scale-105', 'shadow-lg');26        });27    });28 29    // Animate buttons on hover30    document.querySelectorAll('a, button').forEach(btn => {31        btn.addEventListener('mouseenter', () => {32            btn.classList.add('transition-transform', 'duration-200');33            btn.classList.add('hover:scale-105');34        });35        btn.addEventListener('mouseleave', () => {36            btn.classList.remove('hover:scale-105');37        });38    });39 40    // Add animation classes to elements as they come into view41    const animateOnScroll = () => {42        const elements = document.querySelectorAll('.fade-in, .slide-up');43        elements.forEach(element => {44            const elementPosition = element.getBoundingClientRect().top;45            const screenPosition = window.innerHeight / 1.2;46 47            if (elementPosition < screenPosition) {48                element.classList.add('animate-fade-in');49            }50        });51    };52 53    window.addEventListener('scroll', animateOnScroll);54    animateOnScroll();55 56    // Typewriter effect for hero text57    const heroText = document.querySelector('.hero-text');58    if (heroText) {59        const text = "Validate Your Skills with Peers";60        let i = 0;61        const typeWriter = () => {62            if (i < text.length) {63                heroText.innerHTML += text.charAt(i);64                i++;65                setTimeout(typeWriter, 100);66            }67        };68        typeWriter();69    }70