Cas · Web

Aquesta web

El meu propi portfoli: una web que ensenya vídeo i disseny web al mateix nivell, ràpida, accessible i en tres idiomes.

Client: Peça pròpia
Rol: Disseny · Desenvolupament · SEO
Programari: Astro · TypeScript · CSS
Any: 2026

Què demanava, què vaig fer i com va quedar

El repte

Necessitava una web que ensenyés les dues coses que faig, edició de vídeo i disseny web, sense que cap d’elles es mengés l’altra. Havia de carregar ràpid al mòbil, llegir-se bé en català, castellà i anglès i estar preparada per aparèixer a Google des del primer dia.

Què vaig fer

Concepte: paper de dibuix amb quadrícula, tinta i un sol color. Vídeo i web comparteixen espai i components, i una lupa que s’arrossega ensenya la pròpia pàgina per dins: l’estructura i les mesures reals. Per demanar pressupost hi ha un muntador d’encàrrec: tries els serveis, veus el total «des de» i el correu surt ja escrit. Cada peça de la interfície té un paper real: si una cosa sembla un botó, funciona.
Desenvolupament: Astro amb sortida estàtica, sense frameworks d’interfície. Tot el text és a l’HTML i el JavaScript és mínim i progressiu: la web funciona sense ell.
Tres idiomes: rutes pròpies per a cada idioma, etiquetes hreflang i textos separats del disseny.
SEO tècnic: metaetiquetes, dades estructurades (JSON-LD), sitemap i URL canòniques.
Rendiment: fonts variables allotjades a la mateixa web amb només els caràcters llatins, imatges optimitzades i vídeos que només es carreguen en prémer play.

Resultat

Una web lleugera i accessible que es pot ampliar amb nous projectes escrivint un fitxer de text per cas.

La versió anterior

Abans d’aquesta web n’hi va haver una altra, la Sala de muntatge: una web que funcionava com un programa d’edició. Continua en línia, arxivada.

Com hi he arribat

Abans de quedar-me amb aquest disseny vaig provar tres idees, cadascuna en la seva pàgina de prova. Les tres feien servir els mateixos textos i preus; canviaven l'aspecte i el que es podia fer amb les mans.

Etalonatge
La pàgina arribava sense etalonar i l'etalonaves tu: un punt per al to i la intensitat, un control de contrast i quatre looks. Tots els colors del lloc responien alhora, i així el color es veia en lloc d'afirmar-se. Em va agradar, però demostra el meu criteri de color amb una web, no amb vídeo. El guardo per fer-lo servir amb material de vídeo, que és on té sentit.
Tall
Muntaves el teu encàrrec amb clips: tocaves els serveis, els ordenaves en una regla i el botó obria un correu amb la selecció i el total ja escrits. Era el més pràctic per a qui vol demanar pressupost, però la web es quedava en un formulari: no ensenyava com treballo.
LentLa triada
Una lupa de vidre que s'arrossega i ensenya la pròpia pàgina per dins: la seva estructura i les seves mides reals, llegides de la web en aquell moment. La vaig triar perquè ensenya, sense dir-ho, que faig les dues coses: edito vídeo i construeixo webs. La web és la prova.