← Volver a todos los proyectos

Calendario de Adviento Interactivo

Vista previa del 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!

Contexto del Reto: Alura Latam

Este proyecto nació como parte de un "Reto de la Semana" organizado por el grupo Alumini ONE en Discord, una comunidad de estudiantes egresados del programa Oracle Next Education (ONE) de Alura Latam.

Captura de pantalla del reto de la semana de Alumini ONE

Reconocimiento y Ganadores

¡Me complace compartir que este proyecto fue uno de los ganadores del reto de Diciembre! El anuncio oficial del grupo Alumini ONE lo confirmó:

Captura de pantalla del anuncio de ganadores de Alumini ONE

Este reconocimiento fue un gran incentivo y demuestra el valor de participar activamente en comunidades de desarrollo.

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.
  • Aseprite: Para el estilo visual utilizado en el proyecto e imágenes creadas con estilo pixelart.

Instalación

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

Despliegue

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

🔗 Proyecto: Calendario de Adviento

Autor

Christopher Villamarín - GitHub