APAndrea Pellizzari
Colophon

Come è fatto questo sito

Se il sito ti interessa tecnicamente — lo stack, le scelte di design, come viene costruito e pubblicato — qui ci sono i dettagli.

Stack

  • Framework: Next.js 16 in modalità output: "export" — genero un sito puramente statico.
  • Contenuti: MDX con frontmatter YAML. gray-matter per il parsing, next-mdx-remote per il rendering server-side.
  • Stile: Tailwind CSS 4 con palette custom (violet #7c3aed + scala zinc). Plugin typography per le case study.
  • Tipografia: Geist (sans) e Geist Mono via next/font/google — font self-hostati, zero richieste a Google Fonts.
  • Ricerca: ⌘K / Ctrl+K apre una command palette client-side che fa fuzzy matching su un indice JSON prerendered a build time — zero backend.
  • Dark mode: class-based toggle con persistenza localStorage + detection iniziale da prefers-color-scheme. Script inline nell'<head> per evitare flash of unstyled content.

Deploy

  • Hosting: Hostinger Single (piano shared PHP) — document root servito da /domains/andreapellizzari.it/public_html/.
  • Pipeline: script Node scripts/deploy.mjs che carica la cartella out/ via FTP classico (libreria basic-ftp). HTTPS automatico (Caddy + Let's Encrypt gestiti da Hostinger).
  • Trigger: nessun CI/CD. npm run build-and-deploy dal terminale locale — deliberatamente semplice per un sito personale.

SEO & indexing

  • Sitemap generato da src/app/sitemap.ts (Next.js App Router) — include tutte le pagine, le case study e i post del diario.
  • Robots aperto a tutti gli user agent via src/app/robots.ts.
  • JSON-LD: schema Person + WebSite nella head di tutte le pagine; schema BlogPosting sui post del diario.
  • OG & Twitter card: immagine statica 1200×630 generata con uno script Puppeteer (scripts/generate-og.mjs). Sui post del diario il meta og:type è article con publishedTime.
  • Feed RSS del diario a /rss.xml, autodiscovery via link rel="alternate" nella head.

Privacy

  • Zero cookie, zero analytics, zero script di tracciamento. Nessun banner di consenso perché non c'è nulla da consentire.
  • Font self-hostati, nessuna richiesta a CDN di terze parti durante la navigazione.
  • Informativa sintetica in /privacy/.

Tooling di contenuto

  • Slash command /diariopersonalizzato per Claude Code: da qualunque sessione (anche su progetti diversi) permette di aggiungere un post al diario con flusso "draft rapido" o "post completo con deploy automatico". Anti-leak checklist integrata per non pubblicare dati cliente.
  • Le case study sono scritte in MDX e seguono un pattern stretto: contesto → sfida → approccio con 5-6 feature distintive → risultato.

Ispirazioni

Layout: Linear, Vercel. Typography-led hero pattern: Maggie Appleton. Sezione Now: nownownow.com. Editor view per il diario: ispirato a VS Code + Obsidian.

Sorgente

Il codice del sito non è pubblico — contiene cross-reference al contenuto del portfolio. Se ti interessa qualcosa di specifico (come ho implementato la command palette, il tema dark, il feed RSS, il deploy FTP), scrivimi: rispondo volentieri con snippet e spiegazioni.