// Main JavaScript for CodeBloom Rose Petals document.addEventListener('DOMContentLoaded', function() { // Initialize feather icons if (typeof feather !== 'undefined') { feather.replace(); } // Smooth scroll for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const targetId = this.getAttribute('href'); if (targetId === '#') return; const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); } }); }); // Project card interactions const projectCards = document.querySelectorAll('.project-card'); projectCards.forEach(card => { card.addEventListener('mouseenter', () => { card.classList.add('hover-card'); }); card.addEventListener('mouseleave', () => { card.classList.remove('hover-card'); }); }); // Search functionality (would connect to API) const searchInput = document.querySelector('#navSearch'); if (searchInput) { searchInput.addEventListener('input', debounce(function() { const query = this.value.trim(); if (query.length > 2) { performSearch(query); } }, 300)); } // Theme toggle (light/dark - placeholder for future implementation) const themeToggle = document.querySelector('#themeToggle'); if (themeToggle) { themeToggle.addEventListener('click', function() { document.documentElement.classList.toggle('dark'); // Save preference to localStorage const isDark = document.documentElement.classList.contains('dark'); localStorage.setItem('theme', isDark ? 'dark' : 'light'); // Show notification showNotification('Theme switched to ' + (isDark ? 'dark' : 'light') + ' mode'); }); } // Initialize dark mode from localStorage const savedTheme = localStorage.getItem('theme'); if (savedTheme === 'dark') { document.documentElement.classList.add('dark'); } }); // Utility function for debouncing function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func.apply(this, args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } // Search function (placeholder - would connect to your backend/API) async function performSearch(query) { console.log('Searching for:', query); // Here you would typically fetch from an API // Example: // const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`); // const results = await response.json(); // displayResults(results); } // Notification system function showNotification(message, type = 'info') { // Create notification element const notification = document.createElement('div'); notification.className = `fixed top-24 right-6 px-6 py-3 rounded-xl shadow-xl z-50 transform translate-x-full transition-transform duration-300 ${type === 'info' ? 'bg-rose-600' : 'bg-red-600'} text-white`; notification.textContent = message; // Append to body document.body.appendChild(notification); // Animate in setTimeout(() => { notification.style.transform = 'translateX(0)'; }, 10); // Remove after 3 seconds setTimeout(() => { notification.style.transform = 'translateX(100%)'; setTimeout(() => { document.body.removeChild(notification); }, 300); }, 3000); } // API integration for project data async function fetchProjects() { try { // Example using public API - would replace with your actual API const response = await fetch('https://api.github.com/search/repositories?q=topic:frontend&sort=stars&order=desc&per_page=6'); const data = await response.json(); return data.items || []; } catch (error) { console.error('Error fetching projects:', error); return []; } } // Form submission handler document.addEventListener('submit', function(e) { if (e.target.matches('form')) { e.preventDefault(); const formData = new FormData(e.target); const data = Object.fromEntries(formData); // Show loading state const submitBtn = e.target.querySelector('button[type="submit"]'); const originalText = submitBtn.textContent; submitBtn.textContent = 'Processing...'; submitBtn.disabled = true; // Simulate API call setTimeout(() => { // Reset button submitBtn.textContent = originalText; submitBtn.disabled = false; // Show success notification showNotification('Action completed successfully!', 'info'); }, 1000); } }); // Window resize handling for responsive adjustments let resizeTimer; window.addEventListener('resize', function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(function() { // Handle responsive adjustments here console.log('Window resized - handling responsive adjustments'); }, 250); });