script.js

// Portfolio data - using placeholder images from static.photos
const portfolioItems = [
    {
        id: 1,
        title: "Stellar Genesis",
        description: "Digital painting inspired by star formation",
        image: "http://static.photos/abstract/640x360/1",
        category: "digital"
    },
    {
        id: 2,
        title: "Pleiadian Dreamscape",
        description: "3D render of celestial architecture",
        image: "http://static.photos/blue/640x360/2",
        category: "3d"
    },
    {
        id: 3,
        title: "Cosmic Convergence",
        description: "Mixed media digital collage",
        image: "http://static.photos/gradient/640x360/3",
        category: "mixed"
    },
    {
        id: 4,
        title: "Nebula Reflections",
        description: "Interactive digital installation",
        image: "http://static.photos/black/640x360/4",
        category: "interactive"
    },
    {
        id: 5,
        title: "Starlight Symphony",
        description: "Animated visual composition",
        image: "http://static.photos/white/640x360/5",
        category: "animation"
    },
    {
        id: 6,
        title: "Celestial Harmony",
        description: "VR experience concept art",
        image: "http://static.photos/monochrome/640x360/6",
        category: "vr"
    }
];

// Initialize the portfolio gallery
function initPortfolio() {
    const portfolioGrid = document.getElementById('portfolio-grid');
    
    portfolioItems.forEach(item => {
        const portfolioItem = document.createElement('div');
        portfolioItem.className = 'portfolio-item fade-in';
        portfolioItem.innerHTML = `
            <img src="${item.image}" alt="${item.title}" class="portfolio-image">
            <div class="portfolio-overlay">
                <h3 class="text-white text-xl font-semibold mb-2">${item.title}</h3>
                <p class="text-silver text-sm">${item.description}</p>
            </div>
        `;
        portfolioGrid.appendChild(portfolioItem);
    });
}

// Contact form handling
function initContactForm() {
    const contactForm = document.getElementById('contact-form');
    
    contactForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // Get form data
        const formData = new FormData(contactForm);
        const data = Object.fromEntries(formData);
        
        // Simple validation
        if (!data.name || !data.email || !data.message) {
            showNotification('Please fill in all fields', 'error');
            return;
        }
        
        // Simulate form submission
        showNotification('Message sent to the cosmos! ALACON will respond soon.', 'success');
        contactForm.reset();
    });
}

// Notification system
function showNotification(message, type = 'info') {
    const notification = document.createElement('div');
    notification.className = `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg transform transition-all duration-300 ${
        type === 'success' ? 'bg-green-500' : 
        type === 'error' ? 'bg-red-500' : 'bg-blue-500'
    } text-white`;
    notification.textContent = message;
    
    document.body.appendChild(notification);
    
    // Animate in
    setTimeout(() => {
        notification.style.transform = 'translateX(0)';
    }, 100);
    
    // Remove after 5 seconds
    setTimeout(() => {
        notification.style.transform = 'translateX(100%)';
        setTimeout(() => {
            document.body.removeChild(notification);
        }, 300);
    }, 5000);
}

// Scroll animations
function initScrollAnimations() {
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, observerOptions);
    
    // Observe all fade-in elements
    document.querySelectorAll('.fade-in').forEach(el => {
        observer.observe(el);
    });
}

// Smooth scrolling for navigation
function initSmoothScroll() {
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
}

// Initialize everything when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
    initPortfolio();
    initContactForm();
    initScrollAnimations();
    initSmoothScroll();
    
    // Add some random stars to the hero section
    addRandomStars();
});

// Add random stars for celestial effect
function addRandomStars() {
    const heroSection = document.getElementById('hero');
    const starsContainer = heroSection.querySelector('.absolute.opacity-20');
    
    for (let i = 0; i < 15; i++) {
        const star = document.createElement('div');
        star.className = 'star';
        star.style.top = `${Math.random() * 100}%`;
        star.style.left = `${Math.random() * 100}%`;
        star.style.animationDelay = `${Math.random() * 3}s`;
        star.style.width = `${Math.random() * 3 + 1}px`;