Caso · Web

Esta web

Mi propio portfolio: una web que enseña vídeo y diseño web al mismo nivel, rápida, accesible y en tres idiomas.

Cliente: Pieza propia
Rol: Diseño · Desarrollo · SEO
Software: Astro · TypeScript · CSS
Año: 2026

Qué pedía, qué hice y cómo quedó

El reto

Necesitaba una web que enseñara las dos cosas que hago, edición de vídeo y diseño web, sin que ninguna se comiera a la otra. Tenía que cargar rápido en el móvil, leerse bien en castellano, catalán e inglés y estar preparada para aparecer en Google desde el primer día.

Qué hice

Concepto: papel de dibujo con cuadrícula, tinta y un solo color. Vídeo y web comparten espacio y componentes, y una lupa que se arrastra enseña la propia página por dentro: su estructura y sus medidas reales. Para pedir presupuesto hay un montador de encargo: eliges los servicios, ves el total «desde» y el correo sale ya escrito. Cada pieza de la interfaz tiene un papel real: si algo parece un botón, funciona.
Desarrollo: Astro con salida estática, sin frameworks de interfaz. Todo el texto está en el HTML y el JavaScript es mínimo y progresivo: la web funciona sin él.
Tres idiomas: rutas propias para cada idioma, etiquetas hreflang y textos separados del diseño.
SEO técnico: metaetiquetas, datos estructurados (JSON-LD), sitemap y URLs canónicas.
Rendimiento: fuentes variables autoalojadas con solo los caracteres latinos, imágenes optimizadas y vídeos que solo se cargan al pulsar play.

Resultado

Una web ligera y accesible que se puede ampliar con nuevos proyectos escribiendo un archivo de texto por caso.

La versión anterior

Antes de esta web hubo otra, la Sala de montaje: una web que funcionaba como un programa de edición. Sigue online, archivada.

Cómo llegué hasta aquí

Antes de quedarme con este diseño probé tres ideas, cada una en su propia página de prueba. Las tres usaban los mismos textos y precios; cambiaban el aspecto y lo que podías hacer con las manos.

Etalonaje
La página llegaba sin etalonar y la etalonabas tú: un punto para el tono y la intensidad, un control de contraste y cuatro looks. Todos los colores del sitio respondían a la vez, y así el color se veía en vez de afirmarse. Me gustó, pero demuestra mi criterio de color con una web, no con vídeo. Lo guardo para usarlo con material de vídeo, que es donde tiene sentido.
Corte
Montabas tu encargo con clips: tocabas los servicios, los ordenabas en una regla y el botón abría un correo con la selección y el total ya escritos. Era el más práctico para quien quiere pedir presupuesto, pero la web se quedaba en un formulario: no enseñaba cómo trabajo.
LenteLa elegida
Una lupa de cristal que se arrastra y enseña la propia página por dentro: su estructura y sus medidas reales, leídas de la web en ese momento. La elegí porque enseña, sin decirlo, que hago las dos cosas: edito vídeo y construyo webs. La web es la prueba.