Case study
CodeMirror
Sitio web corporativo guiado por el scroll y panel de contenidos para un estudio de diseño, desarrollo y automatización en Pune.
CodeMirror es un socio tecnológico de Pune que diseña, desarrolla y automatiza productos digitales. Construí su nuevo sitio web de principio a fin: un hero de partículas guiado por el scroll, escenas fijadas de servicios y proceso, páginas de servicio listas para SEO y un panel de administración donde el equipo edita servicios, trabajos, reseñas, empleos y consultas sin tocar código.
Galería
Contribución
- Lideré la construcción del nuevo sitio de CodeMirror, desde el primer layout hasta la app de Next.js lista para producción.
- Construí el hero de partículas con Three.js guiado por el scroll, que cambia entre las fases de diseño, desarrollo y automatización.
- Implementé el deck fijado de servicios y la línea de tiempo horizontal del proceso con GSAP ScrollTrigger y Lenis.
- Publiqué páginas de servicio listas para SEO con metadatos propios, FAQs, sitemap, robots y JSON-LD.
- Construí un panel de administración sobre Supabase para servicios, trabajos, reseñas, empleos, consultas y ajustes del sitio.
Resultado
Entregué un sitio corporativo moderno y editable desde el panel que presenta el trabajo de diseño, desarrollo y automatización de CodeMirror en una historia de scroll clara.
Decisiones técnicas
Sitio de marketing coreografiado con el scroll
Un sitio con Next.js App Router donde GSAP ScrollTrigger y Lenis mueven el hero, el deck de servicios y la línea de tiempo del proceso con un mismo reloj de scroll.
Next.js · GSAP · Lenis · Three.js
Contenido fuera del código
Servicios, proyectos, reseñas, empleos y ajustes viven en Supabase detrás de una pequeña capa de almacenamiento, con contenido inicial en el primer arranque.
Supabase · TypeScript
Panel de administración para el equipo
Un área protegida para editar cada sección pública, leer las consultas de contacto y publicar ofertas de empleo, sin necesitar a un desarrollador.
Next.js · Supabase
Desafíos
Mucho movimiento sin una página lenta
Un hero de partículas WebGL y varias escenas fijadas pueden empeorar la carga y sentirse bruscos en móviles.
Resolución: Mantuve ligeros los shaders de partículas, fijé escenas solo donde hay espacio y usé layouts simples en pantallas pequeñas y con movimiento reducido.
Un equipo, muchos servicios
Ocho servicios de diseño, desarrollo y automatización debían leerse con claridad sin convertir la portada en un catálogo.
Resolución: Agrupé la portada en fases de diseño, desarrollo y automatización, y di a cada servicio su propia página SEO para el detalle.