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

• 🌀 Mandelbrot Explorer: visualizzatore interattivo del frattale di Mandelbrot con zoom
• 🐍 Snake 2025: il classico gioco Snake reimplementato con canvas
• 🧱 Tetris: versione completa del celebre puzzle game con punteggi
• 🦠 Conway’s Game of Life: simulazione del celebre automa cellulare
• 🌧 Green Rain: animazione “Matrix-like” su canvas

💡 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.

🛠 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.