Bitácora del Proyecto
Registro del proceso de trabajo, decisiones y aprendizajes durante el desarrollo del TP1.
Kick-off: Definición del equipo y concepto
Nos reunimos por primera vez como equipo para definir el nombre del proyecto y la dirección estética. Decidimos usar un tema oscuro con acentos en violeta, inspirado en portfolios de desarrolladores. Creamos el repositorio en GitHub y definimos la estructura de carpetas siguiendo las buenas prácticas pedidas por la cátedra.
Definición de la paleta y tipografía
Elegimos la combinación de Space Mono para títulos y elementos de código, y DM Sans para el cuerpo de texto. La paleta se centra en violeta (#7c3aed), el color de fondo oscuro (#0c0c18) y variantes claras para textos. Esto le da coherencia visual al sitio completo.
Dificultad: Responsive design en la hero section
El layout de dos columnas de la sección hero rompía en pantallas pequeñas. Resolvimos usando grid-template-columns: 1fr 1fr en desktop y cambiando a 1fr con order: -1 para la parte visual en mobile. También tuvimos que ajustar los tamaños del pixel grid con unidades relativas.
Implementación de interacciones dinámicas
Implementamos las siguientes funciones JS: pixel grid animado con shimmer efecto en el hero, contador animado para las estadísticas del equipo, barras de habilidades que se animan al hacer scroll con IntersectionObserver, y el sistema toggle para expandir/colapsar secciones en cada página de integrante. Centralicemos la lógica compartida en main.js.
Revisión final y deploy en Vercel
Revisamos que todos los breakpoints funcionen correctamente (400px, 900px, 1200px), que la navegación no requiera el botón "Atrás" del navegador, y que el README esté completo. Hicimos el deploy en Vercel conectando el repositorio de GitHub. Pendiente para TP2: ampliar la bitácora y agregar más funcionalidades interactivas.