jlandaeta.dev

Un portafolio genérico no dice nada de cómo trabajo. La primera versión funcionaba, pero se veía como cualquier portafolio oscuro con degradados, vidrio y efectos: nada en ella era mío.

Este mismo sitio, en producción en jlandaeta.dev. Es mi proyecto de punta a punta: dirección visual, arquitectura, contenido y código. Lo publiqué en junio de 2026 y lo rehice en octubre con una identidad propia.

Que un reclutador entienda en segundos qué construyo y cómo trabajo, con una identidad que salga de mi mundo y sin sacrificar claridad ni velocidad.

• Dirección visual: definí el sistema «Fogata» a partir de mi escena pixel-art del samurái junto al fuego. De ahí salen la paleta, las tipografías y los marcos.
• Arquitectura en Next.js 16 (App Router) y React 19, con el idioma en la URL para que cada versión sea indexable.
• Contenido: escribí y estructuré los casos de estudio en español e inglés, contrastando cada afirmación con los repositorios de los proyectos.
• Rendimiento y accesibilidad: medí antes de cambiar, y cuidé el foco, el teclado y el movimiento reducido.
• Proceso: trabajo con agentes de código como par de programación. Yo defino la dirección y el criterio, reviso cada cambio en local y decido qué se publica.

• Sitio 100% estático: las 28 páginas se generan en el build, sin funciones ni variables de entorno.
• Todo el contenido vive tipado en un solo módulo bilingüe; una prueba verifica que español e inglés coincidan y que cada proyecto tenga su caso.
• El idioma es parte de la ruta (/es, /en): canonical, hreflang, Open Graph, sitemap, JSON-LD y llms.txt salen de las mismas fuentes.
• Las entradas al hacer scroll son CSS con un solo IntersectionObserver; Framer Motion queda para lo que necesita animar su salida.
• Los sprites pixel-art se definen como grillas de texto y se dibujan como SVG, con un trazo por color.

• Hero como pantalla de título de un juego: la escena ocupa todo el ancho y el menú usa un cursor de selección.
• Proyectos en tres niveles: uno principal con marco grueso, dos que lo acompañan con su captura y el resto en un carrusel.
• Casos de estudio con una misma estructura: problema, contexto, objetivo, rol, arquitectura, solución, desafíos, aprendizajes y resultado.
• Ficha de personaje, inventario del stack enlazado a los proyectos donde usé cada tecnología, y la sección de Aliados.
• Detalles de juego que no estorban: logros al recorrer las secciones y un código Konami escondido.

• Rehacer en vez de parchar: saqué partículas, brillo de cursor, vidrio y degradados, y dejé un solo efecto ambiental, el fuego.
• Jerarquía: una grilla de nueve tarjetas iguales no destacaba nada. Reservé el marco grueso para tres piezas y dejé que lo demás acompañe.
• Animación y rendimiento: un fade de entrada retrasaba el pintado del contenido principal. Ahora el contenido se pinta desde el primer frame y la transición corre encima.
• Mantener español e inglés sincronizados sin duplicar la estructura del sitio.

• La identidad no sale de sumar efectos: sale de elegir un origen y ser coherente con él.
• Medir antes de optimizar: el cambio que más ayudó fue quitar una animación, no agregar una técnica.
• Aprender Next.js 16 y React 19 desde su documentación, no desde la memoria.
• Un agente de código acelera, pero no decide por ti: los cambios que funcionaron partieron de una dirección clara y se contrastaron con evidencia.