Com crear un lloc web de portfoli que et doni feina

Per crear un lloc web de portfoli que et doni feina, tria els quatre a vuit millors projectes per al públic que vols captar, presenta cadascun com una història curta —el problema, què vas fer i el resultat—, i fes que sigui fàcil contactar-te des de qualsevol pàgina. Mantén-lo ràpid, sobretot si és ple d'imatges, i posa'l en un domini amb el teu nom. L'eina importa menys que la selecció i la redacció.

Comença per qui t'està mirant

Un portfoli és una pàgina de vendes on el teu treball és el producte. Abans de triar una disposició, decideix qui vols que et contracti i què necessita veure:

Si serveixes dos públics molt diferents —per exemple, rols de disseny de producte i il·lustració freelance—, planteja seccions separades o fins i tot llocs separats, perquè cap dels dos hagi de buscar.

Què hi has d'incloure

El treball

Tria menys projectes, però millors. Elimina qualsevol cosa que no voldries tornar a fer. Posa el treball més fort i més rellevant primer; molts visitants no arriben a desplaçar més enllà de la primera fila.

Per a dissenyadors i desenvolupadors, els millors projectes es converteixen en estudis de cas. Una estructura útil:

1. El problema: una o dues frases sobre la situació i a qui afectava.
2. El teu rol: què vas fer tu i què van fer els altres. Sigues precís; l'exageració és fàcil de detectar en una entrevista.
3. El procés: algunes decisions clau, amb esbossos, esquemes o fragments de codi.
4. El resultat: què es va publicar i qualsevol resultat que puguis afirmar honestament. Si no pots compartir xifres, descriu el canvi qualitativament.

Per a fotògrafs i il·lustradors, les imatges fan la major part de la feina. Agrupa-les en conjunts clars (casaments, producte, editorial), mantén els peus curts i deixa respirar la quadrícula.

Sobre mi i contacte

La secció «sobre mi» ha de dir qui ets, què fas, per a qui ho fas i on ets o si treballes en remot. Una foto real ajuda. La via de contacte ha de ser evident des de qualsevol pàgina: un formulari curt, una adreça de correu o un enllaç per reservar una trucada. Si acceptes reserves, digues com.

Pàgines opcionals

• Serveis i tarifes: útils per als freelances si volen filtrar consultes que no encaixen.
• CV o currículum: útil per a qui busca feina; és habitual un PDF descarregable juntament amb una versió a la pàgina.
• Escrits o notes: només val la pena si els mantindràs actualitzats. Un blog abandonat fa anys fa més mal que no tenir-ne cap.
• Testimonis: només els reals, amb permís.

Decisions i compromisos

Lloc estàtic o aplicació? La majoria de portfolis són llocs senzills, centrats en el contingut, i no necessiten una base de dades. N'afegeixes una només quan hi ha un motiu: un formulari de contacte que guardi consultes, una galeria que actualitzes sovint des d'una pàgina d'administració, o validació de clients on la gent tria fotos.

On viuen les imatges. Les imatges grans són la causa principal dels portfolis lents. Redimensiona i comprimeix abans de pujar-les, serveix formats moderns i carrega les imatges de manera diferida mentre el visitant fa scroll. Per a una galeria gran o que canvia sovint, guarda les imatges en un emmagatzematge de fitxers adequat en lloc d'incloure-les al codi del lloc.

Com l'actualitzaràs. Sigues honest amb això. Si afegeixes treball cada mes, vols una manera fàcil de fer-ho: una pàgina d'administració senzilla, un CMS o un constructor que se't doni bé editar. Si actualitzes dos cops l'any, editar el lloc directament és suficient.

Visibilitat a la cerca. Si vols que la gent et trobi cercant el teu nom més el teu ofici i ciutat, la pàgina necessita text real, encapçalaments adequats, títols i descripcions de pàgina únics i text alternatiu descriptiu a les imatges. Consulta SEO per a llocs web creats amb IA.

Un prompt inicial per a un constructor amb IA

Un bon prompt indica el públic, les pàgines, el treball i l'estil:

Crea un lloc web de portfoli per a Lena Park, dissenyadora de producte que busca rols interns sèniors en empreses SaaS. Pàgines: Inici amb una introducció curta i una quadrícula de 5 estudis de cas; una plantilla de pàgina d'estudi de cas amb seccions per al problema, el meu rol, el procés (amb una galeria d'imatges) i el resultat; Sobre mi amb foto, biografia curta i descàrrega del CV; Contacte amb un formulari senzill (nom, correu, missatge) que desi les dades en una base de dades i mostri un missatge d'agraïment. Estil: calmat i minimalista, molt espai en blanc, un sol color d'accent i tipografia gran i llegible. Funciona bé en telèfons. Fes servir projectes de marcador de posició clarament marcats que pugui substituir un a un.

Despràs, substitueix els marcadors de posició un projecte alhora, en lloc d'enganxar tot el contingut en un sol missatge. És més fàcil de revisar, i la IA encerta cada pàgina amb més precisió.

Per a més patrons de prompts, consulta com escriure prompts per a creadors d'aplicacions amb IA.

Passos de construcció

1. Decideix el públic i els projectes abans de tocar cap eina.
2. Escriu el text de cada estudi de cas en un document primer: problema, rol, procés, resultat.
3. Prepara les imatges: retalla, redimensiona i comprimeix. Posa noms de fitxer sensats.
4. Genera o tria una disposició inicial. Mirar les plantilles de portfoli és una manera ràpida de veure quin estil encaixa amb el teu treball.
5. Construeix primer la pàgina d'inici i un estudi de cas, fes-los bé i després repeteix el patró.
6. Afegeix sobre mi i contacte. Prova el formulari de contacte de principi a fi.
7. Revisa-ho en un mòbil. Els portfolis sovint es trenquen en pantalles petites: quadrícules apretades, imatges enormes, peus de foto minúsculs.
8. Afegeix les bases de SEO i una imatge per compartir, perquè els enllaços es vegin bé quan els envies.
9. Publica i connecta el teu domini. Consulta com connectar un domini personalitzat.
10. Demana a dues persones del teu públic objectiu que ho mirin durant trenta segons i et diguin a què et dediques. Si no ho saben, arregla la pàgina d'inici.

Errors habituals

• Mostrar-ho tot. Els projectes febles diluixen els forts. Selecciona.
• Imatges sense context. En treball de disseny o desenvolupament, una captura de pantalla sense el problema i el teu rol diu molt poc a un responsable de contractació.
• Pàgines lentes i pesades. Les imatges a resolució completa sense comprimir fan que el lloc sembli espatllat amb dades mòbils.
• Navegació massa enginyosa. Els menús poc habituals i els efectes de scroll poden ser divertits, però no si els visitants no troben el teu treball ni el teu correu.
• Dades de contacte amagades. Posa un enllaç de contacte a la capçalera i al peu de totes les pàgines.
• Usar treball de clients sense permís per mostrar-lo. Revisa els contractes i els acords de confidencialitat; anonimitza o descriu el projecte si cal.
• Mai actualitzar-lo. Un treball datat i un «últim projecte» de fa anys transmeten el missatge equivocat.

Costos

Els costos corrents d'un portfoli personal solen ser petits: un nom de domini renovat cada any, i l'allotjament. Els llocs amb moltes imatges costen una mica més si emmagatzemes i serveixes molts fitxers grans. Els constructors de llocs web sovint cobren una subscripció mensual que inclou l'allotjament; construir-ho tu mateix pot ser més barat però vol dir que el mantens tu. Consulta els preus actuals a la web de cada proveïdor, perquè canvien.

Quan és millor un producte ja fet

Les plataformes de portfolis i els constructors de llocs web amb temes de portfoli són una bona opció si vols un resultat polit de manera ràpida, prefereixes un editor visual i no necessites res a mida. Els fotògrafs que venen impressions o lliuren galeries de clients poden estar millor servits per una plataforma fotogràfica dedicada que ja gestiona la validació i la venda d'impressions. Construeix-lo tu mateix quan vulguis un disseny distintiu, necessitis una funció que les plataformes no ofereixen, vulguis mostrar codi o treball interactiu directament, o simplement vulguis ser propietari del lloc.

Construir-ho amb Mythex

Mythex pot construir un portfoli a partir d'una descripció com el prompt anterior. El veus en una vista prèvia en directe amb un marc de mida de telèfon, refines la disposició i el text al xat, i el publiques a yourname.mythex.app. Si vols un formulari de contacte que desi consultes, Mythex afegeix una base de dades al projecte; per a les galeries d'imatges, pot fer servir l'emmagatzematge de fitxers del projecte perquè les fotos no s'incloguin al codi. Al pla Pro pots comprar un domini a Mythex o connectar-ne un que ja tinguis, i exportar el codi o sincronitzar-lo amb GitHub si més endavant vols allotjar-lo en un altre lloc.

La documentació ho explica al cas d'ús de portfoli i explica l'emmagatzematge de fitxers. També pots començar amb el constructor de portfolis amb IA o amb un estil concret com les plantilles de portfoli de desenvolupador o portfoli de fotografia.

Preguntes