Proyectos · Sitio web · Performance & SEO
Drake Web
El sitio de Drake Construction, constructora de lujo en Orange County: rápido, seguro y de alta gama.
Resumen
Sitio corporativo multi-página para un contratista general activo desde 2004: casas a medida, remodelaciones premium y obra comercial. Cada imagen pasa por un pipeline de WebP con variantes responsive; cada página lleva SEO técnico completo y headers de seguridad.
Incluye una página privada de obras activas protegida con contraseña.
Funciones
Lo que hace.
Pipeline de imágenes
WebP + srcset 800/1280/1920 con Sharp.
SEO técnico
Sitemap, robots, Schema.org, OG/Twitter.
Seguridad
Headers CSP/HSTS y caché por tipo de archivo.
Página privada
De obras activas con contraseña.
Página por obra
Galería dedicada de cada casa entregada.
Cómo funciona
De principio a fin.
Fotos de obra
Cientos de fotos originales de cada casa entregada.
224 imágenesPipeline de imágenes
Se convierten a WebP en 800, 1280 y 1920 px.
SharpPáginas
HTML semántico, una página por obra y SEO técnico completo.
Schema.orgPublicación
Headers de seguridad, caché por tipo de archivo y URLs limpias.
NetlifyEl visitante
Carga rápida en celular; clientes y contratistas entran a Drake Hub.
Drake Hub
Pantallas
Así se ve.
Ficha técnica
Cómo está hecho.
Frontend
- HTML5 semántico
- CSS propio
- Vanilla JS
Build
- Sharp
- Playwright
- Lazy loading
Infra
- Netlify
- Edge Functions
- CSP/HSTS
- GA
Integraciones
- Netlify — build, pretty URLs y headers de seguridad
- Google Analytics — carga diferida tras load
- Buildertrend — integrado en la sección de servicios
- Drake Hub — el acceso de clientes y contratistas entra desde la web
Método
- 7 skills de diseño propias versionadas en skills-lock.json · auditoría visual con capturas Playwright a 1280/1920 px · scripts de compresión y generación responsive de imágenes.
Siguiente proyecto
Habla con la Palabra
App católica para conversar con la Biblia: versículos auténticos, validados, jamás inventados.
