Schema

Sobre Este Template

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.

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.

Características

• 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
• 3 skins de color vía data-skin — Void Code (por defecto), Solar Terminal verde y Paper Draft en modo claro
• 4 colecciones de contenido — work (5 proyectos), journal (4 posts), team (3 miembros), testimonials (6 citas)
• Reveals de encabezado con máscara por líneas de SplitText a nivel de layout, revirtiendo los splits antes de cada View Transition
• Grilla bento de servicios más un marquee infinito en dos direcciones con 18 tecnologías
• Página Stack — 5 categorías × 4 herramientas, cada una con una nota de uso ("Strict mode always", "App Router", "v22 LTS")
• Páginas de detalle de miembro con bio, rol y links opcionales de GitHub / Twitter / LinkedIn
• Formulario de contacto que envía a PUBLIC_FORM_ENDPOINT — pon tu endpoint y queda funcionando
• Fondo de grilla técnica fijo y overlay de grano fílmico fractalNoise al 3% en mix-blend overlay
• SEO — JSON-LD Person, tags OG/Twitter, URLs canónicas, prop noindex por página, @astrojs/sitemap, robots.txt, llms.txt y llms-full.txt
• Chunks manuales de Vite para gsap, plugins de gsap y lenis; Plus Jakarta Sans self-hosted vía Fontsource; TypeScript estricto

Despliegue