Novelli Virtual Desktop Site
Ambiente desktop simulato in HTML/CSS/JS per la presentazione interattiva dei contenuti di www.novelli.me
Cos’è?
Novelli Virtual Desktop Site è un’interfaccia web ispirata ai classici ambienti desktop dei sistemi operativi, progettata per navigare i progetti, i link e le pubblicazioni in modo visivo e immersivo. Tutto è realizzato in JavaScript puro, senza framework esterni.
Caratteristiche
🎮 Mini-App Integrate
Il desktop virtuale include 8 mini-app interattive completamente funzionanti, sviluppate in vanilla JavaScript con Canvas API:
- 🌀 Mandelbrot Explorer: visualizzatore interattivo del frattale di Mandelbrot con zoom infinito, rendering multi-threaded con Web Workers e palette di colori personalizzabili
- 🐍 Snake 2025: il classico gioco Snake reimplementato con canvas, temi grafici multipli (Classic, Neon, Retro), sistema di punteggio e audio interattivo
- 🧱 Tetris: versione completa del celebre puzzle game con controlli touch-friendly per mobile, sistema di livelli progressivi e preview dei prossimi pezzi
- 🦠 Conway’s Game of Life: simulazione interattiva dell’automa cellulare di John Conway con pattern precaricati, controlli play/pause/step e griglia ridimensionabile
- 🌧 Green Rain: animazione “Matrix-like” su canvas con caratteri giapponesi e latini, velocità regolabile e effetti di dissolvenza
- ♟️ Chess: gioco di scacchi completo con motore AI integrato (Minimax + Alpha-Beta), validazione delle mosse e interfaccia drag-and-drop
- 🎯 Checkers: gioco della dama con supporto per Dama Italiana (8×8) e Internazionale (10×10), AI a 3 livelli di difficoltà e catture multiple
- 🎢 Pendulum - Fuzzy Control: simulazione del pendolo inverso controllato da un sistema fuzzy Mamdani, con visualizzazione in tempo reale delle membership functions e regole attive
💡 Funzionalità Avanzate
- Boot screen animato con effetto typing e suono d’avvio
- Desktop con Icon Groups: icone organizzate in gruppi trascinabili e ridimensionabili
- Finestre interattive: draggable, resizable, minimizzabili, massimizzabili con gestione focus
- Parchment System: notifiche floating con collegamenti multipli
- Start Menu responsive: layout multi-colonna adattivo (1-3 colonne in base all’altezza viewport)
- Blog integrato: sistema di blogging con dark theme unificato e editor web OAuth
- Mobile-optimized: navigazione a tab per Icon Groups su dispositivi mobili (<768px)
- Configuration-driven: tutti i contenuti desktop gestiti via
vds-config.js
🔒 Privacy & Performance
- Privacy-first: zero tracking, zero cookie, zero analytics (GDPR-compliant)
- Client-side only: nessuna raccolta dati, tutto in locale
- Vanilla JavaScript: nessun framework esterno, performance ottimali
- Self-hosted assets: nessuna dipendenza da CDN esterni (eccetto Blog Editor per SimpleMDE)
🎬 Presentazione Narrativa
Vuoi scoprire come è nato questo progetto?
🎥 Guarda il tour guidato interattivo
Una presentazione animata che racconta la storia del progetto attraverso screenshot e narrazione, con avanzamento automatico e controlli manuali.
📐 Architettura UML
Vuoi capire come funziona il sistema?
Diagrammi Mermaid.js interattivi che illustrano l’architettura del VDS Framework:
- Component Diagram: interazione Jekyll build-time e VDS runtime
- Class Diagram: struttura modulare del sistema (WindowManager, DesktopRenderer, TaskbarManager…)
- Sequence Diagram: flusso di boot e apertura finestre
- Blog Editor: architettura OAuth e GitHub API
🛠 Tecnologie
Frontend:
- HTML5 + CSS3 (Grid, Flexbox, Custom Properties)
- Vanilla JavaScript (ES6+, moduli IIFE)
- Canvas API (per mini-games e animazioni)
Backend & Build:
- Jekyll 4.x (generazione sito statico)
- GitHub Actions (CI/CD automatico)
- GitHub Pages (hosting)
Architettura:
- Configuration-driven design con
vds-config.js - Separazione framework/contenuti (
core/vs root) - Validation system per configurazione
- OAuth 2.0 per Blog Editor (solo area admin)
Requisiti
Funziona in qualsiasi browser moderno (Chrome, Firefox, Edge, Safari). Nessuna installazione richiesta.