/* global React, ReactDOM, AnimatedBackground, CursorGlow */
const { useState, useEffect } = React;
const PROJECTS = [
{ id: 16, title: "VISAL ERP", slug: "visal-erp", client: "Visal Solutions", category: "Cloud & Infrastructure", categories: ["Cloud & Infrastructure", "Strategy & Operations", "Software Engineering & Development", "Security"], description: "An all-in-one Enterprise Resource Planning (ERP) solution designed to streamline business operations.", fullDescription: "VISAL ERP is a comprehensive enterprise solution that integrates all aspects of your business operations.\n\nCore Modules:\n\n\u2022 Sales Management \u2013 Streamlined Order-to-Cash process with fast order handling, comprehensive analysis, and performance insights\n\n\u2022 Procurement \u2013 Full Purchase Requisition to Goods/Service Received Note process\n\n\u2022 Inventory Control \u2013 Multi-location inventory management with inter-location transfers, dispatch notes, and gate passes\n\n\u2022 Manufacturing \u2013 Simplified Plan-to-Production workflow with automatic manufacturing cost and variance tracking\n\n\u2022 Asset Management \u2013 Full asset life cycle control, including depreciation and disposal management\n\nFinancial Management:\n\n\u2022 General Ledger \u2013 Automatic posting of all module transactions to financial statements (Trial Balance, Balance Sheet, P&L)\n\n\u2022 Accounts Payables \u2013 Manages the full cash flow cycle from petty cash to vendor settlements\n\n\u2022 Accounts Receivables \u2013 Tracks receivables, credits, advances, post-dated cheques, and customer receipts\n\n\u2022 Cashbook \u2013 Multi-bank and cash management, cheque printing, deposit slips, and bank reconciliation\n\nAnalytics & Intelligence:\n\n\u2022 Business Intelligence (BI) \u2013 Powerful analytics and insights for data-driven decision making\n\nVISAL ERP empowers businesses to optimize operations, streamline workflows, and achieve operational excellence.", technologies: ["Angular", "TypeScript", "Node.js", "PostgreSQL", "Docker"], date: "2025-10", imageUrl: "/projects/visal_erp/Featured.png", promotion: "5% OFF This Season", liveUrl: null },
{ id: 18, title: "Altair Tours", slug: "altair-tours", client: "Altair Tours", category: "Software Engineering & Development", categories: ["Software Engineering & Development", "Design & Quality", "Cloud & Infrastructure"], description: "A modern travel platform for Altair Tours Lanka, offering personalized guided tours combining luxury experiences with authentic cultural engagement across Sri Lanka.", fullDescription: "Altair Tours Lanka is a comprehensive travel platform designed to showcase and manage curated travel experiences throughout Sri Lanka.\n\nKey Features:\n\n\u2022 Multi-day round tours with detailed itineraries and pricing\n\n\u2022 Day excursions including wildlife safaris, heritage tours, and adventure activities\n\n\u2022 Tailor-made trip planning with custom quote requests\n\n\u2022 Multi-language support (English, German, French, Spanish, Italian, Chinese)\n\n\u2022 Featured destinations showcase covering 9+ iconic Sri Lankan locations\n\n\u2022 Blog and content management for travel guides\n\nCore Values:\n\n\u2022 Eco-friendly and sustainable travel practices\n\n\u2022 Authentic cultural experiences with local communities\n\n\u2022 Personalized service with expert local guides\n\n\u2022 Luxury combined with meaningful engagement", technologies: ["Next.js", "React", "TypeScript", "Tailwind CSS", "Firebase", "Git"], date: "2025-12", imageUrl: "/projects/altair/Featured.png", liveUrl: "https://altair-tours.web.app/" },
{ id: 19, title: "Winrich Restaurant", slug: "winrich-restaurant", client: "Winrich Restaurant", category: "Software Engineering & Development", categories: ["Software Engineering & Development", "Design & Quality", "Cloud & Infrastructure"], description: "A modern digital platform for Winrich Restaurant, featuring an elegant online presence with menu browsing, reservations, and a seamless dining experience.", technologies: ["Next.js", "React", "TypeScript", "Tailwind CSS", "Firebase", "Git"], date: "2026-01", imageUrl: "/projects/winrich/Featured.png", liveUrl: null },
{ id: 17, title: "RentIo Platform", slug: "rentio", client: "RentIo", category: "Strategy & Operations", categories: ["Strategy & Operations", "Software Engineering & Development", "Cloud & Infrastructure"], description: "A comprehensive rental management platform with integrated service and repair functions, fetching data from client systems and hosted on client servers.", fullDescription: "RentIo is an advanced rental management platform designed to streamline the entire rental process. The platform integrates service and repair management functions, allowing businesses to manage their rental inventory, track maintenance, and provide seamless service to customers. Built with Angular and deployed on client infrastructure for maximum control and security.", technologies: ["Angular", "TypeScript", "RxJS", "Node.js", "Express", "MongoDB", "RESTful APIs", "Git"], date: "2025-10", imageUrl: "/projects/rentio/Featured.png", liveUrl: null },
{ id: 13, title: "SARTC Blog Platform", slug: "sartc-blog", client: "South Asian Research and Training Center", category: "Software Engineering & Development", description: "A professional blog and branding platform developed for the South Asian Research and Training Center, showcasing research insights, publications, and organizational updates.", technologies: ["React", "Nginx", "PostgreSQL", "Git", "Prometheus"], date: "2025-10", imageUrl: "/projects/sartc/Featured.png", liveUrl: null },
{ id: 12, title: "Pera Agros Alumni Platform", slug: "pera-agros-alumni", client: "Peradeniya University Alumni", category: "Software Engineering & Development", description: "A comprehensive WordPress-based platform developed for the Peradeniya University Alumni Association, facilitating community engagement, event management, and alumni networking.", technologies: ["WordPress", "PHP", "MySQL", "JavaScript", "CSS3", "HTML5"], date: "2025-10", imageUrl: "/projects/pera_agros/Featured.png", liveUrl: null },
{ id: 11, title: "Amethyst Gaming Platform", slug: "amethyst-gaming-community", client: "Amethyst SMP Gaming Community", category: "Software Engineering & Development", categories: ["Software Engineering & Development", "Security"], description: "An interactive web application for the Amethyst SMP Gaming community featuring 3D graphics, branding showcase, and an upcoming marketplace for trading Minecraft and game items.", fullDescription: "This is an ongoing project developing a comprehensive platform for the Amethyst SMP Gaming community. The platform currently showcases the community's branding with stunning 3D visuals and is being expanded to include a marketplace where users can buy and sell Minecraft items and other in-game assets. Hosted on Firebase, the application integrates with Mojang and Mineskin APIs for seamless Minecraft integration.", technologies: ["React", "Tailwind CSS", "Three.js", "Firebase", "Mojang API", "Mineskin API", "Axios", "Git"], date: "2025-10", imageUrl: "/projects/amethyst/Featured.png", liveUrl: "https://amethyst-community.web.app/" },
{ id: 22, title: "LankaTiles Ticket Manager", slug: "advanced-task-manager", client: "Lanka Tiles PLC", category: "Strategy & Operations", description: "Lanka Tiles is one of our valued long-term clients. We built this custom Trello-style Kanban ticket manager specifically tailored to their development workflow.", fullDescription: "Lanka Tiles PLC is one of Orca's most valued long-term clients. To better serve their growing development needs, we designed and built this fully custom Kanban ticket manager \u2014 tailored exactly to the workflow stages and reporting requirements their team uses internally.\n\nEvery development request Lanka Tiles submits to our company flows through this system, giving both teams complete visibility, faster turnaround, and detailed analytics on progress, effort, and delivery.\n\nKey Features:\n\n\u2022 Trello-style Kanban board with 7 workflow columns tailored to Lanka Tiles' development pipeline\n\n\u2022 Drag-and-drop tickets between stages: Todo \u2192 Development \u2192 210 \u2192 300 \u2192 400 \u2192 Completed \u2192 Closed\n\n\u2022 Create, edit, and delete tickets with titles, descriptions, dates, and man hours\n\n\u2022 Track TCodes affected and TR lists per ticket\n\n\u2022 Activity log (Summary) tracking all changes with user info and timestamps\n\n\u2022 Google authentication for secure access\n\n\u2022 Full-text search across all columns\n\n\u2022 Dark/light theme toggle\n\n\u2022 Persistent storage using Firebase Firestore\n\n\u2022 Responsive design with horizontal scrolling", technologies: ["HTML5", "CSS3", "JavaScript", "Font Awesome"], date: "2023-01", imageUrl: "/projects/advanced-task-manager/featured.png", demoUrl: "/demos/advanced-task-manager/" },
{ id: 21, title: "Internet Speed Checker", slug: "internet-speed-checker", client: "Personal Project", category: "Software Engineering & Development", description: "An interactive internet speed testing tool with real-time download/upload speed measurement, progress visualization, and dark mode support.", fullDescription: "A sleek and responsive Internet Speed Checker application built with vanilla HTML, CSS, and JavaScript. It provides real-time internet speed testing with a modern UI.\n\nKey Features:\n\n\u2022 Real-time download and upload speed measurement\n\n\u2022 Visual progress bar with speed indicators\n\n\u2022 Dark/light theme toggle\n\n\u2022 Clean, modern UI with Font Awesome icons\n\n\u2022 Fully responsive design for all devices", technologies: ["HTML5", "CSS3", "JavaScript", "Font Awesome"], date: "2023-01", imageUrl: "/projects/internet-speed-checker/Featured.png", demoUrl: "/demos/internet-speed-checker/" },
{ id: 20, title: "Periodic Table App", slug: "periodic-table-app", client: "Personal Project", category: "Software Engineering & Development", description: "An interactive periodic table application that lets you explore all chemical elements with detailed information, search functionality, and category-based filtering.", fullDescription: "An interactive and visually engaging Periodic Table application built with vanilla HTML, CSS, and JavaScript. Designed for educational purposes, it provides a comprehensive view of all chemical elements with rich detail panels.\n\nKey Features:\n\n\u2022 Full periodic table layout with color-coded element categories\n\n\u2022 Search by element name, symbol, or atomic number\n\n\u2022 Category filtering (Alkali Metals, Noble Gases, Transition Metals, etc.)\n\n\u2022 Random element discovery button\n\n\u2022 Detailed element view with physical, atomic, and historical properties", technologies: ["HTML5", "CSS3", "JavaScript"], date: "2023-01", imageUrl: "/projects/periodic-table-app/Featured.png", demoUrl: "/demos/periodic-table-app/" },
{ id: 10, title: "Crypto AI", slug: "crypto-ai", client: "Personal Customer", category: "Security", categories: ["Security", "Data & Intelligence", "Software Engineering & Development"], description: "An advanced AI-powered cryptocurrency trading platform that automates the entire trading process with intelligent analysis and execution.", fullDescription: "An advanced AI-powered cryptocurrency trading platform trained on over 100 proven trading strategies. The system autonomously handles market analysis, signal generation, and trade execution with continuous performance optimization. Our team actively monitors and refines the platform to ensure consistent results and robust security across multiple exchanges.", technologies: ["Python", "Angular", "SQL", "Pine Script", "Azure", "TensorFlow", "SARIMA", "Binance API", "Bybit API", "TradingView Webhooks", "Redis", "Apache Kafka", "Pandas", "NumPy", "Docker", "Git", "FastAPI", "Prometheus"], date: "2025-10", imageUrl: "/projects/crypto_ai/Featured.png", liveUrl: "https://orca-whale.web.app/" },
{ id: 15, title: "Tic Tac Toe Game", slug: "tic-tac-toe", client: "Personal Customer", category: "Software Engineering & Development", description: "An interactive Tic Tac Toe game featuring an intelligent AI bot opponent. Perfect for a quick break from work!", fullDescription: "Tired of scrolling and researching? Try to beat the bot in this little XOX game! This classic Tic Tac Toe game features a smart AI opponent that will challenge your strategic thinking. Built with vanilla JavaScript, it offers smooth gameplay and an intuitive interface.", technologies: ["HTML5", "CSS3", "JavaScript", "Git"], date: "2025-10", imageUrl: "/projects/tick_tack_toe/Featured.png", liveUrl: "https://charaka-janith.github.io/#/tic-tac-toe" },
{ id: 23, title: "Ceylon Cozy Tours", slug: "ceylon-cozy-tours", client: "Ceylon Cozy Tours", category: "Software Engineering & Development", categories: ["Software Engineering & Development", "Design & Quality", "Cloud & Infrastructure"], description: "Sri Lanka's best tailor-made tourism platform \u2014 letting clients design their own journey with custom itineraries, 500+ tour options across 40+ destinations, and 24/7 support.", fullDescription: "Ceylon Cozy Tours is a comprehensive travel platform designed to offer fully personalized travel experiences across Sri Lanka.\n\nKey Features:\n\n\u2022 'Design My Journey' tool for fully custom itinerary planning\n\n\u2022 500+ curated tour packages across 40+ countries and destinations\n\n\u2022 Cultural heritage, beach & wildlife, and complete island experience packages\n\n\u2022 24/7 customer support with 2-hour quote response time\n\n\u2022 Secure booking with flexible payment options and travel insurance\n\n\u2022 10,000+ happy travelers served with 15+ years of experience\n\n\u2022 Multi-language support and responsive design for all devices\n\nThe platform empowers travelers to craft their perfect Sri Lankan adventure, combining luxury with authentic cultural engagement.", technologies: ["Next.js", "React", "TypeScript", "Tailwind CSS", "Firebase"], date: "2025-11", imageUrl: "/projects/ceylon_cozy_tours/Featured.png", liveUrl: "https://ceylon-cozy-tours.web.app/" },
{ id: 24, title: "Tangerine Tours System", slug: "tangerine-tours-system", client: "Tangerine Tours Limited", category: "Strategy & Operations", categories: ["Strategy & Operations", "Software Engineering & Development", "Cloud & Infrastructure", "Security"], description: "A large-scale, fully custom enterprise system built for Tangerine Tours Limited \u2014 managing all operations across their tourism company and multi-company structure. The most comprehensive custom tourism management system we've delivered.", fullDescription: "The Tangerine Tours System is the most complex and comprehensive custom enterprise solution Orca Solutions has delivered to date. Built specifically for Tangerine Tours Limited, it manages the full spectrum of operations across their tourism company and multi-company structure.\n\nThis system was engineered exactly to Tangerine Tours' requirements, covering:\n\n\u2022 End-to-end tour management \u2014 from inquiry to post-trip follow-up\n\n\u2022 Multi-company operations \u2014 unified management across all business entities\n\n\u2022 Booking & reservation management with real-time availability\n\n\u2022 Financial management \u2014 invoicing, payments, commissions, and reporting\n\n\u2022 Customer relationship management (CRM) tailored to tourism workflows\n\n\u2022 Supplier and vendor management across hotels, transport, and activities\n\n\u2022 Staff and resource allocation and scheduling\n\n\u2022 Comprehensive reporting and business intelligence dashboards\n\n\u2022 Role-based access control and audit trails for security\n\nThis is by far the best custom system for tourism companies we have implemented, built to handle the full complexity of a large-scale tourism operation.", technologies: ["Angular", "TypeScript", "Node.js", "PostgreSQL", "Docker"], date: "2026-01", imageUrl: "/projects/tangerine_tours/Featured.png", liveUrl: null },
];
function getProjectFromSlug() {
const path = window.location.pathname;
const slug = path.split('/projects/')[1]?.replace(/\/$/, '');
return PROJECTS.find(p => p.slug === slug) || null;
}
function DetailNav() {
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 12);
window.addEventListener('scroll', onScroll);
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
