Results Bento grid Component

📝 Descripción

Este proyecto es un componente de rejilla Bento que muestra información sobre plataformas visitadas por los usuarios, estadísticas de socialidad y más, de manera interactiva y visualmente atractiva. Está diseñado para ser completamente responsive, con diseños adaptados tanto para móviles como para escritorio. Además, utiliza un diseño CSS Grid moderno y eficiente para su visualización.

✨ Características principales

• Diseño responsive: Compatible con móviles y escritorio.

• Cambio de idioma: Incluye un botón para cambiar entre español e inglés.

• Diseño Grid: Optimizado para una visualización perfecta en desktop.

• Visualización de resultados: Fondos con colores modernos y atractivos.

• Desglose por categorías: Muestra resultados detallados por cada categoría.

🛠️ Tecnologías utilizadas

• HTML: Estructura semántica del componente.

• CSS: Estilos avanzados con Flexbox y Grid.

• JavaScript: Funcionalidad de cambio de idioma.

• Google Fonts: Fuente Hanken y DM Sans para un diseño moderno.

🌐 Cambio de idioma

El proyecto incluye un botón para cambiar entre español e inglés. Esta funcionalidad se implementó utilizando:

• Dos archivos JSON: es.json (para español) y en.json (para inglés).

• JavaScript: Para cargar dinámicamente los textos según el idioma seleccionado.

¿Cómo funciona?

Al hacer clic en el botón de cambio de idioma, el contenido del componente se actualiza automáticamente.

Los textos se cargan desde los archivos JSON correspondientes (es.json para español y en.json para inglés).

🚀 Instalación

Sigue estos sencillos pasos para ejecutar el proyecto en tu entorno local:

1. Clona este repositorio: Abre tu terminal y ejecuta el siguiente comando:

   git clone https://github.com/ImBenja/bento-grid-component.git
   
   

2. Navega al directorio del proyecto:

   cd bento-grid-component
   
   

3. Abre el archivo index.html en tu navegador: Puedes hacerlo doble clic en el archivo o arrastrarlo a tu navegador.

💻 Uso

El componente funciona de la siguiente manera:

1. Carga automáticamente las imagenes sin problemas de carga.

2. Muestra la informacion y un desglose por categorías en diseño Grid.

3. Se adapta automáticamente a diferentes tamaños de pantalla.

4. Presiona el botón de cambio de idioma para alternar entre español e inglés. Los textos se cargan dinámicamente desde los archivos es.json y en.json.

🔗 Demo en vivo

Puedes ver una demostración en vivo del proyecto Aqui

📸 Results

👨‍💻 Autor

• Benjamin Juarez