script.js

// Toggle responsive navbar menu
function toggleFunction() {
    const links = document.getElementById("links");
    links.classList.toggle("responsive");
}

// Project Section
const frontend_projects = [
    {
        title: "RepoScanner",
        tech: "HTML5 / CSS3 / JS / Github API",
        description: "A Responsive web app that list down gihub repo files/folders.",
        image: "assets/repoScanner.webp",
        github: "https://github.com/devByWaleed/RepoScanner/",
        live: "https://devByWaleed.github.io/RepoScanner/",
        width: 400,
        height: 180,
    },
    {
        title: "IQ Quiz App",
        tech: "Tailwind-CSS / React JS",
        description: "A Responsive Quiz App, comprising IQ Questions to check your logical reasoning and IQ.",
        image: "assets/quiz.webp",
        github: "https://github.com/devByWaleed/quiz-app/",
        live: "https://devByWaleed.github.io/quiz-app/",
        width: 400,
        height: 180,
    },
    {
        title: "Book Library App",
        tech: "Tailwind-CSS / React JS",
        description: "A Responsive React JS App with Database to store the record of borrowed books.",
        image: "assets/book-library.webp",
        github: "https://github.com/devByWaleed/book-library/",
        live: "https://devByWaleed.github.io/book-library/",
        width: 400,
        height: 180,
    },
];



const mern_projects = [
    {
        title: "Doctor Management System",
        tech: "MERN / Redux / Cloudinary / Stripe",
        description: "Full-stack platform digitizing clinic workflows with JWT authentication and Stripe payment integration.",
        image: "assets/doctor.webp",
        github: "https://github.com/devByWaleed/doctor/",
        live: null,
        width: 400,
        height: 180,
    },
    {
        title: "Greencart Grocery Store",
        tech: "MERN / ContextAPI / Cloudinary / Stripe",
        description: "E-commerce engine with real-time stock calculations and a friction-less Stripe checkout journey.",
        image: "assets/greencart.webp",
        github: "https://github.com/devByWaleed/greencart",
        live: "https://grocery-eta-six.vercel.app/",
        width: 400,
        height: 180,
    },
    {
        title: "Real Estate App",
        tech: "MERN / Redux / Firebase / SupaBase",
        description: "Scalable marketplace with location-based filters and secure SupaBase row-level storage policies.",
        image: "assets/real-estate.webp",
        github: "https://github.com/devByWaleed/real-estate/",
        live: null,
        width: 400,
        height: 180,
    }
];



function displayAllProjects() {
    // 1. Display Frontend Projects
    const frontendContainer = document.querySelector('.projects-grid');
    if (frontendContainer) {
        frontendContainer.innerHTML = frontend_projects.map(project => `
            <article class="project-card">
            <img 
                src="${project.image}" 
                alt="${project.title}" 
                width="${project.width || 400}" 
                height="${project.height || 180}" 
                class="project-image"
                loading="lazy"
            />
                <div class="project-info">
                    <h2 class="project-title">${project.title}</h2>
                    <p class="project-tech">${project.tech}</p>
                    <p class="description">${project.description}</p>
                    <div class="project-links">
                        <a 
                            href="${project.github}" 
                            aria-label="View source code for ${project.title}"
                            target="_blank"><i class="bi bi-code-slash"></i>
                        </a>
                        <a 
                            href="${project.live}" 
                            aria-label="View live demo of ${project.title}
                            target="_blank">
                            <i class="bi bi-eye"></i>
                        </a>
                    </div>
                </div>
            </article>
        `).join('');
    }

    // 2. Display MERN Projects
    const mernContainer = document.querySelector('.mern-projects');
    if (mernContainer) {
        mernContainer.innerHTML = mern_projects.map(project => `
            <article class="project-card">
                <img 
                    src="${project.image}" 
                    alt="${project.title}" 
                    width="${project.width || 400}" 
                    height="${project.height || 180}" 
                    class="project-image"
                    loading="lazy"
                />
                <div class="project-info">
                    <h2 class="project-title">${project.title}</h2>
                    <p class="project-tech">${project.tech}</p>
                    <p class="description">${project.description}</p>
                    <div class="project-links">
                        <a 
                            href="${project.github}" 
                            aria-label="View source code for ${project.title}"
                            target="_blank"><i class="bi bi-code-slash"></i>
                        </a>
                        
                        ${project.live !== null ?
                `
                            <a 
                                href="${project.live}" 
                                aria-label="View live demo of ${project.title}
                                target="_blank">
                                <i class="bi bi-eye"></i>
                            </a>
                            ` : ''
            }
                    </div>
                </div>
            </article>
        `).join('');
    }
}

window.addEventListener('DOMContentLoaded', () => {
    setCopyrightYear();
    displayAllProjects();
});


// Function to display current year dynamically
function setCopyrightYear() {
    const yearElement = document.getElementById('year');
    const currentYear = new Date().getFullYear();
    yearElement.textContent = currentYear;
}