RVA Builds

Sitio, design system y backend en cuatro días

// brief.json
const rvaBuilds = {
  type: "Diseño y desarrollo web",
  year: 2026,
};

brief.json

Sitio de RVA Builds, la iniciativa que conecta a estudiantes de las escuelas públicas de Richmond con carreras técnicas. Lo diseñé y desarrollé en cuatro días, del sistema visual al backend que recibe solicitudes en tiempo real. Con Claude generé el design system a partir de la marca.

Año: 2026
Cliente: Richmond Ed Fund
Industria: Educación y empleo
Duración: 4 días
Tipo: Diseño y desarrollo web

Servicios

Diseño webDesign systemDesarrolloBackend

Ver sitio en vivo

Mostrado solo con fines de portafolio. Las marcas pertenecen a sus dueños; si eres el titular y quieres que lo retire, escríbeme. Términos ↗

RVA Builds, un sitio en días, no en meses

1 0 1 1 0 0 0 1 0 1 1 0 0 1 1 1
1 1 1 1 0 0 0 1 0 1 0 1 0 0 1 0
0 1 0 0 0 0 0 0 1 1 1 0 1 1 0 1
1 1 0 1 0 1 1 1 1 0 1 1 1 1 1 0
1 0 0 0 0 0 1 1 0 0 1 0 1 0 0 1
1 0 0 0 0 1 0 1 1 1 1 1 0 0 1 1
0 0 0 1 1 1 1 0 0 1 0 1 1 1 0 0
0 1 0 1 1 1 1 0 0 1 1 0 1 1 1 0
1 0 0 1 1 0 1 1 1 1 0 0 1 0 1 0
0 0 0 1 1 0 1 1 0 0 1 1 1 0 0 0
1 1 0 0 0 0 0 0 1 0 0 0 1 0 1 1
1 1 1 0 0 0 1 1 1 0 0 0 1 0 1 1

01El reto

Un sitio en días, no en meses

Richmond Ed Fund acababa de lanzar RVA Builds y necesitaba un sitio público de inmediato. Tenía que explicar la iniciativa y empezar a recibir solicitudes de estudiantes y empleadores. Y debía vivir en una infraestructura a nombre del cliente, sin licencias de CMS ni dependencia de un desarrollador.

// dos-caminos-desde-la-home.md
const rvaBuilds = {
  services: ["Diseño web", "Design system"],
  tags: ["Web", "Design system", "IA"],
};

1 0 0 0 1 0 1 0 0 1 0 1 0 1 0 1
0 0 1 0 0 1 1 1 1 0 0 1 0 0 1 1
0 1 0 1 0 0 0 0 0 1 0 1 1 0 0 1
0 0 0 0 0 0 1 1 1 0 0 0 1 1 0 1
1 0 0 0 0 1 1 1 0 0 0 0 0 0 0 1
1 0 1 0 0 0 0 0 0 1 0 0 1 0 1 0
1 1 0 1 1 1 0 1 0 0 0 0 1 1 1 1
0 1 1 1 1 0 1 0 0 1 0 1 1 1 1 1
1 0 1 0 1 0 0 1 0 1 1 1 0 0 0 1
0 0 1 0 0 0 0 1 1 0 0 0 0 0 0 0
1 1 1 0 0 1 1 0 0 1 1 1 1 0 1 1
0 0 1 1 1 1 1 1 1 0 1 1 1 1 1 0

02Sistema y experiencia

Dos caminos desde la home

Dividí la home en dos caminos: estudiantes y empleadores. Así cada público se reconoce de un vistazo y llega a una página con sus propios textos y llamados a la acción. Para llegar a tiempo, entrené a Claude con la marca de Richmond Ed Fund. Con él generé el design system: tokens, tipografía, componentes y movimiento. Estuvo listo en horas en lugar de una semana.

RVA Builds, cada solicitud, en dos lugares a la vez

// cada-solicitud-en-dos-lugares-a-la-vez.md
const rvaBuilds = {
  type: "Diseño y desarrollo web",
  year: 2026,
};

03Interfaz e ingeniería

Cada solicitud, en dos lugares a la vez

Diseñé composiciones editoriales con aire y contadores que animan cada cifra a su ritmo. Las secciones aparecen con GSAP. En móvil, cada público tiene tarjetas con diseño propio. Por debajo hay un sitio estático en Cloudflare Workers con una función serverless. Cada solicitud pasa por un filtro antispam y se valida en el navegador y en el servidor. Después sale en paralelo como correo transaccional con Resend y como fila en una hoja de Google compartida.

0 0 0 1 1 0 0 1 0 1 1 0 1 0 0 1
1 1 1 0 0 1 1 1 0 1 0 1 0 0 1 1
1 1 0 0 0 0 1 0 1 0 0 1 1 0 0 0
1 0 0 1 0 1 1 0 1 0 1 0 1 1 0 0
0 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1
0 1 0 1 1 1 0 0 0 0 0 0 0 0 1 0
1 1 0 0 1 1 1 0 1 1 0 1 1 0 1 1
0 1 0 0 0 0 1 1 0 0 1 0 0 1 1 0
0 1 0 1 1 0 1 1 1 0 1 0 0 1 0 0
1 1 1 1 1 0 0 0 1 0 0 1 0 1 0 1
1 0 1 1 1 1 1 1 1 1 1 1 0 0 0 0
0 0 1 1 1 0 0 1 1 1 0 0 1 1 1 1

04Resultado

De cero a solicitudes en cuatro días

En cuatro días, RVA Builds pasó de no tener sitio a recibir solicitudes de estudiantes y empleadores. Todo corre en una infraestructura propia. El mismo design system vive en el sitio y en los correos que envía el backend.

[ OR™ ‒ RELACIONADOS / rva-builds.related ]

Primero los más parecidos a este caso. Con las flechas ves los demás.