/* global React, ReactDOM, AnimatedBackground, CursorGlow */
const { useState } = React;
function webp(src) { if (src.endsWith('.svg')) return src; return src.replace(/\.(png|jpe?g)$/i, '.webp'); }
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.", technologies: ["Angular", "TypeScript", "Node.js", "PostgreSQL", "Docker"], imageUrl: "/projects/visal_erp/Featured.png", promotion: "5% OFF This Season", liveUrl: null },
{ 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 with menu browsing, reservations, and a seamless dining experience.", technologies: ["Next.js", "React", "TypeScript", "Tailwind CSS", "Firebase"], imageUrl: "/projects/winrich/Featured.png", liveUrl: null },
{ 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 — letting clients design their own journey with custom itineraries, 500+ tour options across 40+ destinations, and 24/7 support.", technologies: ["Next.js", "React", "TypeScript", "Tailwind CSS", "Firebase"], imageUrl: "/projects/ceylon_cozy_tours/Featured.png", liveUrl: "https://ceylon-cozy-tours.web.app/" },
{ id: 25, title: "Panthera Clothing", slug: "panthera", client: "Panthera", category: "Software Engineering & Development", categories: ["Software Engineering & Development", "Design & Quality", "Cloud & Infrastructure"], description: "Hardware implementation, branding, and web platform for Panthera — a modern clothing brand.", technologies: ["HTML5", "CSS3", "JavaScript", "Firebase"], imageUrl: "/projects/panthera/Featured.png", liveUrl: "https://panthera-clothing.web.app/" },
{ id: 12, title: "Pera Agros Alumni Platform", slug: "pera-agros-alumni", client: "Peradeniya University Alumni", category: "Software Engineering & Development", categories: ["Software Engineering & Development"], description: "A WordPress-based platform for alumni community engagement, event management, and networking.", technologies: ["WordPress", "PHP", "MySQL", "JavaScript"], imageUrl: "/projects/pera_agros/Featured.png", liveUrl: null },
{ id: 10, title: "Crypto AI", slug: "crypto-ai", client: "Personal Customer", category: "Security", categories: ["Security", "Data & Intelligence", "Software Engineering & Development"], description: "AI-powered cryptocurrency trading platform that automates analysis and execution.", technologies: ["Python", "Angular", "TensorFlow", "Azure", "Docker"], imageUrl: "/projects/crypto_ai/Featured.png", liveUrl: "https://orca-whale.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 — managing all operations across their tourism company and multi-company structure. The most comprehensive custom tourism management system we've delivered to date.", technologies: ["Angular", "TypeScript", "Node.js", "PostgreSQL", "Docker"], imageUrl: "/projects/tangerine_tours/Featured.png", liveUrl: null },
{ id: 22, title: "LankaTiles Ticket Manager", slug: "advanced-task-manager", client: "Lanka Tiles PLC", category: "Strategy & Operations", categories: ["Strategy & Operations"], description: "Custom Trello-style Kanban ticket manager tailored to Lanka Tiles' development workflow.", technologies: ["HTML5", "CSS3", "JavaScript", "Firebase"], imageUrl: "/projects/advanced-task-manager/featured.png", demoUrl: "/demos/advanced-task-manager/" },
{ 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.", technologies: ["Angular", "TypeScript", "Node.js", "MongoDB", "Express"], imageUrl: "/projects/rentio/Featured.png", 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.", technologies: ["Next.js", "React", "TypeScript", "Tailwind CSS", "Firebase"], imageUrl: "/projects/altair/Featured.png", liveUrl: "https://altair-tours.web.app/" },
{ id: 13, title: "SARTC Blog Platform", slug: "sartc-blog", client: "South Asian Research and Training Center", category: "Software Engineering & Development", categories: ["Software Engineering & Development"], description: "A professional blog and branding platform for SARTC, showcasing research insights and publications.", technologies: ["React", "Nginx", "PostgreSQL", "Prometheus"], imageUrl: "/projects/sartc/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 app with 3D graphics and an upcoming marketplace for trading game items.", technologies: ["React", "Tailwind CSS", "Three.js", "Firebase"], imageUrl: "/projects/amethyst/Featured.png", liveUrl: "https://amethyst-community.web.app/" },
{ id: 30, title: "Tangerine Task Manager", slug: "tangerine-task-manager", client: "Tangerine Tours Limited", category: "Strategy & Operations", categories: ["Strategy & Operations", "Software Engineering & Development"], description: "Custom Trello-style Kanban ticket manager built for Tangerine Tours Limited's development workflow.", technologies: ["HTML5", "CSS3", "JavaScript", "Firebase"], imageUrl: "/projects/tangerine-task-manager/Featured.png", liveUrl: "/tangerine-task-manager/" },
{ id: 31, title: "NIC Converter", slug: "nic-converter", client: "Personal Project", category: "Software Engineering & Development", categories: ["Software Engineering & Development"], description: "A Sri Lankan NIC number converter that converts between old 9-digit and new 12-digit formats, extracting birth date, age, and gender information.", technologies: ["React", "JavaScript", "CSS3"], imageUrl: "/projects/nic/Featured.png", liveUrl: "https://charaka-janith.github.io/#/nic-converter" },
{ id: 26, title: "Computer Specs Checker", slug: "computer-specs-checker", client: "Personal Project", category: "Software Engineering & Development", categories: ["Software Engineering & Development"], description: "A browser-based system information tool that analyzes your computer specs and compares them with recommended requirements.", technologies: ["HTML5", "CSS3", "JavaScript", "Font Awesome"], imageUrl: "/projects/computer-specs-checker/Featured.png", liveUrl: "/apps/computer-specs-checker/" },
{ id: 27, title: "Image Filtering App", slug: "image-filtering-app", client: "Personal Project", category: "Software Engineering & Development", categories: ["Software Engineering & Development"], description: "A photo enhancement tool with professional filters, adjustments, and real-time preview for image editing in the browser.", technologies: ["HTML5", "CSS3", "JavaScript", "Font Awesome"], imageUrl: "/projects/image-filtering-app/Featured.png", liveUrl: "/apps/image-filtering-app/" },
{ id: 28, title: "Live Weather App", slug: "live-weather-app", client: "Personal Project", category: "Software Engineering & Development", categories: ["Software Engineering & Development"], description: "A real-time weather application with location-based forecasts, interactive UI, and detailed weather data visualization.", technologies: ["HTML5", "CSS3", "JavaScript"], imageUrl: "/projects/live-weather-app/Featured.png", liveUrl: "/apps/live-weather-app/" },
{ id: 29, title: "Solar System Explorer", slug: "solar-system-explorer", client: "Personal Project", category: "Software Engineering & Development", categories: ["Software Engineering & Development"], description: "An interactive solar system visualization with clickable planets, search functionality, and fascinating facts about our cosmic neighborhood.", technologies: ["HTML5", "CSS3", "JavaScript", "Font Awesome"], imageUrl: "/projects/solar-system-explorer/Featured.png", liveUrl: "/apps/solar-system-explorer/" },
{ id: 21, title: "Internet Speed Checker", slug: "internet-speed-checker", client: "Personal Project", category: "Software Engineering & Development", categories: ["Software Engineering & Development"], description: "Real-time internet speed testing tool with download/upload measurement and dark mode.", technologies: ["HTML5", "CSS3", "JavaScript"], 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", categories: ["Software Engineering & Development"], description: "Interactive periodic table with search, category filtering, and detailed element views.", technologies: ["HTML5", "CSS3", "JavaScript"], imageUrl: "/projects/periodic-table-app/Featured.png", demoUrl: "/demos/periodic-table-app/" },
{ id: 15, title: "Tic Tac Toe Game", slug: "tic-tac-toe", client: "Personal Customer", category: "Software Engineering & Development", categories: ["Software Engineering & Development"], description: "An interactive Tic Tac Toe game with an intelligent AI bot opponent.", technologies: ["HTML5", "CSS3", "JavaScript"], imageUrl: "/projects/tick_tack_toe/Featured.png", liveUrl: "https://charaka-janith.github.io/#/tic-tac-toe" },
];
function ProjectsNav() {
const [scrolled, setScrolled] = useState(false);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 12);
window.addEventListener('scroll', onScroll);
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
);
}
function ProjectsContact() {
const [sent, setSent] = useState(false);
const [form, setForm] = useState({ name: '', email: '', company: '', scope: 'Web platform', msg: '' });
const upd = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
const handleSubmit = (e) => {
e.preventDefault();
if (typeof firebase !== 'undefined' && firebase.firestore) {
firebase.firestore().collection('contacts').add({
name: form.name, email: form.email, company: form.company, scope: form.scope, message: form.msg, status: 'new',
createdAt: firebase.firestore.FieldValue.serverTimestamp(),
}).catch(() => {});
}
setSent(true);
};
return (
);
}
function ProjectsPage() {
const [filter, setFilter] = useState('All');
const allCats = ['All', ...new Set(PROJECTS.flatMap(p => p.categories || [p.category]))];
const filtered = filter === 'All' ? PROJECTS : PROJECTS.filter(p => (p.categories || [p.category]).includes(filter));
return (
<>
← Back to home
Our Projects
A selection of software we've designed and shipped for clients across industries.
{allCats.map(c => (
))}
);
}
ReactDOM.createRoot(document.getElementById('root')).render();
