¡Hola, comunidad dev!
Si estabas buscando un proyecto front-end que vaya más allá de la típica lista de tareas y que realmente ponga a prueba tus habilidades en arquitectura, CSS moderno y JavaScript avanzado, has llegado al lugar correcto.
Quiero compartirles el resultado final de mi último tutorial completo del blog "TuCodigoCotidiano": LUXEPROPS, un sitio web totalmente responsive e inmersivo para una inmobiliaria de lujo ficticia, con un enfoque local en Yarumal, Colombia.
El objetivo no era solo crear algo visualmente atractivo, sino construirlo sobre una base de código limpio, escalable y fácil de mantener. Aquí les dejo un video tour del producto final:
¿Qué Hace Especial a Este Proyecto? Conceptos Clave
Este proyecto es una inmersión profunda en técnicas muy valoradas en el mercado laboral actual.
1. Arquitectura CSS Modular y Escalable
¡Se acabaron los archivos style.css gigantes e inmanejables! Organizamos los estilos usando un enfoque modular, lo que hace que la base del código sea increíblemente fácil de navegar y escalar.
/css
|-- /modules # Componentes reutilizables (botones, tarjetas)
|-- /pages # Estilos específicos de cada página (inicio, contacto)
|-- variables.css # Nuestro Sistema de Diseño (colores, fuentes, espacios)
|-- styles.css # El archivo principal que importa todo lo demás
2. "Scrollytelling" Inmersivo con Intersection Observer
La página de una propiedad no es solo una página; es una experiencia. Usamos la moderna API Intersection Observer para activar animaciones y actualizar una navegación lateral mientras el usuario hace scroll, creando un efecto de "scrollytelling" que narra la historia de la propiedad.
const secciones = document.querySelectorAll('.narrative-section');
const navLinks = document.querySelectorAll('.dotnav-link');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const id = entry.target.id;
// Lógica para activar el punto de navegación correcto...
}
});
}, { rootMargin: "-50% 0px -50% 0px" });
secciones.forEach(section => observer.observe(section));
- Mapas Interactivos con Leaflet.js
Integramos la popular librería Leaflet.js para mostrar un mapa interactivo en la página de la tienda, con marcadores y popups personalizados. Esta es una habilidad muy práctica para muchos tipos de aplicaciones web.
- Layouts Modernos y Responsivos
Todo el sitio está construido sobre CSS Grid y Flexbox, asegurando que el layout sea robusto, flexible y se adapte perfectamente a todos los tamaños de pantalla, desde móviles hasta escritorios grandes.
¡Aprende a Construirlo! Tutorial Completo y Código Fuente
Este post es solo una muestra del resultado. Si quieres construir este proyecto tú mismo, paso a paso, el tutorial completo con todas las explicaciones y el código fuente te está esperando en mi blog.
🔗 Lee el tutorial completo aquí:
https://tucodigocotidiano.yarumaltech.com/leer_tutoriales/28/
Me encantaría leer su feedback en los comentarios. ¿Qué opinan del proyecto? ¿Qué habrían hecho diferente?
¡Feliz código!
Top comments (0)