script.js

// Courses data
const coursesData = {
    csc: {
        title: 'Computer Science',
        icon: 'fas fa-code',
        courses: [
            { code: 'CSC110Y1', name: 'Foundations of Computer Science I' },
            { code: 'CSC111H1', name: 'Foundations of Computer Science II' },
            { code: 'CSC207H1', name: 'Software Design' },
            { code: 'CSC209H1', name: 'Software Tools & Systems Programming' },
            { code: 'CSC236H1', name: 'Introduction to Theory of Computation' },
            { code: 'CSC258H1', name: 'Computer Organization' },
            { code: 'CSC263H1', name: 'Data Structures & Analysis' },
            { code: 'CSC301H1', name: 'Introduction to Software Engineering' },
            { code: 'CSC309H1', name: 'Programming on the Web' },
            { code: 'CSC311H1', name: 'Introduction to Machine Learning' },
            { code: 'CSC343H1', name: 'Introduction to Databases' },
            { code: 'CSC367H1', name: 'Parallel Programming' },
            { code: 'CSC369H1', name: 'Operating Systems' },
            { code: 'CSC373H1', name: 'Algorithm Design & Analysis' },
            { code: 'CSC384H1', name: 'Introduction to Artificial Intelligence' }
        ]
    },
    mat: {
        title: 'Mathematics',
        icon: 'fas fa-calculator',
        courses: [
            { code: 'MAT137Y1', name: 'Calculus with Proofs' },
            { code: 'MAT223H1', name: 'Linear Algebra I' },
            { code: 'MAT235Y1', name: 'Multivariable Calculus' }
        ]
    },
    sta: {
        title: 'Statistics',
        icon: 'fas fa-chart-bar',
        courses: [
            { code: 'STA237H1', name: 'Probability, Statistics & Data Analysis I' },
            { code: 'STA238H1', name: 'Probability, Statistics & Data Analysis II' }
        ]
    },
    breadth: {
        title: 'Breadth Requirements',
        icon: 'fas fa-book-open',
        courses: [
            { code: 'ECO105Y1', name: 'Principles of Economics (Non-Specialist)' },
            { code: 'LIN102H1', name: 'Introduction to Linguistics: Sentence' },
            { code: 'NML110Y1', name: 'Elementary Arabic' },
            { code: 'RLG204H1', name: 'Islam' }
        ]
    }
};

// Scholarships data
const scholarshipsData = [
    {
        name: 'Mary Emily Pearson Scholarship',
        description: 'Awarded for academic excellence and leadership potential',
        icon: 'fas fa-medal'
    },
    {
        name: 'The Susan And Murray Armitage Scholarship I',
        description: 'Recognition of outstanding academic achievement in Computer Science',
        icon: 'fas fa-trophy'
    },
    {
        name: 'The Regents In-Course Scholarship',
        description: 'Merit-based scholarship for continuing students with exceptional performance',
        icon: 'fas fa-award'
    }
];

// Career data for modals
const careerData = {
    'incubella': {
        title: 'AI/SWE Intern',
        company: 'Incubella – <a href="https://mysentiment.ai" target="_blank" rel="noopener noreferrer">MySentiment.ai</a> / <a href="https://incubella.co" target="_blank" rel="noopener noreferrer">incubella.co</a>',
        linkedin: 'https://www.linkedin.com/company/incubella/posts/?feedView=all',
        location: 'Toronto, ON',
        duration: 'Jun 2025 – Sep 2025',
        description: 'Spearheaded development of cutting-edge sentiment analysis platform, transforming social media data into actionable business intelligence.',
        responsibilities: [
            'Spearheaded full-stack development of Sentiment AI using FastAPI and Next.js, delivering a robust and scalable web app that converts social media data into actionable sentiment snapshots',
            'Enabled users to track emerging trends, shifting sentiment, and long-term cultural cycles at the click of a button',
            'Integrated secure authentication using Clerk, streamlining login flows and ensuring zero-friction sign-in experience for beta users',
            'Implemented MongoDB database architecture for robust data integrity, ensuring reliable storage and retrieval of sentiment analysis results and user data across the platform',
            'Deployed Hugging Face fine-tuned NLP models for accurate classification alongside Grok-4 to generate high-accuracy sentiment scoring and meaningful keyword insights in real time',
            'Delivered and launched the MVP in open beta, engaging users and validating key product hypotheses'
        ],
        technologies: ['FastAPI', 'Next.js', 'MongoDB', 'Clerk Authentication', 'Hugging Face', 'Grok-4', 'NLP', 'Machine Learning', 'React', 'Python'],
        achievements: [
            'Successfully launched MVP in open beta with positive user engagement',
            'Built scalable architecture capable of real-time sentiment analysis',
            'Integrated advanced AI models for high-accuracy predictions',
            'Delivered zero-friction authentication system for seamless user experience'
        ]
    },
    'rabyt': {
        title: 'Developer Intern',
        company: 'Rabyt – <a href="https://rabyt.ai" target="_blank" rel="noopener noreferrer">Rabyt.ai</a>',
        linkedin: 'https://www.linkedin.com/company/rabytai/posts/?feedView=all',
        location: 'Toronto, ON',
        duration: 'May 2025 – Jun 2025',
        description: 'Contributing to the development of innovative financial technology solutions with cross-platform desktop applications and AI-driven analysis.',
        responsibilities: [
            'Contributed to the development of Rabyt.ai\'s cross-platform desktop application using Electron.js, enhancing product stability and user interface responsiveness',
            'Integrated spreadsheet processing capabilities using Univer and SheetJS libraries, enabling dynamic data manipulation and financial data visualization within the app',
            'Collaborated with cross-functional teams to develop and refine React-based interfaces for financial data workflows, translating complex financial insights into intuitive user experiences',
            'Conducted in-depth research on emerging financial technologies to support the design of AI-driven financial analysis features and improve product-market fit'
        ],
        technologies: ['Electron.js', 'React', 'Univer', 'SheetJS', 'JavaScript', 'Node.js', 'Financial APIs', 'Data Visualization'],
        achievements: [
            'Enhanced application stability and user interface responsiveness',
            'Enabled dynamic financial data manipulation and visualization',
            'Improved user experience for complex financial workflows',
            'Contributed to AI-driven financial analysis feature design'
        ]
    },
    'genledge': {
        title: 'Software Engineering Intern',
        company: 'GenLedge – <a href="https://genledge.ai/" target="_blank" rel="noopener noreferrer">genledge.ai</a>',
        linkedin: 'https://www.linkedin.com/company/genledge/posts/?feedView=all',
        location: 'Toronto, ON',
        duration: '2025 – Present',
        description: 'Engineered autonomous agent infrastructure for an early-stage AI-powered accounting automation startup, enabling AI employees to independently execute, review, and deliver financial work end-to-end with zero human intervention.',
        responsibilities: [
            'Designed and implemented multi-agent orchestration pipelines in Python and FastAPI, enabling autonomous task handoff, peer review, and self-healing escalation across AI employees',
            'Built a full artifact lifecycle system — from AI-generated financial reports through autonomous PM review, browser-based UAT, and publishing — with each stage driven by a separate AI agent heartbeat',
            'Developed real-time streaming interfaces in React and TypeScript, including live artifact rendering, SSE-based chat, and a financial dashboard with dynamic charting',
            'Integrated browser automation using Playwright and Chrome DevTools Protocol to enable AI agents to interact with external portals and visually validate deliverables',
            'Built an email integration layer allowing AI employees to monitor inboxes, parse incoming financial documents, and trigger automated workflows in response',
            'Managed PostgreSQL schema design and Alembic migrations to support evolving agent state machines and workflow models',
            'Contributed across the full stack including a Tauri desktop application, REST API design, and Claude Code subprocess orchestration'
        ],
        technologies: ['Python', 'FastAPI', 'TypeScript', 'React', 'PostgreSQL', 'Alembic', 'Playwright', 'CDP', 'Tauri', 'Zustand', 'SSE', 'MCP', 'Claude Code', 'LLM Integration'],
        achievements: [
            'Pioneered core agent infrastructure from the ground up at an early-stage startup, directly shaping the technical foundation of the product',
            'Delivered a fully autonomous end-to-end financial workflow — AI-generated reports through autonomous review, browser-based UAT, and publishing — with zero human intervention',
            'Built production-ready multi-agent orchestration with self-healing escalation logic, establishing a reliable backbone for the startup\'s core offering',
            'Shipped real-time streaming UI with live artifact rendering and SSE-based chat, accelerating stakeholder feedback cycles at startup speed',
            'Integrated email automation enabling AI agents to independently monitor, parse, and act on incoming financial documents without human triggering'
        ]
    },
    'fns': {
        title: 'Junior Part-Time Developer',
        company: 'FnS Consultancy Inc.',
        location: 'Pickering, ON',
        duration: 'Jul 2023 – July 2024',
        description: 'Developed enterprise-level applications and APIs while optimizing database performance and enhancing user experiences.',
        responsibilities: [
            'Collaborated with cross-functional teams to design and develop RESTful APIs and applications using C#, .NET and Java, ensuring seamless data integration across systems',
            'Improved productivity and feature delivery speed through efficient API design and implementation',
            'Engineered scalable solutions and optimized query systems using SQL, enhancing database performance and boosting application efficiency by 25%',
            'Improved Business Efficiency through Power BI and other Power Platform tools',
            'Enhanced UX with React and JavaScript, building a variety of responsive interfaces for improved client satisfaction'
        ],
        technologies: ['C#', '.NET', 'Java', 'SQL Server', 'React', 'JavaScript', 'Power BI', 'Power Platform', 'REST APIs'],
        achievements: [
            'Boosted application efficiency by 25% through database optimization',
            'Improved productivity and accelerated feature delivery',
            'Enhanced client satisfaction through responsive interface development',
            'Implemented seamless data integration across multiple systems'
        ]
    }
};

// Project data for modals
const projectData = {
    'trippy': {
        title: 'Trippy - AI Travel Planner',
        status: 'In Progress',
        description: 'A full-stack AI travel planner that creates personalized itineraries based on user preferences.',
        features: [
            'Intelligent flight and hotel search using multi-agent system',
            'Personalized itinerary generation with LangChain and Gemini Pro',
            'Secure user authentication with Supabase Auth',
            'Modern, responsive frontend with Next.js and Tailwind CSS',
            'Backend validation and SQL-based data management'
        ],
        technologies: ['Next.js', 'Tailwind CSS', 'FastAPI', 'LangChain', 'Gemini Pro', 'Supabase'],
        highlights: [
            'Architected modular multi-agent system for intelligent travel planning',
            'Integrated multiple APIs for comprehensive travel data',
            'Built responsive UI for seamless user experience'
        ]
    },
    'learnai': {
        title: 'LearnAI - Intelligent Learning Platform',
        status: 'In Progress',
        description: 'An innovative startup project empowering students with AI-powered learning tools, structured notes, and collaborative features.',
        features: [
            'AI chatbot for interactive learning conversations',
            'Automatic conversion of AI responses into structured notes',
            'Personalized learning path generation',
            'Social learning pods for collaboration',
            'Interactive quizzes and practice sessions'
        ],
        technologies: ['FastAPI', 'Next.js', 'LangChain', 'RAG Pipeline', 'Gemini', 'OpenAI', 'Supabase', 'Clerk'],
        highlights: [
            'Built advanced RAG pipelines for intelligent content generation',
            'Implemented secure authentication and user management',
            'Designed scalable database structures for learning data'
        ]
    },
    'uoft-messenger': {
        title: 'UofT-Messenger',
        status: 'Completed',
        description: 'A comprehensive Java-based social media chat application designed for seamless real-time communication.',
        features: [
            'Real-time messaging with Java Swing interface',
            'Friend management and profile updates',
            'Advanced friend recommendation system using external API',
            'Scalable MongoDB integration with REST APIs',
            'Maven-optimized development workflow'
        ],
        technologies: ['Java', 'Java Swing', 'MongoDB', 'REST APIs', 'Maven'],
        highlights: [
            'Led development of Java-based social media platform',
            'Implemented friend recommendation system boosting user engagement',
            'Optimized development workflows reducing deployment time by 20%',
            'Ensured scalability and reliability for heavy user activity'
        ]
    },
    'healthy': {
        title: 'Healthy - AI Health Monitor',
        status: 'Completed',
        description: 'A comprehensive C# WPF health monitoring application with AI-powered predictive analytics.',
        features: [
            'User-friendly health metrics collection and validation',
            'SQL database integration for historical tracking',
            'Flask-based API for AI/ML model communication',
            'Heart disease and blood sugar risk prediction',
            'Personalized health insights using scikit-learn'
        ],
        technologies: ['C#', 'WPF', 'SQL Server', 'Flask', 'Python', 'scikit-learn', 'AI/ML'],
        highlights: [
            'Integrated advanced predictive analytics with Flask API',
            'Built secure data storage with historical trend tracking',
            'Implemented AI/ML models for health risk prediction',
            'Created intuitive interface for proactive health management'
        ]
    },
    'flowcraft': {
        title: 'FlowCraft - Intelligent Automation Hub',
        status: 'Completed',
        description: 'A comprehensive automation platform that revolutionizes workflow management with intelligent Gmail automation and one-click execution capabilities.',
        features: [
            'Intelligent Gmail workflow automation for email management',
            'Seamless interface for automated workflow execution',
            'Advanced email filtering and response automation',
            'Secure user authentication with Clerk',
            'Scalable SQL storage with Supabase',
            'Google Cloud Console integration for enterprise reliability',
            'One-click n8n workflow execution for complex automations'
        ],
        technologies: ['FastAPI', 'Next.js', 'Gmail API', 'Google Workspace', 'Clerk', 'Supabase', 'Google Cloud', 'n8n', 'OAuth2'],
        highlights: [
            'Automated Gmail workflows reducing email management time by 80%',
            'Eliminated manual configuration for complex automation workflows',
            'Streamlined deployment and access control with enterprise security',
            'Made advanced automation accessible to non-technical users',
            'Integrated enterprise-grade authentication and cloud infrastructure'
        ]
    },
    'athena': {
        title: 'Athena Learning – UofT CSC301 Project Portal',
        status: 'Completed',
        description: 'A full-stack project portal built for UofT\'s CSC301 course, streamlining how industry proposals are submitted, approved, and assigned to student teams — eliminating manual coordination entirely.',
        features: [
            'Secure proposal submission, approval, and team assignment APIs built with TypeScript, Prisma, and PostgreSQL',
            'Role-based workflows for industry partners, instructors, and student teams via a React frontend',
            'SCRUM-led development with sprint coordination and architecture decisions across the full team',
            'Production deployment on Railway with configured databases, environment variables, and CI/CD',
            'Automated project matching flow replacing manual coordination for courses like CSC301'
        ],
        technologies: ['TypeScript', 'Prisma', 'PostgreSQL', 'React', 'Railway', 'CI/CD', 'REST APIs'],
        highlights: [
            'Led team as SCRUM Master and Lead Backend Developer, guiding architecture and ensuring timely delivery',
            'Designed and built scalable backend APIs handling the full proposal lifecycle end-to-end',
            'Deployed a production-ready system on Railway with CI/CD, eliminating environment inconsistencies',
            'Significantly improved project matching efficiency for industry-partnered university courses',
            'Delivered seamless role-based workflows for three distinct user groups across the portal'
        ]
    },
    'libtrack': {
        title: 'LibTrack - Library Management System',
        status: 'Completed',
        description: 'A comprehensive MERN stack library management platform with modern web development practices.',
        features: [
            'Intuitive React-based responsive interface',
            'Robust Express.js and Node.js backend',
            'Efficient book management and user authentication',
            'Real-time data flow with REST APIs',
            'MongoDB integration for scalable data storage'
        ],
        technologies: ['MongoDB', 'Express.js', 'React', 'Node.js', 'REST APIs', 'HTML', 'CSS'],
        highlights: [
            'Built comprehensive MERN stack application',
            'Implemented seamless API communication',
            'Ensured real-time data synchronization',
            'Followed modern web development best practices'
        ]
    }
};

// Open career modal
function openCareerModal(careerId) {
    const modal = document.getElementById('projectModal'); // Reuse the same modal
    const modalBody = document.getElementById('modalBody');
    const career = careerData[careerId];
    
    if (!career) return;
    
    var linkedinBtn = career.linkedin
        ? '<a href="' + career.linkedin + '" target="_blank" rel="noopener noreferrer" class="modal-linkedin-btn"><i class="fa-brands fa-linkedin"></i></a>'
        : '';

    modalBody.innerHTML = `
        <div class="modal-career">
            <div class="modal-header">
                <div class="career-title-section">
                    <h2>${career.title}</h2>
                    <h3>${career.company}</h3>
                    <div class="career-meta">
                        <span class="location">${career.location}</span>
                        <span class="duration">${career.duration}</span>
                    </div>
                </div>
                ` + linkedinBtn + `
            </div>
            <p class="modal-description">${career.description}</p>

            <div class="modal-section">
                <h3>Key Responsibilities</h3>
                <ul class="responsibility-list">
                    ${career.responsibilities.map(resp => `<li>${resp}</li>`).join('')}
                </ul>
            </div>

            <div class="modal-section">
                <h3>Technologies & Tools</h3>
                <div class="modal-tech-stack">
                    ${career.technologies.map(tech => `<span class="modal-tech-tag">${tech}</span>`).join('')}
                </div>
            </div>

            <div class="modal-section">
                <h3>Key Achievements</h3>
                <ul class="achievement-list">
                    ${career.achievements.map(achievement => `<li>${achievement}</li>`).join('')}
                </ul>
            </div>
        </div>
    `;

    modal.style.display = 'block';
    document.body.style.overflow = 'hidden';
}

// Open project modal
function openProjectModal(projectId) {
    const modal = document.getElementById('projectModal');
    const modalBody = document.getElementById('modalBody');
    const project = projectData[projectId];
    
    if (!project) return;
    
    modalBody.innerHTML = `
        <div class="modal-project">
            <div class="modal-header">
                <h2>${project.title}</h2>
                <span class="project-status">${project.status}</span>
            </div>
            <p class="modal-description">${project.description}</p>
            
            <div class="modal-section">
                <h3>Key Features</h3>
                <ul class="feature-list">
                    ${project.features.map(feature => `<li>${feature}</li>`).join('')}
                </ul>
            </div>
            
            <div class="modal-section">
                <h3>Technologies Used</h3>
                <div class="modal-tech-stack">
                    ${project.technologies.map(tech => `<span class="modal-tech-tag">${tech}</span>`).join('')}
                </div>
            </div>
            
            <div class="modal-section">
                <h3>Key Highlights</h3>
                <ul class="highlight-list">
                    ${project.highlights.map(highlight => `<li>${highlight}</li>`).join('')}
                </ul>
            </div>
        </div>
    `;
    
    modal.style.display = 'block';
    document.body.style.overflow = 'hidden';
}

// Close project modal
function closeProjectModal() {
    const modal = document.getElementById('projectModal');
    modal.style.display = 'none';
    document.body.style.overflow = 'auto';
}

// Close modal when clicking outside
window.onclick = function(event) {
    const modal = document.getElementById('projectModal');
    if (event.target === modal) {
        closeProjectModal();
    }
}

// Mobile navigation toggle
function toggleMobileMenu() {
    const navToggle = document.getElementById('navToggle');
    const navMenu = document.getElementById('navMenu');
    
    navToggle.classList.toggle('active');
    navMenu.classList.toggle('active');
}

// Close mobile menu when clicking on a link
function closeMobileMenu() {
    const navToggle = document.getElementById('navToggle');
    const navMenu = document.getElementById('navMenu');
    
    navToggle.classList.remove('active');
    navMenu.classList.remove('active');
}

// Smooth scrolling for navigation links
document.addEventListener('DOMContentLoaded', function() {
    const navToggle = document.getElementById('navToggle');
    const navLinks = document.querySelectorAll('.nav-link');
    
    // Mobile menu toggle
    navToggle.addEventListener('click', toggleMobileMenu);
    
    // Navigation links
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetSection = document.querySelector(targetId);
            
            // Close mobile menu
            closeMobileMenu();
            
            if (targetSection) {
                const offsetTop = targetSection.offsetTop - 80; // Account for navbar height
                window.scrollTo({
                    top: offsetTop,
                    behavior: 'smooth'
                });
            }
        });
    });

});

// Hero parallax fade on scroll
window.addEventListener('scroll', function() {
    var heroContent = document.querySelector('.hero-content');
    var scrollIndicator = document.querySelector('.scroll-indicator');
    if (heroContent) {
        var scrolled = window.scrollY;
        var vh = window.innerHeight;
        if (scrolled < vh) {
            var progress = scrolled / vh;
            heroContent.style.opacity = 1 - progress * 1.6;
            heroContent.style.transform = 'translateY(' + (scrolled * 0.22) + 'px)';
            if (scrollIndicator) scrollIndicator.style.opacity = 1 - progress * 3;
        }
    }
});

// Add scroll effect to navbar
window.addEventListener('scroll', function() {
    const navbar = document.querySelector('.navbar');
    const isLightMode = document.documentElement.getAttribute('data-theme') === 'light';
    
    if (window.scrollY > 50) {
        if (isLightMode) {
            navbar.style.background = 'rgba(255, 255, 255, 0.98)';
            navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
        } else {
            // Dark mode (default)
            navbar.style.background = 'rgba(15, 23, 42, 0.98)';
            navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.4)';
        }
    } else {
        if (isLightMode) {
            navbar.style.background = 'rgba(255, 255, 255, 0.95)';
            navbar.style.boxShadow = '0 1px 3px rgba(0, 0, 0, 0.05)';
        } else {
            // Dark mode (default)
            navbar.style.background = 'rgba(15, 23, 42, 0.95)';
            navbar.style.boxShadow = '0 1px 3px rgba(0, 0, 0, 0.3)';
        }
    }
});

// Courses modal functions
function openCoursesModal() {
    const modal = document.getElementById('coursesModal');
    const modalBody = document.getElementById('coursesModalBody');
    
    let content = `
        <div class="courses-content">
            <h2><i class="fas fa-graduation-cap"></i> Academic Courses</h2>
            <p class="courses-intro">Comprehensive coursework spanning Computer Science core curriculum, Mathematics foundations, Statistics specialization, and diverse breadth requirements.</p>
    `;
    
    Object.entries(coursesData).forEach(([key, category]) => {
        content += `
            <div class="course-category">
                <h3 class="category-title">
                    <i class="${category.icon}"></i>
                    ${category.title}
                </h3>
                <div class="courses-grid">
        `;
        
        category.courses.forEach(course => {
            content += `
                <div class="course-item">
                    <div class="course-code">${course.code}</div>
                    <div class="course-name">${course.name}</div>
                </div>
            `;
        });
        
        content += `
                </div>
            </div>
        `;
    });
    
    content += '</div>';
    
    modalBody.innerHTML = content;
    modal.style.display = 'block';
    document.body.style.overflow = 'hidden';
}

function closeCoursesModal() {
    const modal = document.getElementById('coursesModal');
    modal.style.display = 'none';
    document.body.style.overflow = 'auto';
}

// Close modal when clicking outside
document.getElementById('coursesModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeCoursesModal();
    }
});

// Scholarships modal functions
function openScholarshipsModal() {
    const modal = document.getElementById('scholarshipsModal');
    const modalBody = document.getElementById('scholarshipsModalBody');
    
    let content = `
        <div class="scholarships-content">
            <h2><i class="fas fa-trophy"></i> Academic Scholarships</h2>
            <p class="scholarships-intro">Recognition of academic excellence and outstanding achievement throughout my studies at the University of Toronto.</p>
            <div class="scholarships-grid">
    `;
    
    scholarshipsData.forEach(scholarship => {
        content += `
            <div class="scholarship-item">
                <div class="scholarship-header">
                    <i class="${scholarship.icon}"></i>
                    <h3>${scholarship.name}</h3>
                </div>
                <p class="scholarship-description">${scholarship.description}</p>
            </div>
        `;
    });
    
    content += `
            </div>
        </div>
    `;
    
    modalBody.innerHTML = content;
    modal.style.display = 'block';
    document.body.style.overflow = 'hidden';
}

function closeScholarshipsModal() {
    const modal = document.getElementById('scholarshipsModal');
    modal.style.display = 'none';
    document.body.style.overflow = 'auto';
}

// Close modal when clicking outside
document.getElementById('scholarshipsModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeScholarshipsModal();
    }
});

// Dark mode functionality
function toggleDarkMode() {
    const html = document.documentElement;
    const darkModeIcon = document.getElementById('darkModeIcon');
    
    if (html.getAttribute('data-theme') === 'light') {
        // Switch to dark mode (remove attribute to use CSS default)
        html.removeAttribute('data-theme');
        localStorage.setItem('theme', 'dark');
        darkModeIcon.className = 'fas fa-sun';
        updateLogos('dark');
    } else {
        // Switch to light mode
        html.setAttribute('data-theme', 'light');
        localStorage.setItem('theme', 'light');
        darkModeIcon.className = 'fas fa-moon';
        updateLogos('light');
    }
}

// Update logos based on theme
function updateLogos(theme) {
    const uoftLogos = document.querySelectorAll('.uoft-logo, .edu-logo');
    
    uoftLogos.forEach(logo => {
        if (theme === 'dark') {
            logo.src = 'images/Utoronto_coa.svg.png';
        } else {
            logo.src = 'images/University_of_Toronto-Logo.wine.svg';
        }
    });
}

// ============================================================
// MODERN UI: Typewriter + Scroll Reveal
// ============================================================

function typeWriter(element, text, speed) {
    speed = speed || 45;
    var i = 0;
    element.textContent = '';
    element.classList.add('typing');
    function type() {
        if (i < text.length) {
            element.textContent += text.charAt(i);
            i++;
            setTimeout(type, speed);
        } else {
            element.classList.remove('typing');
        }
    }
    type();
}

var revealObserver = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
        if (entry.isIntersecting) {
            entry.target.classList.add('visible');
            revealObserver.unobserve(entry.target);
        }
    });
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });

// Initialize theme on page load
document.addEventListener('DOMContentLoaded', function() {
    const savedTheme = localStorage.getItem('theme');
    const darkModeIcon = document.getElementById('darkModeIcon');
    
    if (savedTheme === 'light') {
        // Only use light mode if explicitly saved
        document.documentElement.setAttribute('data-theme', 'light');
        darkModeIcon.className = 'fas fa-moon';
        updateLogos('light');
    } else {
        // Default to dark mode (no attribute needed since CSS defaults to dark)
        document.documentElement.removeAttribute('data-theme');
        darkModeIcon.className = 'fas fa-sun';
        updateLogos('dark');
        if (!savedTheme) {
            localStorage.setItem('theme', 'dark');
        }
    }

    // Typewriter on hero subtitle
    var subtitle = document.querySelector('.hero-subtitle');
    if (subtitle) {
        var originalText = subtitle.textContent;
        setTimeout(function() { typeWriter(subtitle, originalText, 40); }, 600);
    }

    // Scroll reveal: attach class to all target elements
    var revealTargets = document.querySelectorAll(
        '.career-card, .project-card, .education-card, .achievement-item, .contact-method'
    );
    revealTargets.forEach(function(el) {
        el.classList.add('reveal');
        revealObserver.observe(el);
    });

    var revealLeftTargets = document.querySelectorAll('.section-title');
    revealLeftTargets.forEach(function(el) {
        el.classList.add('reveal');
        revealObserver.observe(el);
    });
});

// --- 1. Scramble Text on Hero Name ---
(function() {
    var el = document.querySelector('.hero-name');
    if (!el) return;
    var final = el.textContent.trim();
    var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%';
    var resolved = 0;
    var total = final.length;
    var frame = 0;

    function scramble() {
        el.textContent = final.split('').map(function(ch, i) {
            if (ch === ' ') return ' ';
            if (i < resolved) return ch;
            return chars[Math.floor(Math.random() * chars.length)];
        }).join('');
        frame++;
        if (frame % 3 === 0 && resolved < total) resolved++;
        if (resolved < total) requestAnimationFrame(scramble);
        else el.textContent = final;
    }

    setTimeout(scramble, 200);
})();


// --- 3. Curtain Section Transition ---
(function() {
    var overlay = document.querySelector('.page-overlay');
    if (!overlay) return;
    var busy = false;

    document.querySelectorAll('.nav-link, .hero-btn-primary, .hero-btn-secondary').forEach(function(link) {
        link.addEventListener('click', function(e) {
            var href = link.getAttribute('href');
            if (!href || !href.startsWith('#') || busy) return;
            e.preventDefault();
            busy = true;

            overlay.classList.remove('sweep-out');
            overlay.classList.add('sweep-in');

            setTimeout(function() {
                var target = document.querySelector(href);
                if (target) target.scrollIntoView({ behavior: 'instant' });

                overlay.classList.remove('sweep-in');
                overlay.classList.add('sweep-out');

                setTimeout(function() {
                    overlay.classList.remove('sweep-out');
                    busy = false;
                    // Flash the section title once the curtain fully reveals
                    var title = target && target.querySelector('.section-title');
                    if (title) {
                        title.classList.remove('flashing');
                        void title.offsetWidth; // force reflow to restart animation
                        title.classList.add('flashing');
                    }
                }, 460);
            }, 460);
        });
    });
})();


// --- Custom Cursor ---
(function() {
    var dot  = document.querySelector('.cursor-dot');
    var ring = document.querySelector('.cursor-ring');
    if (!dot || !ring) return;

    var mouseX = 0, mouseY = 0;
    var ringX  = 0, ringY  = 0;

    document.addEventListener('mousemove', function(e) {
        mouseX = e.clientX;
        mouseY = e.clientY;
        dot.style.left = mouseX + 'px';
        dot.style.top  = mouseY + 'px';
    });

    (function animateRing() {
        ringX += (mouseX - ringX) * 0.18;
        ringY += (mouseY - ringY) * 0.18;
        ring.style.left = ringX + 'px';
        ring.style.top  = ringY + 'px';
        requestAnimationFrame(animateRing);
    })();

    var hoverTargets = 'a, button, [onclick], .career-card, .project-card, .course-item, .contact-method, .social-link, .close, .dark-mode-toggle';
    document.querySelectorAll(hoverTargets).forEach(function(el) {
        el.addEventListener('mouseenter', function() { ring.classList.add('hovering'); });
        el.addEventListener('mouseleave', function() { ring.classList.remove('hovering'); });
    });

    document.addEventListener('mousedown', function() {
        dot.classList.add('clicking');
        ring.classList.add('clicking');
        ring.classList.remove('hovering');
    });
    document.addEventListener('mouseup', function() {
        dot.classList.remove('clicking');
        ring.classList.remove('clicking');
    });
})();


// --- 3D Card Tilt ---
(function() {
    var cards = document.querySelectorAll('.career-card, .project-card');
    var MAX = 7;

    cards.forEach(function(card) {
        card.addEventListener('mouseenter', function() {
            // Disable transform transition while tilting for instant response
            card.style.transition = 'box-shadow 0.3s ease, border-color 0.3s ease';
        });

        card.addEventListener('mousemove', function(e) {
            var r   = card.getBoundingClientRect();
            var dx  = (e.clientX - r.left  - r.width  / 2) / (r.width  / 2);
            var dy  = (e.clientY - r.top   - r.height / 2) / (r.height / 2);
            var rotY =  dx * MAX;
            var rotX = -dy * MAX;
            card.style.transform = 'perspective(900px) rotateX(' + rotX + 'deg) rotateY(' + rotY + 'deg) translateZ(6px)';
        });

        card.addEventListener('mouseleave', function() {
            card.style.transition = 'transform 0.5s ease, box-shadow 0.3s ease, border-color 0.3s ease';
            card.style.transform  = '';
            // Let transition finish, then restore original CSS-driven transition
            setTimeout(function() { card.style.transition = ''; card.style.transform = ''; }, 500);
        });
    });
})();


// --- Active Nav Highlight ---
(function() {
    var sections  = document.querySelectorAll('section[id]');
    var navLinks  = document.querySelectorAll('.nav-link');

    var observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
            if (!entry.isIntersecting) return;
            var id = entry.target.getAttribute('id');
            navLinks.forEach(function(link) {
                var active = link.getAttribute('href') === '#' + id;
                link.classList.toggle('active', active);
            });
        });
    }, { rootMargin: '-30% 0px -60% 0px', threshold: 0 });

    sections.forEach(function(s) { observer.observe(s); });
})();


// --- Scroll Progress Bar ---
(function() {
    var bar = document.querySelector('.scroll-progress-bar');
    if (!bar) return;
    window.addEventListener('scroll', function() {
        var total = document.documentElement.scrollHeight - window.innerHeight;
        bar.style.width = (total > 0 ? (window.scrollY / total) * 100 : 0) + '%';
    }, { passive: true });
})();



// --- About Text Line Reveal ---
(function() {
    var items = document.querySelectorAll('.about-text .intro, .about-text .personal-info, .about-text .instagram-link');
    items.forEach(function(el, i) {
        el.style.opacity   = '0';
        el.style.transform = 'translateY(24px)';
        el.style.transition = 'opacity 0.65s ease ' + (i * 0.2) + 's, transform 0.65s ease ' + (i * 0.2) + 's';
    });

    var section = document.querySelector('.about-text');
    if (!section) return;

    new IntersectionObserver(function(entries, obs) {
        if (!entries[0].isIntersecting) return;
        items.forEach(function(el) { el.style.opacity = '1'; el.style.transform = 'translateY(0)'; });
        obs.disconnect();
    }, { threshold: 0.15 }).observe(section);
})();


// --- Section Entrance Flash ---
(function() {
    var titles = document.querySelectorAll('.section-title');
    var obs = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                entry.target.classList.remove('flashing');
                void entry.target.offsetWidth;
                entry.target.classList.add('flashing');
            } else {
                entry.target.classList.remove('flashing');
            }
        });
    }, { threshold: 0.8 });
    titles.forEach(function(t) { obs.observe(t); });
})();


// --- Hero Particle Field ---
(function() {
    var hero = document.querySelector('.hero-section');
    if (!hero) return;

    var canvas = document.createElement('canvas');
    canvas.className = 'hero-particles';
    hero.insertBefore(canvas, hero.firstChild);
    var ctx = canvas.getContext('2d');

    var W, H, particles;
    var N = 55, MAX_DIST = 130;

    function init() {
        W = canvas.width  = hero.offsetWidth;
        H = canvas.height = hero.offsetHeight;
        particles = [];
        for (var i = 0; i < N; i++) {
            particles.push({
                x:  Math.random() * W,
                y:  Math.random() * H,
                vx: (Math.random() - 0.5) * 0.35,
                vy: (Math.random() - 0.5) * 0.35,
                r:  Math.random() * 1.5 + 0.8
            });
        }
    }
    init();
    window.addEventListener('resize', init);

    function draw() {
        ctx.clearRect(0, 0, W, H);

        // Move & bounce
        particles.forEach(function(p) {
            p.x += p.vx;
            p.y += p.vy;
            if (p.x < 0 || p.x > W) p.vx *= -1;
            if (p.y < 0 || p.y > H) p.vy *= -1;

            ctx.beginPath();
            ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
            ctx.fillStyle = 'rgba(34,211,238,0.55)';
            ctx.fill();
        });

        // Connections
        for (var i = 0; i < N; i++) {
            for (var j = i + 1; j < N; j++) {
                var dx   = particles[i].x - particles[j].x;
                var dy   = particles[i].y - particles[j].y;
                var dist = Math.sqrt(dx * dx + dy * dy);
                if (dist < MAX_DIST) {
                    ctx.beginPath();
                    ctx.strokeStyle = 'rgba(34,211,238,' + ((1 - dist / MAX_DIST) * 0.18) + ')';
                    ctx.lineWidth   = 0.6;
                    ctx.moveTo(particles[i].x, particles[i].y);
                    ctx.lineTo(particles[j].x, particles[j].y);
                    ctx.stroke();
                }
            }
        }

        requestAnimationFrame(draw);
    }
    draw();
})();


// --- Project Card Code Peek ---
(function() {
    var snippets = {
        'trippy':        '<span class="cm"># Multi-agent travel planner</span>\n<span class="kw">async def</span> <span class="fn">plan_trip</span>(prefs):\n    agents = [<span class="str">"flights"</span>, <span class="str">"hotels"</span>, <span class="str">"itinerary"</span>]\n    chain = LangChain.sequence(agents)\n    <span class="kw">return await</span> chain.invoke(prefs)',
        'learnai':       '<span class="cm"># RAG pipeline for learning</span>\n<span class="kw">def</span> <span class="fn">query_rag</span>(question):\n    ctx = vectorstore.similarity_search(question)\n    prompt = build_prompt(ctx, question)\n    <span class="kw">return</span> llm.generate(prompt)',
        'uoft-messenger':'<span class="cm">// Real-time message handler</span>\n<span class="kw">public void</span> <span class="fn">sendMessage</span>(User to, String msg) {\n    Message m = <span class="kw">new</span> Message(<span class="kw">this</span>, to, msg);\n    socket.emit(<span class="str">"msg"</span>, m.toJSON());\n    db.save(m);\n}',
        'healthy':       '<span class="cm"># Heart disease risk predictor</span>\n<span class="kw">def</span> <span class="fn">predict_risk</span>(metrics):\n    X = scaler.transform([metrics])\n    prob = model.predict_proba(X)[0][1]\n    <span class="kw">return</span> {<span class="str">"risk"</span>: f<span class="str">"{prob:.1%}"</span>}',
        'flowcraft':     '<span class="cm"># Gmail workflow automation</span>\n<span class="kw">async def</span> <span class="fn">auto_reply</span>(trigger):\n    emails = <span class="kw">await</span> gmail.fetch(trigger.filter)\n    <span class="kw">for</span> e <span class="kw">in</span> emails:\n        draft = llm.compose(e.thread)\n        <span class="kw">await</span> n8n.execute(draft)',
        'athena':        '<span class="cm">// Proposal lifecycle API</span>\n<span class="kw">export const</span> <span class="fn">assignTeam</span> = <span class="kw">async</span> (id) => {\n    <span class="kw">const</span> p = <span class="kw">await</span> prisma.proposal.update({\n        where: { id },\n        data:  { status: <span class="str">"assigned"</span> }\n    });\n    <span class="kw">return</span> p;\n}',
        'libtrack':      '<span class="cm">// Book checkout handler</span>\n<span class="kw">const</span> <span class="fn">checkout</span> = <span class="kw">async</span> (req, res) => {\n    <span class="kw">const</span> book = <span class="kw">await</span> Book.findById(req.params.id);\n    book.available = <span class="kw">false</span>;\n    <span class="kw">await</span> book.save();\n    res.json({ success: <span class="kw">true</span> });\n}'
    };

    document.querySelectorAll('.project-card[onclick]').forEach(function(card) {
        var match = card.getAttribute('onclick').match(/'([^']+)'/);
        if (!match || !snippets[match[1]]) return;
        var peek = document.createElement('div');
        peek.className = 'code-peek';
        peek.innerHTML = '<pre>' + snippets[match[1]] + '</pre>';
        card.appendChild(peek);
    });
})();


// --- Project Card Accent Colors ---
(function() {
    var colors = {
        'trippy':        '#a855f7',
        'learnai':       '#60a5fa',
        'uoft-messenger':'#34d399',
        'healthy':       '#f43f5e',
        'flowcraft':     '#f59e0b',
        'athena':        '#22d3ee',
        'libtrack':      '#8b5cf6'
    };

    function hexToRgba(hex, a) {
        var r = parseInt(hex.slice(1,3),16), g = parseInt(hex.slice(3,5),16), b = parseInt(hex.slice(5,7),16);
        return 'rgba('+r+','+g+','+b+','+a+')';
    }

    var cards = document.querySelectorAll('.project-card[onclick]');
    var obs = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
            if (!entry.isIntersecting) return;
            var card  = entry.target;
            var match = card.getAttribute('onclick').match(/'([^']+)'/);
            var color = match && colors[match[1]];
            if (!color) return;
            card.style.setProperty('--card-accent-color', hexToRgba(color, 0.45));
            card.style.setProperty('--card-accent-glow',  hexToRgba(color, 0.13));
            card.classList.add('accented');
            obs.unobserve(card);
        });
    }, { threshold: 0.35 });

    cards.forEach(function(c) { obs.observe(c); });
})();


// --- Skill Chips Staggered Pop-in ---
(function() {
    var section = document.querySelector('.skills-section');
    if (!section) return;
    var chips = section.querySelectorAll('.skill-chip');

    chips.forEach(function(chip) {
        chip.style.opacity   = '0';
        chip.style.transform = 'scale(0.3)';
    });

    new IntersectionObserver(function(entries, obs) {
        if (!entries[0].isIntersecting) return;
        chips.forEach(function(chip, i) {
            setTimeout(function() {
                chip.style.transition = 'opacity 0.35s ease, transform 0.45s cubic-bezier(0.34,1.56,0.64,1)';
                chip.style.opacity    = '1';
                chip.style.transform  = 'scale(1)';
                setTimeout(function() {
                    chip.style.transition = '';
                    chip.style.transform  = '';
                    chip.style.opacity    = '';
                }, 460);
            }, i * 70);
        });
        obs.disconnect();
    }, { threshold: 0.15 }).observe(section);
})();