LAB: Digital Workshop

An Open-Source Creative Sandbox & SPA

Launch Live App View Source

Project Overview

LAB: Digital Workshop is a creative sandbox featuring a growing collection of interactive tools designed to help users work, learn, rest, and play—all in one place.

Built entirely with HTML5, CSS3, and Vanilla JavaScript, this Single-Page Application (SPA) demonstrates how to build complex, modular web applications without heavy frontend frameworks like React or Vue. It features a custom "glassmorphism" UI, dark/light mode accessibility, and a dynamic loading system.

Latest Update: v1.0.2 - "Frosted Glass"

A significant visual refresh was rolled out, implementing a sleek "glassmorphism" effect across the application for a more modern look and feel.

This update enhances the user interface by adding depth and texture, consistent with contemporary design trends.

Project Milestones

Version 1.0.1: Theme Syncing & Creative Tools

This release focused on improving the user and developer experience by introducing automatic theme syncing for standalone tools and expanding the "Rest" pillar.

  • Theme Syncing: Standalone tools loaded in iframes now automatically sync with the main app's light/dark theme.
  • New "Cymascope" Tool: A sound visualizer that generates beautiful cymatic patterns was added.
  • Documentation Cleanup: Core developer docs were updated for clarity and discoverability.

Version 1.0.0: Initial Public Release

The first stable version established the core architecture and feature set of the application.

  • Core Architecture: Built as a vanilla JS SPA with a hybrid tool-loading system (direct injection & iframe).
  • Massive Decoupling: Refactored numerous complex tools into their own repositories for modularity.
  • UI/UX Redesign: Implemented a mobile-first responsive design and CSS-only loading spinner.

Architecture & Engineering

Hybrid Dual-Loading System

To balance performance with extensibility, the application uses a unique dual-loading strategy:

  • Local Tools (Direct Injection): Lightweight tools (like calculators) are fetched and injected directly into the DOM for instant interactivity.
  • Standalone Tools (Iframe Embedding): Complex tools are sandboxed within iframes, preventing CSS/JS conflicts and allowing for independent deployment.

The 5 Pillars

🔧 Factory (Work)

Productivity utilities like Image to WebP Converters and Subwoofer Design calculators.

📚 Classroom (Learn)

Educational tools including Astronomy data, Life Path calculators, and Gematria.

🌿 Retreat (Rest)

Mindfulness tools such as Binaural Beats generators and Cymatic visualizations.

🎮 Arcade (Play)

Interactive experiences like the Radio Stream Player and Retro CD Player emulator.

🧠 Info

Project documentation, architecture details, and external resources.

Tech Stack

HTML5
Semantic Structure
CSS3
Variables & Glassmorphism
JavaScript
ES6+ (No Frameworks)
SPA Routing
Hash-based Navigation
GitHub Pages
CI/CD & Hosting

Interested in Custom Web Solutions?

I build tailored web applications using the same principles of performance and modularity.

Get a Quote