$ cat bitacora.log
> Bitácora del Proyecto_
// Registro de desarrollo del TP1 — Equipo 404 Solutions — IFTS N°29
27 Apr Initial commit — Estructura base del repositorio feat
Miguel crea el repositorio y Mike realiza el primer commit con la estructura base del proyecto: carpetas css/, js/, img/ y la landing page inicial.
28 Apr Tarjeta base de Mike + README + Footer dinámico feat
Se crea la primera tarjeta de perfil individual. Se implementa el footer con año dinámico mediante JavaScript. Se agrega enlace al deploy desde el README.
- Creación de
mike.htmlcon estructura base - Footer dinámico con
new Date().getFullYear() - Documentación inicial en README.md
01 May Secciones multimedia, tarjeta Raquel y favicon feat
Gran día de desarrollo: se agregan secciones de películas y discos al perfil de Mike, se crea la tarjeta de Raquel y se incorpora el favicon al sitio.
- Secciones de películas con galería dinámica (un solo iframe cargado por JS)
- Sección de discos con botón de playlist
raquel.htmlcon estilos y links a YouTube- Favicon agregado por Mario
02 May Menú hamburguesa + correcciones responsive de Mario feat
Mario implementa el menú hamburguesa para mobile y ajusta media queries. Se corrigen errores de tamaño en títulos y botones de redes sociales.
- Menú hamburguesa en Vanilla JS con
classList.add/remove("visible") - Media queries para resoluciones móviles
- Unificación de header y footer entre páginas
03 May Tarjeta Mariana + tarjeta Valeria + correcciones Mario feat
Mariana crea su perfil completo con secciones de habilidades, películas y discos. Se integra la tarjeta de Valeria. Mario corrige links del header y logo duplicado.
mariana.htmlcon grid responsive, efectos hover y JS para películas- Tarjeta Valeria integrada al index
- Corrección de logo duplicado en header móvil
- Fix en links del header de Mario
04 May Pulido final: sticky nav, grid skills, z-index y carrusel fix
Día de correcciones y mejoras finales. Se refina el responsive de habilidades en múltiples breakpoints, se implementa navegación sticky transparente y se agrega el carrusel de Raquel.
- Menú de navegación sticky con fondo transparente
- Grid de skills con clases específicas por categoría (
.skills-terminal--learning) - Fix de z-index en menú hamburguesa
carrusel.jscon ajuste de elementos segúnwindow.innerWidth- Scroll spy y funcionalidad "copiar URL" en perfil de Raquel
- README actualizado con capturas
// Estética Terminal
- Identidad visual tipo Retro-Computing con fondo oscuro (#0a0a0a)
- Verde neón #00ff41 como color principal de acento
- Tipografía JetBrains Mono para reforzar la estética de consola
- Prefijos tipo prompt (
>,$,//) en títulos
// Estructura Compartida
- styles.css global para header, footer y clases base
- Cada integrante tiene su propio CSS de perfil
- Se reutilizan clases base evitando duplicación
- Coherencia visual con identidad individual en páginas personales
// Responsive Design
- Enfoque Mobile First con breakpoints en 400px, 600px, 900px y 1200px
- Menú hamburguesa en mobile, nav horizontal en desktop
- CSS Grid y Flexbox para layouts adaptativos
- Carrusel dinámico que ajusta columnas según
window.innerWidth
// Navegación
- Header común en todas las páginas
- Botón Volver al Inicio en todos los perfiles
- Nunca dependemos del botón "Atrás" del navegador
- Sticky nav transparente en perfil de Mike
Carga pesada por múltiples iframes de YouTube fix
Problema: Incluir varios reproductores de YouTube simultáneamente generaba tiempos de carga elevados y lag en la navegación.
Solución: Se implementó una galería dinámica con atributos data-* que carga un único iframe según la selección del usuario, reduciendo peticiones al mínimo necesario.
Menú hamburguesa: conflictos de z-index y visibilidad fix
Problema: El menú móvil aparecía detrás de otros elementos o quedaba visible cuando no debía.
Solución: Se ajustó el z-index y se controló la visibilidad mediante classList.add/remove("visible") en JavaScript, evitando conflictos con el resto del layout.
Grid de habilidades desalineado en breakpoints intermedios style
Problema: La sección de skills de Mariana mostraba íconos y texto separados en resoluciones entre 575px y 814px. "Machine Learning" se cortaba o bajaba de línea.
Solución: Se refactorizó de flex-wrap a CSS Grid con clases específicas por categoría (.skills-terminal y .skills-terminal--learning), con columnas auto y justify-content: center.
Año dinámico no aparecía en páginas de perfil fix
Problema: El footer mostraba el año en el index pero no en las páginas individuales porque había dos listeners DOMContentLoaded en main.js y el segundo no ejecutaba si el primero fallaba.
Solución: Se unificaron ambos listeners en uno solo, agregando un guard if (yearSpan) para evitar errores en páginas sin ese elemento.
Inconsistencias de estructura entre páginas fix
Problema: Al trabajar en paralelo, cada integrante generó variantes del header y footer con diferencias de color, fuentes y estructura.
Solución: Se estandarizó el HTML del header/footer en todas las páginas y se centralizaron estilos comunes en styles.css.
// Modularización
- Separación de estilos y scripts por perfil para evitar conflictos
- Funciones globales centralizadas en main.js
- Organización de recursos en carpetas
css/,js/,img/
// Interactividad JS
- Consola de diagnóstico simulada con efecto typing
- Galería dinámica de películas con un solo iframe
- Carrusel responsive ajustado por
window.innerWidth - Scroll spy y botón "copiar URL" en perfil Raquel
// Avatares con IA
- Se reemplazaron fotos personales por avatares generados con IA
- Coherencia estética mantenida con el diseño terminal
- Imágenes optimizadas en carpetas por integrante
// Herramientas
- HTML5 semántico con atributos ARIA
- CSS3 con Flexbox, Grid y variables CSS
- JavaScript Vanilla sin frameworks
- Git/GitHub con feature branches y PRs
- Vercel para deploy continuo
- IA (Claude/Gemini) para debugging y optimización
// Próximos Pasos (TP2)
- Ampliar funcionalidades interactivas con JS avanzado
- Optimizar rendimiento y tiempos de carga
- Mejorar accesibilidad (contraste, ARIA, navegación por teclado)
- Incorporar nuevas secciones o contenidos dinámicos
- Documentar evolución con capturas y mejoras aplicadas