Pablo Ortiz
Full-stack · Front · Back · Hardware

Del navegador al metal.From the browser to the metal.

Soy Pablo Ortiz, desarrollador full-stack. Diseño y construyo el producto entero — la interfaz web, el servidor y el firmware, y la electrónica que lo mueve. De principio a fin, yo solo. I'm Pablo Ortiz, a full-stack developer. I design and build the whole product — the web interface, the server and firmware, and the electronics that drive it. End to end, on my own.

JavaScript C++ ESP32 Firmware tiempo realReal-time firmware PWA España · disponibilidad inmediataSpain · available now
Robot pianista construido por Pablo Ortiz, con LEDs encendidos
// proyecto propio · diseñado y construido de cero// personal project · designed and built from scratch
Un proyecto, tres disciplinasOne project, three disciplines

Un robot que toca el piano de verdad — y todo lo que hay detrásA robot that really plays the piano — and everything behind it

Un mismo proyecto me obligó a trabajar en las tres capas que casi nunca reúne una sola persona: la web, el software embebido y la electrónica. Esto es lo que hace cada una.A single project pushed me across the three layers one person rarely covers: the web, the embedded software and the electronics. Here's what each one does, in plain terms.

01
Frontend

La aplicación webThe web app

Un secuenciador musical completo que funciona dentro del navegador: editor visual de notas, análisis de la música en tiempo real y la interfaz que manda al robot qué tocar. JavaScript puro, hecho a mano.A full music sequencer that runs inside the browser: a visual note editor, real-time music analysis and the interface that tells the robot what to play. Plain JavaScript, built by hand.

~30 módulos · PWA instalable~30 modules · installable PWA
02
Backend · Firmware

El cerebro del robotThe robot's brain

El programa que vive dentro del chip: recibe la música por WiFi o por cable, la coordina y decide milisegundo a milisegundo qué mueve cada motor y qué luz se enciende. C++ sobre ESP32.The program that lives inside the chip: it receives the music over WiFi or cable, coordinates it and decides millisecond by millisecond which motor moves and which light turns on. C++ on ESP32.

Tiempo real · protocolo propioReal-time · custom protocol
03
Hardware

La máquina físicaThe physical machine

Electrónica, motores y piezas diseñadas e impresas en 3D. Hasta 128 dedos robóticos que pulsan las teclas y 60 luces que se encienden con cada nota, como en un piano de Synthesia.Electronics, motors and parts designed and 3D-printed. Up to 128 robotic fingers pressing the keys and 60 lights that fire with every note, Synthesia-style.

128 servos · 60 LEDs
3
Lenguajes
JS · C++ · HTML/CSS
Languages
JS · C++ · HTML/CSS
3
Capas
web · firmware · hw
Layers
web · firmware · hw
128
Servos
direccionables
Servos
addressable
60
LEDs
sincronizados
LEDs
synced
2
Canales
WiFi · USB
Channels
WiFi · USB
1
Persona
de principio a fin
Person
end to end
Cómo funcionaHow it works

De una idea musical a una nota tocadaFrom a musical idea to a played note

La misma señal viaja desde el navegador hasta el movimiento físico de la tecla. Estas son las piezas que construí para que eso ocurra en tiempo real.The same signal travels from the browser to the physical movement of the key. These are the pieces I built to make that happen in real time.

NavegadorBrowser
ComponesYou compose
Escribes la música en la app web y pulsas play.You write the music in the web app and hit play.
WiFi / USB
Se transmiteIt's sent
Un protocolo propio la envía por red o por cable.A custom protocol sends it over network or cable.
ESP32
Se coordinaIt's coordinated
El firmware ordena los eventos al milisegundo.The firmware orders events to the millisecond.
Servos + LEDs
SuenaIt plays
Los motores pulsan las teclas y las luces siguen la música.The motors press the keys and the lights follow the music.
Por qué tiene méritoWhy it's hard

Lo difícil no se ve — pero estáThe hard part is invisible — but it's there

Tiempo real de verdadReal real-time

Coordinar decenas de motores, luces y sonido con precisión de milisegundos, y que el sistema se autocorrija solo cuando empieza a desincronizarse. No es "que funcione": es que no se note el desfase.Coordinating dozens of motors, lights and sound with millisecond precision, and having the system self-correct when it starts drifting. It's not "make it work": it's make the lag invisible.

Dos mundos, un lenguajeTwo worlds, one language

Diseñé un protocolo de comunicación propio que funciona igual por WiFi que por cable USB. La app no necesita saber cómo está conectado el robot — simplemente habla, y el robot obedece.I designed a custom communication protocol that works the same over WiFi as over USB. The app doesn't need to know how the robot is connected — it just speaks, and the robot obeys.

Sin frameworks, sin atajosNo frameworks, no shortcuts

La aplicación web está construida a mano, con la arquitectura pensada de cero. Demuestra que entiendo lo que ocurre por debajo, no solo cómo encajar piezas que ya hizo otro.The web app is built by hand, with the architecture designed from scratch. It shows I understand what happens underneath, not just how to wire together pieces someone else made.

Interfaz del secuenciador musical web construido por Pablo Ortiz
La parte softwareThe software side

No solo mueve motores: entiende músicaIt doesn't just move motors: it understands music

El secuenciador web no se limita a reproducir notas. Las analiza mientras compones —detecta la tonalidad, los acordes y las cadencias— y les aplica una capa de interpretación expresiva antes de enviarlas al robot.The web sequencer doesn't just play notes back. It analyzes them as you compose — detecting key, chords and cadences — and applies a layer of expressive interpretation before sending them to the robot.

  • Editor visual de notas con arrastrar y soltarDrag-and-drop visual note editor
  • Análisis armónico en tiempo real, sin frenar la interfazReal-time harmonic analysis without freezing the UI
  • Importación y exportación de archivos MIDI estándarStandard MIDI file import and export
  • Compatible con Synthesia y cualquier reproductor MIDI (USB-MIDI)Works with Synthesia and any MIDI player (USB-MIDI)
▶ Probar el secuenciador▶ Try the sequencer
La construcciónThe build

El robot por dentroInside the robot

Servos ES08MA, piezas diseñadas e impresas en 3D, cableado y una tira de LEDs — todo montado y ajustado a mano, pieza a pieza.ES08MA servos, parts designed and 3D-printed, wiring and an LED strip — all assembled and tuned by hand, piece by piece.

Stack

Con qué trabajoWhat I work with

Todo lo de abajo lo he usado de verdad, construyendo y depurando un sistema real de principio a fin.Everything below I've actually used, building and debugging a real system end to end.

Frontend

JavaScript (ES6 modules)HTMLCSS PWAWeb Audio APIWeb Serial API WebSocketWeb Workers Arquitectura modularModular architecture

Backend · EmbebidoBackend · Embedded

C++ESP32 / ESP32-S3 Firmware tiempo realReal-time firmware WebSocket serverSerial / USB Diseño de protocolosProtocol design Scheduling de eventosEvent scheduling

Hardware

Electrónica de servosServo electronics PCA9685LEDs WS2812BI²C Diseño 3D3D design Impresión 3D3D printing

Herramientas · ConceptosTools · Concepts

Git / GitHub AlgoritmosAlgorithms Análisis armónicoHarmonic analysis Depuración de sistemasSystems debugging Autonomía end-to-endEnd-to-end autonomy
ContactoContact

¿Hablamos?Let's talk?

Disponible para incorporarme a un equipo. Encantado de enseñar el proyecto en detalle o resolver cualquier duda técnica.Available to join a team. Happy to walk through the project in detail or answer any technical questions.