Saltar al contenido
maría sanjuán
English

PortafolioEdición 2026

Retrato de María Sanjuán, sonriente, con la mano en el mentón.

maríasanjuán Desarrolladora front-end con IA & diseñadora UX/UI

Diseño en Figma y llevo a producción en React y Angular. Hoy construyo con agentes de IA: la especificación manda, las verificaciones automáticas sostienen la calidad y las decisiones las tomo yo.

Hablemos Hoja de vida PDF
Bogotá, Colombia · en remoto

Fig. 0 Retrato en código. Cada fila de glifos es una línea de un programa; la profundidad se calculó con IA a partir de una foto. Mueve el cursor: debajo está la diseñadora.

Dos roles,
una firma.

Llevo ocho años1 diseñando y construyendo interfaces para equipos de España, Alemania y Colombia: viajes, educación superior, edición jurídica, salud. He liderado equipos de UX y sistemas de diseño, y el front-end lo escribo yo, en React, Angular o Vue.

Hoy trabajo con agentes de IA como una directora con su equipo. Yo escribo la especificación, los agentes construyen, las verificaciones automáticas sostienen la calidad y cada decisión pasa por la revisión de una persona: yo. En Interkont es la forma de trabajar de todo el equipo2. En Lúmina Tech, la empresa que fundé3, así construí una plataforma escolar que está en producción desde agosto4.

Este portafolio está hecho igual, y todo se puede tocar. Las demos son código de verdad, recreadas con datos ficticios.

maríaBogotá, octubre de 2026

Trabajo seleccionado.

Dos productos que fundé, diseñé y construí con agentes de IA: el sitio de mi empresa y la plataforma escolar. Primero las pantallas reales; después, lo que importa funcionando aquí mismo, con datos ficticios.

01 Sitio web · 2026

Lúmina Tech, el sitio web.

El sitio de mi propia empresa: con la IA al frente, en 3D, y honesto con lo que aún no existe.

Rol
Fundadora · producto · UX/UI · front-end con agentes de IA
Tecnologías
Vite · TypeScript · three.js · GSAP · Lenis
La página de inicio de luminahub.com.co.
01Manifiesto Tipografía grande sobre una esfera de partículas: la IA no reemplaza al maestro, le devuelve el tiempo.
02IA en acción La consola del plan del día (en pausa, datos ficticios) junto al semáforo de alerta temprana.
03Productos Pasan de lado, cada uno con su figura. Campus: en producción.
04Confianza La ley colombiana detrás de cada función.

Y en el celular

  • luminahub.com.co en un celular: Inicio
  • luminahub.com.co en un celular: IA en acción
  • luminahub.com.co en un celular: Productos

Por dentro

Cuatro piezas del sitio, funcionando en esta página.

luminahub.com.co

El motor de partículas de luminahub.com.co. Elige una figura: el símbolo conserva las proporciones del SVG oficial, y su cuadro lima se vuelve un túnel. Pasa el cursor por encima.

Plan del día · docente Datos ficticios En pausa

Demostración con datos ficticios del plan del día para un docente. Esta función está en pausa.

Prioridad alta: recuperación en Matemáticas 9°B. Seis estudiantes están por debajo de 3,0; agendar un repaso de fracciones antes del jueves.

Recordatorio: notas pendientes de 10°A. Faltan doce calificaciones del taller 3 para cerrar el período.

La consola del plan del día con IA, como aparece en el sitio: la forma real de la respuesta de POST /ai/daily-plan, datos ficticios y el rótulo «En pausa», porque la función está en pausa mientras pasa a un proveedor que acepte su uso educativo con menores de edad.

  • Azul noche#0D0F2BFondo. Nunca negro puro.
  • Índigo#1E1B6E1,3:1 no para texto pequeñoProfundidad, degradados.
  • Lima#4DFF4B14,0:1 AASolo botón principal, palabras clave y el cuadro del símbolo.
  • Violeta#6B68B03,8:1 no para texto pequeñoAcento en superficies, no en texto pequeño.
  • Violeta claro#A9A6E38,3:1 AAExiste para el texto pequeño.
  • Perla#F4F4F617,1:1 AATexto.

Texto pequeño sobre azul noche: ¿se lee?

8,3:1 · cumple AA para texto pequeño (4,5:1)

La educación que piensa contigo.Plus Jakarta Sans · titulares

Software educativo con IA para colegios en Colombia.Inter · cuerpo

POST /ai/daily-plan · 3,0JetBrains Mono · cifras y código

El sistema de marca, con su contraste medido. El violeta claro existe porque el violeta medio no llega a 4,5:1 sobre azul noche en texto pequeño. Prueba los cuatro colores. El lima es escaso a propósito: botón principal, palabras clave de los titulares y el cuadro del símbolo.

Sección Portada

gsap.set(S, K.hero);
morph
0.00
x
0.50
y
0.30
scale
1.00
alpha
1.00
spin
0.00

La coreografía del scroll, por dentro. Cada sección del sitio tiene un estado, y el scroll interpola entre el anterior y el suyo, siempre con valores explícitos de origen y destino. x e y son fracciones de la pantalla visible, así que funciona en cualquier proporción. Activa el scrub con retraso y salta: ese error pasó.

  • Primero el contenido

    Todo el texto vive en el HTML; JavaScript solo anima. Sin JavaScript o sin WebGL la página se lee entera, y eso es lo que indexa Google.

  • Nunca prometer de más

    Insight dice «En camino»; el plan con IA dice «En pausa». Una sección de clientes solo existiría si fuera verdad.

02 Plataforma · en producción desde el 3 de agosto de 2026

Lúmina Campus, la plataforma.

Una plataforma escolar construida sobre la ley colombiana, para directivos, docentes, estudiantes y familias.

Rol
Fundadora y dueña de producto · UX/UI · arquitectura front-end · desarrollo con agentes de IA
Tecnologías
React 19 · TypeScript · Tailwind CSS v4 · shadcn/ui · Node.js · Express · PostgreSQL (Supabase) · Playwright
Aquí
Recreada sobre un colegio de demostración con datos ficticios. Ningún colegio, estudiante ni menor real.
  • 5 roles con permisos propios
  • 13 módulos base, incluidos en todos los planes
  • 3 módulos de pago, ya construidos
  • 80+ revisiones de accesibilidad en cada pull request
Mando central de Lúmina Campus en el colegio demo: 40 estudiantes, 4 docentes, 98 % de asistencia y 7 estudiantes en riesgo.
01Observatorio de riesgo Quién está en rojo y por qué, con el aviso al acudiente a un clic.
02Servicio social La Resolución 4210 hecha tabla: las 80 horas que cada estudiante de 11.° necesita para graduarse.
03Convivencia Casos con su protocolo de la Ley 1620: uno tipo II, abierto, en el paso 4 de 7.
04Familia Lo que ve el acudiente: el desempeño de cada hijo por área y período, con la escala del Decreto 1290.

Y en el celular

  • Lúmina Campus en un celular: Entrada
  • Lúmina Campus en un celular: Rectoría
  • Lúmina Campus en un celular: Acudiente

Por dentro

Cuatro piezas de la plataforma, rehechas desde su código con datos ficticios.

Sistema de Alerta TempranaDatos ficticios

ROJO

  • Asistencia 72% (crítico: menos de 75%)
  • Promedio 2.6 (mínimo aprobatorio 3.0)
    if (asistencia < 75 || promedio < minimo) return 'ROJO'
if (asistencia < 85 || tendencia <= -0.5) return 'AMARILLO'
return 'VERDE'

    El semáforo de alerta temprana, con las reglas y los textos de motivo reales del producto. Mueve los controles. La nota mínima no es una constante: sale del sistema de evaluación de cada colegio (Decreto 1290, art. 8). Con un 3,0 escrito en el código, un colegio que exige 3,5 veía en verde a quien su propio boletín daba por reprobado.

    Directorio y chatDatos ficticios

    Ver como

      Elige a alguien del directorio.

      Directivo

      • Gloria Navarro ✓
      • Álvaro Restrepo ✓
      • Nubia Castaño ✓
      • Estudiante 07 ✓
      • Estudiante 12 ✓
      • Estudiante 31 ✓
      • Acudiente de Estudiante 07 ✓
      • Acudiente de Estudiante 31 ✓

      Docente

      • Gloria Navarro ✓
      • Diana Rojas ✓
      • Nubia Castaño ✓
      • Estudiante 07 ✓
      • Estudiante 12 ✓
      • Estudiante 31 ✕
      • Acudiente de Estudiante 07 ✓
      • Acudiente de Estudiante 31 ✕

      Estudiante

      • Gloria Navarro ✓
      • Diana Rojas ✓
      • Álvaro Restrepo ✓
      • Nubia Castaño ✕
      • Estudiante 12 ✕
      • Estudiante 31 ✕
      • Acudiente de Estudiante 07 ✕
      • Acudiente de Estudiante 31 ✕

      Acudiente

      • Gloria Navarro ✓
      • Diana Rojas ✓
      • Álvaro Restrepo ✓
      • Nubia Castaño ✕
      • Estudiante 07 ✕
      • Estudiante 12 ✕
      • Estudiante 31 ✕
      • Acudiente de Estudiante 31 ✕

      Quién puede escribirle a quién. La matriz se aplica en el servidor: el directorio solo lista contactos permitidos, y abrir una conversación fuera de ella devuelve un 403. Activa la protección de menores: el acudiente puede leer las conversaciones de su hijo, sin voz, el estudiante ve un aviso permanente y cada lectura queda auditada. «Vigilar no es suplantar».

      Boletín · Decreto 1290Datos ficticios

      Colegio de demostración

      Boletín académico de calificaciones

      Período 2 de 4 · Año lectivo 2026 · Escala 0.0–5.0 (Decreto 1290/2009)

      Estudiante 07Grupo 9°A

      AsignaturaDocenteNotaDesempeño
      MatemáticasÁlvaro RestrepoBajo (No aprobada)
      Lengua CastellanaNubia CastañoAlto
      InglésYaneth PalaciosBásico
      Ciencias NaturalesJairo MolinaSuperior
      Ciencias SocialesNubia CastañoBásico
      Educación FísicaJairo MolinaAlto
      Educación ArtísticaYaneth PalaciosAlto
      Ética y ValoresÁlvaro RestrepoBásico

      Promedio del período 3.9

      Superior ≥ 4.6 · Alto ≥ 4.0 · Básico ≥ 3.0 · Bajo < 3.0

      Un boletín por desempeños del MEN. Edita cualquier nota, o la nota mínima del colegio. «Básico» cae en esa mínima por definición: es el desempeño de quien aprueba raspando. Los promedios se redondean a un decimal con la mitad hacia afuera del cero, igual que Postgres: un guardián de CI recorre los 251.001 pares posibles para probar que TypeScript y la base de datos coinciden.

      Sistema de diseñoTailwind CSS v4
      • pizarra-profunda#1C2B35 · Barra lateral, foco
      • coral-cta#C93C3C · Acción principal y error
      • celeste-pizarra#8BB8C8 · Bordes, sub-roles
      • niebla-polar#F5F9FB · Fondo de página
      • verde-texto#177A49 · Correcto
      • ambar-texto#9A6603 · Alerta

      Botones con onda

      Pestañas con chispas

      El foco no es rojo

      El design system de Campus, rehecho desde su CSS. Todo botón de acción lleva onda, las pestañas sueltan chispas una vez y paran, y el contorno del foco es pizarra, no coral: la gente leía el foco coral como un error. El rojo significa error, y solo error.

      Proceso

      Investigación y normas
      La ley se volvió pantallas: la escala 0,0–5,0 y los desempeños del MEN (Decreto 1290), protocolos de convivencia paso a paso con la reserva del art. 44 (Ley 1620, Decreto 1965), los ajustes del PIAR impresos en el boletín (Decreto 1421), un acta de grado que se niega a salir sin las 80 horas de servicio social (Resolución 4210) y una autorización de datos versionada y revocable (Ley 1581).
      Decisiones con su porqué
      Nunca un botón que miente: si una función no existe, dice «Próximamente». Un cero mientras carga también miente, así que espera un hueco. Y el boletín y el acta de grado nunca quedan detrás de un módulo de pago, porque emitirlos es una obligación legal.
      Accesibilidad, WCAG 2.1 AA
      Obligatoria en Colombia por la Resolución 1519 de 2020. Cada pull request corre más de 80 revisiones automáticas: todas las pantallas de los cinco roles en escritorio (1280 × 800) y en móvil (390 × 844). Una violación grave, un desborde horizontal o un texto cortado tumban el build.
      IA responsable
      La IA sugiere y las personas deciden: ninguna nota, promoción o sanción la decide un sistema automático. La IA corre en el servidor, así que ninguna clave ni dato sensible llega al navegador. El semáforo de alerta temprana funciona hoy con reglas claras, no con IA, y el plan del día con IA está en pausa mientras pasa a un proveedor que acepte su uso educativo con menores de edad.

      • El acudiente lee con aviso

        No en silencio. Un menor que no sabe que lo leen habla como si no lo leyeran, y si el problema está en casa, la vigilancia callada se lo entrega justo a quien no debe.

      Cómo trabajo
      con agentes de IA.

      Desarrollo guiado por especificaciones (SDD) con flujos multiagente en Claude. No es una herramienta suelta: es como construyo, todos los días. Las pruebas de aquí abajo salen del repositorio de Lúmina Campus.

      1. Especificar

        Todo cambio empieza como una especificación escrita. En Lúmina Campus las reglas viven en CLAUDE.md y en una constitución de seis principios no negociables, y los agentes las leen antes de escribir una línea.

        «Nunca un botón que miente. Si la función no existe, se muestra vacío o “Próximamente”.»

        CLAUDE.md · Lúmina Campus

      2. Construir con agentes

        Los agentes de Claude implementan contra la especificación, en ciclos de looping y prompting; yo orquesto. Una tarea, una rama, un pull request. En Interkont es el método de todo el equipo.

        feat(chat): el modo supervisor deja de ser una promesa vacía

Co-Authored-By: Claude Opus 5

        Un commit real, con su coautor · Campus lleva más de 400 commits y más de 90 pull requests integrados

      3. Vigilar

        Hoy corren en CI dieciséis guardianes automáticos, y cada uno existe porque algo se rompió una vez. Y la regla que los mantiene honestos: romperlos a propósito antes de confiar en ellos.

        • check-button-wave.jsfalla si aparece un botón de acción sin onda
        • check-permisos-datos.jsninguna tabla nace alcanzable con la clave pública
        • check-siee.jsrecorre los 251.001 pares posibles: TypeScript y Postgres redondean igual

      4. Verificar

        Más de cuarenta archivos de pruebas de punta a punta en Playwright y más de 80 revisiones de accesibilidad en cada pull request. Verificar es ejecutar el camino que cambió: si no se pulsó, no está verificado, y no se reporta como tal.

        AUDITORIA=1 npx playwright test e2e/auditoria.spec.ts --workers=1

        La auditoría WCAG 2.1 AA completa: cinco roles, escritorio y móvil

      5. Decidir: las personas

        El producto, la UX y toda decisión sensible siguen siendo humanos. Los agentes proponen; yo decido, y la decisión queda escrita con su motivo para que la siguiente sesión no la deshaga.

        «La decisión de que fuera acceso con aviso, y no copia silenciosa, es de la CEO (7 sep 2026).»

        CLAUDE.md · sobre el modo supervisor del chat

      Lo que sé,
      y dónde lo usé.

      Ocho años, en dos columnas. Elige un conocimiento y se encienden los trabajos donde lo usé, o elige un trabajo para ver sus conocimientos.

      Código

      • JavaScript
      • LESS
      • .NET

      Diseño

      • Photoshop
      • Zeplin
      • Diseño responsive

      IA y agentes

      • Cursor
      • Copilot
      • MCP
      • n8n
      • AWS Bedrock AgentCore
      • Figma Make
      • Antigravity

      Calidad y entrega

      • Docker
      • Scrum
      • AWS

      Trayectoria

      1. La IA multiagente bajo SDD es la metodología del equipo de punta a punta: de las historias de usuario con el cliente a la arquitectura front-end. Interfaces en React y Angular, documentadas en Storybook, con Playwright en verde en cada pull request.

      2. Lúmina Campus, del producto a producción, con agentes de IA. Seleccionada para el Programa de Levantamiento de Capital para Startups de la Cámara de Comercio de Bogotá.

      3. CSS avanzado y diseño de interfaces en Figma y Ant Design, con equipos globales.

      4. Dirección del equipo de UX/UI y de la estrategia de experiencia de todos los productos; sistemas de componentes en Storybook.

      5. Productos digitales de un grupo editorial jurídico, con Vue, HAML, Pug y Bootstrap, en equipos ágiles.

      6. UX, prototipado en Figma y vistas en React, HTML5, CSS3 y Bootstrap.

      7. Componentes en Angular y flujos con RxJS para plataformas educativas de alto tráfico, entre ellas Universidad Siglo 21 y Areandina.

      Formación

      • 2012 — 2016Profesional en Diseño GráficoUniversidad Autónoma del Caribe · Barranquilla
      • 2024 — 2026Frontend con React.js · Escuela de Producto y Gestión de TiempoPlatzi

      Idiomas Español nativo · inglés de lectura técnica, mejorando activamente

      Colofón

      Cómo se hizo este portafolio. También cuenta como caso.

      Canal de luminancia del retrato, en escala de grises. Mapa de profundidad del retrato: la cara y la mano se ven más claras porque están más cerca. La máscara del recorte: la silueta en blanco sobre negro.
      Luz, profundidad y máscara: los tres mapas con los que está hecho el retrato.
      Concepto
      Dos roles, una firma. Todo existe en dos materiales, código y diseño, y el interruptor de arriba decide cuál va delante: el retrato, las notas de los márgenes y el color de acento.
      Retrato
      Una foto mía generada con IA. MODNet me recortó y Depth Anything V2 me dio profundidad, los dos funcionando en mi propio computador: la foto nunca salió de él. Después, un programa se escribe sobre la foto, fila a fila, un carácter por glifo: miles de glifos.
      Tipografía
      Manrope en los titulares y en mi nombre; Geist en el texto y Geist Mono en el código. Todas con licencia SIL Open Font y servidas desde este sitio: ninguna petición a terceros.
      Código
      Vite, TypeScript, three.js, GSAP y Lenis, sin framework. El motor de partículas está adaptado del que hice para luminahub.com.co. Todo el texto vive en el HTML, en inglés y en español, escritos una sola vez, uno al lado del otro.
      Acceso
      Se lee entero sin JavaScript y sin WebGL, funciona con teclado, y con movimiento reducido no hay scroll suave ni pantalla de carga y el retrato se queda quieto. El texto sobre el fondo pasa de 17:1.
      Créditos
      Diseño y código: María Sanjuán, con agentes de IA (Claude). Revisión: María Sanjuán.

      Hablemos.

      Cuéntame de qué se trata y elige un canal: el mensaje llega ya escrito.

      ¿De qué se trata?
      Résumé PDF · EN Hoja de vida PDF · ES