Proyectos

🎄 Calendario de Adviento Interactivo

🌟 Reto de la Semana: 4 al 10 de Diciembre 🎄

Tema: ¡Crea un calendario de adviento digital para celebrar la cuenta regresiva hacia la Navidad!

Vista previa del Calendario de Adviento

¡Experimenta cómo funciona!

Descripción

Este proyecto es un calendario de adviento digital desarrollado en Next.js y exportado como una página estática. Cada día, los usuarios pueden abrir una "ventana" que revela un mensaje o regalo virtual. El diseño está inspirado en las festividades, utilizando colores rojos, verdes, dorados y una tipografía festiva. Además, el proyecto tiene un estilo pixelart.

Detalles

  • Muestra un calendario de diciembre con 24 días representados como cajas.
  • Permite que los usuarios abran una nueva caja solo en o después del día correspondiente (usa la fecha del sistema).
  • Cada caja revela un contenido sorpresa (mensaje, imagen o un GIF festivo).
  • Utiliza animaciones suaves al abrir las cajas.
  • Incluye un contador que muestra cuántos días faltan para Navidad.

Tecnologías Utilizadas

  • Next.js: Framework de React para la creación de aplicaciones web.
  • React: Biblioteca de JavaScript para construir interfaces de usuario.
  • Tailwind CSS y CSS: Para el diseño y las animaciones.
  • Pixelart: Estilo visual utilizado en el proyecto e imágenes creadas con Aseprite.

Instalación

  1. Clona el repositorio:
    git clone https://github.com/xeland314/advent-calendar.git
  2. Navega al directorio del proyecto:
    cd advent-calendar
  3. Instala las dependencias:
    npm install
  4. Inicia el servidor de desarrollo:
    npm run dev

Despliegue

El proyecto está desplegado como una página estática y puede ser visto en el siguiente enlace:

🔗 Proyecto: Calendario de Adviento

Contribuciones

Las contribuciones son bienvenidas. Si deseas contribuir, por favor sigue los siguientes pasos:

  1. Haz un fork del proyecto.
  2. Crea una nueva rama (git checkout -b feature/nueva-funcionalidad).
  3. Realiza tus cambios y haz commit (git commit -m 'Añadir nueva funcionalidad').
  4. Sube tus cambios (git push origin feature/nueva-funcionalidad).
  5. Abre un Pull Request.

Autor

Christopher Villamarín - GitHub

Licencia

Este proyecto está bajo la Licencia MIT. Consulta el archivo LICENSE para más detalles.