Contact Page - Static Version

Landing page minimale stile Linktree/Linkstack 100% statica (HTML/CSS puro, zero JavaScript).

Demo live: me.emanuelegori.me

---

Indice

• Caratteristiche
• Quick Start
• Installazione
• Deployment
• Personalizzazione
• Privacy
• Contribuire
• Licenze
• Supporto

---

Caratteristiche

• HTML/CSS puro - Zero JavaScript, massima semplicità
• Design moderno - Dark mode responsive con glassmorphism
• Privacy-first - Nessun tracking, analytics o cookie
• Leggero e veloce - Caricamento istantaneo
• Self-hosted - Controllo completo sui tuoi dati
• Accessibile - Funziona anche con JS disabilitato
• SEO ottimizzato - Meta tags Open Graph, Twitter Cards, Schema.org
• Verifica Fediverse - Tag <link rel="me"> per badge verde Mastodon

---

Quick Start

# 1. Clona il repository
git clone https://git.emanuelegori.uno/emanuelegori/contact-page-static.git
cd contact-page-static

# 2. Personalizza il contenuto
nano index.html

# 3. Pubblica su qualsiasi web server
# Esempio: nginx, Apache, GitHub Pages, Netlify

Fatto! La tua pagina è pronta.

---

Installazione

Requisiti

• Un web server (nginx, Apache, Caddy, ecc.)
• Oppure hosting statico (GitHub Pages, Netlify, Vercel, Cloudflare Pages)
• Nessuna dipendenza runtime

Struttura del Progetto

contact-page-static/
├── index.html          # Pagina principale
├── style.css           # Stili CSS
├── favicon.ico         # Favicon del sito
├── avatar.png          # Tua foto profilo
├── og-image.png        # Immagine per social (1200×630px)
├── icons/              # Icone SVG per i link
│   ├── wordpress.svg
│   ├── mastodon.svg
│   ├── git.svg
│   └── ...
├── README.md           # Questo file
├── LICENSE             # Licenza codice (GPL v2+)
└── LICENSE-DOCS        # Licenza docs (CC BY-NC-SA 4.0)

---

Deployment

Opzione 1: Web Server Tradizionale

# Copia i file nella document root
sudo cp -r * /var/www/html/contact/

# Oppure con rsync
rsync -av --exclude='.git' * user@server:/var/www/html/contact/

Configurazione nginx:

server {
    listen 80;
    server_name me.tuodominio.it;
    root /var/www/html/contact;
    index index.html;
    
    location / {
        try_files $uri $uri/ =404;
    }
}

Opzione 2: Docker (opzionale)

Crea un docker-compose.yml:

version: '3.8'
services:
  contact-page:
    image: nginx:alpine
    container_name: contact-page-static
    restart: unless-stopped
    ports:
      - "8080:80"
    volumes:
      - ./:/usr/share/nginx/html:ro
    networks:
      - proxy

networks:
  proxy:
    external: true

Deploy:

docker-compose up -d

Opzione 3: Hosting Statici Gratuiti

Il progetto è compatibile con:

• GitHub Pages - Gratis, dominio personalizzato
• Netlify - Deploy automatico da Git
• Vercel - Ottimizzazioni automatiche
• Cloudflare Pages - CDN globale gratuito

Esempio GitHub Pages:

1. Push su repository GitHub
2. Settings → Pages → Source: main branch
3. Sito disponibile su username.github.io/contact-page-static

---

Personalizzazione

1. Modifica Contenuto (index.html)

<!-- Nome e biografia -->
<h1 class="name">Il Tuo Nome</h1>
<p class="tagline">La tua tagline</p>
<p class="bio">La tua biografia...</p>

<!-- Aggiungi/rimuovi link -->
<a href="tuo-url" class="link-card" data-category="blog">
    <div class="link-icon">
        <img src="icons/nome-icona.svg" alt="Nome">
    </div>
    <div class="link-name">Nome Link</div>
    <div class="link-description">Descrizione</div>
</a>

2. Cambia Colori (style.css)

:root {
    --bg-primary: #0a0a0a;      /* Sfondo principale */
    --bg-card: #2a2a2a;         /* Sfondo card */
    --text-primary: #ffffff;    /* Testo principale */
    --text-secondary: #b0b0b0;  /* Testo secondario */
    --accent-blog: #ff6b35;     /* Colore accent per categoria blog */
}

3. Aggiungi Avatar

Carica il file avatar.png (o .jpg) nella root del progetto. L'HTML è già configurato.

4. Favicon Personalizzato

1. Crea il tuo favicon.ico (16x16, 32x32, 48x48 px)
2. Salvalo nella root del progetto
3. Il link è già presente in index.html:

   <link rel="icon" href="favicon.ico" type="image/x-icon">
   

5. Immagine Social (og-image.png)

Per preview perfette su Facebook/LinkedIn/Twitter:

Specifiche:

• Dimensione: 1200 × 630 px
• Formato: PNG o JPG
• Contenuto: Nome, tagline, avatar, URL
• Background: coerente con design pagina

Tool consigliati:

• Canva - Template social media
• GIMP - Editor open source
• Figma - Design professionale

6. Aggiungi Icone SVG

Fonti raccomandate:

• Simple Icons - Loghi brand
• Feather Icons - Icone generiche
• Heroicons - Icone UI
• Dashboardicons - Icone dashboard

Salva in icons/nome-icona.svg e referenzia nell'HTML.

7. Verifica Mastodon (badge verde ✅)

Per ottenere il badge verde su Mastodon:

1. Aggiungi <link rel="me"> nel <head> di index.html:

   <link rel="me" href="https://mastodon.instance/@username">
   

2. Nel tuo profilo Mastodon, aggiungi il link alla pagina:

   Metadata → Nome: Website → Valore: https://me.tuodominio.it
   

3. Salva → il badge verde apparirà automaticamente

---

Privacy

Questa pagina è completamente privacy-first:

Caratteristica	Status
JavaScript di terze parti	❌ Nessuno
Tracking/Analytics	❌ Nessuno
Cookie	❌ Nessuno
Chiamate esterne	❌ Nessuna
Self-hosted	✅ 100%
Codice verificabile	✅ Open source
Funziona senza JS	✅ Sì

Conformità GDPR: Non richiede cookie banner o privacy policy specifica per la pagina stessa (solo per eventuali link esterni).

---

Contribuire

Pull request benvenute! Per modifiche importanti:

1. Apri prima una issue
2. Descrivi la proposta di cambiamento
3. Fork e crea un branch per la tua feature
4. Invia la pull request

Linee guida:

• Mantieni il codice pulito e commentato
• Testa su browser diversi (Firefox, Chrome, Safari)
• Verifica accessibilità (screen reader, keyboard navigation)
• Rispetta le licenze esistenti

---

Licenze

Codice Sorgente (HTML, CSS)

Il codice è distribuito sotto GNU General Public License v2 o successive (GPL v2+).

Vedi il file LICENSE per i dettagli completi.

Perché GPL v2+:

• Compatibilità con WordPress e ecosistema GPL
• Garantisce che le derivate rimangano open source
• Allineamento con valori FOSS

Documentazione

La documentazione (README, guide, wiki) è distribuita sotto Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0).

Vedi il file LICENSE-DOCS per i dettagli completi.

Cosa puoi fare:

• Condividere e adattare i documenti
• Usare per scopi non commerciali
• Dare credito all'autore

Cosa NON puoi fare:

• Uso commerciale della documentazione
• Applicare restrizioni aggiuntive

---

Supporto

Problemi o Domande

• Apri una issue
• Blog: emanuelegori.uno
• Mastodon: @emanuele@mastodon.uno

FAQ

Q: Posso usarlo per il mio sito?
A: Sì! È GPL v2+, libero di usare, modificare e distribuire.

Q: Devo mantenere i crediti?
A: Sì, la GPL richiede di mantenere il copyright notice.

Q: Funziona su mobile?
A: Sì, è completamente responsive.

Q: Posso rimuovere il footer?
A: Tecnicamente sì, ma il footer contiene i crediti richiesti dalla licenza.

---

Crediti

• Sviluppato da Emanuele Gori
• Icone da Simple Icons, Feather Icons, Dashboardicons
• Ispirato ai principi di privacy, semplicità e libertà digitale

---

Changelog

Vedi CHANGELOG.md per la cronologia delle modifiche.

---

© 2025 Emanuele Gori | Theme: ContactPage v2.0 | GPL v2+