Com he construït aitorivera.com amb Astro, Sanity i Vercel: aprenentatges d’un desenvolupador Django

Durant anys he estat desenvolupador Django. M’he centrat sobretot en el backend, fent modelatge de dades, APIs REST i gestionant processos complexos. Django m’ha donat solidesa i estructura, però també m’ha fet tenir una mirada molt limitada cap al frontend.

El més que havia fet era una mica de CSS amb Bootstrap, JavaScript nadiu i algun toc de jQuery per petites interaccions. Però no m’havia endinsat mai en frameworks com React, Vue o Svelte.

Amb el temps em vaig adonar d’una cosa: entendre millor el frontend em donaria una visió molt més completa i em permetria crear experiències més potents i usables.

Per això vaig decidir sortir de la meva zona de confort. Volia aprendre coses noves, experimentar amb tecnologies modernes i entendre com funciona el desenvolupament frontend d’avui. La meva elecció va ser clara:

• Astro, per crear llocs web ràpids i lleugers.
• Sanity, un CMS headless flexible i personalitzable.
• Vercel, una plataforma de desplegament pensada per a projectes moderns.

El resultat és aitorivera.com, la meva web personal i també el meu laboratori tècnic.

En aquest article t’explico per què vaig triar aquest stack, com funciona la web per dins, quins reptes m’he trobat i què vull millorar en el futur.

Per què construir-la des de zero?

Hauria pogut instal·lar WordPress amb una plantilla moderna i tenir-ho tot llest en unes hores. Però això hauria estat només una web més. No volia una solució ràpida, volia un projecte per aprendre i experimentar.

Aquesta decisió la vaig prendre per quatre raons molt clares:

1. Velocitat i rendiment: volia una web que carregués quasi instantàniament, clau per a l’experiència d’usuari i el SEO.
2. Identitat visual pròpia: res de plantilles prefabricades. Necessitava que reflectís la meva personalitat i els meus valors com a desenvolupador.
3. Flexibilitat per créixer: no volia una simple targeta de presentació, sinó un espai on poder afegir blog, projectes i recomanacions.
4. Aprendre de debò: instal·lar un CMS clàssic no m’hauria ensenyat res nou; crear-la des de zero, sí.

Per tot això vaig apostar per un stack modern que em donés control, llibertat i la possibilitat d’experimentar sense límits.

Arquitectura tècnica: què hi ha darrere

Encara que el resultat sembli senzill, hi ha una arquitectura clara i optimitzada al darrere. L’ecosistema principal és:

• Astro com a motor de renderitzat.
• Sanity.io com a CMS headless.
• Vercel com a plataforma de desplegament i gestió de DNS.
• Algunes integracions complementàries per millorar UX, analítica i manteniment.

El flux és simple però molt potent:

Sanity (contingut) → Astro (renderitzat estàtic/dinàmic) → Vercel (hosting i optimització)

A efectes pràctics, els usuaris veuen HTML estàtic superoptimitzat, amb petites illes d’interactivitat en React només on cal. Això redueix al mínim el JavaScript carregat i garanteix velocitat màxima.

Astro: llocs ultraràpids i lleugers

Astro és un framework pensat per webs de contingut. Genera HTML pur i només envia el JavaScript imprescindible.

A la meva web, funciona així:

• Pàgines com Sobre mi o el blog són 100% HTML estàtic.
• Components com el modal de contacte es renderitzen amb React i Radix UI, però només carreguen sota demanda.
• He afegit Framer Motion per fer transicions i animacions molt més suaus que amb CSS pur.

Així aconsegueixo una web minimalista, ràpida i amb petits detalls d’interacció.

Sanity CMS: el teu propi model de dades

Sanity és un CMS headless molt diferent de WordPress. No tens un model predeterminat; ets tu qui defineix els schemas.

Això m’ha permès:

• Crear tipus de dades personalitzats per gestionar millor els continguts.
• Controlar com es mostren les traduccions, amb total llibertat per a cada idioma.
• Renderitzar contingut enriquit directament a Astro amb astro-portabletext.

Així tinc un CMS molt flexible i escalable, perfecte per a un projecte que creixerà amb el temps.

Multidioma amb rutes SEO-friendly

La web és multidioma i actualment funciona amb rutes separades:

• / per català
• /es per castellà
• /en per anglès

Aquest sistema és ideal per SEO, perquè Google pot indexar cada versió de forma independent. Però té un inconvenient: cada canvi d’idioma recarrega tota la pàgina.

El meu següent repte és implementar un canvi d’idioma més fluid, on només es carregui el contingut sense fer un refresh complet.

Per què Vercel i no Netlify?

Inicialment vaig provar Netlify, però Vercel em va convèncer ràpidament. Els motius són clars:

• Integració directa amb Astro i builds molt més ràpids.
• Previsualitzacions automàtiques per cada branca, ideals per provar canvis abans de fer-los públics.
• Gestió senzilla de subdominis i DNS (tot i que el domini principal segueix a IONOS).
• Vercel Analytics i Speed Insights integrats, evitant dependències externes.
• Optimització automàtica d’imatges i altres assets sense gairebé configuració.

Per a un lloc lleuger com aquest, Vercel és el match perfecte.

Integracions que marquen la diferència

Més enllà del stack principal, he afegit petites eines que aporten molt valor:

• Sentry per Astro → monitoratge d’errors en producció. Si alguna cosa peta, ho sé de seguida.
• SpotlightJS → debugging visual de la UI i problemes de renderitzat.
• Heroicons + Radix UI → components accessibles i consistents sense reinventar la roda.
• EmailJS → formulari de contacte funcional sense necessitat de backend propi.

UX i disseny: minimalisme amb personalitat

Volia una web minimalista però amb detalls vius, així que vaig optar per:

• Color principal: indigo, que transmet calma i confiança.
• Mode clar/fosc amb transicions suaus, evitant canvis bruscos.
• Microinteraccions amb Framer Motion, perquè quan fas scroll els elements apareguin amb moviments subtils.
• Accessibilitat i bon contrast, per garantir una lectura còmoda.

El resultat és una web clara, ràpida i amb una experiència molt fluida.

Detalls especials

Perquè la web no fos només una estructura tècnica, vaig voler afegir detalls que marquen diferència:

• Una pàgina 404 amb un mini-joc, per fer més agradable aterrar en un enllaç trencat.
• Multidioma amb rutes SEO-friendly (que aviat millorarà sense recàrrega).
• Analítica i rendiment integrats amb Vercel Analytics i Speed Insights.
• Monitoratge d’errors automàtic amb Sentry.

Reptes i aprenentatges

Venir del món Django i passar a Astro + Sanity m’ha obligat a aprendre coses noves:

• Entendre com funciona un CMS headless i dissenyar schemas sense patrons predefinits.
• Pensar en SEO multidioma i combinar-ho amb una bona UX.
• Coordinar diverses integracions sense fer que la web es torni pesada.

La conclusió és clara: no hi ha millor manera d’aprendre que construint projectes reals. La pràctica accelera l’aprenentatge molt més que qualsevol curs.

Què vindrà després?

Aquesta web és només el començament. El meu full de ruta és clar:

• Millorar SEO i treballar estratègies bàsiques de màrqueting digital.
• Afegir noves seccions, com projectes i un espai de testimonis i recomanacions.
• Desenvolupar un sistema multilingüe més fluid, sense recàrrega de pàgina.
• Continuar polint l’experiència amb nous detalls interactius i components.

A mig termini, vull que aitorivera.com es converteixi en el centre d’una marca personal global, molt més enllà d’un simple logotip.

Conclusió: sortir de la zona de confort val la pena

Com a desenvolupador Django, atrevir-me amb Astro, Sanity i Vercel ha estat una autèntica injecció d’aprenentatge.

He après a pensar diferent en el frontend, he vist el valor de dissenyar contingut multilingüe amb schemas propis i, sobretot, he comprovat que la pràctica és la millor manera de créixer tècnicament.

La tecnologia canvia constantment, però el que queda és la voluntat de fer-la servir per millorar el que realment importa.

Si vols preguntar-me qualsevol cosa o compartir la teva experiència, escriu-me al formulari de contacte.

Preguntes freqüents (FAQ)

• Què és Astro i per què el vas triar?
  Astro és un framework que genera HTML pur i només envia el JavaScript imprescindible, cosa que fa que les webs siguin molt ràpides. El vaig triar perquè volia màxim rendiment sense complexitat innecessària.
• Per què Sanity i no un CMS com WordPress?
  Perquè Sanity és headless i flexible: pots definir els teus propis models de dades i controlar completament com es mostren els continguts.
• Per què Vercel en lloc de Netlify?
  Perquè Vercel integra millor amb Astro, té builds més ràpids, previsualitzacions automàtiques i eines d’analítica integrades.
• Quin és el proper pas per a la web?
  Millorar el SEO, afegir noves seccions, fer més fluid el multidioma i continuar afegint petits detalls interactius.