https://github.com/jmatochepascual/cafeteria
Bienvenido a La Cafería, un proyecto web que captura la esencia y pasión por el café de calidad. Nuestro sitio web está diseñado para transportar a los visitantes a una experiencia única, donde cada elemento visual y cada detalle han sido cuidadosamente seleccionados para reflejar la calidez y el ambiente acogedor de nuestro establecimiento.
https://github.com/jmatochepascual/cafeteria
css-flexbox css-grid-layout css3 git gulp html-semantics html5 nodejs sass
Last synced: 4 months ago
JSON representation
Bienvenido a La Cafería, un proyecto web que captura la esencia y pasión por el café de calidad. Nuestro sitio web está diseñado para transportar a los visitantes a una experiencia única, donde cada elemento visual y cada detalle han sido cuidadosamente seleccionados para reflejar la calidez y el ambiente acogedor de nuestro establecimiento.
- Host: GitHub
- URL: https://github.com/jmatochepascual/cafeteria
- Owner: JmAtochePascual
- Created: 2024-04-02T19:10:12.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-21T14:57:57.000Z (about 1 year ago)
- Last Synced: 2025-07-01T04:45:16.127Z (12 months ago)
- Topics: css-flexbox, css-grid-layout, css3, git, gulp, html-semantics, html5, nodejs, sass
- Language: HTML
- Homepage: https://jmatochepascual.github.io/Cafeteria/
- Size: 20.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Cafetría
Bienvenido a La Cafería, un proyecto web que captura la esencia y pasión por el café de calidad. Nuestro sitio web está diseñado para transportar a los visitantes a una experiencia única, donde cada elemento visual y cada detalle han sido cuidadosamente seleccionados para reflejar la calidez y el ambiente acogedor de nuestro establecimiento.
Este proyecto web está desarrollado con un enfoque en la experiencia del usuario, presentando un diseño moderno y responsivo que se adapta perfectamente a cualquier dispositivo. El sitio cuenta con seis secciones principales: una página de inicio que da la bienvenida a los visitantes, una sección "Nosotros" que narra nuestra historia, una página dedicada al proceso de preparación de nuestro café, un menú completo con nuestra oferta de bebidas y alimentos, una galería visual que muestra nuestro ambiente y productos, y una sección de contacto para conectar con nuestros clientes. Todo el desarrollo está optimizado para ofrecer una navegación fluida y una carga rápida de imágenes en múltiples formatos.
## Caracteristicas
- Tipografías web optimizadas.
- Metadatos y estructura optimizada para buscadores.
- Procesamiento de CSS con plugins como Autoprefixer y CSSnano.
- Diseño adaptable para todos los dispositivos.
- Soporte para WebP y AVIF para optimizar el rendimiento.
- Iconos personalizados para diferentes dispositivos y plataformas.
## Tecnologías
- **HTML:** Lenguaje de marcado para estructurar el contenido de la página.
- **CSS:** Lenguaje de estilos utilizado para definir la presentación visual y el diseño responsivo.
- **JavaScript:** Lenguaje de programación que permite agregar interactividad y dinamismo.
- **Sass:** Preprocesador CSS para una escritura más eficiente de estilos.
- **Gulp:** Automatización de tareas como compilación de SCSS, optimización de imágenes y más.
## Estructura del proyecto
- **src:** Directorio que contiene el código fuente del proyecto.
- **img:** Directorio que contiene las imágenes del proyecto.
- **fonts:** Directorio que contiene los archivos de fuentes.
- **scss:** Directorio que contiene los archivos de SCSS.
- **favicon:** Directorio que contiene los archivos del favicon.
- **build:** Directorio que contiene los archivos optimizados para producción.
- **css:** Directorio que contiene los archivos de estilos optimizados.
- **img:** Directorio que contiene las imágenes optimizadas.
- **index.html:** Archivo principal que contiene el código HTML del proyecto.
- **nosotros.html:** Archivo que contiene la información sobre nosotros.
- **proceso.html:** Archivo que contiene la información sobre el proceso de preparación del café.
- **menu.html:** Archivo que contiene la información sobre el menú.
- **galeria.html:** Archivo que contiene la información sobre la galería.
- **contacto.html:** Archivo que contiene la información sobre el contacto.
- **gulpfile.js:** Archivo que contiene la configuración de Gulp.
- **README.md:** Archivo que contiene la documentación del proyecto.
## Instalación
> Nota: Para trabajar en este proyecto necesitas tener instalado
> Node.js (versión 14 o superior)
## Uso
Para visualizar el proyecto localmente, sigue estos pasos:
1. Clona este repositorio:
```
git clone https://github.com/JMatochePascual/Cafeteria.git
```
2. Navega al directorio del proyecto:
```
cd Cafeteria
```
3. Instala las dependencias:
```
npm i
```
4. Compila los archivos SCSS a CSS:
```
gulp dev
```
5. Abre el archivo `index.html` en tu navegador web preferido
6. Opcionalmente, puedes usar un servidor local como Live Server para una mejor experiencia
## Contribución
Si deseas contribuir al proyecto, por favor sigue estos pasos en orden:
1. Haz un fork del repositorio
2. Crea una nueva rama para tu funcionalidad:
```bash
git checkout -b feature-name
```
3. Realiza y confirma tus cambios:
```bash
git commit -am 'Add new feature'
```
4. Sube los cambios a tu repositorio:
```bash
git push origin feature-name
```
5. Abre un Pull Request desde tu repositorio hacia el proyecto principal
## Licencia
Este proyecto se encuentra disponible bajo la licencia MIT. Puedes consultar los términos completos [aquí](https://opensource.org/licenses/MIT).
Desarrollado con 🤍 por JMCode | Transformando ideas en soluciones digitales