Proyecto personal
Portfolio y librería de componentes
Este portfolio: un CV digital interactivo construido como monorepo, con una librería de componentes propia documentada en Storybook.
Resumen
Este portfolio es un CV digital que cuenta mi trayectoria como una experiencia vertical continua: quién soy, de dónde vengo, qué sé hacer y qué he construido. En lugar de partir de una plantilla, lo planteé como un producto propio y como demostración técnica de cómo trabajo.
Está organizado como un monorepo con tres piezas: la web del portfolio, una librería de componentes reutilizable y un Storybook para desarrollarla y documentarla. Todo el contenido (proyectos, trayectoria, tecnologías y capacidades) vive separado del código, de modo que puedo actualizarlo sin tocar la interfaz.
Aspectos destacados
- Librería de componentes propia (@juanbm/ui), independiente del portfolio y preparada para publicarse como paquete
- Componentes desarrollados y documentados de forma aislada en Storybook
- Contenido separado del código: proyectos, trayectoria, tecnologías y capacidades se editan desde archivos de datos
- Diseño responsive pensado desde móvil, accesible y con soporte para movimiento reducido
Arquitectura
El repositorio es un monorepo con workspaces de npm y Turborepo: apps/portfolio, apps/storybook (documentación de componentes) y packages/ui (la librería de componentes, construida con Vite). La web consume la librería como un paquete más, sin acoplar los componentes a sus rutas.
El contenido está en una carpeta content/ con datos tipados en TypeScript. Cada proyecto genera su propia página de detalle estática, que admite imágenes, GIF, vídeos, YouTube y PDF por apartado. El listado de tecnologías se exporta también como CSV generado a partir de esos mismos datos.
Un pipeline de GitHub Actions ejecuta lint, comprobación de formato, typecheck y build en cada cambio.
Retos técnicos
- Diseñar componentes genéricos en la librería sin acoplarlos al contenido ni a las rutas del portfolio
- Mantener una identidad visual continua (fondo global, scroll y animaciones) sin perjudicar la legibilidad ni el rendimiento
- Que las animaciones expliquen la información en lugar de distraer, y se desactiven con prefers-reduced-motion
- Modelar datos flexibles para proyectos con medios distintos por apartado: imágenes, vídeos, YouTube y PDF
Resultado
Un portfolio que funciona como CV interactivo y como muestra de mi forma de trabajar: código mantenible, contenido editable sin tocar la interfaz y una librería de componentes reutilizable documentada en Storybook.