David Morales Vega: un currículum vivo.
Diciembre de 2025 · en línea
El sitio personal del fundador de Bemorex: 20 proyectos con ficha propia, 16 conferencias y talleres, un blog técnico y un stack de 43 tecnologías, cada una con su ícono.
Tecnología
Next.js 16
TypeScript- GSAP
Firebase- Vitest
- React 19
- MDX
PWA- SEO técnico
- Playwright
Servicios
El proyecto
Cliente e idea
David Morales Vega es arquitecto de soluciones, tech lead, abogado e ingeniero de software, y fundador de Bemorex. Necesitaba un solo lugar donde clientes, colegas y organizadores de eventos vean de un vistazo qué ha construido, dónde ha enseñado y cómo piensa.
Reto y objetivos
Su recorrido mezcla mundos que rara vez van juntos: proyectos de software para instituciones y empresas, conferencias y talleres desde 2019, formación en ingeniería y en derecho, y artículos sobre SEO, Angular o el mercado tech de Bolivia. Había que ordenarlo para que nadie se pierda y que cada parte tenga peso propio en Google.
Solución y resultado
Diseñamos un sitio que se recorre como un currículum vivo: una portada que presenta en segundos, una ficha por proyecto con reto, solución y galería, y un listado de conferencias con el evento, la fecha y los temas de cada una.
Sumamos un blog técnico escrito en MDX y una sección de stack con 43 tecnologías, cada una con su ícono, para que quien busca un perfil concreto lo encuentre a la primera.
Un currículum vivo
Proyectos, conferencias y artículos en un solo lugar.
Claro de un vistazo
Lo que hizo, dónde enseñó y cómo piensa.
Stack a la vista
Cada tecnología con su ícono y su contexto.
Resumen del proyecto
Funciones principales
El recorrido es el de quien evalúa a un profesional: llega desde LinkedIn o Google, entiende en la portada quién es David, revisa sus proyectos y charlas, lee uno de sus artículos y le escribe.
Una portada que presenta en segundos
«Hola! Soy David Morales Vega» y, junto a la foto, dos cifras: años de experiencia y charlas dictadas. Debajo, en orden, van los proyectos destacados, las conferencias, la experiencia, el stack, la formación y las últimas publicaciones.
Veinte proyectos, una ficha por proyecto
Cada proyecto comparte la misma estructura: categoría, año, cliente, rol, stack, el reto, la solución, lo destacado y una galería, con un botón para verlo en vivo. Quien lee una ficha ya sabe leer todas.
Un stack que se ve, no solo se enumera
Cuarenta y tres tecnologías, de TypeScript y Angular a Docker y Grafana, se muestran como tarjetas con su ícono. Es la misma colección de íconos que hoy usa bemorex.com en sus casos.
Charlas y artículos que respaldan el perfil
Las 16 conferencias y talleres aparecen con su imagen, el evento, la fecha y los temas que tocaron. El blog reúne artículos técnicos con categorías, buscador y tiempo de lectura, y cada uno termina invitando a conversar.
Desarrollo
Metodología
Construimos el sitio en Next.js 16 con React 19 y lo exportamos como páginas estáticas a Firebase Hosting. Los proyectos, conferencias, experiencia y stack viven en archivos JSON, y los artículos en MDX con código resaltado, así que sumar contenido no exige tocar el diseño. Las páginas principales generan su imagen para redes, el sitio publica sitemap, robots.txt, datos estructurados y un llms.txt, funciona como PWA con página sin conexión, tiene modo claro y oscuro, y se prueba con Vitest y Playwright.
Proceso
Mapa del sitio
Cuatro puertas desde la portada y, detrás de dos de ellas, páginas con la misma anatomía. Las fichas punteadas son plantillas: se diseñaron una vez y hoy sirven a 20 proyectos y 10 artículos.
- Proyectos20 proyectos
- Proyectos y productos
- CITI
- FEDELiq
- Zyrax ERP
- PhysioLife
- + 16 proyectos más
- Ficha de proyectoplantilla × 20
- Conferencias16 eventos
- El Viaje del Arquitecto
- NgWorkshop Oruro
- NgShe Cochabamba
- FNI Go
- + 12 eventos más
- Blog10 artículos
- Índice con buscador y categorías
- HTTPS no es opcional
- Sitemap y robots.txt
- Guía de Angular para empresas
- + 7 artículos más
- Artículoplantilla × 10
- Contactoen cada página
- Formulario
- Redes
Proceso
Primero el celular
Un portafolio se comparte por enlace y se abre donde llegue, así que cada sección se pensó también para pantalla angosta: títulos grandes, bloques cortos y el contacto siempre a mano.
Proceso
Páginas completas
La portada es larga a propósito: quien baja leyendo encuentra, en orden, proyectos, charlas, experiencia y stack. El blog y cada artículo siguen el mismo ritmo. Así se ven de principio a fin.
Marca
Tipografía
Una display geométrica de curvas amplias para los títulos grandes, acompañada de su pareja Funnel Sans en el texto corrido. Las dos son variables, así que un solo archivo cubre todos los pesos.
Funnel Display
RegularSemiBoldBoldExtraBold
Marca
Colores
La paleta sigue Material You 3 a partir del azul de Google: un azul sobrio marca los botones y enlaces, un azul más vivo resalta lo que invita a actuar y un fondo marfil cálido hace que los textos largos se lean sin cansar.
Conclusión
David tiene hoy una carta de presentación que habla por él: cada proyecto con su ficha, cada charla con su foto y cada idea con su artículo, a un enlace de distancia de quien quiera conocerlo.
Casos
