spiderman-brand-new-day

Tabla de contenidos

• Web promocional de Spider-Man: Brand New Day
• Características principales
• Para empezar
  • Prerrequisitos
  • Instalación
  • Comandos
• Estructura del proyecto
• Contribuir al proyecto
  • Contribuir desde Stackblitz
• 🛠️ Stack

Características principales

• Tráiler oficial: reproducción del tráiler en un modal, sin salir de la página.
• Sinopsis y reparto: la nueva etapa de Peter Parker, dirigida por Destin Daniel Cretton.
• Vídeos y galería: clips y fotogramas de la película con animaciones de scroll (GSAP).
• Compra de entradas: enlace directo a la venta de entradas de Sony Pictures España.
• Redes sociales: perfiles oficiales de la película en Instagram, X y Facebook.

(volver arriba)

Para empezar

Prerrequisitos

• NVM (recomendado para asegurar la versión de Node) — ver documentación oficial

  nvm use
  # o
  nvm use <version>
  

  Si quieres que la versión se seleccione sola al entrar al directorio, la documentación oficial incluye los scripts para bash, zsh y fish.

• PNPM (el gestor de paquetes del proyecto)

  npm install -g pnpm
  

Instalación

1. Clona el repositorio

   git clone https://github.com/midudev/spiderman-brand-new-day.git
   

2. Instala las dependencias

   pnpm install
   

3. Arranca el servidor de desarrollo en localhost:4321

   pnpm dev
   

Comandos

Comando	Acción
pnpm install	Instala las dependencias
pnpm dev	Servidor de desarrollo en localhost:4321
pnpm build	Build de producción en ./dist/
pnpm preview	Previsualiza el build localmente
pnpm lint	Ejecuta ESLint sobre el proyecto
pnpm lint:fix	Ejecuta ESLint y corrige lo que pueda automáticamente
pnpm format	Formatea el código con Prettier
pnpm format:check	Comprueba el formato sin escribir cambios
pnpm deploy	⚠️ Solo mantenedores — build y despliegue a producción en Cloudflare Workers

(volver arriba)

Estructura del proyecto

/
├── public/            # Fuentes, imágenes (avif/webp), vídeos y favicon
├── src/
│   ├── assets/icons/  # Iconos SVG
│   ├── components/    # Hero, Sinopsis, Videos, Galería, Seo…
│   │   └── fixed/     # UI fija: menú, logo, redes, entradas y tráiler
│   ├── data/          # Contenido editorial
│   ├── layouts/       # Layout base
│   ├── lib/           # Helpers (DOM, GSAP, tilt, loading)
│   ├── pages/         # Rutas
│   ├── styles/        # Estilos globales
│   └── consts.ts      # URLs, SEO y secciones del menú
└── astro.config.mjs

(volver arriba)

Contribuir al proyecto

Las contribuciones son lo que hacen que la comunidad de código abierto sea un lugar increíble para aprender, inspirar y crear. ¡Cualquier contribución que hagas es muy apreciada!

Si tienes alguna sugerencia que podría mejorar el proyecto, haz un fork del repositorio y crea una pull request. También puedes simplemente abrir un issue con la etiqueta “enhancement”.

Aquí tienes una guía rápida:

1. Haz un fork del proyecto
2. Clona tu fork (git clone <URL del fork>)
3. Añade el repositorio original como remoto (git remote add upstream https://github.com/midudev/spiderman-brand-new-day.git)
4. Crea tu rama de funcionalidad (git switch -c feature/CaracteristicaIncreible)
5. Realiza tus cambios (git commit -m 'feat: alguna característica increíble')
6. Haz push a la rama (git push origin feature/CaracteristicaIncreible)
7. Abre una pull request

Consulta la guía de contribución para empezar de la mejor manera, incluidas las convenciones del proyecto y las buenas prácticas.

Contribuir desde Stackblitz

Si quieres contribuir de una manera más sencilla, puedes iniciar este proyecto desde Stackblitz usando tu cuenta de GitHub:

¡Gracias a todos los colaboradores que han hecho posible este proyecto!

(volver arriba)

🛠️ Stack

• - The web framework for content-driven websites.
• - JavaScript with syntax for types.
• - A utility-first CSS framework for rapidly building custom designs.
• - Animaciones de scroll y texto (ScrollTrigger + SplitText).
• - Despliegue de la web con Wrangler.

(volver arriba)