Por favor, lea todo el README.md

🎨 iThyMag

iThyMag es una galería interactiva de ASCII Art diseñada para entusiastas de la estética retro-digital. La aplicación permite a los usuarios explorar, compartir, editar y organizar sus creaciones favoritas en un entorno visualmente impactante con efectos de plasma dinámicos.

🌐 Sitio Web Real: https://ithymag.web.app/

💻 Repositorio GitHub: https://github.com/Qmaker-programmer/IThyMag

✨ Características Principales

• Galería de ASCII Art: Explora una amplia colección de arte basado en caracteres.
• Fondo de Plasma Dinámico: Un fondo interactivo en Canvas con "blobs" que reaccionan a la configuración y profundidad (simulación 3D).
• Gestión de Contenido: Sistema completo de login, subida de arte, edición y eliminación (integrado con Firebase).
• Panel de Detalles "Push": Visualización lateral de piezas de arte con animaciones suaves y opciones de compartir/copiar.
• Configuración Personalizada: Controla efectos visuales como el desenfoque, colisiones de blobs, modo compacto y reducción de movimiento.
• Persistencia: Las preferencias se guardan localmente mediante cookies.

Vista previa

🛠️ Stack Tecnológico

• Frontend: React (Vite)
• Estilos: CSS3 (Variables personalizadas y animaciones "spring")
• Backend & Auth: Firebase (Firestore & Firebase Auth)
• Renderizado: Canvas API (para el fondo de plasma)

🚀 Instalación y Desarrollo

Sigue estos pasos para ejecutar el proyecto en tu máquina local:

1. Clonar el repositorio

git clone https://github.com/Qmaker-programmer/IThyMag.git
cd IThyMag

2. Instalar dependencias

npm install

3. Configurar Firebase 🔑

Para que la base de datos y la autenticación funcionen, debes configurar tus propias credenciales:

1. Crea un proyecto en Firebase Console.
2. Habilita Authentication (Google y Email/Password) y Cloud Firestore.
3. Crea un archivo llamado src/firebaseConfig.js con el siguiente formato:

// =======================================================
//    iThyMag — firebaseConfig.example.js
//    Configuración de Firebase
//    Copia esto en src/firebaseConfig.js y pon tus llaves
// ========================================================

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth, GoogleAuthProvider } from "firebase/auth";

// Reemplaza estos valores con los de tu proyecto en Firebase Console
const firebaseConfig = {
  apiKey: "TU_API_KEY",
  authDomain: "TU_PROYECTO.firebaseapp.com",
  projectId: "TU_PROYECTO",
  storageBucket: "TU_PROYECTO.appspot.com",
  messagingSenderId: "TU_ID",
  appId: "TU_APP_ID",
  // measurementId: "G-XXXXXXX" // Opcional: Solo si usas Google Analytics
};

const app = initializeApp(firebaseConfig);

export const db = getFirestore(app);
export const auth = getAuth(app);
export const provider = new GoogleAuthProvider();
export const googleProvider = provider;

Nota: O usa el template de firebaseConfig.example.js, pon tu llaves y guardalo en src/firebaseConfig.js

4. Ejecutar en modo desarrollo

npm run dev

🎨 Personalización

Puedes ajustar la experiencia visual desde el menú de Ajustes:

• Fancy Background: Activa/desactiva los blobs de plasma.
• Desenfoque: Cambia la intensidad del efecto glassmorphism.
• Modo ASCII Mono: Fuerza a que el arte se vea en blanco puro para un look más clásico.

📂 Estructura del Proyecto

• App.jsx: Componente principal, lógica de Firebase y layout.
• PlasmaBackground.jsx: Motor de renderizado Canvas para el fondo.
• Settings.jsx: Gestión de configuración y persistencia de cookies.
• App.css e index.css: Estética, temas y animaciones.

🧹 Mantenimiento del Repositorio (.gitignore)

El proyecto ignora automáticamente archivos innecesarios o sensibles:

• node_modules/ - Dependencias instaladas.
• dist/ - Archivos de producción generados por Vite.
• .env y secretos - Credenciales privadas.
• Logs y archivos de configuración de editores (VSCode, JetBrains).

---

Creado por Qmaker/Quack (Andres).

Notas:

• src/firebaseConfig.js - Configuración privada de Firebase (ignorado por seguridad).