Caso de estudio 07 · Mi marca · 20261 min de lectura

Un design system para mi web, mi CV y mis cartas de presentación.

Diseñé mi CV y esta web como un solo producto, y construí la web yo mismo.

Hecho con

Claude Design
Claude Code
Astro
React
TypeScript
GitHub Actions
Cloudflare Workers

3medios, un sistema

1color de acento

1 minpor caso de estudio

AAWCAG 2.1

ResultadoPensamiento (capa)

Ves el resultado. Activa la capa Pensamiento para ver cómo llegué hasta aquí.Ves notas al margen, bocetos y las opciones que descarté.

Antes / después · arrastra para comparar

Página de inicio actual de nestor-pena.ch: diseño software y luego lo construyo

Después

Página de inicio anterior de nestor-pena.ch

Antes

AntesDespués

Contexto y rol

primero fue el CV

Para founders, CTOs y recruiters con prisa.

Mi web, CV y cartas, hechos con Astro, React y TypeScript en Cloudflare. Los recruiters ven primero el CV y luego hacen clic, así que pasar de uno a otra debe sentirse como pasar de página.

Cómo lo pensé

cada decisión sirve a la lectura en diagonal

Punto de partida

~~Diseñar la web, adaptar el CV~~
~~Una marca nueva~~

Hacerla crecer desde el CV

La web debe parecer la página siguiente del CV.

Tiempo de lectura

~~Textos completos~~
~~Solo capturas~~

Un minuto, profundidad a demanda

Un recruiter lee el resultado en diagonal; la capa Pensamiento guarda los motivos, las opciones descartadas y los bocetos.

Documentos privados

~~Una contraseña en el navegador~~
~~Un PIN por email~~

Un código verificado en el servidor

Los PDF nunca son públicos, y los recruiters escriben el código de mi CV.

Qué construí

Índice de casos de estudio en la página de inicio: siete filas de una línea, con la vista previa al pasar el ratón del caso Bern Sessions y su nota manuscrita

Caso de estudio de Pulse con la capa Pensamiento activada: fondo de papel punteado, nota al margen y tarjetas de decisión que muestran por qué se descartaron las opciones A y B — La capa Pensamiento

Inicio en un móvil: retrato, titular corto y la barra de pestañas inferior elevada

Página del CV como esqueleto: nombre, título y secciones, con cada línea de texto sustituida por una barra — CV

Página de la carta de presentación como esqueleto: nombre, título y asunto, con cada línea de texto sustituida por una barra — Carta de presentación

Un archivo de tokens controla la web, la página de identidad y sus ratios de contraste.
Un archivo Markdown por caso de estudio: de ahí salen la página, la fila en Inicio y la vista previa.
Una capa Pensamiento en cada caso de estudio: notas al margen, opciones descartadas, bocetos.
Una capa dibujada a mano: notas, iconos garabateados y separadores a pluma.
Un buscador de herramientas para recruiters: escribe “Jira” o “Azure DevOps” y obtienes un sí y dónde la usé.
Cuatro idiomas: inglés, español, francés y alemán; el selector te mantiene en la misma página.
WCAG 2.1 AA, comprobado en cada push: contraste, accesibilidad, tipos, Lighthouse.
Una cabecera tranquila: los enlaces de página y un solo grupo de iconos para perfiles, idioma y tema.
Tooltips: los botones con icono se explican al pasar el ratón o con el teclado; Escape los oculta.
Favicons para cada dispositivo: pestañas del navegador y pantallas de inicio de iPhone y Android.
Un solo tratamiento de color para cada foto: sombras en tinta, medios tonos en el color de acento, luces en crema; las capturas mantienen sus colores reales.
Un CV que leen los sistemas de selección (ATS): una columna, el nombre primero y cada PDF revisado como lo lee un ATS.