Documentación y Guía del Proyecto

Ajustes de Perfil y Apariencia

Introduce tu nombre, título profesional, y activa/desactiva la insignia de verificado. Elige la foto de perfil (o video) y selecciona la forma geométrica (circular, cuadrada, redondeada, hexagonal, octogonal, corazón, etc.) junto con un deslizador de tamaño para regular su dimensión sin romper la estructura de la página.

Banner Superior (Imagen o Video)

Define si deseas un banner de fondo superior en tu cabecera. Puedes cargar una imagen o un archivo de video local, o pegar una URL remota. Si decides no incluir banner, la página se reajusta automáticamente sin dejar espacios vacíos.

Biografía por Párrafos

Añade tantos párrafos como quieras. Puedes elegir si cada párrafo tiene una caja de lectura translúcida individual, o si prefieres aplicar la caja de lectura a toda la biografía junta. ¡Soporta código HTML completo!

Gestión de Enlaces y Separadores Transparentes

Puedes arrastrar y soltar (Drag and Drop) los enlaces para reordenar la página. Añade Separadores transparentes entre bloques y regula su altura mediante un deslizador digital para controlar el espaciado exacto.

Exportación Automática

Al finalizar la edición, haz clic en "Exportar config.js" para descargar el archivo. Solo debes reemplazar el archivo config.js en el directorio raíz de tu proyecto para aplicar los cambios a la web oficial.

Declarar las Variables CSS del Tema

Abre index.css y añade las variables de colores y fondos para tu nuevo tema utilizando el selector de clase body.theme-nombre:

/* TEMA VOLCANO */
body.theme-volcano {
  --bg-color: #0b0200;                  /* Color de fondo base */
  --text-muted: #f87171;                /* Color del texto secundario/biografía */
  --accent-color: #f97316;              /* Color de acento principal (Naranja fuego) */
  --accent-glow: rgba(249, 115, 22, 0.4); /* Resplandor/Sombra del color de acento */
  --glass-bg: rgba(30, 8, 4, 0.8);      /* Fondo de los botones (translúcido) */
  --glass-border: rgba(249, 115, 22, 0.15); /* Borde fino de los botones */
  background: radial-gradient(circle at center, #2e0802 0%, #0b0200 100%) !important;
}

Programar la Animación en Canvas (app.js y creator.js)

Para que tu tema tenga un fondo animado en el lienzo (Canvas), abre app.js y localiza la función initBackgroundAnimation().

1. Inicializar Partículas:
Busca el bloque // --- CONFIGURACIÓN E INICIALIZACIÓN DE PARTÍCULAS POR TEMA --- y añade la inicialización de tus partículas:

else if (theme === "volcano") {
  numParticles = 50; // Cantidad de partículas
  for (let i = 0; i < numParticles; i++) {
    particles.push({
      x: Math.random() * width,
      y: Math.random() * height,
      size: Math.random() * 4 + 1,
      speedY: -(Math.random() * 0.4 + 0.1), // Flotan hacia arriba
      alpha: Math.random() * 0.7 + 0.2
    });
  }
}

else if (theme === "volcano") {
  // Limpiar con color de fondo del tema
  ctx.fillStyle = "rgba(11, 2, 0, 0.25)";
  ctx.fillRect(0, 0, width, height);

  particles.forEach((p) => {
    p.y += p.speedY; // Mover
    if (p.y < -20) { p.y = height + 20; p.x = Math.random() * width; } // Reiniciar al salir

    ctx.beginPath();
    ctx.arc(p.x + mouseX * p.size * 0.3, p.y + mouseY * p.size * 0.3, p.size, 0, Math.PI * 2);
    ctx.fillStyle = `rgba(249, 115, 22, ${p.alpha})`; // Naranja
    ctx.fill();
  });
}

Añadir la Opción en el Selector del Creador de Temas

Abre theme-creator/index.html y busca el selector <select id="select-theme">. Añade tu nueva opción:

<option value="volcano">21. Volcano (Fumarola de magma y lava)</option>

Declarar los estilos en index.css

Abre index.css y añade las clases para el estado normal y el estado hover (:hover). Utiliza las variables CSS de acento y resplandor para que tu estilo se adapte automáticamente al tema de fondo seleccionado:

/* ESTILO BORDE NEÓN TRIPLE */
.btn-style-triple-neon {
  background: transparent;
  border: 1.5px solid var(--accent-color);
  box-shadow: 0 0 4px var(--accent-color), 0 0 10px var(--accent-glow);
  color: var(--text-color);
}

.btn-style-triple-neon:hover {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 8px var(--accent-color), 0 0 20px var(--accent-glow);
  transform: translateY(-2px); /* Elevar sutilmente */
}

Registrar la opción en el HTML del Creador

Abre theme-creator/index.html, busca el desplegable <select id="select-button-style"> y añade:

<option value="triple-neon">21. Triple Neon (Líneas finas de neón)</option>

Crear la animación en index.css

Abre index.css y define la animación @keyframes junto con la clase del botón:

/* ANIMACIÓN SPIN-SHAKE (Vibrar rotando) */
.btn-anim-spin-shake {
  animation: spinShakeButton 4s infinite ease-in-out;
}

@keyframes spinShakeButton {
  0%, 90%, 100% { transform: rotate(0deg); }
  92% { transform: rotate(-2deg); }
  94% { transform: rotate(2deg); }
  96% { transform: rotate(-1deg); }
  98% { transform: rotate(1deg); }
}

Registrar la opción en el HTML del Creador

Abre theme-creator/index.html, busca el desplegable <select id="select-button-anim"> y añade:

<option value="spin-shake">22. Spin Shake (Vibración y rotación en bucle)</option>

Crear Cuenta en GitHub

Regístrate de forma gratuita en github.com con tu correo electrónico y elige tu nombre de usuario.

Crear el Repositorio de tu Web

Haz clic en el botón "+" (arriba a la derecha) -> "New repository". Asigna exactamente este nombre a tu repositorio: tuusuario.github.io (reemplaza "tuusuario" por tu nombre real de usuario de GitHub). Asegúrate de que esté configurado como Public.

Subir los Archivos de tu Proyecto

Dentro del repositorio que has creado, haz clic en "uploading an existing file". Arrastra y suelta todos los archivos de tu proyecto (incluyendo index.html, app.js, index.css, config.js y tus fotos/videos locales). Haz clic en "Commit changes" abajo del todo para guardar.

Listo

Tu web estará visible automáticamente en pocos minutos en la dirección: https://tuusuario.github.io.

Crear Cuenta

Regístrate en dash.cloudflare.com.

Crear Proyecto Pages

En tu panel de Cloudflare, ve a la barra lateral izquierda, pulsa en Workers & Pages -> pestaña Pages -> haz clic en "Create an Application" -> "Upload assets".

Subir Carpeta de la Web

Asígnale un nombre a tu proyecto y arrastra la carpeta completa de tu Landing Page al recuadro de subida. Cloudflare procesará la carga en segundos.

Desplegar

Haz clic en "Deploy Site". Cloudflare te proporcionará una dirección única gratuita terminada en .pages.dev (ej: mi-landing.pages.dev).

Instalar Node.js

Descarga e instala la versión recomendada de Node.js desde su web oficial: nodejs.org.

Instalar Surge en tu Ordenador

Abre la Consola de comandos (en Windows busca "cmd" o "PowerShell"). Escribe el siguiente comando y pulsa Intro:

npm install -g surge

Publicar la Web

Navega con la consola hasta la carpeta donde tienes tu proyecto o haz clic derecho en la carpeta de tu proyecto y selecciona "Abrir en terminal". Luego escribe simplemente:

surge

Crear Cuenta

Regístrate en codeberg.org.

Crear Repositorio

Crea un repositorio haciendo clic en el botón "+" -> "New Repository". El repositorio debe tener exactamente el nombre: pages.

Subir Archivos

Sube los archivos de tu Landing Page a la rama principal (main). Una vez subidos, tu web estará online de forma inmediata en la dirección: https://tuusuario.codeberg.page.

Registro

Crea tu cuenta de usuario en meta.sr.ht.

Subir Web

Puedes empaquetar tu carpeta en un archivo comprimido .tar.gz y subirla directamente usando el formulario interactivo de su panel web en srht.site.

Buscar y Registrar

Entra en nic.ua, introduce tu subdominio deseado terminado en .pp.ua (ej: tu-dominio.pp.ua). Agrégalo al carrito a coste $0 y procesa la compra gratuita hasta el final rellenando tus datos.

Iniciar el Bot de Telegram

Abre la aplicación Telegram en tu teléfono o PC, busca el bot oficial de nic.ua: @NicUaBot (o haz clic en t.me/NicUaBot) y envíale el comando /start.

Autorizar Número

El bot te pedirá autorización para validar que eres humano. Haz clic en el botón de Telegram de abajo para compartir tu número telefónico con el bot.

Activar Dominio

Envía al bot el comando /activate. Te mostrará un botón con tu dominio pendiente. Pulsa en él y el bot te notificará que tu subdominio ha sido activado con éxito. Ahora ya puedes configurar sus DNS en el panel web de nic.ua.

Registro

Ve a domain.digitalplat.org y regístrate.

Solicitar Subdominio

Busca un nombre disponible, elige la extensión de subdominio gratuita que prefieras e introduce tus servidores DNS o registros de apuntamiento.

Hacer un Fork

Inicia sesión en tu cuenta de GitHub, entra al repositorio github.com/is-a-dev/register y haz clic en el botón "Fork" (arriba a la derecha) para copiar el repositorio a tu perfil personal.

Crear el Archivo de tu Dominio

Entra a la carpeta domains en tu copia. Haz clic en "Add file" -> "Create new file". Ponle por nombre a tu archivo: tu-usuario.json (ej: si deseas tu-usuario.is-a.dev, tu archivo debe llamarse tu-usuario.json).

Configurar el JSON

Pega este código dentro del editor de tu nuevo archivo JSON:

{
  "owner": {
    "username": "tu-usuario-github",
    "email": "tuemail@gmail.com"
  },
  "record": {
    "CNAME": "tuusuario.github.io"
  }
}

Enviar el Pull Request

En tu repositorio de GitHub, haz clic en la pestaña "Pull requests" -> botón verde "New pull request" -> "Create pull request". Un sistema automatizado comprobará que la estructura sea correcta y fusionará tu archivo en pocos minutos, tras lo cual tu dominio estará activo.

Requisito Inicial

Debes tener tu landing page activa y publicada en GitHub Pages (ej: en tuusuario.github.io).

Hacer Fork del Repositorio de js.org

Ve a github.com/js-org/js.org y haz un Fork de su repositorio en tu cuenta.

Editar el Archivo de Mapeo

Abre el archivo cnames.active.js. Añade tu subdominio respetando el orden alfabético estricto de la lista de esta forma:

"tunombre": "tuusuario.github.io",

Enviar Pull Request

Crea un Pull Request desde su pestaña en GitHub. Una vez aprobado por los mantenedores de la plataforma, el dominio estará listo.

Hacer Fork del Repositorio

Entra en github.com/thedev-id/register y haz un fork a tu perfil.

Crear Fichero JSON

Crea un archivo llamado domains/tuusuario.json. Copia el siguiente esquema en su interior:

{
  "owner": {
    "username": "tu-usuario-github",
    "email": "tuemail@example.com"
  },
  "record": {
    "CNAME": "tuusuario.github.io"
  }
}

Pull Request

Abre el Pull Request en GitHub. El sistema automatizado validará y añadirá tu subdominio de forma gratuita en pocos minutos.

Registro en la Web

Entra en isroot.in y crea tu cuenta de usuario.

Crear Subdominio

Ve a tu panel de control, haz clic en "Add new domain / subdomain", escribe el nombre deseado y pulsa Guardar.

Configurar DNS

En el panel del subdominio de isroot.in, selecciona "DNS Manager" e inserta tu registro de tipo CNAME apuntando al hosting.

Registro y Compra Gratuita

Entra en getfreedomain.name, busca la extensión gratuita que desees, agrégala y finaliza la facturación a coste cero.

DNS Manager

Accede a tus dominios en el menú superior, ve a "DNS Management" y añade tus registros de apuntamiento.

Entrar al panel DNS del Proveedor

Accede a tu cuenta de dominio (nic.ua, isroot.in, getfreedomain.name, etc.) y ve a la sección de administración de dominios / DNS.

Crear Registro CNAME

Añade un registro nuevo con los siguientes datos exactos:

• Tipo de Registro (Type): CNAME
• Nombre / Host (Name): @ (o déjalo en blanco si representa tu dirección principal)
• Valor / Destino (Value / Target): La dirección de tu hosting de origen (ej: tuusuario.github.io o tu-sitio.pages.dev).
• TTL: Automático o 14400.

Guardar Cambios

Aplica la configuración. Los cambios tardarán unos minutos (o hasta unas pocas horas) en actualizarse por internet.

Agregar tu Dominio en Cloudflare

Inicia sesión en dash.cloudflare.com y haz clic en "Add a Site". Introduce tu subdominio registrado (ej: tu-dominio.pp.ua) y selecciona el plan gratuito ($0).

Cambiar los Nameservers en tu Proveedor

Cloudflare te dará dos direcciones de Servidor de Nombres (Nameservers). Por ejemplo:

• eva.ns.cloudflare.com
• will.ns.cloudflare.com

Añadir Registro DNS en Cloudflare

Una vez que Cloudflare detecte el cambio de Nameservers (te enviará un correo), ve a la pestaña DNS -> Records de Cloudflare y pulsa en "Add record":

• Type (Tipo): CNAME
• Name (Nombre): @
• Target (Destino): Escribe tu hosting (ej: tuusuario.github.io o tu-sitio.pages.dev)
• Proxy Status (Nube): Mantén activa la nube naranja (Proxied) para disfrutar del escudo y SSL gratuito.

Configurar los Campos SEO

Rellena las opciones en el panel del creador:

• Dominio de tu Web: Escribe la URL exacta de tu sitio (ej: https://tu-usuario.pages.dev). Es fundamental para que los bots ubiquen las rutas de tus imágenes.
• Título del Enlace: El título principal de la tarjeta. Por defecto se autogenera uniendo tu Nombre + Cargo (si no lo has modificado manualmente).
• Descripción: Un texto breve sobre tu web. Se pre-carga con el primer párrafo de tu biografía de forma inteligente.

Seleccionar el Origen de la Imagen

Elige cuál quieres que sea la imagen de portada de tu tarjeta de compartido entre estas 5 opciones:

• Foto de Perfil (Avatar): Muestra tu foto o avatar principal en la tarjeta.
• Banner de Cabecera: Muestra el banner superior configurado.
• Código QR de tu Web: Genera dinámicamente un código QR escaneable directo a tu landing usando la API de QRServer. Ideal para que cualquiera pueda escanear tu tarjeta visual de compartido y acceder directamente a tu web.
• URL Personalizada: Introduce una ruta de archivo local (ej: assets/og-image.jpg) o una URL de internet.
• Sin Imagen: Excluye la imagen para mostrar únicamente el bloque de texto (título y descripción).

Simular y Copiar el Código

Observa la previsualización interactiva estilo Telegram/WhatsApp. Si estás satisfecho, haz clic en el botón "Copiar Código". Esto copiará las etiquetas <meta> correspondientes al portapapeles.

Pegar en el archivo index.html

Abre tu archivo index.html en tu ordenador utilizando cualquier editor de código o de texto. Busca el bloque <head> (cerca de la línea 1-20) y pega el código copiado dentro. Guarda el archivo y súbelo a tu hosting.