Creo productos de IA. Este sitio es uno.

Lo que construí

• Creación del proyecto y puesta en línea
• El cerebro del chatbot: cómo busca y cómo responde
• Rediseño de la página del chatbot

• Creación del proyecto y despliegue en Cloudflare Pages
• La función de chat y la mayor parte del RAG: Astra DB, el umbral de similitud, los prompts de sistema
• Acciones contextuales y sugerencias rápidas en la API, y una página de IA rediseñada

Cómo jugar

1. Pasa el cursor por la pantalla para pilotar la nave blanca.
2. Player 2, en naranja, te cubre.
3. Dibuja enemigos en la cuadrícula: llegan con esa forma.

Lo que construí

• El editor de niveles y la carga de sus niveles en el juego
• Comprobaciones automáticas cada vez que el equipo cambiaba el código
• La guía escrita de cómo se comunican los jugadores con el servidor

• El editor de mapas en Python, con exportación a JSON
• La carga de niveles JSON en el juego y en el servidor
• El pipeline de CI en GitHub Actions
• La documentación del protocolo y del editor, y el aumento de velocidad en el servidor

La cuadrícula es una versión para navegador del editor que escribí. El original es una herramienta de escritorio.

Cómo jugar

1. Haz clic en un aspecto: Suave, Píxel o Texto. El juego no se detiene.
2. Juega Player 2. Pulsa una flecha para tomar el control.
3. En el móvil, desliza el dedo por la pantalla.

Lo que construí

• El juego Snake
• La primera versión de sus tres aspectos
• Los gráficos y la guía para otros desarrolladores

• Snake: control por teclado, bordes que dan la vuelta, puntuación
• La primera versión de los tres renderizadores: SFML, SDL2, ncurses
• Sprites para SFML y SDL2, y la documentación de la interfaz

La línea de puntos es la ruta que Player 2 ha planeado hasta la manzana.Redibujado para el navegador: un solo estado de juego, tres renderizadores. Player 2 planifica su ruta con una búsqueda en anchura.

Cómo jugar

1. Mantén pulsado el botón del ratón sobre la pantalla, o la barra espaciadora, para subir.
2. Suelta para bajar.
3. Coge las monedas, esquiva los láseres.

Lo que construí

• El servidor y sus conexiones con los jugadores
• La lectura del archivo de nivel
• Monedas, obstáculos y colisiones
• Decidir quién gana y quién pierde

• El servidor: conexiones y jugadores, con poll()
• La carga del mapa ASCII y su escalado a 1920 por 1080
• Monedas, obstáculos, colisiones y desplazamiento
• Condiciones de victoria y derrota

El recuadro bajo el juego muestra los números del árbitro, en directo.Los paneles bajo el juego son el lado del servidor. Los nombres de los mensajes son los reales; los valores se calculan aquí.

Cómo jugar

1. Pulsa una flecha o un botón: tu comando entra en la cola azul.
2. El servidor lo ejecuta cuando se cumple su tiempo. Camina hasta la comida dorada y recógela.
3. Envía más de 10 comandos de golpe y el servidor responde ko.

Lo que construí

• El servidor al que se conectan todos los jugadores de IA y la vista 3D.
• La cola de comandos de cada jugador, con sus tiempos.
• Avanzar y enviar un mensaje a todos los demás jugadores.

• Estructuras del servidor, el socket y el bucle poll(), conexión de clientes y comprobación de equipos, análisis de argumentos.
• Comandos del protocolo gráfico: msz, tna, bct, mct, ppo, pnw.
• La cola de comandos diferidos de cada cliente: 10 plazas, tiempo de ejecución según la frecuencia.
• Forward, Broadcast y Connect_nbr, corrección de fugas de memoria y una clase de red en el cliente 3D.

Recreado para el navegador: una copia simplificada de las reglas del servidor se ejecuta en esta página. El servidor real es un programa en C que habla con sus clientes por TCP.

Cómo jugar

1. Elige un campeón. Player 2 se queda con el otro.
2. Mira cómo los dos escriben en la memoria compartida. El programa que deja de decir live queda eliminado.
3. Pulsa Pausa y luego Paso para leer la instrucción que tu programa ejecutará a continuación.

Lo que construí

• Cargar cada campeón desde su archivo y colocarlo en la memoria compartida.
• Leer cada instrucción a partir de los bytes y ejecutarla después de su retardo.
• Llevar la cuenta de quién dijo live, para saber quién sigue en juego.

• Lectura de los campeones .cor y conversión entre decimal y hexadecimal.
• Creación de la arena y colocación de los campeones.
• Decodificación de instrucciones, registro de cada live, y las instrucciones and, or, xor y aff.
• Retardos de las instrucciones y gestión de errores.

Recreado para el navegador con un juego de instrucciones reducido y tres campeones escritos para esta página. La máquina real está en C y ejecuta archivos .cor compilados.

Cómo jugar

1. Elige un lenguaje o marca los archivos de tu repositorio.
2. Sube un commit y sigue cada paso, con el registro de Jenkins.
3. Prueba dos lenguajes a la vez, ningún archivo de lenguaje o el mismo commit dos veces.

Lo que construí

• Las diez imágenes Docker: una base y una standalone para cada uno de los cinco lenguajes
• La imagen de Befunge, que compila su propio intérprete desde el código fuente
• La guía que explica cómo construir y usar las imágenes

• Diez Dockerfiles, Dockerfile.base y Dockerfile.standalone, para C, Java, JavaScript, Python y Befunge
• Builds multietapa: compilar en una imagen y ejecutar en otra más pequeña; cfunge compilado con cmake para Befunge
• docs/docker_image.md: comandos de build, reglas de cada imagen, estructura del repositorio

Reproducido en tu navegador: no se construye nada de verdad. Las reglas de detección, la elección del build y los pasos de los Dockerfiles vienen del proyecto. El paso de despliegue en Kubernetes no se muestra porque no se terminó.

Cómo jugar

1. Cambia un número en el archivo de escena. La imagen se redibuja, primero tosca y luego nítida.
2. Rompe el archivo a propósito: el error muestra la línea y qué falla.
3. Player 2 mueve la luz, una esfera y la cámara hasta que empiezas a escribir.

Lo que construí

• La parte que lee el archivo de escena: cámara, esferas, planos y luces
• La clase Scene, que contiene la cámara, las formas y las luces

• Análisis de la escena con libconfig++: cámara (resolución, posición, rotación, campo de visión), esferas, planos, luz ambiental y luces direccionales
• La clase Scene: un único contenedor para la cámara, las primitivas y las luces
• Formas creadas mediante el PrimitiveBuilder del equipo

Recreado en el navegador. El formato de escena sigue el parser del proyecto. Las comprobaciones extra y el pequeño renderizador que dibuja la imagen se escribieron para esta página, con sombras que el original no tenía.

Cómo jugar

1. Haz clic en el terminal, escribe un comando y pulsa Intro.
2. Envía la salida a un archivo con > o >>, o a otro comando con |.
3. Escribe cat << END, unas líneas y luego END: el shell las lee como entrada.

Lo que construí

• El bucle del prompt: leer una línea, ejecutarla y volver a mostrar el prompt.
• Buscar los programas en las carpetas del PATH y ejecutarlos.
• Los comandos integrados: cd, env, setenv, unsetenv, exit.
• Enviar la salida a archivos, leer el texto escrito después de << y pasar la salida de un comando al siguiente.

• Prompt «$> » leído con getline; fork, execve y waitpid; un mensaje cuando el programa falla (Segmentation fault, Floating exception).
• cd con una ruta, sin argumento (HOME) y cd -, actualizando PWD y OLDPWD; setenv con comprobación del nombre, unsetenv, env, exit.
• Redirecciones > y >> y el heredoc << con dup2 y pipe; el separador ;.
• Un pipe entre dos comandos y mi propia biblioteca printf.

Recreado para el navegador: una pequeña copia de las reglas del shell se ejecuta en esta página, con un sistema de archivos ficticio y algunos programas. Los shells reales son programas en C que ejecutan programas reales.

Cómo jugar

1. Mueve el control deslizante o elige una regla: la 30 parece aleatoria, la 90 dibuja triángulos y la 110 hace crecer estructuras.
2. Haz clic en las casillas pequeñas para invertir una parte de la regla.
3. O escribe tú mismo el comando, con las mismas opciones que el programa real.

Lo que construí

• Leer las opciones escritas tras el nombre del programa y rechazar las incorrectas.
• Calcular cada nueva línea de celdas a partir de la de arriba.
• Mostrar las líneas centradas en la ventana, con asteriscos.

• Análisis de argumentos: --rule (obligatorio), --start, --lines, --window (80 por defecto), --move; código de salida 84 ante un argumento incorrecto.
• La siguiente generación para las reglas 30, 90 y 110.
• El bucle de visualización y la configuración del proyecto Stack.

Recreado para el navegador. El programa original en Haskell acepta las reglas 30, 90 y 110; esta página ejecuta cualquier regla de 0 a 255.

Cómo jugar

1. Dibuja en el tablero: Player 2 se aparta.
2. Cambia el color o el tamaño, o coge la goma, en la barra de herramientas.
3. Guarda como PNG para conservar tu dibujo.

Lo que construí

• La ventana y los botones de la barra de herramientas
• La elección del color y del tamaño del lápiz, y la goma
• La pantalla de ayuda y el guardado del dibujo como imagen

• Ventana CSFML y barra de herramientas: un sprite por botón, detección del botón pulsado al hacer clic
• Ocho colores, tres radios de lápiz (5, 18, 35 px), una goma que pinta rgb(22, 22, 22)
• Ayuda que se muestra u oculta, tablero copiado de la ventana a un archivo de imagen

Recreado para el navegador en TypeScript a partir de la versión en C: mismos colores, tamaños y goma. Aquí el lápiz rellena los huecos entre los círculos, y el archivo es un PNG con fecha en lugar de test.jpg.

Cómo jugar

1. Escribe un mensaje y una clave.
2. Cambia entre el modo bloque y el modo flujo, y mira cómo cambia cada byte.
3. Descífralo: XOR con la misma clave devuelve el mensaje.

Lo que construí

• El cifrado XOR, en modo bloque y en modo flujo
• Convertir texto a hexadecimal y viceversa
• El punto de entrada que envía cada comando al algoritmo correcto

• xor_block y xor_stream: bytes invertidos por bloque (little endian) y luego XOR con la clave
• El modo flujo rellena el último bloque con ceros y los quita al descifrar
• hex_to_bytes y print_hex, un lector dinámico de stdin, main que dirige a xor, aes y rsa

Recreado para el navegador a partir de la versión en C, solo XOR. XOR con una clave corta repetida es un cifrado de clase: no protege secretos reales.

Cómo jugar

1. Mantén pulsada la tecla: poco para un punto, más para una raya.
2. Mantenla un segundo o más para terminar la letra.
3. Lee tu nombre en el campo y luego entra (es un juguete).

Lo que construí

• La entrada en código Morse de la pantalla de inicio de sesión
• Pulsación corta para un punto, larga para una raya, muy larga para la letra siguiente
• La traducción a letras en directo, y Retroceso para corregir un error

• keydown y keyup sobre Espacio miden la pulsación: menos de 200 ms, un punto; menos de 800 ms, una raya; 1 s o más, un fin de letra
• Una tabla Morse invertida para hacer búsquedas, que decodifica letra a letra en cada pulsación
• La plantilla y el estilo del componente, y la ruta, migrada después a provideRouter

Recreado para el navegador a partir de la versión en Angular, con los mismos tiempos. Los botones Punto, Raya y Letra siguiente son un añadido de esta página. No hay cuenta ni contraseña.