Programa el teu portafolis de fotògraf amb IA

01En què es diferencia d'un selector de plantilles

Les galeries de plantilles et mostren un disseny acabat i et demanen si t'agrada o no. Aquesta eina va una capa més endins: cadascuna de les sis direccions de sota es basa en un portafolis de fotògraf real i en funcionament que es va inspeccionar de debò (captures, disposició en directe, colors calculats, tipografies calculades), no en una paleta que algú s'ha inventat perquè quedi bé en una mostra. La direcció Editorial, per exemple, fa servir EB Garamond perquè és literalment la lletra amb què està composat el web d'un fotògraf de moda real, i es va trobar inspeccionant la pàgina directament.

Dos patrons apareixien gairebé a tots els webs reals a partir dels quals es va fer això, i són a la base de totes les direccions d'aquí: la navegació amagada darrere d'una sola icona d'hamburguesa, sense llista d'enllaços visible, fins i tot a l'escriptori, i una sola imatge gran cada cop en lloc d'una quadrícula. El color de la interfície es manté a prop del zero: el color el posa la fotografia, no la interfície.

02Què obtens al final

Un únic prompt estructurat que cobreix la direcció general, els colors hexadecimals exactes, els noms de les tipografies i la seva combinació, la llista de pàgines, el comportament de la navegació, la disposició de la galeria i el marc de les imatges, les funcions que s'han d'incloure, una recomanació d'allotjament amb costos reals, i un conjunt fix de requisits de qualitat (text alternatiu accessible, punts de ruptura adaptables, cap secret escrit al codi, imatges amb càrrega diferida). Enganxa'l a l'aplicació de codi amb IA que prefereixis i ja té tot el que necessita per començar.

03Del prompt a un web en directe: el recorregut complet

El prompt és l'encàrrec de disseny, no la meta. Aquests són tots els passos entre copiar-lo i tenir una URL real que pots posar en una targeta de visita, gratis o gairebé.

Copia el prompt i obre una aplicació de codi amb IA

Claude, Cursor, Claude Code, Windsurf o l'agent d'IA de Replit funcionen, qualsevol cosa que pugui escriure i desar fitxers per tu, no només xatejar. Si mai n'has fet servir cap, una opció al navegador com claude.ai o Replit no necessita instal·lació: enganxa el prompt com a primer missatge.

Deixa que ho construeixi i després mira de veritat què ha fet

Demana-li que construeixi el web com a HTML/CSS/JS estàtic (o el que especifiqués la secció d'allotjament del prompt) i que et mostri una previsualització. Comprova les sis coses que demanava el prompt (colors, tipografies, comportament de la galeria, navegació, marc, pàgines) abans de continuar. Costa molt menys arreglar un color d'accent equivocat ara que després d'haver connectat les fotos.

Posa-hi les teves fotos, la teva biografia i les teves dades de contacte

Substitueix totes les imatges provisionals i totes les línies de text de farciment. Demana a l'aplicació d'IA que vagi escrivint un atribut alt real i concret per a cada foto, no «image1.jpg», sinó una descripció de veritat, ja que és alhora un requisit d'accessibilitat i un petit impuls de SEO. També és el moment de comprovar que el formulari de contacte apunta de debò a una adreça de correu que miris.

Publica'l en un allotjament gratuït

Si has triat el nivell «Estàtic & gratuït», demana a l'aplicació d'IA que t'expliqui com connectar la carpeta del projecte o el repositori de GitHub a un dels allotjaments de la pàgina Allotjament del menú de dalt. Els quatre compilen i publiquen automàticament cada cop que puges un canvi; un cop connectat, ja no cal pujar res a mà.

Connecta un domini propi (opcional, però val la pena)

Un subdomini gratuït (com yourname.netlify.app) va bé per començar. Quan estiguis a punt per a yourname.com, és la compra d'un domini més un canvi de DNS, explicat al detall més avall.

04Quin allotjament gratuït has de fer servir?

Qualsevol d'aquests posarà un web estàtic en línia sense cost, amb HTTPS gratuït i un nivell gratuït que cobreix de sobra el trànsit d'un portafolis personal. Els límits dels nivells gratuïts canvien força sovint, així que pren els números de la pàgina Allotjament com una forma general i no com xifres actuals exactes, i mira la pàgina de preus de cada proveïdor abans de decidir-te.

Demana a la teva aplicació de codi amb IA que faci amb tu els passos de publicació: «connecta aquest projecte a Netlify» és una cosa del tot normal de demanar-li, i normalment et pot guiar en la creació del compte i la primera publicació en un parell de minuts.

05Connectar un domini propi

Un domini és una petita quota anual (normalment de 10 a 20 $ l'any segons l'extensió), a part de l'allotjament, que continua sent gratuït. Les tres peces:

1. Compra el domini. Namecheap, Cloudflare Registrar o el successor de Google Domains (Squarespace Domains).
2. Afegeix un registre DNS. Un CNAME (o un registre A) que apunti el teu domini al teu allotjament, afegit al tauler del registrador. Són dues línies a la taula del registrador: un CNAME per a www que apunti a l'adreça que et dóna l'allotjament, com ara your-portfolio.netlify.app, i un registre A per al domini sense prefix que apunti a la IP de l'allotjament.
3. Afegeix-lo a l'allotjament. Enganxa el mateix domini als ajustos de «domini propi» de l'allotjament; l'HTTPS es configura sol.

Tots els allotjaments de la pàgina Allotjament tenen una pestanya «Domini propi» o «Dominis» que et dóna el registre exacte que has d'afegir: copia'l, afegeix-lo al teu registrador i espera. Els canvis de DNS solen trigar de minuts a unes hores a fer efecte, i de vegades fins a 24 o 48 hores. La teva aplicació de codi amb IA et pot guiar pel tauler del teu registrador concret si t'encalles; fes una captura de la pàgina d'ajustos i pregunta-li on has de fer clic. Cadenat visible, cap avís de «no segur»: aquesta és la meta.

06Llista de comprovació abans del llançament

Cinc minuts amb aquesta llista detecten la major part del que fa que un portafolis sembli inacabat. Les comprovacions són la pàgina Abans del llançament del menú de dalt; ves-les marcant.

07Preguntes freqüents