script.js

        // Scroll indicator
        window.addEventListener('scroll', () => {
            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            const scrolled = (winScroll / height) * 100;
            document.getElementById('scrollIndicator').style.width = scrolled + '%';
        });

        // Tab switching
        function showContent(contentType) {
            const tabs = document.querySelectorAll('.tab');
            const sections = document.querySelectorAll('.content-section');
            
            tabs.forEach(tab => tab.classList.remove('active'));
            sections.forEach(section => section.classList.remove('active'));
            
            event.target.classList.add('active');
            document.getElementById(`${contentType}-content`).classList.add('active');

            if (contentType === 'blog') {
                loadBlogPosts();
            } else if (contentType === 'youtube') {
                loadYouTubeVideos();
            } else if (contentType === 'contact') {
                // Optionally, you can open the contact form popup when the tab is clicked
                document.querySelector('.contact-form-popup').style.display = 'block';
            }
        }

        // GitHub API integration
        const githubUsername = 'mdabir1203';
        const githubApiUrl = 'https://api.github.com/graphql';

        async function fetchGithubProjects() {
            const query = `
    {
      user(login: "${githubUsername}") {
        pinnedItems(first: 6, types: REPOSITORY) {
          nodes {
            ... on Repository {
              name
              description
              url
              stargazerCount
            }
          }
        }
      }
    }
    `;
    
    try {
       // Check rate limit status
       const rateLimitResponse = await fetch('https://api.github.com/rate_limit', {
           headers: {
               'Authorization': 'Bearer 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'
           }
       });
       const rateLimitData = await rateLimitResponse.json();
       const remainingRequests = rateLimitData.rate.remaining;
        if (remainingRequests === 0) {
           const resetTime = rateLimitData.rate.reset * 1000; // Convert to milliseconds
           const waitTime = resetTime - Date.now();
           console.warn(`Rate limit exceeded. Waiting for ${waitTime / 1000} seconds.`);
           await new Promise(resolve => setTimeout(resolve, waitTime)); // Wait until the limit resets
       }
        const response = await fetch(githubApiUrl, {
           method: 'POST',
           headers: {
               'Content-Type': 'application/json',
               'Authorization': 'Bearer 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'
           },
           body: JSON.stringify({ query })
       });
       const data = await response.json();
       console.log('Full API Response:', data);
       return data.data.user.pinnedItems.nodes;
   } catch (error) {
       console.error('Error fetching GitHub projects:', error);
       return [];
   }
}

        // Function to create project card element
        function createProjectCard(project) {
            const projectElement = document.createElement('div');
            projectElement.className = 'project-card';
            projectElement.innerHTML = `
                <h3 class="project-title">${project.name}</h3>
                <p class="project-description">${project.description || 'No description available'}</p>
                <div class="project-footer">
                    <span class="project-stars"> ${project.stargazerCount}</span>
                    <a href="${project.url}" class="project-link" target="_blank">View on GitHub →</a>
                </div>
            `;
            return projectElement;
        }

        // Load and render GitHub projects
        async function loadGithubProjects() {
            const projectsContainer = document.getElementById('projects-content');
            projectsContainer.innerHTML = ''; // Clear existing content
            
            const projects = await fetchGithubProjects();
            if (projects.length === 0) {
                projectsContainer.innerHTML = '<p class="no-projects"';
                return;
            }
            
            projects.forEach(project => {
                const projectElement = createProjectCard(project);
                projectsContainer.appendChild(projectElement);
            });
        }

        // Initial load of GitHub projects
        loadGithubProjects();

        // Medium blog integration
        async function fetchMediumPosts() {
            const mediumUsername = '@md.abir1203';
            const rssUrl = `https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/${mediumUsername}`;
            
            try {
                const response = await fetch(rssUrl);
                const data = await response.json();
                return data.items || [];
            } catch (error) {
                console.error('Error fetching Medium posts:', error);
                return [];
            }
        }

        function createBlogCard(post) {
            const date = new Date(post.pubDate).toLocaleDateString('en-US', {
                year: 'numeric',
                month: 'long',
                day: 'numeric'
            });

            const blogElement = document.createElement('div');
            blogElement.className = 'blog-card';
            blogElement.innerHTML = `
                <h3 class="blog-title">${post.title}</h3>
                <div class="blog-date">${date}</div>
                <p class="blog-excerpt">${post.description.slice(0, 150)}...</p>
                <a href="${post.link}" class="blog-link" target="_blank">Read More →</a>
            `;
            return blogElement;
        }

        async function loadBlogPosts() {
            const blogContainer = document.getElementById('blog-content');
            blogContainer.innerHTML = '';
            
            const posts = await fetchMediumPosts();
            if (posts.length === 0) {
                blogContainer.innerHTML = '<p class="no-posts">No blog posts available</p>';
                return;
            }
            
            posts.forEach(post => {
                const blogElement = createBlogCard(post);
                blogContainer.appendChild(blogElement);
            });
        }

        // YouTube integration
        const channelId = 'UCPM3MAgkXUOFSfysJuAvthQ'; // Replace with your YouTube channel ID
        const apiKey = 'AIzaSyCsm-cKe5f_7t8ZnuNW4MKrlRFO0Y6DLR0'; // Replace with your YouTube API key

        async function fetchYouTubeVideos() {
            const apiUrl = `https://www.googleapis.com/youtube/v3/search?key=${apiKey}&channelId=${channelId}&part=snippet,id&order=date&maxResults=6`;
            
            try {
                const response = await fetch(apiUrl);
                const data = await response.json();
                return data.items || [];
            } catch (error) {
                console.error('Error fetching YouTube videos:', error);
                return [];
            }
        }

        function createYouTubeCard(video) {
            const videoId = video.id.videoId;
            const snippet = video.snippet;
            const date = new Date(snippet.publishedAt).toLocaleDateString('en-US', {
                year: 'numeric',
                month: 'long',
                day: 'numeric'
            });

            const youtubeElement = document.createElement('div');
            youtubeElement.className = 'youtube-card';
            youtubeElement.innerHTML = `
                <a href="https://www.youtube.com/watch?v=${videoId}" target="_blank">
                    <div class="youtube-thumbnail">
                        <img src="${snippet.thumbnails.high.url}" alt="${snippet.title}">
                    </div>
                    <div class="youtube-info">
                        <h3 class="youtube-title">${snippet.title}</h3>
                        <div class="youtube-date">${date}</div>
                    </div>
                </a>
            `;
            return youtubeElement;
        }

        async function loadYouTubeVideos() {
            const youtubeContainer = document.getElementById('youtube-content');
            youtubeContainer.innerHTML = '';
            
            const videos = await fetchYouTubeVideos();
            if (videos.length === 0) {
                youtubeContainer.innerHTML = '<p class="no-videos">No videos available</p>';
                return;
            }
            
            videos.forEach(video => {
                const youtubeElement = createYouTubeCard(video);
                youtubeContainer.appendChild(youtubeElement);
            });
        }

        async function fetchGitHubData() {
            const apiUrl = 'https://api.github.com/users/mdabir1203/repos'; // Replace with your GitHub username
            try {
                const response = await fetch(apiUrl);
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const data = await response.json();
                // Process the data as needed
                displayRepositories(data);
            } catch (error) {
                console.error('Error fetching GitHub data:', error);
                // Show the fallback message and GitHub button when the API call fails
                document.getElementById('github-fallback').style.display = 'block';
            }
        }

        // Call the function to fetch GitHub data
        fetchGitHubData();

        // Close the GitHub fallback message
        document.getElementById('closeGithubFallback').onclick = function() {
            document.getElementById('github-fallback').style.display = 'none';
        }

        // Handle form submission
        document.getElementById('contactForm').onsubmit = function(event) {
            event.preventDefault(); // Prevent the default form submission

            // Get form values
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const message = document.getElementById('message').value;

            // Send the email using EmailJS
            emailjs.send("service_cex9hkr", "service_cex9hkr", {
                name: name,
                email: email,
                message: message
            })
            .then(function(response) {
                console.log('SUCCESS!', response.status, response.text);
                alert('Message sent successfully!');
                document.querySelector('.contact-form-popup').style.display = 'none'; // Close the popup
                document.getElementById('contactForm').reset(); // Reset the form
            }, function(error) {
                console.log('FAILED...', error);
                alert('Failed to send message. Please try again later.');
            });
        }

        // Show cookie consent banner
        window.onload = function() {
            if (!localStorage.getItem('cookiesAccepted')) {
                document.getElementById('cookieConsent').style.display = 'block';
            }
        };

        // Handle cookie acceptance
        document.getElementById('acceptCookies').onclick = function() {
            localStorage.setItem('cookiesAccepted', 'true');
            document.getElementById('cookieConsent').style.display = 'none';
            // Initialize Google Analytics or other tracking scripts here
        };

        // Handle cookie rejection
        document.getElementById('rejectCookies').onclick = function() {
            localStorage.setItem('cookiesAccepted', 'false');
            document.getElementById('cookieConsent').style.display = 'none';
        };

        // Handle cookie settings (this can be expanded to show specific options)
        document.getElementById('cookieSettings').onclick = function() {
            alert('Here you can provide more information about cookie categories and allow users to select their preferences.');
            // Implement a modal or additional UI for cookie preferences
        };

        function bookMeeting() {
            // Replace with your Calendly link
            window.open('https://calendly.com/md-abir1203', '_blank');
        }

// chat.js
const chatMessages = document.getElementById('chat-messages');
const userInput = document.getElementById('user-input');
const sendButton = document.getElementById('send-button');

async function sendMessage() {
    const message = userInput.value;
    if (!message) return;
    
    appendMessage('user', message);
    userInput.value = '';
    
    try {
        const response = await fetch('/generate', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ prompt: message })
        });
        
        const data = await response.json();
        appendMessage('bot', data.response);
    } catch (error) {
        console.error('Error:', error);
        appendMessage('bot', 'Sorry, I encountered an error.');
    }
}

function appendMessage(sender, text) {
    const messageDiv = document.createElement('div');
    messageDiv.className = `message ${sender}-message`;
    messageDiv.textContent = DOMPurify.sanitize(text);
    chatMessages.appendChild(messageDiv);
    chatMessages.scrollTop = chatMessages.scrollHeight;
}


const canvas = document.getElementById('explosionCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let particles = [];

function createParticles(x, y) {
    const particleCount = 100;
    for (let i = 0; i < particleCount; i++) {
        particles.push(new Particle(x, y));
    }
}

class Particle {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.size = Math.random() * 5 + 1; // Random size
        this.speedX = Math.random() * 6 - 3; // Random horizontal speed
        this.speedY = Math.random() * 6 - 3; // Random vertical speed
        this.color = 'rgba(' + Math.floor(Math.random() * 255) + ',' +
            Math.floor(Math.random() * 255) + ',' +
            Math.floor(Math.random() * 255) + ', 1)'; // Random color
        this.life = 100; // Particle life
    }

    update() {
        this.x += this.speedX;
        this.y += this.speedY;
        this.life -= 2; // Decrease life
    }

    draw() {
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
    }
}

function hireMe() {
    const hireMeButton = document.getElementById('hireMeButton');
    hireMeButton.style.display = 'none';
    // Optionally, you can add more actions here, such as showing a form or redirecting to another page
}

// Tab switching
function showContent(contentType) {
    const tabs = document.querySelectorAll('.tab');
    const sections = document.querySelectorAll('.content-section');
    
    tabs.forEach(tab => tab.classList.remove('active'));
    sections.forEach(section => section.classList.remove('active'));
    
    event.target.classList.add('active');
    document.getElementById(`${contentType}-content`).classList.add('active');

    if (contentType === 'blog') {
        loadBlogPosts();
    } else if (contentType === 'youtube') {
        loadYouTubeVideos();
    } else if (contentType === 'contact') {
        // Optionally, you can open the contact form popup when the tab is clicked
        document.querySelector('.contact-form-popup').style.display = 'block';
    }
}

// Sanitize user input
document.getElementById('contactForm').addEventListener('submit', function(event) {
    event.preventDefault();
    const name = DOMPurify.sanitize(document.getElementById('name').value);
    const email = DOMPurify.sanitize(document.getElementById('email').value);
    // Proceed with form submission using sanitized values
});

document.addEventListener('mouseout', function(e) {
    if (e.clientY < 10) { // Check if the mouse is near the top edge of the window
        // Show your popup here
        document.getElementById('myPopup').style.display = 'block';
    }
});

document.getElementById('myPopup').addEventListener('click', function(e) {
    if (e.target === this) { // Check if the click is on the popup itself
        this.style.display = 'none';
    }
});