Saltar al contenido
VOLVER

04 · Agencia de software · sitio web

ARAGON

El sitio de Aragon, mi agencia de software, pensado para explicar cada servicio mostrándolo funcionar.

Aún sin publicar
Año
2026
Mi rol
Dirección, diseño y desarrollo.
Tipo
Proyecto propio · Sello Aragon
Estado
Rediseño en revisión
aragon.local
Inicio de Aragon: el titular «Ponemos en orden tus clientes con software a la medida» junto a un campo de partículas que forman una retícula
rutas estáticas en el build
23
servicios con demo viva
4
motores: WebGPU y Canvas 2D
2
servidores propios para el contacto
0

01

Contexto

Aragon es el sello con el que ofrezco software a la medida: apps web, automatización de procesos y agentes de IA. El sitio anterior era un prototipo y en octubre de 2026 se rehízo por completo.

Next.js 16 y React 19, con un campo de partículas en WebGPU (vgpu) y respaldo en Canvas 2D, y demos de pedidos, flujos de n8n, un agente y un servidor.

02

Problema / reto

Los negocios que buscan una agencia suelen tener el trabajo repartido entre hojas de cálculo, chats y libretas. El reto era que el sitio explicara cómo se pasa de ese desorden a un sistema, sin animaciones que solo adornen.

03

Enfoque

La idea es «poner en orden»: las partículas son las piezas sueltas de un negocio y, con software, encuentran su lugar en una retícula. Cada animación tiene que explicar algo.

  • 01Base monocroma y la tipografía del portafolio (Inter Tight, Inter y JetBrains Mono), sin color de acento.
  • 02Un recorrido de cinco paradas donde las mismas piezas forman cada servicio.
  • 03Contacto sin servidor propio: Cal.com y un formulario que arma el mensaje y lo envía por WhatsApp o correo.
  • 04Solo trabajo real: ningún cliente ni cifra inventados.
  • 05Las técnicas de componentes con licencia restrictiva se reescriben en código propio.

04

Construcción

MAPA DEL SISTEMA

Agencia de software · sitio web

ARAGON
01

4 servicios con demo

02

Partículas · vgpu

03

23 rutas estáticas

04

Contacto sin servidor

ESTRUCTURA / FLUJO / RESPONSABILIDADES
Representación editorial de las principales piezas del sistema. No sustituye capturas del producto.
  • Next.js 16
  • React 19
  • TypeScript
  • vgpu · WebGPU
  • Canvas 2D
  • Cal.com
  • Vercel

01

Inicio con un hero de partículas que el cursor ordena, un texto que se enciende con la lectura y servicios con demos que funcionan.

02

Páginas de servicios, cómo trabajamos, trabajo y casos, nosotros, preguntas con búsqueda, contacto y privacidad.

03

Paleta ⌘K, metadatos y datos estructurados (JSON-LD) por página, sitemap e imagen para compartir generada.

04

Build de producción en verde y revisión en Chromium a 1440 y 390 px sin desbordamiento horizontal ni errores propios en consola.

05

En pantalla

aragon.local
Servicios de Aragon con una demo de pedidos que avanzan por estados
Cada servicio tiene su demo: aquí, un panel de pedidos con datos de ejemplo.
aragon.local
Recorrido «del desorden al sistema» donde las partículas forman una conversación de un agente de IA
Un recorrido de cinco paradas: las mismas piezas sueltas forman cada servicio.
Página de servicios de Aragon en un teléfono
Diseñado también para el celular.

06

Resultado

El rediseño está construido y en revisión; todavía no se ha publicado.

Aprendizaje

Cada animación del sitio tiene que explicar algo: si solo decora, sobra.

SIGUIENTE PASO

Cada proyecto es una forma distinta de resolver un problema. Revisemos qué necesitas construir.