Visión • Características • Arquitectura • Stack • Despliegue
La Crónica Atemporal ha soltado amarras para evolucionar de un simple registro de prácticas de ASIR a una auténtica experiencia cartográfica inmersiva.
Basado en el patrón de interacción Scrollytelling, este proyecto transforma un aburrido Markdown en un antiguo pergamino interactivo. A medida que scrolleas, tomas el timón de un navío que traza su ruta por el vasto océano del conocimiento, deteniéndose en diferentes islas y archipiélagos que representan los hitos técnicos de la formación.
Tip
Autogestión Mágica: Nadie quiere escribir código para añadir un post. El motor interno de DailyHack parsea el diario maestro en Markdown y autogenera las islas, las coordenadas y la ruta sin tocar un solo componente de React.
- Scrollytelling Inmersivo: Desplazamiento ultra-fluido y con inercia gracias a
Lenis. El scroll es tu timón. - Topografía Dinámica: Cada capítulo de aprendizaje genera una masa de tierra (isla SVG) aleatoria con sus propias líneas topográficas. Los "días" son pines del tesoro esparcidos por ella.
- Navegación Fiel al Trazado: Un sistema matemático lee las curvas de Bezier de la ruta y posiciona un rastreador en forma de barco, navegando pixel a pixel según avanzas en la lectura.
- Microinteracciones Premium: Tooltips estilo pergamino oscuro, físicas elásticas (Spring Animations), texturas multicapa y un fondo que reacciona sutilmente.
- Biblioteca Subterránea: Una vista secundaria tipo Grid/Library para cuando solo quieres buscar información dura y pura mediante filtros.
La magia ocurre en la conjunción entre Matemáticas, SVG y Framer Motion:
- Cartografía Algorítmica: Los registros se empaquetan en Capítulos. Se calcula una ruta en zig-zag (alternando coordenadas X) de babor a estribor.
- Pathfinding Dinámico: Generamos un
<path>SVG y extraemos su longitud total. - Tracking en Vivo: Con
useScrollmedimos el progreso y usamosgetPointAtLength()para extraer la posición exacta(x,y)del barco pirata sobre la ruta.
Construido con tecnología moderna para resistir el paso del tiempo:
- Casco: React 19 + TypeScript + Vite.
- Velas (Estilos): Tailwind CSS v4.
- Física (Animaciones): Framer Motion.
- Timón (Scroll): Lenis.
- Brujula (Iconos): Lucide React.
- Puerto Seguro: GitHub Pages automático.
Si quieres hacer tu propio mapa pirata, súbete a bordo:
- Recluta a la tripulación (Dependencias):
npm install
- Iza las velas (Arranca el servidor):
npm run dev
- Dibuja el mapa: Cualquier cambio en tu
DIARIO_APRENDIZAJE.mdse renderiza al instante.
Important
Integración Continua (GitHub Pages)
Gracias al sistema de poleas automatizado (GitHub Actions), cada git push a la rama main lanza una build de producción directa a tu GitHub Pages. Solo asegúrate de commitear el package-lock.json junto a tus tesoros.
"El conocimiento es un mar vasto, y nosotros somos los navíos trazando la historia."