🎮 LA FORJA - Sitio Web del Estudio

Sitio web estático del estudio de videojuegos indie LA FORJA, diseñado con máximo impacto visual y animaciones espectaculares.

🎨 Paleta de Colores

• Fondo: #222222 (Gris Carbón Oscuro)
• Yunque: #4A4A4A (Gris Pizarra Oscuro)
• Lava: #FF8800 (Naranja de Lava)
• Llama: #FF4500 (Naranja Fuerte)
• Chispa: #00FFFF (Turquesa Eléctrico)
• Detalles: #FFFF00 (Amarillo Brillante)

✨ Características

• ✅ 100% HTML/CSS/JavaScript - Sin dependencias, sin backend
• ✅ Animaciones espectaculares - Máximo impacto visual
• ✅ Navbar moderno - Efectos glassmorphism y animaciones suaves
• ✅ Sistema de partículas - 30 partículas animadas en hero
• ✅ Efectos 3D - Cards con tilt effect y transformaciones
• ✅ Scroll animations - Elementos que aparecen al hacer scroll
• ✅ Gradientes animados - Fondos y textos con movimiento
• ✅ Responsive design - Funciona perfecto en todos los dispositivos
• ✅ Sin dependencias - JavaScript vanilla puro

🚀 Inicio Rápido

1. Abre index.html en tu navegador
2. ¡Listo! El sitio funciona inmediatamente

No necesitas servidor, base de datos, ni configuración alguna. Solo abre el HTML.

📁 Estructura

website/
├── index.html          # Página principal
├── games.html          # Lista de juegos
├── game.html           # Detalle de juego
├── about.html          # Sobre nosotros
├── contact.html        # Contacto
├── css/
│   └── style.css       # Estilos principales
├── js/
│   └── app.js          # JavaScript principal
├── logo.png            # Logo del estudio
└── README.md           # Este archivo

🎯 Páginas

• index.html - Hero espectacular con partículas y animaciones
• games.html - Grid de juegos con efectos 3D
• game.html - Detalle individual de cada juego
• about.html - Información del estudio
• contact.html - Formulario de contacto

🎬 Animaciones Implementadas

Hero Section

• Gradiente animado de fondo
• 30 partículas flotantes
• Texto con gradiente animado
• Efectos de glow pulsante
• Animaciones de entrada escalonadas

Navbar

• Backdrop blur (glassmorphism)
• Efectos hover avanzados
• Cambio de estilo al hacer scroll
• Logo con animación
• Menú móvil con animación

Game Cards

• Efecto 3D tilt al mover el mouse
• Transformaciones en perspectiva
• Shine effect al hover
• Elevación y scale
• Ripple effect al click
• Animaciones de entrada escalonadas

Scroll Animations

• Elementos que aparecen al hacer scroll
• Fade in desde abajo
• Delays escalonados para efecto cascada

Botones

• Gradientes animados
• Efecto ripple
• Transformaciones 3D
• Glow pulsante

🎨 Personalización

Colores

Edita las variables CSS en css/style.css:

:root {
    --color-fondo: #222222;
    --color-lava: #FF8800;
    /* ... más colores ... */
}

Contenido

• Edita index.html para cambiar contenido
• Modifica js/app.js para agregar más juegos
• Personaliza estilos en css/style.css

📱 Responsive

El sitio está completamente optimizado para:

• 💻 Desktop
• 📱 Tablet
• 📱 Mobile

🎯 Tecnologías

• HTML5 semántico
• CSS3 con animaciones avanzadas
• JavaScript ES6+ vanilla (sin frameworks)

🌟 Efectos Visuales

1. Glassmorphism - Header con blur
2. 3D Transforms - Perspectiva en elementos
3. Particle System - Partículas flotantes
4. Gradient Animations - Gradientes en movimiento
5. Microinteractions - Detalles en cada interacción
6. Scroll Reveal - Elementos que aparecen al scroll
7. Glow Effects - Efectos de brillo
8. Shine Effects - Brillos que pasan

📝 Notas

• El logo debe estar en la raíz como logo.png
• Todo es estático y funciona sin servidor
• Perfecto para hosting estático (GitHub Pages, Netlify, etc.)

---

LA FORJA - Forjando experiencias únicas en videojuegos indie. 🎮✨