🏰 Bosque Encantado - Reinharnd Kingdom

Un sitio web inmersivo que presenta un mundo de fantasía habitado por criaturas mágicas, desarrollado con tecnologías web modernas y animaciones avanzadas.

✨ Características

🎨 Diseño y UX

• Diseño responsivo optimizado para todos los dispositivos
• Animaciones GSAP avanzadas con ScrollTrigger y ScrollSmoother
• Parallax dinámico en múltiples capas
• Interfaz intuitiva con navegación suave
• Efectos hover interactivos en elementos clave

🧙‍♂️ Contenido

• 4 Razas principales: Elfos, Orcos, Enanos y Dragonfolk
• Barras de estadísticas animadas para cada raza
• Galería interactiva con filtros por categorías
• Línea de tiempo histórica del reino
• Historia detallada de cada raza y civilización

♿ Accesibilidad

• Etiquetas ARIA para lectores de pantalla
• Navegación por teclado completa
• Contraste optimizado para mejor legibilidad
• Textos alternativos descriptivos en todas las imágenes
• Meta tags SEO completos

📱 Optimización

• Lazy loading para imágenes
• Preload de recursos críticos
• CSS optimizado con variables personalizadas
• Código JavaScript modular y eficiente

🚀 Tecnologías Utilizadas

Frontend

• HTML5 semántico con estructura accesible
• CSS3 con variables personalizadas y Grid/Flexbox
• JavaScript ES6+ modular
• GSAP 3 (GreenSock Animation Platform)
  • ScrollTrigger
  • ScrollSmoother
• Google Fonts (Cinzel + Raleway)

Características Técnicas

• Mobile-first design
• Progressive enhancement
• Intersection Observer API para lazy loading
• CSS Grid y Flexbox para layouts
• CSS Custom Properties para temas
• Smooth scrolling nativo y mejorado

📁 Estructura del Proyecto

MagicForest/
├── index.html              # Archivo principal
├── README.md               # Documentación
├── css/
│   ├── main.css           # Estilos principales
│   └── enhanced.css       # Estilos mejorados y nuevas funciones
├── js/
│   └── app.js             # JavaScript principal con animaciones
├── libs/
│   └── gsap/              # Librerías GSAP
│       ├── gsap.min.js
│       ├── ScrollTrigger.min.js
│       └── ScrollSmoother.min.js
├── fonts/
│   ├── raleway-regular.woff2
│   └── raleway-black.woff2
└── img/
    ├── layer-base.png     # Capas de parallax
    ├── layer-middle.png
    ├── layer-front.png
    ├── ground.png
    ├── dungeon.jpg
    ├── elfo.png          # Imágenes de razas
    ├── orco.png
    ├── enano.png
    └── dragonfolk.png

🎮 Funcionalidades Interactivas

Navegación

• Menú sticky con efectos de transparencia
• Navegación móvil con menú hamburguesa animado
• Scroll suave a secciones específicas
• Botón "volver arriba" con aparición automática

Animaciones

• Parallax multicapa en el header
• Animaciones de entrada en scroll para cada sección
• Barras de progreso animadas para estadísticas
• Efectos hover en imágenes y botones
• Transiciones suaves entre secciones

Galería

• Sistema de filtros por categorías
• Grid responsivo con animaciones
• Overlays informativos en hover
• Efectos de zoom en imágenes

Línea de Tiempo

• Progresión visual de la historia
• Marcadores animados en scroll
• Contenido alternado a izquierda y derecha
• Efectos de aparición secuenciales

🛠️ Instalación y Uso

Requisitos

• Navegador web moderno (Chrome 80+, Firefox 75+, Safari 13+)
• Servidor web local (opcional, para desarrollo)

Instalación

1. Clonar o descargar el proyecto
2. Abrir index.html en un navegador
3. Para desarrollo: usar un servidor local como Live Server

Desarrollo Local

# Usando Python
python -m http.server 8000

# Usando Node.js (http-server)
npx http-server

# Usando VS Code Live Server
# Instalar extensión Live Server y hacer clic derecho > "Open with Live Server"

📊 Performance

Optimizaciones Implementadas

• Lazy loading de imágenes no críticas
• Preload de recursos del hero section
• CSS minificado y optimizado
• JavaScript modular con carga diferida
• Imágenes optimizadas para web

Métricas Objetivo

• First Contentful Paint: < 1.5s
• Largest Contentful Paint: < 2.5s
• Cumulative Layout Shift: < 0.1
• Time to Interactive: < 3s

🎨 Personalización

Variables CSS

El proyecto utiliza variables CSS personalizadas que se pueden modificar fácilmente:

:root {
    --accent: #9d822b;        /* Color principal */
    --accent-hover: #b8973d;  /* Color hover */
    --text: #e7e7e0;         /* Color de texto */
    --bg-dark: #010101;      /* Fondo oscuro */
    --border-radius: 12px;    /* Radio de bordes */
    --transition-fast: all 0.3s ease; /* Transiciones */
}

Modificar Contenido

• Textos: Editar directamente en index.html
• Imágenes: Reemplazar archivos en la carpeta img/
• Colores: Modificar variables CSS en enhanced.css
• Animaciones: Ajustar parámetros en app.js

🌐 Navegadores Compatibles

Navegador	Versión Mínima
Chrome	80+
Firefox	75+
Safari	13+
Edge	80+

📈 Roadmap

Próximas Funcionalidades

• Sistema de carga progresiva con skeleton screens
• Modo oscuro/claro toggle
• Galería modal con navegación por teclado
• Audio ambiente opcional
• Animaciones de entrada más complejas
• Sistema de favoritos local
• Compartir en redes sociales
• PWA (Progressive Web App) support

Mejoras Técnicas

• Webpack para bundling
• TypeScript para mejor type safety
• Jest para testing
• Cypress para E2E testing
• WebP images con fallback
• Service Worker para caching

🤝 Contribuciones

Las contribuciones son bienvenidas. Para contribuir:

1. Fork el proyecto
2. Crear una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abrir un Pull Request

📄 Licencia

Este proyecto está bajo la Licencia MIT - ver el archivo LICENSE.md para más detalles.

👨‍💻 Autor

FxxMorgan

• GitHub: @FxxMorgan

🙏 Agradecimientos

• GSAP por las increíbles librerías de animación
• Google Fonts por las fuentes utilizadas
• Comunidad de desarrollo web por la inspiración y recursos

---

⭐ ¡Si te gusta este proyecto, dale una estrella! ⭐