Tres maneras de presentar
a Diana, Manu, Xabi y Ainoa
Las tres salen de mecánicas medidas en fichas del almacén, no inventadas: te pongo debajo de cada una de dónde viene exactamente. Las cuatro fotos son las suyas reales, tal cual, con sus 256-512 px — parte del ejercicio es que aguanten.
Retrato en blanco y negro,
con la firma encima
De dónde sale: ESQUELETO-longbow.json, sección
quienes — medido: «retratos reales en blanco y negro sobre negro, firma manuscrita
superpuesta bajo cada retrato». El blanco y negro no es estética: es la misma solución que usa
medwest («el B/N como igualador de fotografía desigual»), y aquí resuelve que
sus cuatro fotos tengan fondos y luces distintas. El descubrimiento con máscara es
01_animaciones/clip-path-reveal.md.
Al entrar en pantalla, la máscara sube y descubre el retrato; después entra la firma. Pasa el ratón por encima: vuelve el color.
Diana
Fisioterapeuta
Manu
Fisioterapeuta
Xabi
Fisioterapeuta
Ainoa
Entrenadora
La rejilla se enciende
donde pones el ratón
De dónde sale: 02_componentes/chroma-grid.md, ficha de tu
almacén. Su propia descripción dice: «rejilla de tarjetas que por defecto se ven en gris; donde
pones el ratón se enciende un círculo a todo color. Ideal para galerías de equipo».
Cero dependencias — es backdrop-filter + máscara radial, el JS solo mueve dos
variables CSS. Peso ~9 KB.
Mueve el ratón por encima de la fila. En móvil el foco va solo, recorriendo las cuatro.
Diana
Fisioterapeuta
Manu
Fisioterapeuta
Xabi
Fisioterapeuta
Ainoa
Entrenadora
El gris de partida iguala los cuatro fondos; el color solo aparece donde miras.
El nombre a tamaño gigante,
y la cara dentro
De dónde sale: ESQUELETO-grigoriak.json, sección
quienes — medido: «tipografía gigante con el retrato del doctor incrustado a modo
de ventana en el tercio central». Y el gesto de tapar el retrato con el nombre viene de
ESQUELETO-dennissnellenberg.json («retrato centrado, tapado en la franja inferior
por el h1»). Aquí no hay foto de grupo — hay cuatro nombres, así que cada uno es una fila.
Pasa el ratón por cada fila: el nombre se apaga y la cara asoma donde estés. En móvil el retrato va fijo, sin depender del ratón.