Directorio streamers de la comunidad venezolana.

TODO el proyecto está muy mal hecho sobre una estructura bastante rígida y posiblemente, nada flexible. Si al forkear o resubir haces cambios mínimos es bastante probable que el sitio comience a desmoronarse o deje de funcionar entero, mi recomendación si quieres reusar es que trates de entender la estructura y te adaptes a ella.

---

Demo

https://streamhub.com.es/

---

Que funciones posee el proyecto

• Páginas totalmente creadas y responsivas para HOME - FAQ - Vista de directorio - TEMPLATE de perfiles.
• Funciones generales del sitio:
  • Headerbar normalizada con botón volver, logo escrito, botón de temas
  • Funciones de tema día/noche
  • Footer normalizado (salvo en Directorio), con fecha, tm, y hotlinks
• Home
  • Web simple con título, subtítulo y botones de acción
  • 3 estilos de botones de acción, énfasis 1 (azul), énfasis 2 (verde) y normal (varía según tema de la web)
  • Fondo de pantalla fijo y adaptable, que parece cambiar con cambio de tema
• Directorio:
  • Sistema de búsqueda actualizable en tiempo real
  • Selector de plataforma, opción de todos y luego específicas para Twitch, Kick, YouTube y TikTok. Los botones poseen color relativo a la plataforma al estar activos
  • Filtros dinámicos por etiquetas y juegos (ocultos por defecto)
  • Botones de limpieza de búsqueda (limpia todo menos la plataforma)
  • Integración con API Twitch para saber el estado de stream de las personas
  • En la categoría TODOS y TWITCH se habilita el botón de “En vivo” para filtrar.
• Perfil individual por creador:
  • Sistema estilo Linktree/Beacons donde se muestran las redes sociales de manera simple y directa
  • Botón disponible para ver "perfil completo" resaltado para no pasar desapercibido
  • Perfil completo además de las redes sociales muestra la descripción traída de Twitch
  • Sección de etiquetas que identifican al streamer según su manera de hacer directos
  • Sección de juegos asociados al creador con su propia caratula

---

Estructura general

El proyecto está planteado como un sitio estático con varias páginas y recursos compartidos.

/
├── index.html
├── directorio/
│   └── index.html
├── FAQ/
│   └── index.html
├── registro/
│   └── index.html
├── billy/
│   └── index.html
├── u/
│   └── CARPETAporUSUARIO
│       └── index.html
├── css/
├── js/
├── assets/
│   ├── avatars/
│   ├── fonts/
│   └── svg/
└── data/

---

Funcionalidades

Directorio

• Grid de tarjetas responsive.
• Infinite scroll / carga progresiva.
• Filtro por nombre.
• Filtros por etiquetas.
• Filtros por juegos.
• Selector de plataforma.
• Estado “En vivo” cuando aplica. [file:5]

Perfiles

• Avatar.
• Username.
• Descripción.
• Residencia y nacionalidad.
• Redes sociales.
• Juegos y etiquetas del creador.

UI y experiencia

• Header unificado.
• Tema claro/oscuro.
• Componentes reutilizables.
• Iconografía SVG con color adaptado al tema mediante currentColor o máscaras CSS.

FAQ y páginas auxiliares

• Preguntas frecuentes del proyecto.
• Estado general del sitio.
• Información de contacto y consideraciones del proyecto.

---

Datos de creadores

Todos los datos son proporcionados por los mismos creadores mediante un formulario Google, luego convertido en CSV normalizado y llevado a JSON.

Ejemplo de objeto

{
  "id": 1,
  "username": "Nombre",
  "streamPlatform": "twitch",
  "avatar_url": "assets/avatars/Nombre.webp",
  "tags": ["Just Chatting", "Vtuber"],
  "games": ["Valorant", "Minecraft"],
  "bio": "Texto opcional",
  "followers": "`XXXXX`",
  "residence": "Caracas, Venezuela",
  "nationality": "Venezuela",
  "socials": {
    "twitch": "handle",
    "kick": "handle",
    "x": "handle",
    "ig": "handle",
    "youtube": "handle",
    "tiktok": "handle",
    "email": "correo@dominio.com"
  }
}

Valores válidos para streamPlatform

• twitch
• kick
• youtube
• tiktok
• none (uso interno, no visible como filtro)

---

Requisitos

• Conocimientos básicos o intermedios de HTML, CSS, JavaScript y JSON.
• Editor de código como VS Code, Notepad++ o similar.

---

Consideraciones técnicas

• El proyecto depende bastante de IDs, clases y rutas concretas.
• El sistema de tema usa data-theme sobre el elemento raíz y persistencia con localStorage.
• Parte de la interfaz reutiliza variables CSS para colores, bordes, superficies y estados visuales.
• Los iconos sociales pueden pintarse según el color del tema usando máscaras CSS y currentColor.

---

Edición y mantenimiento

Si vas a extender el proyecto, intenta respetar estas reglas:

• No cambies nombres de IDs o clases sin revisar los JS asociados.
• No cambies rutas de assets, css o js sin ajustar todos los enlaces relativos.
• Mantén el mismo esquema de datos en los creadores.
• Si agregas nuevas páginas, reutiliza el mismo sistema de tema y navegación.

---

Uso

El proyecto es libre, pero se agradece la mención si lo reutilizas o adaptas.

---

Autoría

Diseñador y desarrollador de StreamHub: Billy Billete
Integración de Twitch: Lighdx

---

Créditos

• ChatGPT Business
• Perplexity Pro
• Idea original/inspiración: Giyusk mediante Twitter/X

Assets ligeramente editados y adaptados

• 404 page by Jon Kantner
• Rotating stars by Lucas Bebber
• Star flashing effect by Matt Edwards

---

Descargo

Proyecto hecho por diversión y sin fines de lucro. Las personas listadas en la web enviaron su información voluntariamente para aparecer de forma pública, y cualquier reutilización del template queda bajo responsabilidad de quien lo implemente.