Que es
El sitio que estas viendo ahora mismo. abelardodiaz.dev es un portfolio tecnico tratado como un producto de verdad: codigo privado, desplegado en Vercel, con su propio sistema de diseno, su pipeline de contenido y sus controles de seguridad antes de cada publicacion. No es una plantilla generica ni un perfil de LinkedIn: es una pieza de ingenieria en si misma.
El detalle que lo distingue: dos temas, no uno
El sitio tiene dos personalidades completas que el visitante puede alternar:
- Editorial -- serif, tonos calidos, aire de revista. Para quien quiere leer.
- Terminal -- monospace, verde sobre negro, prompts
~$y botones comogit clone proyectos. Para quien vive en la consola.
No es un simple dark/light: son dos sistemas de diseno distintos (tipografia, color,
copy, microcomponentes) que conviven sobre el mismo contenido, implementados con
variantes de Tailwind (editorial: / terminal:) y tokens de color en OKLCH. El
mismo HTML, dos lecturas.
Contenido como codigo, sin CMS
Detras no hay base de datos ni CMS. Todo el contenido -- los case studies de proyectos, los TILs (today I learned) y el blog -- vive como archivos MDX/YAML en git, versionado junto al sitio. Eso permite escribir prosa con componentes (figuras, tablas, diagramas SVG) y que cada pieza se prerenderice estatica en build: rapida de servir y trivial de cachear.
Sobre ese contenido el sitio arma vistas: una portada con lo destacado, un catalogo de proyectos filtrable por categoria, paginas de case study, e indices de TILs y blog. Las tarjetas de proyecto muestran miniatura, stack y categoria.
Publicar sin romper nada
Un portfolio que se actualiza seguido necesita un proceso, no improvisacion. El flujo de publicacion es deliberado:
- Build local obligatorio antes de cada push: Vercel prerendea cada pieza, asi que un error de MDX en un solo archivo tumba todo el deploy. El build local lo atrapa antes.
- Sanitizacion de seguridad: un script propio (
sanitize_check.py) con decenas de patrones (IPs internas, hostnames, claves, codigos de proyecto) corre antes de publicar, complementado con gitleaks. Nada sensible llega al repo publico. - Doble remoto (GitHub + GitLab) y deploy automatico en Vercel.
Stack
| Capa | Tecnologia |
|---|---|
| Framework | Next.js 16 (App Router) + Turbopack |
| UI | React 19 + Tailwind CSS v4 (tokens OKLCH) + shadcn/ui |
| Temas | Sistema dual editorial/terminal con variantes Tailwind |
| Contenido | MDX + YAML + gray-matter (sin CMS, sin BD) |
| Deploy | Vercel (privado), doble remoto Git |
| Seguridad | sanitize_check.py + gitleaks pre-publicacion |
La leccion
Lo facil habria sido tomar una plantilla de portfolio y rellenarla. En vez de eso, el sitio se trata como cualquier otro proyecto serio del catalogo: decisiones de diseno propias (dos temas, no uno), contenido versionado como codigo, y un pipeline que evita deploys rotos y fugas de datos. Un portfolio que se construye con el mismo rigor que muestra es, en si mismo, el mejor argumento.