Capital Careers

De la página en blanco al sitio en vivo en una semana

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

brief.json

Sitio público de una plataforma regional de talento. Conecta a veteranos con empleos de manufactura en los condados de Sacramento y Placer. Llevé el proyecto de la página en blanco al lanzamiento en una semana. Dirigí a Claude en la construcción: marca, UI, textos, animación, formularios y despliegue.

Año: 2026
Cliente: Cámaras de Rancho Cordova y Roseville
Industria: Empleo
Duración: 1 semana
Tipo: Diseño y desarrollo web

Servicios

Diseño webDesign systemDesarrolloSEO

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 ↗

Capital Careers, tres públicos y una demo agendada

// tres-publicos-y-una-demo-agendada.md
const capitalCareers = {
  industry: "Empleo",
  duration: "1 semana",
};

01El encargo

Tres públicos y una demo agendada

Dos cámaras de comercio, dos ciudades y una plataforma. La demo para la industria ya estaba en el calendario. El sitio tenía que darles confianza a veteranos que sienten que la manufactura no es para ellos. Tenía que convencer a los empleadores de que vale su tiempo. Y tenía que sostenerse frente a quienes financian el proyecto.

Capital Careers, un producto, no un folleto

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

02Design system con IA

Un producto, no un folleto

La vara era que se sintiera como un producto que ya funciona, no como un folleto. Para lograrlo en una semana, entrené a Claude con la paleta, la tipografía y la voz de la marca. Con él convertí mis decisiones de diseño en un sistema de tokens y en código limpio. Cada color y cada espacio vive en una variable CSS. Por eso todo el sitio cambia de tema desde un solo archivo.

03Construcción

Construcción sin constructor visual

Cinco páginas responsivas en HTML, CSS y JavaScript. En la parte alta de las páginas, columnas de fotos se desplazan en sentidos opuestos. El contenido aparece con el scroll y una secuencia de GSAP abre la primera pantalla. Los formularios funcionan de verdad: un Cloudflare Worker valida cada mensaje y lo envía con Resend. Sumé SEO y datos estructurados. Revisé cada combinación de color contra WCAG AA. Y dejé el despliegue automático desde GitHub.

// en-vivo-antes-de-la-demo.md
const capitalCareers = {
  industry: "Empleo",
  duration: "1 semana",
};

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

04Resultado

En vivo antes de la demo

El sitio salió en vivo antes de la demo, rápido y accesible. Ahora es de las cámaras y puede crecer más allá de veteranos y manufactura. Para mí quedó un método probado. Dirijo a la IA en la parte pesada de la construcción. El criterio de diseño se queda en mis manos.

[ OR™ ‒ RELACIONADOS / capital-careers.related ]

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