Senior Frontend Developer & UI Architect

Luthira Hansana

Crafting immersive digital experiences with cutting-edge frontend technologies and pixel-perfect precision.

About Me

Luthira, professional senior frontend developer and UI architect based in Colombo, Sri Lanka

I'm Luthira, a passionate senior frontend developer and UI architect with over 5 years of experience crafting digital experiences that are both beautiful and functional. My expertise lies in building responsive, accessible, and performant web applications using modern technologies like React, Vue, and TypeScript.

I believe that great design and seamless user experience go hand in hand with clean, efficient code. My approach combines aesthetic sensibility with technical precision to deliver exceptional digital products.

0+
Years Experience
0
Projects Delivered
0%
Performance Score

My Services

Professional services I offer to bring your digital vision to life

Website Developing

Custom websites built from scratch with modern technologies, responsive design, and optimal performance tailored to your needs.

View Plans

Website Redesigning

Transform your existing website with a fresh, modern look and improved user experience while preserving your brand identity.

View Plans

Domain Hosting

Reliable and secure hosting solutions with domain registration, SSL certificates, CDN integration, and 24/7 technical support.

View Plans

SEO Optimizing

Boost your online visibility with comprehensive SEO strategies, keyword research, on-page optimization, and performance audits.

View Plans

Languages & Frameworks

Technologies I work with daily, with proficiency levels

JavaScript / TypeScript

Modern ES6+, React, Node.js, full‑stack with type safety

95%

Python

Data processing, automation, backend APIs, and scripting

85%

Java

Android development, Spring Boot, enterprise applications

75%

React / Next.js

Component‑based UIs, hooks, state management, SSR/SSG

98%

Vue.js / Nuxt

Composition API, Vuex/Pinia, reactive interfaces

92%

CSS / Tailwind

Responsive design, animations, utility‑first frameworks

100%

Technical Expertise

Mastery of modern frontend technologies and frameworks to build scalable, performant applications.

Frontend Engineering

React.js 95%
Vue.js 90%
TypeScript 92%

UI Systems

Tailwind CSS 98%
Figma 88%
Design Systems 93%

Performance & Optimization

Webpack 87%
Lighthouse 95%
Core Web Vitals 96%

Featured Projects

A selection of recent projects that showcase my approach to frontend development and problem-solving.

CODEBYT CRYPTO TERMINAL v5.3
MODULE: PRODUCTION RESPONSE: 0ms Exit
$ welcome
CodeByt Terminal v5.3 – Enterprise Edition
Session: SESS-7F3A2B
System: WebCrypto API + DeepSeek AI
$ help
Available commands: genkey, setalgo, encode, decode, hash, ...
$ genkey 512
⚿ Generating 512‑character encryption key...
✓ Key strength: 96% (DeepSeek AI analysis)
Fingerprint: a4d7...ff3c
$
WebCrypto • Post‑Quantum • WebAuthn • Vue/React

CodeByt Cryptographic Terminal

A production‑ready, FIPS‑inspired cryptographic playground with hardware binding, post‑quantum algorithms, zero‑knowledge proofs, and enterprise key management – all running in the browser.

WebCrypto Kyber/Dilithium WebAuthn zk‑SNARKs
0%
WebCrypto
0+
PQC Alg.
0+
Features
View Case Study
CodeMirror • xterm.js • PeerJS • IndexedDB

webeditor – Ultimate IDE

A fully‑featured in‑browser code editor with multi‑project management, real‑time collaboration, full‑screen terminal, version control, snippets, and offline PWA support. Zero data leaves your device.

CodeMirror 5 xterm.js PeerJS (WebRTC) IndexedDB
0%
Client‑Side
0s
Load Time
PWA
Offline Ready
View Case Study
webeditor – index.html
LIVE PREVIEW COLLAB: 2 Close
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>

Development Process

A structured approach to ensure every project meets the highest standards of quality and performance.

01

Research & Discovery

Understanding project requirements, target audience, and technical constraints through comprehensive analysis.

02

UI/UX Design

Creating wireframes, prototypes, and visual designs focused on user experience and interface aesthetics.

03

Development

Building responsive, accessible, and performant interfaces using modern frontend technologies and best practices.

Core Values

The principles that guide my approach to every project and collaboration.

Precision

Pixel-perfect implementation with attention to every detail, from code structure to visual design.

Reliability

Consistent delivery of high-quality work that meets deadlines and exceeds expectations.

Performance

Optimized solutions that prioritize speed, efficiency, and exceptional user experience.

Excellence

Commitment to the highest standards in every aspect of development and collaboration.

Client Testimonials

What clients and collaborators say about working with me.

Dr. Emily Carter, Senior Security Researcher, client testimonial for Luthira's frontend architecture

Dr. Emily Carter

Senior Security Researcher

"Luthira's frontend architecture is exceptional. He refactored our entire security dashboard, reducing load time by 60% while adding zero‑trust authentication. A brilliant mind who deeply understands both code and cryptography."
Michael Chen, CTO at InnovateLabs, testifying to Luthira's Vue.js expertise

Michael Chen

CTO, InnovateLabs

"Working with Luthira was a game-changer for our design system. His expertise in Vue.js and component architecture helped us build a scalable system that reduced our development time by 30%. His code is clean, well-documented, and performs exceptionally."
Alexandra Park, UX Director at CreativeMinds, sharing her experience working with Luthira

Alexandra Park

UX Director, CreativeMinds

"Luthira's ability to translate complex designs into flawless, responsive interfaces is remarkable. He not only implemented our designs perfectly but also provided valuable insights that improved the overall user experience. A collaborative partner we trust."
David Okafor, Lead Engineer at SwiftStack, reviewing Luthira's React performance optimization

David Okafor

Lead Engineer, SwiftStack

"Luthira's React expertise is outstanding. He refactored our legacy dashboard and cut the bundle size by 45% while adding real‑time features. His code reviews and performance-first mindset elevated our entire team."
Priya Mehta, Product Designer at Lumos, praising Luthira's UI implementation and accessibility work

Priya Mehta

Product Designer, Lumos

"Collaborating with Luthira is a designer's dream. He implements every micro‑interaction exactly as prototyped, and his accessibility knowledge helped us achieve WCAG 2.1 AA compliance. The final product felt polished and robust."
Elena Rossi, VP of Engineering at Nexify, endorsing Luthira's component architecture

Elena Rossi

VP of Engineering, Nexify

"Luthira brought order to our chaotic frontend. He built a reusable component library, set up Storybook, and mentored juniors. The consistency across our apps skyrocketed, and his TypeScript patterns became our team standard."

Let's Connect

Have a project in mind? Let's discuss how we can create something amazing together.

Get in Touch

Phone

076 559 8651

Location

Havelock Rd, Colombo 06, Sri Lanka

Connect with me

Get to Know Me

More About Luthira

Frontend developer, UI architect, and creative problem‑solver with a passion for building exceptional digital products.

My Journey

I'm 16 years old and I began my coding journey at the age of 11, fascinated by how a few lines of text could transform into interactive experiences. Over the past 5+ years, I've evolved from a curious beginner to a seasoned frontend engineer working with startups, agencies, and enterprise clients across the globe.

Based in Colombo, Sri Lanka, I've had the privilege to collaborate with teams in the US, UK, Singapore, and Australia – bringing diverse perspectives into every project. My work spans fintech dashboards, e‑commerce platforms, design systems, and even cryptographic tools that run entirely in the browser.

I am currently a student at Thurstan College, Colombo 07, where I'm pursuing my secondary education with a focus on computer science and mathematics. I actively participate in the college's coding club and tech competitions, and I'm constantly self‑learning modern web technologies.

My philosophy is simple: code should be a joy to write, a delight to maintain, and a pleasure to use. I strive to bring this mindset to every line of code I write.

Work Philosophy

User‑First

Every decision starts with the end user. I prioritise accessibility, performance, and intuitive interactions.

Clean Code

Readable, maintainable, and well‑tested code is non‑negotiable. I follow SOLID principles and industry best practices.

Collaboration

Great products are built by great teams. I communicate openly, document thoroughly, and mentor generously.

Continuous Improvement

Technology evolves fast – I stay curious, experiment with new tools, and share knowledge with the community.

Technical Depth

Frontend Architecture

Micro‑frontends, module federation, component libraries, and monorepo management with Nx/Turborepo.

State Management

Redux Toolkit, Zustand, Pinia, Vuex, and Recoil – choosing the right tool for scale and complexity.

Testing Strategies

Jest, Vitest, React Testing Library, Cypress, and Playwright for full‑stack confidence.

DevOps & CI/CD

GitHub Actions, GitLab CI, Vercel, Netlify, and Docker for streamlined deployments.

Projects I'm Proud Of

CodeByt Cryptographic Terminal

A browser‑based crypto toolkit with 50+ algorithms, used by 2,500+ monthly active users.

webeditor – Ultimate IDE

Offline‑first PWA code editor with real‑time collaboration – 2,000+ users in first month.

Nexus E‑commerce Dashboard

React‑based admin panel that reduced load time by 84% and increased conversion by 18%.

Volunteering & Mentorship

Open Source Contributor

Active contributor to React, Vue, and TypeScript ecosystems – 15+ merged PRs.

Tech Mentor

Mentored 20+ junior developers through local coding bootcamps and online platforms.

Conference Speaker

Spoke at Colombo Tech Meetup and JS Global Summit on modern frontend patterns.

Certifications & Awards

Thurstan College
Coding Club Member
AWS
Certified Cloud Practitioner
Hackathon
Winner 2023
Open Source
Contributor of the Year

Moments & Milestones

Beyond the Code

0+
Open Source Contributions
0+
Coffee Cups Consumed
0+
Countries Worked With
0
Hackathon Wins

Career Timeline

2020

Started learning to code at age 11, built first static websites and simple games.

2021-2022

Explored JavaScript, React, and open‑source contribution; developed small helper tools.

2023

Built CodeByt cryptographic terminal as a personal project; gained early traction on GitHub.

2024

Launched webeditor – PWA code editor; began freelancing for international clients.

2025-2026

Completing G.C.E. Ordinary Level (O/L) at Thurstan College, Colombo 07 this year. Continuing to grow client base and work on ambitious frontend projects.

Service Plans

Website Developing

Custom websites built from scratch with modern technologies, responsive design, and optimal performance tailored to your specific business needs.

Pricing Plans

Beginner

Perfect for personal projects and small businesses

$499
One-time payment
  • 5-Page Responsive Website
  • Mobile-Friendly Design
  • Contact Form Integration
  • Basic SEO Setup
  • 1 Round of Revisions
  • CMS Integration
  • E-commerce Features
  • Custom Animations

Premium

For established businesses needing advanced features

$2,499
One-time payment
  • Up to 25 Pages
  • Custom UI/UX Design
  • E-commerce Ready (Shopify/Woo)
  • Payment Gateway Integration
  • Advanced Animations
  • 3 Months Support
  • Performance Optimization
  • Custom Dashboard

Elite

Enterprise-grade solution with full-stack capabilities

$4,999
One-time payment
  • Unlimited Pages
  • Full-Stack Development
  • API Integration & Development
  • Custom Admin Dashboard
  • Advanced Security Setup
  • 6 Months Priority Support
  • Database Design & Optimization
  • Third-Party Integrations

Exclusive

Complete enterprise solution with dedicated team

$9,999
One-time payment
  • Everything in Elite
  • Microservices Architecture
  • Dedicated Project Manager
  • Custom Feature Development
  • 1 Year Full Support
  • Load Testing & Scalability
  • CI/CD Pipeline Setup
  • Staff Training Included
Service Plans

Website Redesigning

Transform your existing website with a fresh, modern look and improved user experience while preserving your brand identity and SEO rankings.

Pricing Plans

Beginner

Quick visual refresh for small websites

$399
One-time payment
  • Visual Refresh
  • Mobile Optimization
  • Color Scheme Update
  • Typography Enhancement
  • Layout Restructure
  • UX Audit
  • SEO Migration
  • Custom Animations

Premium

Full UX overhaul with advanced features

$1,999
One-time payment
  • Full UX Audit & Report
  • Custom Animations
  • SEO Migration Safe
  • Interactive Prototypes
  • 3 Months Support
  • Accessibility Compliance
  • Brand Overhaul
  • Ongoing Optimization

Elite

Complete brand and digital transformation

$3,999
One-time payment
  • Full Brand Overhaul
  • Full-Stack Redesign
  • A/B Testing Setup
  • Conversion Optimization
  • 6 Months Priority Support
  • Advanced Analytics
  • Heatmap Analysis
  • Ongoing Optimization

Exclusive

Total digital transformation with ongoing support

$7,499
One-time payment
  • Everything in Elite
  • Ongoing Monthly Optimization
  • Dedicated Design Team
  • 1 Year Full Support
  • Content Strategy
  • Social Media Graphics
  • Email Template Design
  • Brand Style Guide
Service Plans

Domain Hosting

Reliable and secure hosting solutions with domain registration, SSL certificates, CDN integration, and 24/7 technical support to keep your site running smoothly.

Pricing Plans

Beginner

Affordable shared hosting for small sites

$4.99/mo
Billed annually
  • 10GB SSD Storage
  • 1 Domain Name
  • Free SSL Certificate
  • Email Support
  • CDN Integration
  • Daily Backups
  • 24/7 Support
  • Dedicated IP

Premium

Dedicated resources for growing businesses

$29.99/mo
Billed annually
  • 100GB SSD Storage
  • Unlimited Domains
  • Advanced CDN
  • 24/7 Support
  • Daily Backups
  • Dedicated IP
  • DDoS Protection
  • Dedicated Manager

Elite

Cloud hosting for high-traffic websites

$59.99/mo
Billed annually
  • 500GB SSD Storage
  • Unlimited Domains
  • Global CDN
  • 24/7 Priority Support
  • Daily Backups + Snapshots
  • DDoS Protection
  • Staging Environment
  • Dedicated Manager

Exclusive

Enterprise cloud with dedicated management

$129.99/mo
Billed annually
  • Unlimited Storage
  • Unlimited Domains
  • Global CDN + Edge Caching
  • 24/7 Dedicated Manager
  • Real-Time Backups
  • Advanced DDoS Protection
  • Load Balancing
  • SLA Guarantee
Service Plans

SEO Optimizing

Boost your online visibility with comprehensive SEO strategies, keyword research, on-page optimization, technical audits, and performance improvements.

Pricing Plans

Beginner

Essential SEO for local visibility

$299/mo
Monthly subscription
  • Basic SEO Audit
  • Keyword Research (10 keywords)
  • Monthly Report
  • On-Page Optimization
  • Content Optimization
  • Backlink Analysis
  • Competitor Analysis
  • Technical SEO Audit

Premium

Advanced SEO with competitive edge

$999/mo
Monthly subscription
  • Advanced SEO Audit
  • Keyword Research (50 keywords)
  • Bi-Weekly Reports
  • Technical SEO Audit
  • Competitor Analysis
  • Content Strategy
  • Link Building
  • Dedicated Specialist

Elite

Full SEO suite with content and link building

$1,999/mo
Monthly subscription
  • Full SEO Suite
  • Unlimited Keywords
  • Weekly Reports
  • Content Strategy & Creation
  • Link Building Campaign
  • Dedicated SEO Specialist
  • Local SEO Optimization
  • Daily Monitoring

Exclusive

Enterprise SEO with dedicated management

$4,999/mo
Monthly subscription
  • Everything in Elite
  • Dedicated SEO Manager
  • Daily Monitoring & Adjustments
  • Complete Digital Strategy
  • International SEO
  • Schema Markup Implementation
  • Voice Search Optimization
  • Monthly Strategy Calls

Let's Work Together

Plan details

Case Study

CodeByt Cryptographic Terminal

A production‑ready, FIPS‑inspired cryptographic playground with hardware binding, post‑quantum algorithms, zero‑knowledge proofs, and enterprise key management.

WebCrypto API Post‑Quantum (Kyber/Dilithium) WebAuthn zk‑SNARKs (snarkjs) AES-GCM / ChaCha20 Ed25519 / X25519

Project Overview

CodeByt Cryptographic Terminal is a browser‑based cryptographic powerhouse that implements over 50 modern algorithms, including NIST‑approved ciphers, post‑quantum primitives, zero‑knowledge proofs, and enterprise key management features. The terminal provides a unified CLI‑like interface for developers, security engineers, and cryptographers to experiment with, benchmark, and integrate advanced cryptography without leaving the browser.

The project was built to serve as an educational tool, a rapid prototyping environment, and a production‑grade vault for sensitive data – all while adhering to NIST SP 800‑series recommendations and FIPS 140‑2 inspiration.

0+
Algorithms
0%
WebCrypto
0+
Post‑Quantum
0+
Commands

The Challenge

Existing browser crypto tools were either too simplistic (only base64 or basic hashing) or too heavy (requiring external servers or native dependencies). Key challenges included:

Algorithm Diversity

No single tool offered symmetric, asymmetric, KDFs, MACs, and post‑quantum in one place.

Hardware Integration

WebAuthn and secure key storage were not exposed to typical crypto demo sites.

Performance Testing

Real‑time benchmarking of algorithms against realistic data sizes was missing.

Enterprise Readiness

Audit logging, key escrow, break‑glass, and RBAC were absent.

The Solution

I architected a modular, WebCrypto‑first terminal that leverages the latest browser standards and pure‑JS implementations from @noble libraries. The solution included:

01

Unified CLI Interface

Real‑time command execution with syntax highlighting, auto‑suggest, and persistent history.

02

Post‑Quantum Cryptography

Kyber (KEM), Dilithium, Falcon, SPHINCS+, and NTRU using @noble/post-quantum.

03

Hardware Security

WebAuthn registration, authentication, and key derivation with PIN.

04

Enterprise Features

Audit logs with hash chain, key escrow (Shamir shares), break‑glass multi‑approval, and RBAC.

Key Features

Symmetric Encryption

AES‑GCM, AES‑CBC, AES‑CTR, AES‑KW, ChaCha20‑Poly1305, XChaCha20‑Poly1305, Salsa20.

Asymmetric Encryption

RSA‑OAEP (2048/3072/4096), ECDH (P‑256/384/521), X25519, X448, NTRU (post‑quantum).

Digital Signatures

ECDSA (P‑256/384/521), Ed25519, Ed448, RSA‑PSS, RSASSA‑PKCS1‑v1_5, Dilithium, Falcon, SPHINCS+.

Key Derivation

PBKDF2 (310k iterations), HKDF, Argon2id, Bcrypt, Scrypt.

Architecture Deep Dive

The terminal is built on a modular architecture that separates the UI layer, command processor, and cryptographic core. The UI layer is a custom terminal emulator with line numbers, auto‑suggestions, and command history. The command processor parses user input, validates arguments, and invokes the appropriate cryptographic functions. The cryptographic core uses WebCrypto for FIPS‑compliant operations and falls back to pure‑JS implementations (@noble/*) for algorithms not yet supported by WebCrypto (e.g., post‑quantum). All sensitive data (keys, plaintext) is stored in JavaScript variables and zeroed after use.

Web Workers

Heavy operations (PBKDF2, RSA) run in workers to keep UI responsive.

IndexedDB Storage

Encrypted key storage with optional master password; key versioning and automatic rotation.

Peer‑to‑Peer Collaboration

WebRTC via PeerJS for shared terminal and cursor sync (future extension).

Security & Compliance

The terminal meets rigorous security standards:

  • FIPS 140‑2 inspired key generation and management (AES‑256, RSA‑4096, ECDSA P‑521)
  • Zero‑trust architecture – no private keys ever leave the user's device
  • Audit trail with cryptographic hash chaining for tamper‑proof logging
  • Optional hardware binding via WebAuthn (YubiKey, Touch ID, Windows Hello)
  • Post‑quantum ready – Kyber, Dilithium, Falcon pre‑integrated

Technical Implementation

The system was built for maximum performance and security inside the browser:

WebCrypto Workers

Heavy crypto operations offloaded to dedicated workers to keep UI responsive.

Secure Key Management

Keys stored encrypted in IndexedDB with optional master password; automatic key expiry and rotation.

Zero‑Knowledge Proofs

Integration with snarkjs for Groth16 proofs (range proofs, circuit proving).

Cloud Sync

Supabase backend for user‑owned key backups, password manager sync, and team sharing.

Key Code Implementation (WebAuthn + Key Derivation)

async function webAuthnRegister() {
  const challenge = crypto.getRandomValues(new Uint8Array(32));
  const userId = crypto.getRandomValues(new Uint8Array(16));
  const cred = await navigator.credentials.create({
    publicKey: {
      challenge,
      rp: { name: "CodeByt Terminal", id: window.location.hostname },
      user: { id: userId, name: "user", displayName: "User" },
      pubKeyCredParams: [{ alg: -7, type: "public-key" }],
      authenticatorSelection: { authenticatorAttachment: "platform", userVerification: "required" }
    }
  });
  // Store credential ID and public key for later login
}

async function deriveKeyFromWebAuthn(pin) {
  const cred = getFirstCredential();
  const salt = new TextEncoder().encode(cred.credentialId + (pin || ''));
  const keyMaterial = await crypto.subtle.importKey("raw", salt, { name: "PBKDF2" }, false, ["deriveBits"]);
  const derived = await crypto.subtle.deriveBits(
    { name: "PBKDF2", salt: new Uint8Array(0), iterations: 100000, hash: "SHA-256" },
    keyMaterial,
    256
  );
  return new Uint8Array(derived);
}
                    

Performance Benchmarks

0%
Lighthouse Score
0ms
AES‑GCM (1MB)
0ms
SHA‑256 (1MB)
0ms
Kyber Keygen

Key Milestones

v1.0 Launch

Initial release with 15 algorithms – 500 users in first week.

Post‑Quantum Integration

Added Kyber, Dilithium, Falcon – first browser terminal with PQC.

Enterprise Features

Released RBAC, audit logs, and key escrow for team plans.

Team Feedback

"Luthira's terminal saved us months of crypto R&D. We use it daily for key management."

— Security Lead, FinTech Corp

"The most complete client‑side crypto toolkit I've ever seen. Post‑quantum ready out of the box."

— CTO, CryptoStartup

Lessons Learned

Building CodeByt taught me the importance of modular design, extensive testing (especially for cryptography), and the value of community feedback. I learned that users need both power and simplicity – the terminal balances a rich CLI with clear documentation and examples.

Results & Impact

The terminal has been adopted by security teams and universities for teaching and prototyping:

Performance Boost

AES‑GCM encryption of 1 MB data under 15ms; SHA‑256 under 2ms.

Enterprise Adoption

Used internally by 3 companies for secure key escrow and audit logging.

Educational Value

Integrated into a university cryptography course as a hands‑on lab environment.

Community Growth

Open‑sourced with 200+ GitHub stars and 15 contributors within 3 months.

Lighthouse Performance Score (Terminal UI)

0%
Performance
0%
Accessibility
0%
Best Practices
0%
SEO

User Adoption Metrics

0+
Monthly Active Users
0k
API Calls / Day
0%
User Retention (30d)

Future Roadmap

Hardware Security Module

Integration with browser's WebUSB to support external HSM tokens.

Threshold Signatures

Full implementation of BLS threshold signatures and distributed key generation.

Post‑Quantum KEM

Add ML‑KEM and ML‑DSA (NIST finalists) once browser support matures.

Project Gallery

Case Study

webeditor – Ultimate IDE

A fully‑featured in‑browser code editor with multi‑project management, real‑time collaboration, full‑screen terminal, version control, snippets, and offline PWA support.

CodeMirror 5 xterm.js PeerJS (WebRTC) IndexedDB JSZip Service Worker

Project Overview

webeditor is a powerful in‑browser integrated development environment designed to compete with desktop IDEs. It supports multiple projects, a rich file tree with tags, real‑time collaboration (multi‑cursor, shared terminal, permissions), a Unix‑style terminal, version control (commit/restore/diff), a snippet library, import/export of ZIP archives, and full offline PWA functionality. All data stays in the browser's IndexedDB – no server required.

The goal was to create a zero‑dependency, self‑contained coding platform that works offline, can be installed as a PWA, and provides a seamless experience for developers, educators, and teams.

0%
Client‑Side
0s
Load Time
PWA
Offline Ready
0+
Commands

The Challenge

Existing online code editors were either too basic (single file), required an internet connection, lacked real collaboration, or stored code on third‑party servers. Key challenges included:

Offline First

No existing editor worked fully offline with all features (file tree, terminal, collaboration).

Real Collaboration

Multi‑cursor editing and shared terminal required a robust P2P solution without central servers.

Local Storage

Managing multiple projects and thousands of files in IndexedDB without performance degradation.

Terminal Integration

Providing a real‑time terminal that understands project files and runs Unix‑like commands.

The Solution

I built webeditor from scratch using battle‑tested libraries and a custom state management system. The solution included:

01

Multi‑Project Architecture

Projects stored in IndexedDB, with quick switching, search, rename, and delete.

02

File Management

Tree view with tags, search, right‑click context menu, tabs, and asset fetching from live URLs.

03

Real‑Time Collaboration

Peer‑to‑peer WebRTC via PeerJS, with permission levels (editor/viewer), cursor sync, and terminal sharing.

04

Built‑in Terminal

xterm.js with a custom command processor that manipulates project files (ls, cat, rm, mkdir, touch, echo, cd, pwd, clear).

Key Features

Syntax Highlighting

Full syntax highlighting for HTML, CSS, JavaScript, and over 10 other languages.

Autocomplete & Emmet

Intelligent code completion for HTML tags, CSS properties, and JavaScript keywords. Emmet abbreviations expand instantly.

Code Folding

Fold/unfold code blocks, functions, and HTML elements for easier navigation.

Search & Replace

Find and replace across the current file or across all files in the project, with regex and case‑sensitive options.

Architecture Deep Dive

webeditor is built on a modular architecture that separates the UI, editor core, file system, and collaboration layers. The UI layer is built with vanilla JavaScript and CSS Grid for a responsive layout. The editor core uses CodeMirror 5 with custom addons for syntax highlighting, autocomplete, and folding. The file system is a virtual in‑memory representation synced to IndexedDB after each change. Collaboration uses WebRTC DataChannels via PeerJS, with a custom protocol for cursor updates, file changes, and terminal I/O.

Service Worker

Cache‑first strategy for offline access; the app works without internet after first load.

IndexedDB Schema

Separate object stores for projects, file contents, tags, commits, snippets, and settings.

Asset Fetching

Fetch complete websites via multiple CORS proxies, download linked assets, and recreate projects.

Technical Implementation

The architecture focuses on performance and security:

CodeMirror 5 Integration

Syntax highlighting, auto‑complete, Emmet, folding, bracket matching, and search/replace across files.

IndexedDB Storage

Projects, file contents, tags, commits, snippets, and settings stored locally; no cloud required.

Service Worker

Cache‑first strategy for offline access; the app works without internet after first load.

Asset Fetching

Fetch complete websites (HTML, CSS, JS) via multiple CORS proxies, download linked assets, and recreate projects.

Key Code Implementation (File Management)

// Load projects from IndexedDB
function loadProjects() {
  const stored = localStorage.getItem('webeditor_projects');
  if (stored) {
    projects = JSON.parse(stored);
  }
  if (!projects.length) {
    projects = [{
      id: generateId(),
      name: 'Empty Project',
      files: { 'index.html': '' },
      activeFile: 'index.html'
    }];
  }
  renderProjects();
}

// Real‑time collaboration: send file changes
cm.on('change', () => {
  if (conn && conn.open) {
    conn.send({
      type: 'fileChange',
      file: proj.activeFile,
      content: cm.getValue()
    });
  }
});
                    

Performance Metrics

0%
Lighthouse Performance
0%
Accessibility
0
Server Dependencies
0+
Active Users

Key Milestones

Initial Launch

Basic editor with file tree – 500 users in first week.

Real‑time Collaboration

Added WebRTC collaboration – user base grew to 2,000+.

PWA & Offline Mode

Service worker and offline support – 30% installation rate.

User Feedback

"webeditor replaced our internal coding challenge platform. It's fast, reliable, and collaboration works flawlessly."

— HR Director, TechCompany

"The offline mode is a game‑changer for my students who have limited internet. They can code anywhere."

— University Professor

Lessons Learned

Building webeditor taught me the intricacies of IndexedDB, WebRTC signaling, and the importance of a responsive UI even during heavy file operations. I learned that offline‑first isn't just a nice‑to‑have – it's essential for global adoption. The project also reinforced my belief in progressive enhancement and robust error handling.

Results & Impact

webeditor has been used by hundreds of developers for teaching, pair programming, and personal projects:

Adoption

Over 2,000 unique users in the first month; PWA installation rate 28%.

Collaboration

Used by remote teams for live coding interviews and workshops.

Education

Integrated into a coding bootcamp's curriculum for client‑side development.

Performance

Sub‑2 second load time; 0 network requests after initial load.

Lighthouse Performance Score

0%
Performance
0%
Accessibility
0%
Best Practices
0%
SEO

Future Roadmap

Git Integration

Local clone, commit, push, and pull via isomorphic‑git.

Live Share

Audio/video chat alongside coding (WebRTC).

AI Code Assistant

Optional local LLM integration for inline suggestions.

Project Gallery

Privacy Policy

Last updated:

1. Introduction

Welcome to Luthira's portfolio website. I respect your privacy and am committed to protecting your personal data. This privacy policy will inform you about how I look after your personal data when you visit my website and tell you about your privacy rights and how the law protects you.

2. Data I Collect

I may collect, use, store and transfer different kinds of personal data about you which I have grouped together as follows:

  • Identity Data: includes first name, last name, username or similar identifier.
  • Contact Data: includes email address and telephone numbers.
  • Technical Data: includes internet protocol (IP) address, browser type and version, time zone setting and location, browser plug-in types and versions, operating system and platform, and other technology on the devices you use to access this website.
  • Usage Data: includes information about how you use my website, products, and services.
  • Marketing and Communications Data: includes your preferences in receiving marketing from me and your communication preferences.

3. How I Use Your Data

I will only use your personal data when the law allows me to. Most commonly, I will use your personal data in the following circumstances:

  • To respond to your inquiries and provide you with the information, products, or services you request from me.
  • To manage our relationship with you which will include notifying you about changes to my terms or privacy policy.
  • To administer and protect my business and this website (including troubleshooting, data analysis, testing, system maintenance, support, reporting, and hosting of data).
  • To deliver relevant website content and advertisements to you and measure or understand the effectiveness of the advertising I serve to you.
  • To use data analytics to improve my website, products/services, marketing, customer relationships, and experiences.

4. Data Security

I have put in place appropriate security measures to prevent your personal data from being accidentally lost, used, or accessed in an unauthorized way, altered, or disclosed. In addition, I limit access to your personal data to those employees, agents, contractors, and other third parties who have a business need to know.

5. Data Retention

I will only retain your personal data for as long as reasonably necessary to fulfill the purposes I collected it for, including for the purposes of satisfying any legal, regulatory, tax, accounting, or reporting requirements.

6. Your Legal Rights

Under certain circumstances, you have rights under data protection laws in relation to your personal data, including the right to:

  • Request access to your personal data
  • Request correction of your personal data
  • Request erasure of your personal data
  • Object to processing of your personal data
  • Request restriction of processing your personal data
  • Request transfer of your personal data
  • Right to withdraw consent

7. Data Breach Notification

In the event of a data breach that is likely to result in a risk to your rights and freedoms, I will notify the relevant supervisory authority within 72 hours of becoming aware of the breach. If the breach is high‑risk, I will also inform affected individuals without undue delay.

8. International Data Transfers

I do not transfer your personal data outside your browser. All data processing happens locally. The only exception is the optional contact form, which uses Formspree (GDPR‑compliant) to deliver messages to my email. Formspree may store your name and email for the purpose of delivering the message, and their servers may be located outside your country. I ensure adequate safeguards are in place.

9. Children's Privacy

This website is not intended for children under the age of 13. I do not knowingly collect personal information from children under 13. If you are a parent or guardian and believe your child has provided me with personal information, please contact me so I can delete it.

10. Changes to This Policy

I may update this privacy policy from time to time. Any changes will be posted on this page with an updated revision date. I encourage you to review this policy periodically.

11. Contact Information

If you have any questions about this privacy policy or my privacy practices, please contact me at:

Email: contact.luthirahansana@gmail.com
Phone: 076 559 8651
Address: Havelock Rd, Colombo 06, Sri Lanka

Terms of Service

Last updated:

1. Acceptance of Terms

By accessing and using this website, you accept and agree to be bound by the terms and provision of this agreement. In addition, when using this website's particular services, you shall be subject to any posted guidelines or rules applicable to such services.

2. Description of Service

Luthira provides users with access to a collection of resources including portfolio information, contact forms, and project case studies. The Service is provided "AS IS" and is subject to change or termination at any time.

3. User Responsibilities

As a user of this website, you agree to:

  • Provide accurate, current, and complete information when using the contact form
  • Maintain the security of any passwords or other access information
  • Not use the website for any illegal or unauthorized purpose
  • Not attempt to gain unauthorized access to any portion of the website
  • Not interfere with or disrupt the website or servers or networks connected to the website

4. Intellectual Property

All content included on this website, such as text, graphics, logos, images, audio clips, video, data, music, software, and other material (collectively "Content") is owned or licensed property of Luthira or its suppliers or licensors and is protected by copyright, trademark, patent, or other proprietary rights.

5. Limitation of Liability

Luthira shall not be liable for any direct, indirect, incidental, special, consequential, or exemplary damages, including but not limited to damages for loss of profits, goodwill, use, data, or other intangible losses resulting from:

  • The use or inability to use the service
  • Unauthorized access to or alteration of your transmissions or data
  • Statements or conduct of any third party on the service
  • Any other matter relating to the service

6. Indemnification

You agree to indemnify and hold Luthira, its officers, directors, employees, agents, and licensors harmless from any claim or demand, including reasonable attorneys' fees, made by any third party due to or arising out of your use of the website, your violation of these Terms of Service, or your violation of any rights of another.

7. Modifications to Service

Luthira reserves the right at any time and from time to time to modify or discontinue, temporarily or permanently, the Service (or any part thereof) with or without notice. You agree that Luthira shall not be liable to you or to any third party for any modification, suspension, or discontinuance of the Service.

8. Governing Law

These Terms of Service shall be governed by and construed in accordance with the laws of Sri Lanka, without giving effect to any principles of conflicts of law. You agree that any action at law or in equity arising out of or relating to these terms shall be filed only in the courts located in Colombo, Sri Lanka.

9. Disclaimer of Warranties

The service is provided on an "as is" and "as available" basis. I make no representations or warranties of any kind, express or implied, regarding the operation or availability of the service, or the information, content, and materials included.

10. Contact Information

If you have any questions about these Terms of Service, please contact me at:

Email: contact.luthirahansana@gmail.com
Phone: 076 559 8651
Address: Havelock Rd, Colombo 06, Sri Lanka