script.js

// ===================================
// Mobile Menu Toggle
// ===================================
const navbar = document.getElementById('navbar');
const menuToggle = document.getElementById('menuToggle');
const navMenu = document.querySelector('.nav-menu');
const navLinks = document.querySelectorAll('.nav-link');

menuToggle?.addEventListener('click', () => {
    const open = navMenu.classList.toggle('active');
    menuToggle.classList.toggle('active');
    menuToggle.setAttribute('aria-expanded', open ? 'true' : 'false');
    menuToggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
});

// Close menu when clicking on nav links
navLinks.forEach(link => {
    link.addEventListener('click', () => {
        navMenu.classList.remove('active');
        menuToggle.classList.remove('active');
        menuToggle?.setAttribute('aria-expanded', 'false');
        menuToggle?.setAttribute('aria-label', 'Open menu');
    });
});

// Close menu when clicking outside
document.addEventListener('click', (e) => {
    if (
        navbar &&
        !navbar.contains(e.target) &&
        navMenu.classList.contains('active')
    ) {
        navMenu.classList.remove('active');
        menuToggle.classList.remove('active');
        menuToggle?.setAttribute('aria-expanded', 'false');
        menuToggle?.setAttribute('aria-label', 'Open menu');
    }
});

// ===================================
// Smooth Scroll for Navigation Links
// ===================================
// Content above a target can change height mid-scroll (lazy dome, fade-ins),
// so the target is re-measured every frame and the scroll re-aimed until it settles.
const anchorScrollOffset = 96;
const anchorScrollWatchMs = 3000;
const anchorReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
let anchorScrollRun = 0;

// Layout position via offsetTop, so fade-in / parallax transforms don't skew it
const getAnchorScrollTop = (el) => {
    let top = 0;
    for (let node = el; node; node = node.offsetParent) {
        top += node.offsetTop;
    }
    const maxTop = document.documentElement.scrollHeight - window.innerHeight;
    return Math.max(0, Math.min(top - anchorScrollOffset, maxTop));
};

const cancelAnchorScroll = () => {
    anchorScrollRun++;
};
['wheel', 'touchstart', 'keydown'].forEach((type) => {
    window.addEventListener(type, cancelAnchorScroll, { passive: true });
});

const scrollToAnchor = (target) => {
    const run = ++anchorScrollRun;
    const behavior = anchorReducedMotion.matches ? 'auto' : 'smooth';
    const start = performance.now();
    let goal = getAnchorScrollTop(target);
    window.scrollTo({ top: goal, behavior });

    let lastY = window.pageYOffset;
    let stillFrames = 0;
    const check = () => {
        if (run !== anchorScrollRun) return;
        const y = window.pageYOffset;
        stillFrames = Math.abs(y - lastY) < 0.5 ? stillFrames + 1 : 0;
        lastY = y;

        const next = getAnchorScrollTop(target);
        const moved = Math.abs(next - goal) > 1;
        // Re-aim when the target moved, or when the scroll stopped short of it
        if (moved || (stillFrames >= 6 && Math.abs(y - next) > 1)) {
            goal = next;
            stillFrames = 0;
            window.scrollTo({ top: goal, behavior });
        }
        if (performance.now() - start < anchorScrollWatchMs) {
            requestAnimationFrame(check);
        }
    };
    requestAnimationFrame(check);
};

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            scrollToAnchor(target);
        }
    });
});

// ===================================
// Intersection Observer for Fade-in Animations
// ===================================
const observerOptions = {
    threshold: 0.05,
    // Loose margin so sections (e.g. projects) still reveal on short mobile viewports
    rootMargin: '0px 0px -24px 0px'
};

const revealOnScroll = !window.matchMedia('(prefers-reduced-motion: reduce)').matches;

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0)';
        }
    });
}, observerOptions);

// Observe all sections except #skills: the React skills dome uses CSS 3D (perspective).
// Observe all sections except #home (in viewport on load) and #skills (3D perspective)
document.querySelectorAll('section').forEach(section => {
    if (section.id === 'skills' || section.id === 'home') {
        section.style.opacity = '1';
        section.style.transform = 'none';
        return;
    }
    if (revealOnScroll) {
        section.style.opacity = '0';
        section.style.transform = 'translateY(30px)';
        section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(section);
    } else {
        section.style.opacity = '1';
        section.style.transform = 'none';
    }
});

// ===================================
// Cursor Effect (Optional Enhancement)
// ===================================
const createCursor = () => {
    const cursor = document.createElement('div');
    cursor.classList.add('custom-cursor');
    cursor.style.cssText = `
        position: fixed;
        width: 20px;
        height: 20px;
        border: 2px solid #fafafa;
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999;
        opacity: 0;
        transition: transform 0.2s ease;
    `;
    document.body.appendChild(cursor);

    document.addEventListener('mousemove', (e) => {
        cursor.style.opacity = '1';
        cursor.style.left = e.clientX - 10 + 'px';
        cursor.style.top = e.clientY - 10 + 'px';
    });

    document.querySelectorAll('a, button, .gallery-item, .adventure-card').forEach(el => {
        el.addEventListener('mouseenter', () => {
            cursor.style.transform = 'scale(2)';
            cursor.style.backgroundColor = 'rgba(255, 255, 255, 0.08)';
        });
        el.addEventListener('mouseleave', () => {
            cursor.style.transform = 'scale(1)';
            cursor.style.backgroundColor = 'transparent';
        });
    });
};

// Uncomment to enable custom cursor
// createCursor();

// ===================================
// Typing Cursor Effect
// ===================================
// Heading text is rendered server-side/HTML for instant LCP and SEO
const cursor = document.querySelector('.cursor');
if (cursor) {
    cursor.style.animation = 'blink 1s infinite';
}

// ===================================
// Update Current Year
// ===================================
const updateCurrentYear = () => {
    const yearElement = document.getElementById('currentYear');
    if (yearElement) {
        yearElement.textContent = new Date().getFullYear();
    }
};
updateCurrentYear();

// ===================================
// Scroll Progress & Back to Top (Elements)
// ===================================
const scrollProgress = document.getElementById('scrollProgress');
const backToTopButton = document.getElementById('backToTop');

backToTopButton?.addEventListener('click', () => {
    cancelAnchorScroll();
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
});

// ===================================
// Project Filters
// ===================================
// Filters apply to the "More projects" grid only; featured rows always stay visible.
const filterButtons = document.querySelectorAll('.filter-btn');
const projectCards = document.querySelectorAll('.project-card');
const projectsFilterStatus = document.getElementById('projectsFilterStatus');

filterButtons.forEach(button => {
    button.addEventListener('click', () => {
        filterButtons.forEach(btn => {
            btn.classList.remove('active');
            btn.setAttribute('aria-pressed', 'false');
        });
        button.classList.add('active');
        button.setAttribute('aria-pressed', 'true');

        const filterValue = button.getAttribute('data-filter');
        let visibleCount = 0;

        projectCards.forEach(card => {
            const categories = (card.getAttribute('data-category') || '').split(' ');
            const visible = filterValue === 'all' || categories.includes(filterValue);
            card.classList.toggle('hidden', !visible);
            if (visible) visibleCount++;
        });

        if (projectsFilterStatus) {
            const label = filterValue === 'all' ? 'all categories' : button.textContent.trim();
            projectsFilterStatus.textContent =
                `Showing ${visibleCount} of ${projectCards.length} projects: ${label}`;
        }
    });
});

// ===================================
// Parallax Scrolling Effect (hero + project images)
// ===================================
const parallaxBg = document.querySelector('.parallax-bg');
const parallaxImage = document.querySelector('.parallax-image');
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');

const projectParallaxStrength = 0.26;
const projectParallaxMaxShift = 72;
const narrowViewportForParallax = window.matchMedia('(max-width: 768px)');

let cachedHeroHeight = 0;
const getHeroHeight = () => {
    if (!cachedHeroHeight) {
        const heroSection = document.querySelector('.hero');
        cachedHeroHeight = heroSection ? heroSection.offsetHeight : 0;
    }
    return cachedHeroHeight;
};

const updateHeroParallax = (scrolled) => {
    const heroHeight = getHeroHeight();
    if (heroHeight && scrolled < heroHeight) {
        if (parallaxBg) {
            parallaxBg.style.transform = `translateY(${scrolled * 0.5}px)`;
        }
        if (parallaxImage) {
            parallaxImage.style.transform = `translateY(${scrolled * 0.15}px)`;
        }
    }
};

const updateProjectImageParallax = () => {
    if (prefersReducedMotion.matches || narrowViewportForParallax.matches) {
        document.querySelectorAll('.projects-featured .project-image .image-container').forEach((el) => {
            el.style.transform = '';
            el.style.willChange = 'auto';
        });
        return;
    }

    const viewMid = window.innerHeight * 0.5;

    // Parallax only on the featured case-study rows, not the card grid
    document.querySelectorAll('.projects-featured .project-item').forEach((item) => {
        const container = item.querySelector('.project-image .image-container');
        if (!container) return;

        const rect = container.getBoundingClientRect();
        if (rect.bottom < -80 || rect.top > window.innerHeight + 80) {
            container.style.transform = '';
            container.style.willChange = 'auto';
            return;
        }

        const elCenter = rect.top + rect.height / 2;
        let offset = (elCenter - viewMid) * projectParallaxStrength;
        offset = Math.max(-projectParallaxMaxShift, Math.min(projectParallaxMaxShift, offset));
        container.style.willChange = 'transform';
        container.style.transform = `translate3d(0, ${offset.toFixed(2)}px, 0)`;
    });
};

// ===================================
// Unified Scroll Engine (rAF-throttled, zero forced reflows)
// ===================================
const sections = document.querySelectorAll('section[id]');
let sectionMetrics = [];

const updateSectionMetrics = () => {
    const scrollOffset = 100;
    sectionMetrics = Array.from(sections).map((section, index) => ({
        id: section.getAttribute('id'),
        top: section.offsetTop - scrollOffset,
        height: section.offsetHeight,
        isLast: index === sections.length - 1
    }));
    cachedHeroHeight = 0;
};

let scrollTicking = false;
const onScrollUnified = () => {
    const scrollY = window.pageYOffset || document.documentElement.scrollTop;
    const windowHeight = window.innerHeight;
    const documentHeight = document.documentElement.scrollHeight;

    // 1. Navbar scrolled class
    if (navbar) {
        navbar.classList.toggle('scrolled', scrollY > 100);
    }

    // 2. Back to top visibility
    if (backToTopButton) {
        backToTopButton.classList.toggle('visible', scrollY > 300);
    }

    // 3. Scroll progress
    if (scrollProgress && documentHeight > windowHeight) {
        const scrollPercent = (scrollY / (documentHeight - windowHeight)) * 100;
        scrollProgress.style.width = scrollPercent + '%';
    }

    // 4. Active nav link (pure cached numbers, 0 forced reflows)
    let activeId = null;
    for (let i = 0; i < sectionMetrics.length; i++) {
        const m = sectionMetrics[i];
        if (m.isLast) {
            const distanceFromBottom = documentHeight - (scrollY + windowHeight);
            if (distanceFromBottom < 150 || scrollY > m.top) {
                activeId = m.id;
            }
        } else if (scrollY > m.top && scrollY <= m.top + m.height) {
            activeId = m.id;
        }
    }
    if (activeId) {
        navLinks.forEach(link => {
            link.classList.toggle('active', link.getAttribute('href') === `#${activeId}`);
        });
    }

    // 5. Parallax updates
    updateHeroParallax(scrollY);
    updateProjectImageParallax();

    scrollTicking = false;
};

window.addEventListener('scroll', () => {
    if (!scrollTicking) {
        requestAnimationFrame(onScrollUnified);
        scrollTicking = true;
    }
}, { passive: true });

window.addEventListener('resize', () => {
    updateSectionMetrics();
    if (!scrollTicking) {
        requestAnimationFrame(onScrollUnified);
        scrollTicking = true;
    }
}, { passive: true });

prefersReducedMotion.addEventListener('change', () => {
    updateProjectImageParallax();
});

narrowViewportForParallax.addEventListener('change', () => {
    updateProjectImageParallax();
});

// Initial measurement and frame (deferred to avoid layout thrashing during initial paint)
if ('requestIdleCallback' in window) {
    requestIdleCallback(() => {
        updateSectionMetrics();
        onScrollUnified();
    });
} else {
    setTimeout(() => {
        updateSectionMetrics();
        onScrollUnified();
    }, 150);
}

// ===================================
// Project Modal
// ===================================
const modal = document.getElementById('projectModal');
const modalOverlay = modal?.querySelector('.modal-overlay');
const modalClose = modal?.querySelector('.modal-close');
const projectDetailsButtons = document.querySelectorAll('.project-details-btn');

// Project data
const projectData = {
    'idialysis': {
        tag: 'AI Healthcare',
        title: 'iDialysis — PD Patient Management System',
        description: 'A digital healthcare platform for Peritoneal Dialysis (PD) patient reporting with AI-powered weekly assessments. The system automates patient monitoring and provides doctors with timely updates and insights for better patient care.',
        features: [
            'Digital patient reporting system for PD patients',
            'AI-powered weekly patient assessment and analysis',
            'Automated updates and notifications for doctors',
            'Patient data tracking and trend analysis',
            'Secure healthcare data management',
            'Real-time monitoring and alert system'
        ],
        tech: ['LLM API', 'Laravel'],
        challenges: 'Developing an AI system that can accurately assess patient conditions from weekly reports while ensuring data privacy and compliance with healthcare regulations. The challenge involved creating reliable assessment algorithms and integrating them seamlessly into the clinical workflow to provide actionable insights for doctors.',
        liveUrl: 'https://idialysis.my',
        repoUrl: null
    },
    'sdip': {
        tag: 'Government & Public Health',
        title: 'SDIP — Sistem Digital Inspektorat dan Perundangan',
        description: 'SDIP is an integrated system for the Unit of Inspectorate and Legislation (Unit Inspektorat dan Perundangan), Ministry of Health Malaysia (KKM). It digitises public health enforcement—covering audit, investigation, inspection, and notice management—and is designed to make operations faster, more transparent, and easier to monitor across the network of JKN and PKD.',
        features: [
            'Unified digital workflows for inspectorate, audit, investigation, and enforcement',
            'End-to-end notice handling and monitoring with reduced reliance on manual forms',
            'Designed for continuous improvement and long-term maintainability',
            'Integration posture aligned with existing KKM systems and data practices',
            'Real-time, centralised visibility for operational coordination',
            'Supports national digital transformation goals for public health'
        ],
        tech: ['LLM', 'OCR', 'Laravel'],
        challenges: 'Delivering a sector-wide platform means balancing strict governance and usability, integrating with established KKM processes, and ensuring the product can evolve as regulations and operational needs change—all while keeping enforcement data reliable and traceable.',
        liveUrl: 'https://sdip-home.gense.my/',
        repoUrl: null
    },
    'ditosis': {
        tag: 'Marketing Site',
        title: 'Ditosis — Synthetic Data Solutions',
        description: 'Ditosis is presented as a synthetic data company offering high-quality synthetic datasets for AI training and fine-tuning. This repository is a modern, dark-themed front-end (with optional local Node server) showcasing services, platform positioning, and conversion-focused sections. The public site is served at ditosis.gense.my.',
        features: [
            'Dark UI with cyan/teal gradient accents and polished marketing sections',
            'Responsive layout with scroll-triggered animations and interactive touches (e.g. particle-style hero treatment)',
            'Content blocks for services, platform narrative, industries, social proof, and lead capture',
            'Production deployment at ditosis.gense.my',
            'Static-first workflow with GitHub Pages–friendly entry point',
            'Optional Node-based local server for development (see repository)',
            'Modular structure with pages/partials for maintainable markup'
        ],
        tech: ['HTML', 'CSS', 'JavaScript', 'Node.js', 'GitHub Pages', 'Responsive Design'],
        challenges: 'Balancing a bold marketing aesthetic with performance and readability—keeping animations smooth across devices while keeping the codebase simple enough to host as static assets and iterate on copy and layout quickly.',
        liveUrl: 'https://ditosis.gense.my/',
        repoUrl: 'https://github.com/cebause01/Ditosis'
    },
    'multi-llm': {
        tag: 'AI/ML',
        title: 'Multi-LLM Chat Application',
        description: 'A modern AI chat application that compares responses from 5 different AI models simultaneously using the OpenRouter API. Features an intelligent judging system that evaluates and selects the best response, with support for images and file uploads.',
        features: [
            'Multi-model comparison - sends queries to 5 AI models simultaneously',
            'Intelligent judging system that evaluates and selects the best response',
            'Image upload and analysis support',
            'File upload and text processing capabilities',
            'Modern, minimalist UI inspired by OpenAI',
            'Customizable model selection and judge model configuration'
        ],
        tech: ['React', 'Vite', 'Node.js', 'Express', 'OpenRouter API', 'JavaScript', 'CSS'],
        challenges: 'Implementing a system that efficiently handles multiple concurrent API calls to different AI models while maintaining performance and user experience. The challenge involved creating a robust judging mechanism that could fairly evaluate responses from different models and handle various input types including text, images, and files.',
        repoUrl: 'https://github.com/cebause01/Multi-LLM'
    },
    'llm-finetuning': {
        tag: 'AI Fine-Tuning',
        title: 'LLM Fine-Tuning & Model Deployment (AuraAI)',
        description: 'Specialized in fine-tuning large language models using Unsloth for efficient training, converting models to GGUF format, and deploying them locally via Ollama. Published multiple custom models on Hugging Face including the AuraAI series (AuraAI-A through AuraAI-D) and ZarifAI.',
        features: [
            'Fine-tuning LLMs using Unsloth for faster and more memory-efficient training',
            'Converting fine-tuned models to GGUF format for local deployment',
            'Deploying models locally using Ollama for offline inference',
            'Publishing and sharing models on Hugging Face platform',
            'Created AuraAI series (A, B, C, D) and ZarifAI models',
            'Optimizing models for different use cases and performance requirements'
        ],
        tech: ['Unsloth', 'GGUF', 'Ollama', 'Hugging Face', 'PyTorch', 'Transformers', 'Model Fine-Tuning', 'LLM'],
        challenges: 'Fine-tuning large language models efficiently while managing computational resources and memory constraints. The challenge involved learning Unsloth optimization techniques, understanding GGUF conversion processes, and ensuring models work seamlessly with Ollama for local deployment. Balancing model performance, size, and inference speed was crucial for creating usable models.',
        liveUrl: 'https://huggingface.co/zarifhaikal01',
        liveLabel: 'View on Hugging Face',
        repoUrl: 'https://github.com/cebause01/whatsapp-ai-training'
    },
    'sign-language': {
        tag: 'Computer Vision',
        title: 'Real-Time Sign Language Translator',
        description: 'A real-time sign language translator using YOLOv8 for gesture detection via webcam. Features custom-trained models, manual data collection, and Roboflow for dataset processing and augmentation.',
        features: [
            'Real-time gesture recognition using webcam',
            'Custom-trained YOLOv8 model for high accuracy',
            'Manual data collection and annotation process',
            'Roboflow integration for dataset augmentation',
            'OpenCV integration for video processing',
            'User-friendly interface with live feedback'
        ],
        tech: ['YOLOv8', 'OpenCV', 'Python', 'PyTorch', 'Roboflow', 'NumPy', 'Computer Vision'],
        challenges: 'The main challenge was collecting and annotating a diverse dataset of sign language gestures. This was solved by implementing a systematic data collection process and using Roboflow for data augmentation to improve model robustness across different lighting conditions and hand positions.',
        repoUrl: 'https://github.com/cebause01/RT-SignLanguage-YOLOv8'
    },
    'hospital-db': {
        tag: 'Database Systems',
        title: 'Hospital Database Management System',
        description: 'A comprehensive database management system for hospitals, built with Oracle, ensuring efficient patient records management and streamlined healthcare operations.',
        features: [
            'Patient records management',
            'Appointment scheduling system',
            'Doctor and staff management',
            'Medical history tracking',
            'Billing and insurance integration',
            'Secure data handling with role-based access'
        ],
        tech: ['Oracle Database', 'SQL', 'PL/SQL', 'Database Design', 'System Architecture', 'Data Security'],
        challenges: 'Designing a scalable database schema that could handle complex relationships between patients, doctors, appointments, and medical records while maintaining data integrity and security. Implemented proper normalization and indexing strategies to optimize query performance.',
        repoUrl: null
    },
    'gmaps-scraper': {
        tag: 'Web Scraping',
        title: 'Google Maps Data Scraper',
        description: 'A JavaScript-based web scraping tool for extracting business data from Google Maps. Built for market research and data collection purposes with efficient automation capabilities.',
        features: [
            'Automated business information extraction',
            'Location-based search capabilities',
            'Export data to CSV/JSON formats',
            'Rate limiting to avoid detection',
            'Customizable search parameters',
            'Error handling and retry mechanisms'
        ],
        tech: ['JavaScript', 'Node.js', 'Puppeteer', 'Web Scraping', 'Automation', 'Data Extraction'],
        challenges: 'Handling dynamic content loading and anti-scraping measures. Implemented smart delays, user-agent rotation, and proper DOM waiting mechanisms to ensure reliable data extraction while respecting website policies.',
        repoUrl: null
    },
    'telegram-scraper': {
        tag: 'Data Processing',
        title: 'Telegram Data Scraper',
        description: 'A Python-based automation tool for scraping data from Telegram channels and groups. Utilizes API integration and web automation for efficient data collection and analysis.',
        features: [
            'Channel and group message extraction',
            'Media file downloading',
            'User information collection',
            'Message history archiving',
            'Keyword-based filtering',
            'Scheduled automated scraping'
        ],
        tech: ['Python', 'Telethon', 'Telegram API', 'asyncio', 'API Integration', 'Automation'],
        challenges: 'Managing API rate limits and handling large volumes of data efficiently. Implemented asynchronous processing and batch operations to improve performance while staying within Telegram API constraints.',
        repoUrl: null
    },
    'pdf-processor': {
        tag: 'PDF Processing',
        title: 'PDF Processor',
        description: 'A Python application for processing and manipulating PDF files. Features include text extraction, page manipulation, merging, and automated processing for document workflow management.',
        features: [
            'Text extraction from PDFs',
            'PDF merging and splitting',
            'Page rotation and reordering',
            'Watermark addition',
            'Batch processing capabilities',
            'OCR support for scanned documents'
        ],
        tech: ['Python', 'PyPDF2', 'PDF Libraries', 'Text Extraction', 'Document Processing', 'OCR'],
        challenges: 'Handling various PDF formats and ensuring text extraction accuracy across different document types. Implemented multiple extraction strategies and fallback mechanisms to handle edge cases and corrupted files.',
        repoUrl: 'https://github.com/cebause01/PDFProcessor'
    },
    'gizmok': {
        tag: 'AI/ML',
        title: 'Gizmok: AI Learning Platform',
        description: 'A dark-themed study platform that turns uploaded PDFs into AI-generated flashcards and quizzes. It combines Gizmo-style flashcard learning with GoodNotes-style digital note-taking, and ranks students on university leaderboards.',
        features: [
            'Upload a PDF to generate flashcard decks and quiz questions with an LLM',
            'Study mode with card flipping, difficulty ratings and spaced repetition',
            'Handwritten and typed notes on blank, lined, grid or dotted paper, with PNG export',
            'Points for correct quiz answers and a per-university leaderboard',
            'Sign-up with university selection and a customizable student card',
            'Responsive dark UI built for mobile study'
        ],
        tech: ['React', 'TypeScript', 'Vite', 'React Router', 'Groq LLM API', 'LocalStorage'],
        challenges: 'Getting useful study material out of arbitrary PDFs: the app extracts the key concepts from the document text and shapes them into question/answer pairs and quiz options, while keeping every user\'s decks, notes and scores isolated in client-side storage.',
        liveUrl: 'https://gizmok.vercel.app',
        repoUrl: 'https://github.com/cebause01/gizmok-learning-platform'
    },
    'cedge': {
        tag: 'Full-Stack SaaS',
        title: 'Cedge: Hybrid Accounting Platform',
        description: 'A Malaysia-first MERN accounting SaaS that keeps personal and company ledgers strictly separate under one user identity. It covers compliance-aware expense handling, document ingestion workflows and management reporting, in a monorepo with a shared TypeScript package for the API and the web dashboard.',
        features: [
            'Separate personal and company ledgers with smart entity switching',
            'Journals post only through one service that checks debits equal credits and accounts belong to the entity',
            'Malaysia expense rules that record the rule version, evidence needed and any override reason',
            'Role-based access for owner, accountant, approver and webmaster accounts',
            'Quick-log, compliance queue, management reports and tax center screens',
            'Shared Zod request schemas, DTOs and chart of accounts across API and web'
        ],
        tech: ['MongoDB', 'Express', 'React', 'Node.js', 'TypeScript', 'Zod', 'Vite', 'Mongoose'],
        challenges: 'Accounting data has to stay correct and auditable. The platform routes every journal through a single validated posting path, builds reports only from posted journals, and stores the reasoning behind each expense decision so an accountant can review it before tax filing.',
        repoUrl: 'https://github.com/cebause01/cedge'
    },
    'turhr': {
        tag: 'Full-Stack',
        title: 'TurHR: HR Management System',
        description: 'A full-stack HR management system with an HTML/Tailwind frontend and a Node.js/Express REST API backed by MongoDB. The frontend and the API live in separate repositories.',
        features: [
            'Role-based access control with 5 role levels and role-aware navigation',
            'Payroll processing',
            'Attendance tracking with check-in and check-out',
            'Employee directory with search and filters',
            'Project assignment and employee messaging',
            'Dashboard with analytics charts and email invitations'
        ],
        tech: ['Node.js', 'Express', 'MongoDB', 'Mongoose', 'JWT', 'Tailwind CSS', 'JavaScript'],
        challenges: 'Enforcing five permission levels consistently on both sides: the API checks roles in its auth middleware, and the frontend builds its navigation from the same roles so users only see the pages they can use.',
        liveUrl: 'https://github.com/cebause01/turhr-api',
        liveLabel: 'View API on GitHub',
        repoUrl: 'https://github.com/cebause01/turhr'
    },
    'kampuskafe': {
        tag: 'Progressive Web App',
        title: 'KampusKafe (LenduEats): Campus Food Ordering PWA',
        description: 'A mobile-first, installable Progressive Web App for UiTM Lendu students to order food from 8 campus cafés, pay with a student wallet or by scanning a QR code, and collect loyalty points. The live demo has a public demo account.',
        features: [
            'Ordering across 8 campus cafés with delivery or pickup',
            'Student wallet with simulated FPX and Touch \'n Go top-ups',
            'QR scan and pay at merchants',
            'Loyalty points, tiers and rewards',
            'Pre-order scheduling and live order tracking',
            'Installable PWA'
        ],
        tech: ['Next.js', 'Tailwind CSS', 'shadcn/ui', 'PWA', 'TypeScript'],
        challenges: 'Making a web app feel like a native campus app on students\' phones: a mobile-first layout with bottom navigation, PWA install to the home screen, and short flows for the common tasks of ordering, paying and checking points.',
        liveUrl: 'https://uitm-app.vercel.app',
        repoUrl: 'https://github.com/cebause01/lendueats'
    },
    'ocr-web-app': {
        tag: 'OCR / Document AI',
        title: 'OCR Web App',
        description: 'A Laravel web app for extracting text from photos of documents. Uploaded images are cropped to the document with OpenCV and then read with EasyOCR, which runs as a Python process called from Laravel.',
        features: [
            'Upload a document photo from the browser',
            'Automatic document detection and cropping with OpenCV',
            'Text extraction with EasyOCR',
            'Extracted text shown back in the web UI',
            'Laravel backend calling a Python OCR pipeline',
            'Tailwind CSS interface'
        ],
        tech: ['Laravel', 'PHP', 'Python', 'EasyOCR', 'OpenCV', 'Tailwind CSS'],
        challenges: 'Joining a PHP web app to a Python computer-vision pipeline: Laravel hands each upload to the Python script and returns its output, and cropping the photo to the document first gives the OCR step a cleaner image to read.',
        repoUrl: 'https://github.com/cebause01/ocr-web-app'
    }
};

const externalLinkSvg = `
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
        <polyline points="15 3 21 3 21 9"></polyline>
        <line x1="10" y1="14" x2="21" y2="3"></line>
    </svg>`;
const githubSvg = `
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
        <path d="M9 18c-4.51 2-5-2-7-2"></path>
    </svg>`;

const repoLinkLabel = (url) => {
    if (url.includes('github.com')) return 'View on GitHub';
    if (url.includes('huggingface.co')) return 'View on Hugging Face';
    return 'View Code';
};

const setModalLink = (link, url, iconSvg, label, ariaLabel) => {
    if (!link) return;
    if (url) {
        link.href = url;
        link.innerHTML = `${iconSvg} ${label}`;
        link.setAttribute('aria-label', ariaLabel);
        link.hidden = false;
    } else {
        link.removeAttribute('href');
        link.removeAttribute('aria-label');
        link.hidden = true;
    }
};

const focusableSelector = 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])';
let modalTrigger = null;

const getModalFocusable = () =>
    Array.from(modal.querySelectorAll(focusableSelector)).filter(el => !el.hidden && el.offsetParent !== null);

const openProjectModal = (projectId, trigger) => {
    const project = projectData[projectId];
    if (!project || !modal) return;

    modal.querySelector('.modal-tag').textContent = project.tag;
    modal.querySelector('.modal-title').textContent = project.title;
    modal.querySelector('.modal-description').textContent = project.description;

    const featuresList = modal.querySelector('.modal-features-list');
    featuresList.innerHTML = '';
    project.features.forEach(feature => {
        const li = document.createElement('li');
        li.textContent = feature;
        featuresList.appendChild(li);
    });

    const techStack = modal.querySelector('.modal-tech-stack');
    techStack.innerHTML = '';
    project.tech.forEach(tech => {
        const span = document.createElement('span');
        span.textContent = tech;
        techStack.appendChild(span);
    });

    modal.querySelector('.modal-challenges-text').textContent = project.challenges;

    const liveLabel = project.liveLabel || 'Visit Site';
    setModalLink(
        modal.querySelector('.modal-live-link'),
        project.liveUrl,
        project.liveUrl && project.liveUrl.includes('github.com') ? githubSvg : externalLinkSvg,
        liveLabel,
        `${liveLabel}: ${project.title}`
    );
    const repoUrl = project.repoUrl;
    setModalLink(
        modal.querySelector('.modal-github-link'),
        repoUrl,
        repoUrl && repoUrl.includes('github.com') ? githubSvg : externalLinkSvg,
        repoUrl ? repoLinkLabel(repoUrl) : '',
        repoUrl ? `${repoLinkLabel(repoUrl)}: ${project.title}` : ''
    );
    const footer = modal.querySelector('.modal-footer');
    if (footer) footer.hidden = !project.liveUrl && !repoUrl;

    modalTrigger = trigger || document.activeElement;
    modal.classList.add('active');
    document.body.style.overflow = 'hidden';
    modal.querySelector('.modal-content').scrollTop = 0;
    modalClose?.focus();
};

projectDetailsButtons.forEach(button => {
    button.addEventListener('click', () => {
        openProjectModal(button.getAttribute('data-project'), button);
    });
});

const closeModal = () => {
    if (!modal || !modal.classList.contains('active')) return;
    modal.classList.remove('active');
    document.body.style.overflow = '';
    if (modalTrigger && typeof modalTrigger.focus === 'function') {
        modalTrigger.focus();
    }
    modalTrigger = null;
};

modalClose?.addEventListener('click', closeModal);
modalOverlay?.addEventListener('click', closeModal);

// Escape closes; Tab / Shift+Tab stay inside the dialog
document.addEventListener('keydown', (e) => {
    if (!modal?.classList.contains('active')) return;

    if (e.key === 'Escape') {
        closeModal();
        return;
    }

    if (e.key === 'Tab') {
        const focusable = getModalFocusable();
        if (focusable.length === 0) {
            e.preventDefault();
            return;
        }
        const first = focusable[0];
        const last = focusable[focusable.length - 1];
        if (e.shiftKey && (document.activeElement === first || !modal.contains(document.activeElement))) {
            e.preventDefault();
            last.focus();
        } else if (!e.shiftKey && (document.activeElement === last || !modal.contains(document.activeElement))) {
            e.preventDefault();
            first.focus();
        }
    }
});

// ===================================
// Skill Modal
// ===================================
const skillModal = document.getElementById('skillModal');
const skillModalOverlay = skillModal?.querySelector('.modal-overlay');
const skillModalClose = skillModal?.querySelector('.modal-close');

// Brief descriptions for skills/technologies
const skillData = {
    'Python': 'General-purpose language used for AI/ML, automation, and scripting. Experienced with data analysis, computer vision, and model training.',
    'JavaScript': 'Primary language for web interactivity and tooling. Comfortable with DOM, async patterns, and automation/scraping.',
    'SQL': 'Writing queries, joins, aggregations, and optimizing database operations for analytics and apps.',
    'HTML/CSS': 'Building responsive, accessible UIs with modern layout techniques and design systems.',
    'Java': 'Object-oriented programming for backend and academic projects; strong fundamentals and tooling.',
    'C++': 'Performance-focused programming and data structures/algorithms fundamentals.',
    'TensorFlow': 'Building and deploying neural networks for classification and detection tasks.',
    'PyTorch': 'Research-friendly deep learning framework used for computer vision projects and training loops.',
    'Keras': 'High-level API for rapid prototyping of neural networks on top of TensorFlow.',
    'Scikit-learn': 'Classical ML toolkit for preprocessing, modeling, and evaluation.',
    'YOLOv8': 'Real-time object detection framework used in sign language translator project.',
    'OpenCV': 'Computer vision library for image processing, video streams, and augmentation.',
    'Git': 'Version control workflows including branching, pull requests, and code reviews.',
    'Docker': 'Containerizing apps for reproducible environments and smoother deployments.',
    'Oracle Database': 'Relational database design, PL/SQL, and performance considerations.',
    'VS Code': 'Daily driver editor with extensions, debugging, and workspace setup.',
    'Jupyter': 'Interactive notebooks for data exploration, experimentation, and reporting.',
    'Pandas': 'Data manipulation and analysis using DataFrame operations and pipelines.',
    'Computer Vision': 'Detection, tracking, and image processing pipelines using CV and DL.',
    'Deep Learning': 'Designing, training, and evaluating neural networks for CV and NLP tasks.',
    'Machine Learning': 'Supervised/unsupervised methods, model selection, and validation.',
    'Web Scraping': 'Automating data extraction with headless browsers and API-aware techniques.',
    'Data Analysis': 'EDA, cleaning, visualization, and insight generation for decision-making.',
    'Neural Networks': 'Architectures, loss functions, optimization strategies, and training stability.'
};

const openSkillModal = (title, description) => {
    if (skillModal) {
        const titleEl = skillModal.querySelector('.modal-title');
        const descEl = skillModal.querySelector('.modal-description');
        if (titleEl) titleEl.textContent = title;
        if (descEl) descEl.textContent = description;
        skillModal.classList.add('active');
        document.body.style.overflow = 'hidden';
    }
};

const closeSkillModal = () => {
    if (skillModal) {
        skillModal.classList.remove('active');
        document.body.style.overflow = '';
    }
};

// Attach click handlers to tech items
document.querySelectorAll('.tech-item').forEach(item => {
    item.addEventListener('click', () => {
        const name = item.querySelector('.tech-name')?.textContent?.trim();
        if (!name) return;
        const description = skillData[name] || 'No additional details available for this skill yet.';
        openSkillModal(name, description);
    });
});

// Close events for skill modal
skillModalClose?.addEventListener('click', closeSkillModal);
skillModalOverlay?.addEventListener('click', closeSkillModal);
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && skillModal?.classList.contains('active')) {
        closeSkillModal();
    }
});

// ===================================
// Animated Stats Counter
// ===================================
const statNumbers = document.querySelectorAll('.stat-number');
let statsAnimated = false;

const animateStats = () => {
    statNumbers.forEach(stat => {
        const target = parseFloat(stat.getAttribute('data-target'));
        const duration = 2000; // 2 seconds
        const increment = target / (duration / 16); // 60fps
        let current = 0;
        
        const updateCounter = () => {
            current += increment;
            if (current < target) {
                // Handle decimal values
                if (target % 1 !== 0) {
                    stat.textContent = current.toFixed(2);
                } else {
                    stat.textContent = Math.floor(current);
                }
                requestAnimationFrame(updateCounter);
            } else {
                // Final value
                if (target % 1 !== 0) {
                    stat.textContent = target.toFixed(2);
                } else {
                    stat.textContent = target;
                }
            }
        };
        
        updateCounter();
    });
};

// Trigger animation when stats section is in view
const statsObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting && !statsAnimated) {
            animateStats();
            statsAnimated = true;
        }
    });
}, { threshold: 0.5 });

const statsSection = document.querySelector('.stats-section');
if (statsSection) {
    statsObserver.observe(statsSection);
}

// ===================================
// Image Lightbox
// ===================================
const lightbox = document.getElementById('imageLightbox');
const lightboxImage = lightbox?.querySelector('.lightbox-image');
const lightboxOverlay = lightbox?.querySelector('.lightbox-overlay');
const lightboxClose = lightbox?.querySelector('.lightbox-close');
const lightboxPrev = lightbox?.querySelector('.lightbox-prev');
const lightboxNext = lightbox?.querySelector('.lightbox-next');
const lightboxCurrent = lightbox?.querySelector('.lightbox-current');
const lightboxTotal = lightbox?.querySelector('.lightbox-total');
const galleryItems = document.querySelectorAll('.gallery-item');

let currentImageIndex = 0;
const images = Array.from(galleryItems).map(item => item.getAttribute('data-image'));
const galleryAlts = Array.from(galleryItems).map(
    (item) => item.querySelector('img')?.getAttribute('alt') || 'Photography'
);

// Update lightbox total count
if (lightboxTotal) {
    lightboxTotal.textContent = images.length;
}

// Open lightbox
const openLightbox = (index) => {
    if (lightbox && lightboxImage) {
        currentImageIndex = index;
        lightboxImage.src = images[index];
        lightboxImage.alt = galleryAlts[index] || '';
        if (lightboxCurrent) {
            lightboxCurrent.textContent = index + 1;
        }
        lightbox.classList.add('active');
        document.body.style.overflow = 'hidden';
    }
};

// Close lightbox
const closeLightbox = () => {
    if (lightbox) {
        lightbox.classList.remove('active');
        document.body.style.overflow = '';
    }
};

// Navigate to previous image
const prevImage = () => {
    currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
    openLightbox(currentImageIndex);
};

// Navigate to next image
const nextImage = () => {
    currentImageIndex = (currentImageIndex + 1) % images.length;
    openLightbox(currentImageIndex);
};

// Add click events to gallery items
galleryItems.forEach((item, index) => {
    item.addEventListener('click', () => {
        openLightbox(index);
    });
});

// Lightbox controls
lightboxClose?.addEventListener('click', closeLightbox);
lightboxOverlay?.addEventListener('click', closeLightbox);
lightboxPrev?.addEventListener('click', prevImage);
lightboxNext?.addEventListener('click', nextImage);

// Keyboard navigation for lightbox
document.addEventListener('keydown', (e) => {
    if (lightbox?.classList.contains('active')) {
        if (e.key === 'Escape') {
            closeLightbox();
        } else if (e.key === 'ArrowLeft') {
            prevImage();
        } else if (e.key === 'ArrowRight') {
            nextImage();
        }
    }
});

// ===================================
// Console Easter Egg
// ===================================
console.log(
    '%cHi there! 👋',
    'color: #fafafa; font-size: 20px; font-weight: bold; font-family: monospace;'
);
console.log(
    '%cWelcome to my portfolio!',
    'color: #9ca3af; font-size: 14px; font-family: monospace;'
);
console.log(
    '%cThanks for checking out my code 🚀',
    'color: #a3a3a3; font-size: 14px; font-family: monospace;'
);
console.log(
    '%cConnect with me:\nGitHub: github.com/cebause01\nLinkedIn: linkedin.com/in/zarifhaikalz',
    'color: #d4d4d4; font-size: 12px; font-family: monospace;'
);

// ===================================
// Lazy-load 3D Skills Dome on Scroll
// ===================================
const domeSkillsRoot = document.getElementById('dome-skills-root');
if (domeSkillsRoot) {
    let domeLoaded = false;
    const loadDome = () => {
        if (domeLoaded) return;
        domeLoaded = true;

        const css = document.createElement('link');
        css.rel = 'stylesheet';
        css.href = 'dome/dome-skills.css?v=4';
        document.head.appendChild(css);

        const script = document.createElement('script');
        script.src = 'dome/dome-skills.js?v=4';
        script.defer = true;
        document.body.appendChild(script);
    };

    if ('IntersectionObserver' in window) {
        const observer = new IntersectionObserver((entries) => {
            if (entries[0].isIntersecting) {
                observer.disconnect();
                if ('requestIdleCallback' in window) {
                    requestIdleCallback(loadDome, { timeout: 1500 });
                } else {
                    setTimeout(loadDome, 100);
                }
            }
        }, { rootMargin: '100px 0px' });
        observer.observe(domeSkillsRoot);
    } else {
        window.addEventListener('load', () => {
            setTimeout(loadDome, 1000);
        }, { once: true });
    }
}