// 01
Sin framework, a propósito
HTML estático + Tailwind + unas pocas líneas de JS vanilla. El costo marginal de cada nueva página de programa es un archivo HTML y una entrada en el nav — no un build pipeline.
DisponiblesTomando nuevos proyectos · Q2 2026
Todo el trabajoCaso · 02 · Centro deportivo
Entrena todo el año.Juega al máximo.
Mark y Dawn Santone estaban abriendo Short Porch — una instalación indoor de béisbol de élite en Collingwood, Ontario — y necesitaban un sitio que se leyera como atletismo serio desde el primer scroll. Construimos un sitio estático rápido para una academia con seis programas, carga en menos de un segundo y se ve como deporte universitario.
- Cliente
- Short Porch Baseball Academy
- Industria
- Deporte · Centro de entrenamiento
- Año
- 2025
- Región
- Collingwood · Ontario · Canadá
- 06
- Programas de entrenamiento
- <1s
- Objetivo LCP
- Indoor
- Instalación todo el año
- Static
- Stack — sin JS bloat
Un vistazo de lo que entregamos
Live · shortporchbaseball.com
shortporchbaseball.com
⟳SPShort PorchBaseball Academy
BookTrain Year-Round.Play at Your Best.
Baseball training for dedicated athletes. Unlock your potential, master the fundamentals, and dominate the diamond.
View programsBook a lesson
✺ Our Programs06 disciplines · All ages
Program
Hitting Clinic
Swing mechanics, timing and plate approach.
Program
Pitching Clinic
Velocity, control and pitch repertoire.
Program
Defensive Skills
Footwork, glove work and throwing accuracy.
Collingwood · Ontario
El reto
Abrir una instalación nueva y que se lea como una institución desde el día uno.
Short Porch era una operación nueva sin huella en Google, sin reseñas, sin reconocimiento en la comunidad. Mark y Dawn necesitaban que el sitio hiciera el trabajo que normalmente toma años de boca a boca — establecer credibilidad ante padres y jugadores serios que iban a compararlos con academias existentes. El brief fue directo: cargar al instante en el Wi-Fi inestable de las arenas, verse inequívocamente como atletismo de élite, y dejar que la gente encuentre '¿cuál programa es para mi hijo?' en menos de treinta segundos.
Nuestra solución
Un sitio estático de academia, diseñado como playbook universitario.
Ocho páginas HTML — Inicio, seis páginas de detalle por programa, Our Story, Contacto, FAQ — servidas como archivos estáticos detrás de un CDN. Sin runtime de framework, sin router del lado del cliente, sin costo de hidratación. La identidad visual usa códigos del deporte universitario: Graduate como tipografía display (estilo banners NCAA), navy + crimson + cream + tan como paleta, headlines todo en mayúsculas, y banners de sección que se sienten como scoreboards. Tailwind para layout, CSS personalizado para utilidades de marca, y un pequeño archivo JS que carga el header/footer compartido para mantener el markup DRY entre páginas.
Decisiones clave · 06
Construido como una institución, pesa casi nada.
// 02
Identidad visual de deporte universitario
Graduate para display, Work Sans para cuerpo, Courier Prime para acentos. Navy + crimson + cream + tan — la paleta de programas universitarios de toda la vida, aplicada a una marca que apenas nace.
// 03
Arquitectura de información program-first
El home te lleva a uno de seis programas en dos scrolls. Cada programa tiene su propia página dedicada con fotos, rango de edad y qué cubre. Los padres saben qué necesitan antes de llamar.
// 04
Documento wireframe para el cliente
Antes del código, un wireframe DOCX generado por Pandoc con cada página mockeada. Mark y Dawn aprobaron en PDF antes de tocar HTML — cero re-trabajo en medio del build.
// 05
Superficie de contenido consciente de Instagram
La página 'Our Story' hostea un video clip de hero y enruta tráfico a @shortporchbaseball — donde Mark y Dawn ya publican su mejor material. El sitio no compite con sus redes; las potencia.
// 06
Workflow de placeholders incorporado
La fotografía iba atrasada respecto al deadline de lanzamiento. Escribimos un script Node pequeño que genera imágenes placeholder de marca on-demand, así el sitio salió con visuales consistentes mientras se montaban las fotos reales.
Impacto
Día de apertura, en línea, indexado.
- Live
Sitio entregado en fecha
shortporchbaseball.com en vivo antes del día de apertura. Sin issues de staging, sin enlaces rotos, sin lista de bugs de día uno.
- 06
Programas reservables desde el día uno
Hitting · Pitching · Defensive Skills · Catcher's Clinic · Youth Fundamentals · Private Lessons — cada uno con página dedicada y un camino de contacto directo.
- <1s
LCP en red móvil fría
Entrega estática + caché edge hacen que el sitio cargue antes de que una SPA típica termine de hidratar. Crítico para padres buscando desde una gradería.
- EN
SEO local desde el lanzamiento
Schema.org, Open Graph, sitemap + URLs canónicas. Indexado en días, rankeando para 'indoor baseball Collingwood' y queries por programa.
Stack
Estático, rápido, fácil de mantener.
- HTML5
- Tailwind CSS
- Vanilla JS
- Graduate
- Work Sans
- Courier Prime
- Playwright (capture)
- Sharp (placeholders)
- Pandoc (wireframes)
- Open Graph
- Schema.org
- CDN edge cache
Servicios relacionados