Proyecto de Mauricio Poblete
Mis landings de estudiante, rehechas y mejoradas.
Tomé dos sitios que hice mientras aprendía y los reconstruí con un stack moderno y un flujo de desarrollo asistido por IA. Mismo contenido de base, mucho más sitio. Desliza para comparar.
01 · ONG de adopción · original de 2024
Ayuda a un Peludo
Métricas en móvil
| Lighthouse | Antes | Después |
|---|---|---|
| Rendimiento | 69 | 100 |
| Accesibilidad | 78 | 100 |
| Buenas prácticas | 96 | 100 |
| SEO | 91 | 100 |
| Carga del contenido principal | 6,8 s | 1,5 s |
| Peso de la página | 1.025 KB | 111 KB |
| Ancho en un teléfono de 390 px | 481 px | 390 px |
Lo que no existía
- ✦Retratos ilustrados en SVG con parpadeo y orejas animadas
- ✦Filtro de perros y gatos con transición animada
- ✦Test "¿Qué peludo es para ti?"
- ✦Proceso de adopción con línea que avanza al hacer scroll
- ✦Preguntas frecuentes y formulario con validación
02 · Comunidad de charlas · original de 2021
Meet & Coffee
Métricas en móvil
| Lighthouse | Antes | Después |
|---|---|---|
| Rendimiento | 67 | 98 |
| Accesibilidad | 89 | 100 |
| Buenas prácticas | 96 | 100 |
| SEO | 100 | 100 |
| Carga del contenido principal | 16,2 s | 2,0 s |
| Peso de la página | 2.798 KB | 157 KB |
| Ancho en un teléfono de 390 px | 519 px | 390 px |
Lo que no existía
- ✦Cuenta regresiva real a la próxima sesión, en hora de Santiago
- ✦Taza con vapor animado y temas que rotan
- ✦Carrusel de eventos con transición hacia cada detalle
- ✦Página de detalle para cada evento, con contenido real
- ✦Agenda de la noche y formulario para proponer charlas
Cómo está hecho
Ilustraciones propias en vez de fotos de stock
Las fotos originales eran miniaturas de origen incierto. Ahora todo es SVG hecho a medida: pesa casi nada y se puede animar.
Animaciones que respetan a quien no las quiere
Todo el movimiento se desactiva si el sistema pide movimiento reducido. La barra de progreso y el parallax usan animaciones ligadas al scroll, sin JavaScript.
Casi cero JavaScript
Astro entrega HTML estático. El poco JavaScript que hay se usa en el filtro, el test, la cuenta regresiva y los formularios.
Transiciones entre páginas
Al abrir un evento, la portada y el título viajan desde la tarjeta hasta su nueva posición.
Accesibilidad medida
Contraste, foco visible, navegación por teclado, textos alternativos y un enlace para saltar al contenido.
SEO listo
Metadatos, Open Graph, datos estructurados de schema.org, sitemap y URLs canónicas en cada página.