Achievements
Certificate Details
Certificate
Issued By:
Issue Date:
Credential ID:
Skills:
Description:
// Sample certificate data (replace with your actual certificates) const certificatesData = [ { id: "cert1", title: "Certified Ethical Hacker (CEH)", issuer: "EC-Council", category: "cybersecurity", date: "January 2023", credentialId: "ECC12345678", skills: "Penetration Testing, Ethical Hacking, Network Security", description: "The Certified Ethical Hacker (CEH) is a core training program for an information security professional, also referred to as a white-hat hacker, who systematically attempts to inspect network infrastructure vulnerabilities for organizations.", imageUrl: "https://example.com/placeholder-certificate.jpg" // Replace with actual image }, { id: "cert2", title: "CompTIA Security+", issuer: "CompTIA", category: "security", date: "March 2022", credentialId: "COMP98765432", skills: "Network Security, Compliance, Identity Management", description: "Security+ establishes the core knowledge required of any cybersecurity role and provides a springboard to intermediate-level cybersecurity jobs.", imageUrl: "https://example.com/placeholder-certificate.jpg" // Replace with actual image }, { id: "cert3", title: "AWS Certified Solutions Architect", issuer: "Amazon Web Services", category: "aws", date: "June 2022", credentialId: "AWS87654321", skills: "Cloud Architecture, AWS Services, Solution Design", description: "This certification validates technical expertise in designing and deploying scalable, highly available, and fault-tolerant systems on AWS.", imageUrl: "https://example.com/placeholder-certificate.jpg" // Replace with actual image }, // Add more certificates as needed for each category ]; // Initialize carousel and certificate list let currentCategory = "all"; let currentCertificateIndex = 0; // Load certificates when document is ready document.addEventListener("DOMContentLoaded", function() { // Initialize category buttons const categoryButtons = document.querySelectorAll('.category-btn'); categoryButtons.forEach(button => { button.addEventListener('click', function() { const category = this.dataset.category; currentCategory = category; // Update active button categoryButtons.forEach(btn => btn.classList.remove('active')); this.classList.add('active'); // Update title const categoryTitle = this.textContent; document.getElementById('current-category-title').textContent = categoryTitle; // Show loading animation showLoading('achievements', 'Loading ' + categoryTitle + '...'); // Load certificates after a short delay to show the loading animation setTimeout(() => { loadCertificates(category); hideLoading(); }, 800); }); }); // Initialize carousel navigation const prevButton = document.querySelector('.prev-button'); const nextButton = document.querySelector('.next-button'); prevButton.addEventListener('click', () => { navigateCarousel(-1); }); nextButton.addEventListener('click', () => { navigateCarousel(1); }); // Load all certificates initially loadCertificates("all"); }); // Load certificates based on category function loadCertificates(category) { // Filter certificates based on category const filteredCertificates = category === "all" ? certificatesData : certificatesData.filter(cert => cert.category === category); // Reset current index currentCertificateIndex = 0; // Populate carousel const carouselTrack = document.getElementById('carousel-track'); carouselTrack.innerHTML = ''; carouselTrack.style.transform = 'translateX(0)'; filteredCertificates.forEach(cert => { const carouselItem = document.createElement('div'); carouselItem.className = 'carousel-item'; carouselItem.innerHTML = ` ${cert.title} `; carouselTrack.appendChild(carouselItem); }); // Populate certificate list const certificateList = document.getElementById('certificate-list'); certificateList.innerHTML = ''; filteredCertificates.forEach((cert, index) => { const certificateItem = document.createElement('div'); certificateItem.className = 'certificate-item'; certificateItem.setAttribute('data-index', index); certificateItem.setAttribute('data-cert-id', cert.id); certificateItem.innerHTML = `

${cert.title}

${cert.issuer} - ${cert.date}

`; certificateItem.addEventListener('click', function() { // Update active item in list document.querySelectorAll('.certificate-item').forEach(item => { item.classList.remove('active'); }); this.classList.add('active'); // Navigate carousel to selected certificate const index = parseInt(this.getAttribute('data-index')); navigateCarouselToIndex(index); }); certificateList.appendChild(certificateItem); }); // If no certificates found, show message if (filteredCertificates.length === 0) { certificateList.innerHTML = '
No certificates found for this category.
'; carouselTrack.innerHTML = ''; } } // Navigate carousel by offset function navigateCarousel(offset) { const carouselTrack = document.getElementById('carousel-track'); const carouselItems = document.querySelectorAll('.carousel-item'); if (carouselItems.length <= 1) return; currentCertificateIndex += offset; // Handle wrapping if (currentCertificateIndex < 0) { currentCertificateIndex = carouselItems.length - 1; } else if (currentCertificateIndex >= carouselItems.length) { currentCertificateIndex = 0; } // Update carousel position carouselTrack.style.transform = `translateX(-${currentCertificateIndex * 100}%)`; // Update active item in list updateActiveListItem(); } // Navigate carousel to specific index function navigateCarouselToIndex(index) { const carouselTrack = document.getElementById('carousel-track'); const carouselItems = document.querySelectorAll('.carousel-item'); if (index < 0 || index >= carouselItems.length) return; currentCertificateIndex = index; carouselTrack.style.transform = `translateX(-${index * 100}%)`; } // Update active item in certificate list function updateActiveListItem() { document.querySelectorAll('.certificate-item').forEach(item => { item.classList.remove('active'); }); const activeItem = document.querySelector(`.certificate-item[data-index="${currentCertificateIndex}"]`); if (activeItem) { activeItem.classList.add('active'); // Scroll to make active item visible activeItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } } // Open certificate modal function openCertificateModal(certId) { const certificate = certificatesData.find(cert => cert.id === certId); if (!certificate) return; // Show loading animation showLoading('certificate', 'Loading certificate details...'); // Set timeout to simulate loading setTimeout(() => { // Populate modal with certificate details document.getElementById('certificate-modal-title').textContent = certificate.title; document.getElementById('certificate-modal-image').src = certificate.imageUrl; document.getElementById('certificate-issuer').textContent = certificate.issuer; document.getElementById('certificate-date').textContent = certificate.date; document.getElementById('certificate-id').textContent = certificate.credentialId; document.getElementById('certificate-skills').textContent = certificate.skills; document.getElementById('certificate-description').textContent = certificate.description; // Display modal document.getElementById('certificate-modal').style.display = 'block'; hideLoading(); }, 800); } // Close certificate modal function closeCertificateModal() { document.getElementById('certificate-modal').style.display = 'none'; } // Toggle restore certificate modal function toggleRestoreCertificateModal() { const modal = document.getElementById('certificate-modal'); const content = document.querySelector('.certificate-modal-content'); if (content.classList.contains('maximized')) { content.classList.remove('maximized'); content.style.width = '80%'; content.style.height = 'auto'; content.style.maxHeight = '80vh'; content.style.margin = '50px auto'; } else { content.classList.add('maximized'); content.style.width = '95%'; content.style.height = '90vh'; content.style.maxHeight = '90vh'; content.style.margin = '20px auto'; } } // Minimize certificate modal function minimizeCertificateModal() { // This would typically minimize to taskbar, but for now just close closeCertificateModal(); } // Print certificate function printCertificate() { const certificateImage = document.getElementById('certificate-modal-image').src; const certificateTitle = document.getElementById('certificate-modal-title').textContent; const printWindow = window.open('', '_blank'); printWindow.document.write(` Print Certificate - ${certificateTitle} ${certificateTitle}