Schema

Schema es un portfolio dark tipo terminal para desarrolladores full-stack e ingenieros independientes. Doce rutas cubren inicio, un layout de inicio alternativo, índice de trabajos y páginas de caso, servicios, un desglose del stack, nosotros, índice de journal y artículos, perfiles de equipo, contacto y 404. El hero es un panel de editor de código real, marco de ventana, pestaña, números de línea, barra de estado, que teclea un objeto TypeScript con syntax highlighting carácter por carácter usando un tokenizer escrito a mano y, al terminar, hace aparecer el retrato, mientras ambos paneles aplican parallax a velocidades distintas con el scroll. Las filas de trabajos muestran un thumbnail que sigue al cursor en hover mientras sus píldoras de stack se dispersan con física elástica. Cuatro colecciones de contenido, tres skins de color, reveals por líneas con SplitText, smooth scroll con Lenis y SEO completo con sitemap y llms.txt.

Qué incluye

• 12 rutas, Inicio, layout de Inicio alternativo, índice de Trabajos, Caso de estudio, Servicios, Stack, Nosotros, índice de Journal, artículo de Journal, perfil de Equipo, Contacto, 404
• Hero de editor de código, marco de ventana, pestaña developer.ts, números de línea y barra de estado alrededor de un área de escritura en vivo
• Tokenizer de TypeScript escrito a mano que colorea keywords, strings, brackets, operadores y nombres de propiedad mientras cada carácter se teclea cada 55ms
• El panel del retrato aparece al terminar el tecleo, y ambos paneles del hero hacen parallax a velocidades distintas (y 80 frente a y 120 + escala) con un ScrollTrigger con scrub
• Filas de trabajos con thumbnail de preview de 320×200 que sigue al cursor y aparece con escala en hover
• Las píldoras de stack se dispersan al hacer hover en la fila, x/y/rotación aleatorios con easing elastic.out y regreso al salir

La firma

El hero es un editor de código a altura completa: marco de ventana con semáforo, pestaña developer.ts, números de línea y una barra de estado que marca “TypeScript · UTF-8 · Ln 1, Col 1”. Dentro, un tokenizer escrito a mano teclea un objeto TypeScript con syntax highlighting un carácter cada 55ms, coloreando keywords, strings, brackets y propiedades a medida que caen. Cuando entra el último carácter, el retrato de la derecha aparece y surge un cursor de bloque parpadeante, y al hacer scroll, ambos paneles hacen parallax a velocidades distintas con un ScrollTrigger con scrub.

Verlo en vivo

La demo es pública: https://fpsjago.github.io/schema/. 12 páginas, hecha con Astro 5, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.