Landing Page desarrollada con HTML5 y Sass como preprocesador CSS, pensada como base escalable para integrar futuras funcionalidades, tecnologías o frameworks.
Demo del Proyecto
Tecnologías
Funcionaliades
- Menú de navegación adaptable para dispositivos móviles y escritorio.
- Secciones integradas: Inicio, Nosotros, Servicios, Portafolio y Contacto.
- Formulario de contacto estilizado.
Uso de Sass en el Proyecto
- Variables: Para almacenar colores, tamaños y otros valores reutilizables, facilitando cambios globales y manteniendo consistencia.
- Mapas: Colecciones clave-valor para agrupar colores de botones y otros estilos temáticos, mejorando la organización.
- Mixins: Bloques reutilizables de estilos, como el mixin flex-center para centrar contenido con flexbox, que evitan la repetición y permiten parametrización.
- Estilos personalizados usando configuración extendida de Tailwind (via CDN).
- Funciones: Para obtener valores dinámicos, por ejemplo, la función btn-color($key) que extrae colores de un mapa.
- Nesting (Anidación): Permite escribir selectores CSS anidados de forma jerárquica y clara, reflejando la estructura HTML y mejorando la legibilidad.
- Operador &: Usado para referirse al selector padre dentro de reglas anidadas, facilitando la escritura de estados como :hover o variantes como .btn--primary.
- Uso de módulos de Sass (@use): Importación organizada de módulos oficiales (sass:color, sass:map) y archivos personalizados para mantener el código modular y limpio.
- Media queries anidados: Incorporación de consultas responsivas dentro de bloques específicos para facilitar estilos adaptativos sin dispersar el código.
- Funciones de color (color.adjust): Manipulación dinámica de colores para efectos visuales en estados como hover, mejorando la experiencia de usuario.
Instalación
- Requisitos Previos
- Descargar Proyecto.
- Tener Docker y Docker Compose instalados.
- Make: Utilizado para automatizar procesos y gestionar contenedores de manera más eficiente.
- Pasos de Instalación
- Clona el repositorio desde GitHub.
- Dentro del repositorio, encontrarás un archivo Makefile que contiene los comandos necesarios para iniciar y gestionar tu aplicación.
- Usa los siguientes comandos de Make para interactuar con la aplicación:
- make init-app: Inicializa los contenedores y configura la aplicación.
- make up: Levanta la aplicación y sus contenedores asociados.
- make down: Detiene los contenedores y apaga la aplicación.
- make shell: Ingresa al contenedor para interactuar directamente con el sistema en su entorno de ejecución.
- make install-dependencies: Instala todas las dependencias necesarias para disponer del sistema de logs y ejecutar pruebas.
- make init-test: Ejecuta las pruebas unitarias y de integración.
- make compile-sass: Compila Sass
- Además de estos comandos, dentro del archivo Makefile puedes encontrar otros comandos que te permitirán interactuar de manera más específica con los contenedores y los diferentes servicios que conforman la aplicación.
- Accede a los siguientes URL:
- Aplicación Web: http://localhost:8081/
- PhpMyAdmin: http://localhost:8082/
