script.js

// Projects data
const projects = [
    {
        title: "Python 基礎課程",
        description: "針對初學者設計的完整 Python 程式設計入門課程，包含實務練習。",
image: "https://huggingface.co/spaces/hklamsir/tech-edumaster/resolve/main/images/認識Python程式編寫_01.png",
category: "course",
        year: "2023"
    },
    {
        title: "網頁開發工作坊",
        description: "涵蓋 HTML、CSS 及 JavaScript 基礎的互動式工作坊，適合中學生參與。",
image: "https://huggingface.co/spaces/hklamsir/tech-edumaster/resolve/main/images/前端網站開發.png",
category: "workshop",
        year: "2022"
    },
    {
        title: "資安防護資源包",
        description: "網路安全教育的學習材料與實務練習集合。",
        image: "https://huggingface.co/spaces/hklamsir/tech-edumaster/resolve/main/images/資安防護資源包.png",
category: "resource",
        year: "2023"
    },
    {
        title: "資料科學訓練營",
        description: "為期8週的密集課程，教授使用Python進行數據分析與視覺化。",
        image: "https://huggingface.co/spaces/hklamsir/tech-edumaster/resolve/main/images/資料科學訓練營-2.png",
category: "course",
        year: "2021"
    },
    {
        title: "雲端運算研討會",
        description: "為IT專業人士設計的兩天AWS與Azure基礎研討會。",
        image: "https://huggingface.co/spaces/hklamsir/tech-edumaster/resolve/main/images/雲端運算研討會.png",
category: "workshop",
        year: "2022"
    },
    {
        title: "Python教學電子書",
        description: "教育工作者適用的Python有效教學策略指南。",
        image: "https://huggingface.co/spaces/hklamsir/tech-edumaster/resolve/main/images/Python教學電子書.png",
category: "resource",
        year: "2020"
    }
];

// Initialize gallery
document.addEventListener('DOMContentLoaded', function() {
    const galleryContainer = document.querySelector('.gallery-container');
    const filterButtons = document.querySelectorAll('.filter-btn');
    
    // Load all projects initially
    loadProjects(projects);
    
    // Filter projects
    filterButtons.forEach(button => {
        button.addEventListener('click', function() {
            // Update active button
            filterButtons.forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
            
            const filter = this.getAttribute('data-filter');
            const filteredProjects = filter === 'all' 
                ? projects 
                : projects.filter(project => project.category === filter);
            
            loadProjects(filteredProjects);
        });
    });
    
    function loadProjects(projectsToLoad) {
        galleryContainer.innerHTML = '';
        
        projectsToLoad.forEach(project => {
            const projectEl = document.createElement('div');
            projectEl.className = 'gallery-item bg-white rounded-lg overflow-hidden shadow-md';
            projectEl.innerHTML = `
                <img src="${project.image}" alt="${project.title}" class="w-full h-48 object-cover">
                <div class="p-6">
                    <span class="project-tag tag-${project.category} mb-2">${project.category}</span>
                    <h3 class="text-xl font-semibold mb-2">${project.title}</h3>
                    <p class="text-gray-600 mb-4">${project.description}</p>
                    <div class="flex justify-between items-center text-sm text-gray-500">
                        <span>${project.year}</span>
                        <a href="${project.category === 'workshop' ? 'web-dev-workshop.html' : 'python-course.html'}" class="text-primary hover:underline">查看詳情</a>
</div>
                </div>
            `;
            
            galleryContainer.appendChild(projectEl);
        });
    }
    
    // Simple form validation for contact form
    const contactForm = document.querySelector('form');
    if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const name = document.getElementById('name').value.trim();
            const email = document.getElementById('email').value.trim();
            const message = document.getElementById('message').value.trim();
            
            if (!name || !email || !message) {
                alert('Please fill in all fields');
                return;
            }
            
            // In a real application, you would send the form data to a server
            alert('Thank you for your message! I will get back to you soon.');
            contactForm.reset();
        });
    }
});