icaronero.it: design e CMS costruiti su misura

Cos'è

icaronero.it è il sito portfolio fotografico di Andrea L. Casiraghi. Fino a metà 2026 era un frontend statico (prima su un framework proprietario poi migrato a HTML/CSS/JS puro); da lì è nato un backend vero: un CMS fatto in casa, scritto specificamente per questo progetto, pensato per l'hosting condiviso su cui gira (Aruba). Non è un tema o un plugin installato sopra una piattaforma generica: ogni riga, dallo schema del database al pannello admin, è stata scritta per questo sito.

Il principio guida, fissato fin dalla specifica di progetto originale: un'entità centrale unica (la gallery fotografica, non pagine sparse di tipo diverso), zero dipendenze esterne a runtime e portabilità assoluta. Si copia la cartella del progetto altrove, anche in una sottocartella diversa dalla root del dominio, e il sito riparte identico, senza toccare una riga di configurazione.

Perché un CMS dedicato e non uno esistente

Un CMS generico avrebbe portato con sé plugin da scegliere, aggiornamenti da seguire, dipendenze da mantenere e un pannello pensato per casi d'uso generali, non per gallerie fotografiche con copertine, categorie e una modalità di presentazione cinematografica. Scrivendolo da zero, ogni schermata del pannello corrisponde esattamente a un'azione che serve davvero: creare una gallery, caricarne le foto, scegliere una copertina, pubblicare. Niente altro da configurare, niente altro da imparare.

Il frontend pubblico: dal design al codice

Prima ancora di diventare un CMS, il sito era un frontend statico nato da un framework proprietario, poi migrato a HTML, CSS e JavaScript standard in preparazione al backend. Il CMS genera oggi l'HTML delle pagine, ma il disegno visivo, ogni componente e ogni animazione restano scritti a mano, con la stessa cura di un frontend statico: il database cambia i contenuti, non decide come sono presentati.

Il velario di apertura

A ogni caricamento della home, prima ancora della copertina fotografica, compare una scena dedicata: schermo nero con il marchio bianco al centro, poi un pannello nero che si ritira verso destra scoprendo la pagina, con le lettere del marchio che diventano nere esattamente sotto il proprio bordo. È lo stesso sipario usato dal menu a tutto schermo del sito, stesso clip-path, stessa durata, stessa curva di accelerazione, ripercorso al contrario: un dettaglio che lega due momenti diversi dell'esperienza allo stesso linguaggio visivo, invece di inventarne uno nuovo per ciascuno.

La copertina della home

La prima schermata non è il testo introduttivo ma una fotografia dentro una cornice centrata, non a tutto schermo, che si apre come un sipario sopra e sotto al termine di una barra di caricamento larga quanto la fotografia stessa, con la percentuale in chiaro. Le fotografie in copertina si alternano fra alcune scelte in galleria; sotto i 640px compare un secondo elenco di immagini verticali pensate apposta per lo schermo del telefono, dove un'orizzontale ridotta a una striscia sottile perderebbe tutto il suo peso visivo.

Il mosaico della galleria

La pagina di ogni galleria fotografica non allinea le immagini in un unico elenco verticale, ma le dispone in un mosaico a due colonne (CSS column-count, senza una riga di JavaScript): ogni terza immagine rompe a piena larghezza, per dare un ritmo alternato alla pagina invece di un muro di miniature tutte uguali.

Architettura in breve

• Backend: PHP, senza framework. Database SQLite in un unico file (data/site.db), niente server di database separato da amministrare.
• Modello dati: gallery come entità centrale (titolo, testo, copertina, pubblicazione, ordine), categoria in relazione molti-a-molti con le gallery, pagina per i contenuti generici (Home, Contatti, e altre pagine libere), immagine/pagina_immagine per le fotografie caricate.
• Routing pubblico: un unico index.php calcola il percorso base a runtime, mai scritto a mano nel codice. Lo stesso identico codice funziona sia in una sottocartella sia alla root del dominio, senza modifiche.
• Cache HTML: ogni pagina pubblica viene renderizzata una volta e salvata come file pronto; le visite successive la leggono direttamente dal disco, senza interrogare il database. Qualsiasi modifica dal pannello svuota la cache.

Il pannello admin

Cinque schermate, tutte protette da login con sessione PHP e token CSRF su ogni modulo: dashboard (elenco gallery), gallery-form (un'unica schermata per titolo, testo, upload immagini con riordino drag&drop, scelta della copertina, categorie e campi SEO), categorie, pagine (Home e Contatti sempre in cima, essendo le uniche due pagine "fisse" del sito) e impostazioni (titolo del sito, meta description di default, specializzazioni fotografiche).

Il login è protetto da un rate limiting per indirizzo IP: dopo 5 tentativi falliti in 15 minuti, ulteriori tentativi vengono bloccati senza nemmeno verificare la password.

Un editor di testo formattato scritto da zero

I campi di testo lungo (descrizione di una gallery, testo di una pagina) usano un piccolo editor contenteditable scritto su misura invece di una libreria esterna come Quill.js, per restare coerenti col resto del progetto: barra con grassetto, corsivo, elenchi, link, e un tasto per vedere/modificare l'HTML grezzo. La sicurezza è a due livelli, perché un modulo si può sempre inviare bypassando il browser: l'HTML viene ripulito sia lato client sia lato server, con la stessa whitelist ristretta di tag consentiti e nessuno schema di link pericoloso (uno javascript: viene scartato).

Pipeline immagini

Ogni fotografia caricata passa da una pipeline automatica: correzione della rotazione EXIF (per gli scatti da smartphone), generazione di due varianti JPEG (una miniatura e una versione da schermo), e scarto dell'originale. Nessuna libreria esterna: solo l'estensione GD di PHP, già presente su qualsiasi hosting condiviso.

La modalità "film": presentazione a schermo intero con audio

Per le gallerie che lo richiedono, un clic su una fotografia apre una presentazione cinematografica a schermo intero, guidata dallo scroll: le immagini si dissolvono l'una nell'altra, con didascalie laterali e una colonna sonora. Il motore visivo è stato adattato, non semplicemente copiato, da ScrollyTelling, un altro progetto raccontato in questo Lab: qui i dati di ogni film vengono generati lato server dal database e incorporati direttamente nella pagina, invece che caricati con una richiesta separata da un file JSON esterno da tenere sincronizzato. L'audio è un preset generativo via Web Audio API (quattro temi armonici distinti) oppure una traccia personale caricata dall'admin, con credito opzionale.

SEO, sicurezza, contatti, analytics

Ogni pagina pubblica include un partial condiviso per titolo, meta description, canonical, Open Graph e dati strutturati JSON-LD (diversi per tipo di pagina: servizio professionale sulla home, galleria fotografica sulle gallery). Il form di contatto ha un campo honeypot invisibile, un limite di un invio ogni 20 secondi per IP, e spedisce via SMTP autenticato con PHPMailer: l'unica eccezione al principio "zero dipendenze esterne", scelta perché l'invio nativo di PHP finiva regolarmente in spam. Le statistiche di visita passano da Google Analytics 4 con Consent Mode v2: nessuno script parte finché il visitatore non sceglie esplicitamente, e nessun banner compare da solo, per non alterare la composizione visiva delle pagine.

Lo stato del progetto

Il CMS è online e in uso reale. È stato costruito in conversazione con Claude Code, sessione dopo sessione, con una documentazione tecnica interna che cresce insieme al codice invece di essere ricostruita da zero ogni volta: architettura, convenzioni consolidate, cronologia dei cambiamenti e lavori ancora aperti, ognuno nel proprio file.

In sintesi

Vuoi vederlo in azione? Apri icaronero.it, il sito che questo CMS genera e amministra.