Este sitio, una demostración en producción
Un sitio personal construido como un producto: retrato de partículas, demos funcionales, páginas por perfil, en línea.
01Problema
Un Product Engineer que se presenta con un CV en línea no demuestra nada.
Hacía falta un sitio que demostrara la capacidad de concebir, construir y entregar, y que hablara a cada decisor de su propio problema.
02Contexto
- Usuarios
- Fundadores, responsables de operaciones, equipos de producto y técnicos, agencias.
- Proceso actual
- Un posicionamiento y un público objetivo definidos en dos documentos estratégicos.
- Restricciones
- Rápido en el móvil, accesible con el teclado, respeto de «reducir movimiento», ninguna dependencia de servidor.
- Herramientas actuales
- Vite
- Three.js
- GSAP
- Lenis
03Solución
Un sitio estático multipágina construido con Vite. En la página de inicio, la foto real se desintegra en partículas WebGL al hacer scroll y después se convierte en flujo de producción, campo de estrellas y planeta.
Las demos funcionan de verdad en el navegador, y el mensaje está dividido por perfil de decisor.
Por qué este enfoque. Demostrar en lugar de afirmar: cada promesa del sitio la demuestra el propio sitio.
04Arquitectura
Infraestructura
- Vite Build multipágina, inclusiones HTML compartidas, división del código por página.
Interfaz
- HTML estático Páginas generadas de antemano: rápidas, indexables, sin servidor.
IA
- Three.js Retrato reconstruido con decenas de miles de partículas, shaders GLSL escritos para la ocasión.
Automatización
- GSAP + Lenis Scroll fluido, secciones fijadas, revelaciones al ritmo de la lectura.
Datos
- Demos Agente, workflow, portal y dashboard que funcionan con datos de ejemplo.
Salida
- Alojamiento Archivos estáticos desplegables en Vercel, Hostinger, OVH o un VPS.
05Funcionalidades
- Foto que se disuelve en partículasEl mismo ruido controla la foto y las partículas: se desprenden exactamente donde la foto desaparece.
- Recorte localLa foto se recortó en el propio ordenador con el framework Vision, sin ningún servicio en línea.
- Cuatro demos funcionalesNo son capturas: son componentes reales, manipulables.
- Páginas por perfilFundadores, pymes, equipos de negocio, agencias: un discurso por problema.
- Menú rápido con el teclado⌘K o Ctrl K para ir a cualquier parte.
- AccesibilidadNavegación con el teclado, contrastes verificados, animaciones reducidas cuando se solicita.
- Identidad generada por scriptLogotipo vectorizado, favicons e imagen para compartir generados por el código.
06Resultado
- Que un decisor lo entienda en menos de diez segundos.
- Demostrar en lugar de describir.
Cómo se mide
- Solicitudes de contacto cualificadas
- Páginas consultadas por perfil
- Tiempo dedicado a los casos de estudio
07Lo que hice
- Posicionamiento y mensaje
- Dirección artística
- Desarrollo
- 3D y shaders
- Motion design
- Publicación