Portafolis interactiu
Els projectes d’aquesta pàgina, convertits en panells que s’exploren al navegador, sense instal·lar res.
Web i interfície · JavaScript · En producció
El problema
Gairebé ningú no clona un repositori per veure si una feina està ben feta: fa clic en un enllaç i decideix en quinze segons. Un portafolis que exigeix instal·lar Python ja ha perdut qui el mirava.
Què fa
- Reuneix la feina publicada en una sola aplicació; la majoria se serveix com a panells interactius amb gràfics reals, no captures.
- Sistema propi d’icones SVG en línia, que hereten el color de cada targeta i es veuen igual en qualsevol sistema.
- Bilingüe, amb canvi d’idioma a tota l’aplicació.
- Arquitectura de dades estàtiques: JSON preagregat servit directament, sense backend i sense cost.
El que es va decidir en construir-lo
- Les xifres de la portada es compten, no s’escriuen
- La portada anunciava set demos en viu quan ja eren catorze: cinc projectes havien passat d’enllaçar el repositori a tenir panell propi i ningú no va actualitzar el número. Ara es compten sobre la mateixa llista, i a més està definit què compta com a demo: alguna cosa que es pot fer servir, no un enllaç a codi.
- Dades estàtiques: el panell llegeix fitxers, no una base de dades
- Cada projecte publica els seus resultats ja agregats i el portafoli els serveix tal qual. Sense servidor, sense cost i sense res que caigui: un portafoli que depèn d’una base de dades encesa és un portafoli que un dia no obre, i aquell dia sol ser el de l’entrevista.
- Les rutes pesades es carreguen quan es visiten
- Els panells amb gràfics són la part cara del paquet i es carreguen només en entrar-hi. Qui obre la portada no paga el pes de catorze quadres de comandament que potser no mirarà, i la primera pantalla —que és la que decideix si n’hi ha una segona— apareix de seguida.
- El simulador s’incrusta en lloc de reescriure’s
- L’original ja és un web complet sense dependències, i refer-lo hauria significat mantenir dues versions del mateix càlcul amb el risc que deixessin de donar el mateix número. S’incrusta i se’n mesura l’alçada en viu, perquè si no queda un buit mort de mil píxels a sota.
Fins on arriba
- Cap panell consulta dades en viu: tot són fitxers que cada projecte publica en executar-se. El que es veu és l’últim resultat generat, no el d’aquest moment.
- No totes les targetes tenen fitxa tècnica completa; algunes són un enllaç al repositori i res més.
- El recompte de repositoris públics està escrit a mà i datat, perquè des del navegador no es pot consultar. Pot haver quedat enrere.
- Les dades que pinten els panells són sintètiques o públiques, segons el projecte. No hi ha informació de cap client en cap d’ells.
Construït amb
- React 19
- Vite
- Recharts
- Firebase