Git Product home page Git Product logo

la-velada-web-oficial's Introduction

Contributors Forks Stargazers Issues

Logo

Web oficial de La Velada IV

La Velada IV es una competición de boxeo que enfrenta a streamers, creadores de contenido y otras celebridades sobre un ring.
Diseño de Figma · Reportar error · Sugerir algo

Tabla de contenidos

Características principales

  • Detalles del evento: Obtén información detallada sobre la fecha, hora, ubicación y artistas participantes.
  • Compra de boletos: Permite a los usuarios dirigirlos a la compra de boletos fácilmente.
  • Redes sociales: Conoce las redes oficiales donde podrás informarte sobre el evento.

Capturas de pantalla de la web de La Velada IV

Captura de pantalla en ordenador Captura de pantalla en móvil

(volver arriba)

Para empezar

Prerequisitos

Pequeño script de automatización
  • En Linux/MacOS:

     # .bashrc | .zshrc | cualquier archivo de configuración
     # pequeño script para cambiar de version al entrar al directorio
     cd() {
    builtin cd "$@"
     	if [[ -f .nvmrc ]]; then
     		nvm use > /dev/null
     		# Si quieres que te diga la versión
     		nvm use
     	fi
     }
  • En Windows:

    # $PROFILE
    function Change-Node-Version {
    	param($path)
    	& Set-Location $path
    	$pwd = pwd
    	if ( Test-Path "$pwd\\.nvmrc" ) {
    		$version = Get-Content .nvmrc
    		nvm use $version
    	}
    }
    New-Alias -Name cd -Value Change-Node-Version -Force -Option AllScope
  • PNPM (es nuestra recomendación por su eficiencia y rapidez)

    npm install -g pnpm
  • o NPM

    npm install npm@latest -g
  • Instalación

    1. Clona el repositorio

      git clone https://github.com/midudev/la-velada-web-oficial.git
    2. Instala los paquetes de NPM

      pnpm install
    3. Ejecuta el proyecto

      • Base de datos remota (necesario linkear con proyecto de Astro Studio)
      pnpm run dev
      • Base de datos local
      pnpm run start
    4. Autenticación mediante twitch (opcional)

      • Accede a la consola de twitch, crea un proyecto y obtén tu client id y client secret
      • Genera un hash aleatorio, puedes usar el siguiente comando openssl rand -hex 32
      • Crea un archivo llamado .env.local y copia el contenido de .env.demo en él
      • Reemplaza el texto copiado de demo en .env.local con tu id, secreto y hash

    (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, por favor 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 <URL del repositorio original>)
    4. Crea tu Rama de Funcionalidad (git switch -c feature/CaracteristicaIncreible)
    5. Realiza tus Cambios (git commit -m 'Add: alguna CaracterísticaIncreible')
    6. Haz Push a la Rama (git push origin feature/CaracteristicaIncreible)
    7. Abre una pull request

    Por favor, consulta nuestra guía de contribución para saber cómo puedes empezar de la mejor manera y siguiendo buenas prácticas.

    Contribuir desde Stackblitz

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

    Abrir en Stackblitz

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

    Contribuidores

    (volver arriba)

    🛠️ Stack

    • Astro - The web framework for content-driven websites.
    • Typescript - JavaScript with syntax for types.
    • Tailwind CSS - A utility-first CSS framework for rapidly building custom designs.
    • @midudev/tailwind-animations - Easy peasy animations for your Tailwind project.

    (volver arriba)

    la-velada-web-oficial's People

    Contributors

    alejandratech avatar alejandro-figueiras avatar alejandrosuero avatar alesdevux avatar diegoreynoso11 avatar dresandev avatar edier-gama avatar educlopez avatar eduwtr avatar facug03 avatar fedeperin avatar hugojaimeb avatar jlex11 avatar joelmh-112 avatar jose-web avatar josenromero avatar jrafaaael avatar juanda237 avatar kevinccbsg avatar marcoamt avatar marsidev avatar mattezekiel avatar midudev avatar miguelhigueradev avatar nickman016 avatar seanluis avatar sergio401 avatar thelokin avatar yurigo avatar zackproject avatar

    Stargazers

     avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

    Watchers

     avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

    la-velada-web-oficial's Issues

    El script `postinstall` falla en Windows 11

    Pre-requisitos

    • Estoy corriendo la última versión.
    • He revisado si ya hay un issue creado con las mismas características.

    Comportamiento esperado

    Lo esperado es que al ejecutar pnpm i en Windows, se instalen las dependencias sin error alguno.

    Comportamiento actual

    image

    Información del bug

    Parece estar relacionado a este script (introducido en #178):

    "scripts": {
      "postinstall": "[ -d '.husky' ] && husky install || true"
    }

    Pasos para reproducirlo

    git clone https://github.com/midudev/la-velada-web-oficial
    cd la-velada-web-oficial
    pnpm i

    Contexto

    • Sistema operativo: Windows 11, Powershell 7.4.1

    format on save

    recomiendo que el setting de vscode este incorporado el format on save. para mantener la guia de estilo y evitar los mas posibles los commits como este.
    Aclaro que el comando format fue realizado sobre el commit mas reciente (92b1aad)
    Captura desde 2024-02-24 17-38-56

    ¿Pull to refresh deshabilitado a propósito?

    Hola, observo que hay tres propiedades que afectan el "pull to refresh" en dispositivos móviles. Mi pregunta es: ¿Están configuradas con alguna intención específica? ¿O puedo crear una PR corrigiendo el "pull to refresh"?

    • archivo en el que se encuentran las propiedades y capturas de pantalla:

    src/layouts/Layout.astro

    2
    1

    Desplazamiento a la izquierda en versión mobile desde Safari iOS

    Al visualizar la página desde el navegador Safari en un iPhone 8, se ve desplazada a la izquierda por lo que no se encuentra centrada como debería.

    NOTA: Ignorar el detalle de que sale 2 veces la flecha para ir al inicio de la página, esto se debe a que tome diversas capturas de pantalla y las uní en una sola para que se visualizara mejor el error.

    photo-output

    Bug fondo

    EBDA5A7D-D02F-4AAD-A7D1-CBC09699E5A5
    A673C743-AEEF-4B8E-9FB2-8D70F6EE996D

    Cuando cambias el tema de oscuro a claro y viceversa el fondo se mueve

    Petición sobre ubicación de control de tema + redes

    Hola! me parece muy bonito estos controles
    image
    como sea, no sería bueno tener estos controles visibles desde el primer momento en que entras a la web? no tener que hacer scroll hasta el final de la página poder usarlos?

    De nuevo, quedo muy bonita! saludos

    Bug al redimensionar el reproductor

    Comportamiento esperado

    Al redimensionar el reproductor, con el video cargado, no debería verse la imagen de fondo al redimensionarlo.

    Comportamiento actual

    Al reproducir el video, y cambiar el ancho de la página, se puede observar que se sigue visualizando el thumbnail

    ezgif-5-091b36e6fa

    Información del bug (si corresponde)

    Debería ocultarse la imagen de fondo al hacer click

    /* Post-click styles */
    lite-youtube.lyt-activated {
      cursor: unset;
      background-image: unset !important;
    }

    Pasos para reproducirlo

    1. Reproducir el video
    2. Redimensionar el navegador

    Contexto

    • Navegador: Firefox
    • Versión del navegador: 123.0-1
    • Sistema operativo: Linux

    design: store section proposal 💄

    No sé si el ir a la tienda oficial, es tema de diseño el que sea un botón/link.

    Pero se me ocurre que se podría añadir una sección tipo carrousel para que el usuario vea alguno de los productos de la tienda, y así incitar más a la compra.

    Se podría usa alguna imagen como fondo del estilo del diseño de los iconos de los links y de la selección de los luchadores, el estilo dibujado, para crear consistencia.

    Screenshot 2024-03-11 at 16 46 18

    Puedo encargarme de crear algún diseño en figma para usar como referencia si se aprueba.

    Idea para el diseño de la sección de visualización de luchadores

    Buenas noches, yo tan solo quería aportar una idea que me ha parecido interesante para el siguiente diseño de la sección de selección de luchadores

    Captura de pantalla 2024-03-07 a las 23 31 36

    Nada más verlo se me ha venido a la cabeza esta publicación de twitter de Carmen Ansio (https://x.com/carmenansio/status/1765095450405700056?s=20) que me parece que encajaría a la perfección si se ajusta un poco al hacer la animación cuando se selecciona el luchador en lugar de hacer hover como se ve en la demo.

    Además, acabo de darme cuenta de que fue algo que hizo en la última MiduConf. Dejo el enlace por aquí https://codepen.io/carmenansio/pen/eYbEOLM

    Espero que sirva de ayuda y muchas gracias por leerme!!

    Mobile diseño desplazado

    Lo que hace desplazar son la imagen de fondo (drawn-x) y el div con blur, que como minimo ocupan 400px, en algunos mobiles mas pequeños hace que se desplace.

    image

    Bug: Contenido general de la pagina: no centrado

    Pre-requisitos

    • Estoy corriendo la última versión.
    • He revisado si ya hay un issue creado con las mismas características.

    Comportamiento esperado

    El contenido debería estar centrado, pero por algún motivo este esta desplazado a la izquierda, en móvil.

    Comportamiento actual

    M2

    M3

    Información del bug (si corresponde)

    Pasos para reproducirlo

    1. Solo entrar a la página en móvil

    Contexto

    • Navegador: Safari - IOS.

    Problema de visualización al cambiar tema en dispositivo móvil

    Al intentar cambiar el tema mientras se accede al sitio desde un dispositivo móvil, se ha observado un comportamiento inesperado en la visualización. Específicamente, al realizar esta acción, la pantalla experimenta una reducción de tamaño y sufre deformaciones.

    Este problema se ha reproducido mediante pruebas realizadas utilizando el navegador Safari en un dispositivo iPhone 14 Pro.

    Se adjunta un vídeo que documenta este inconveniente para una mejor comprensión y análisis del mismo.

    RXNS8689.MP4

    Movimiento raro en la sección de SelectYourBoxer

    Pre-requisitos

    • [Sí ] Estoy corriendo la última versión.
    • [Sí] He revisado si ya hay un issue creado con las mismas características.

    Comportamiento esperado

    El componente no debería tener movimientos raros en ninguna previsualización

    Comportamiento actual

    Al bajar a cierto nivel, y pasar el mouse por el luchador, se genera un movimiento raro que creo que es ocasionado por la bandera

    Pasos para reproducirlo

    video.velada.webm

    Overflow visible

    Pre-requisitos

    • Estoy corriendo la última versión.
    • He revisado si ya hay un issue creado con las mismas características.

    Comportamiento esperado

    No debería mostrarse el scroll en el eje X.

    Comportamiento actual

    Se muestra el scroll en el eje X debido a overflow de elemento.

    Información del bug (si corresponde)

    Creo que está relacionado con el fix de la PR cerrada #445 y el issue abierto #415.

    Añadiendo overflow hidden:

    Overflow-hidden-on

    Como está ahora:

    Overflow-hidden-off

    Pasos para reproducirlo

    1. pnpm run dev o ir lavelada.es
    2. Abrir dev-tools para reducir la pantalla

    Contexto

    • Navegador: Firefox, Chrome, Safari.
    • Versión del navegador: La última estable.
    • Sistema operativo: Windows, MacOS, Linux.

    Logs de error (si corresponde)

    Añadir width y height de los svg

    Hay una advertencia en Lighthouse sobre las imágenes de los sponsor:
    Captura-2024-03-08 002312

    Habría que añadir los atributos width y height de los svg.
    Lo podríamos añadir en el archivo consts/sponsors.ts.
    Y al hacer el loop, añadirlo en la etiqueta .

    Luego hay que asegurarse que igualmente se ve bien el svg en todas las resoluciones.

    Mejora del logotipo

    En todos los assets de la velada (ya sea los que haya enseñado Ibai o los que se pueden ver en la web de 2023), el logotipo (y nombre del evento) es "La Velada Del Año", con el artículo "La" formando parte del nombre.

    En el logo actual, dicho artículo no forma parte del logotipo, sino del span superior "Presentación de LA".

    Creo que estaría mejor corregir dicho logo añadiendo el artículo al logo y quitándolo del span.

    Además se podría añadir el isotipo (la x) detrás del texto del logotipo.

    450_1000~2.jpg

    Screenshot_2024-02-22-14-24-43-586_com.brave.browser~2.jpg

    idea para presentación de los peleadores

    Hola! me salte absolutamente todos los pre requisitos y requisitos porque no es ningún bug, quería escribir acá porque me gustó el video del midu en twitch sobre esto y quise transmitir más o menos la idea que tengo, que igual quizás no sirva, quizás sí?

    Cuando vi el video del midu pensé en street fighters, y buscando imágenes de la selección de peleadores encontré esta
    image

    pensé en mostrar la información similar como presentan a los peleadores en la UFC
    image

    falto el estilo cascada de las miniaturas, las miniaturas redondeadas o en esta forma, quizás un efecto como este de zoom, donde la miniatura seleccionada resaltará sobre las demás
    image

    aquí está mi esfuerzo por hacerlo en figma (primera vez que uso así que perdonen la referencia)
    image

    gracias por leer esto y ya ando esperando para ver como quedará finalmente! saludos c:

    Propuesta: Mejorar Konami Code

    Pre-requisitos

    • Estoy corriendo la última versión.
    • He revisado si ya hay un issue creado con las mismas características.

    Comportamiento esperado

    Seria muy interesante que cuando se realice el Konami Code aparezcan desde abajo los iconos de los contributors flotando hacia arriba y vayan desapareciendo. Para esto se podria hacer uso del endpoint

    Tambien se podria usar la integracion de partytown como propuesta.

    Este seria el pequeno secreto de los contribuidores al proyecto.

    Comportamiento actual

    Rotacion del main content

    Anotaciones

    Yo estaria dispuesto a hacerlo, pero requiere trabajo, entonces si es aceptado por la comunidad y el chat, me podria poner en ello, a lo mejor con algo de ayuda :)

    Problema de rendimiento al clicar "AGREGAR AL CALENDARIO"

    Al clicar en el botón de "AGREGAR AL CALENDARIO" hace un efecto un velo borroso para mostrar las opciones de los diferentes sistemas de agenda, esto provoca que el rendimiento del PC vaya cayendo de forma progresiva si lo mantienes abierto. Entiendo que es debido al esfuerzo del procesador gráfico al construir la animación de fondo con el efecto blur.

    Width de la página es mayor al viewport en dispositivos móviles

    Como se puede apreciar en la imagen, la página se sale del viewport al visualizarse en un dispositivo móvil:

    image

    Esto sucede debido a que el componente PresentationVideo.astro tiene una imagen que se escala a un tamaño mayor al viewport.
    Para arreglar esto modifiqué la clase para que el reescalado solo suceda en pantallas medianas o más grandes. (#275)

    Efecto de

    Pre-requisitos

    • Estoy corriendo la última versión.
    • He revisado si ya hay un issue creado con las mismas características.

    Comportamiento esperado

    Agregar un mapa mundi con el efecto de viaje desde el pais del luchador hasta España/Madrid, al puro estilo Street Fighter.

    image

    Agrego codigo de ejemplo hecho en codi.link :

    Codigo

    Comportamiento actual

    No implementado

    Pasos para reproducirlo

    1. Reusar el código proporcionado.
    2. Crear el componente con Astro.

    Debate sobre posible nuevos efectos con three.js

    Hola! Espero que se encuentren super bien, abro esta issue por que estuve trabajando en una PR para mejorar el performance del smoke y acabo de darme cuenta que hicieron un merge de una PR donde eliminaban completamente el uso de three.js lo cual me parece perfecto. Ya que si, tenia un costo impresionante, es cargar 500 kb de puro javascript. Mis felicitaciones al usuario que consigo el mismo efecto con puro CSS <3

    Pero quiero aportarle algunos conocimientos a la comunidad que hasta el día de hoy, no sabia que era posible, y es que gracias a Apis modernas como:
    OffscreenCanvas:
    https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas

    y utilizando web workers, se pueden eliminar toda la carga de three.js! E desplegado en el siguiente enlace un ejemplo básico.
    https://la-velada-web-oficial-eosin.vercel.app/

    Lo continuo utilizando y sigo obteniendo estas increíbles métricas web!
    image
    image

    Pueden ver en mi fork, algunos commits que estuve haciendo, no hice cambios para producción, si no mas bien son pruebas de conceptos, e incluso llegue a compilar con Rollup un archivo ts por que no encontre la manera de que Astro me transpile un archivo typescript para luego montarlo en un worker jajaja

    Lo comento por si surge otra idea, donde podamos realmente explotar las capacidades de three.js para crear efectos "wow" por asi decirlo, y que no nos sintamos limitados por el performance.

    Dejo algunos artículos interesantes:
    https://evilmartians.com/chronicles/faster-webgl-three-js-3d-graphics-with-offscreencanvas-and-web-workers
    https://docs.astro.build/en/guides/integrations-guide/partytown/

    Muchas gracias por leer y que tenga bonito día!

    Mantener el registro

    Me surgió una idea un poco extraña, la cual sería llevar un registro de visitas, es decir, que se visualice la cantidad de visitas que lleva la página y cada vez que sigan visitando la página se muestre en su totalidad la cantidad de visitas.

    Leo opiniones al respecto.

    Saludos.

    Propuesta: Mejorar el boton de agregar a calendario

    Pre-requisitos

    • Estoy corriendo la última versión.
    • He revisado si ya hay un issue creado con las mismas características.

    Comportamiento actual

    Un modal que se mantiene fijo mientras se escrollea y no contrasta con la tematica de la pagina.

    Ademas si lo abres y haces scroll al dar click para que desaparezca el backdrop la pagina hace un scroll automatico hacia arriba que no te deja ver lo que querias ver.

    Las animaciones al abrir el modal tambien son mejorables desde mi punto de vista.

    Comportamiento propuesto

    Un modal que quede centrado y no permita hacer scroll mientras este abierto, que concuerde en estilos con la tematica de la pagina.

    es muy interesante este llamado a la accion para que mas gente se entere cuando esto empiece. Por lo que seria interesante tener este boton en el footer asi cuando naveguen entre las futuras paginas y lleguen al final (lo que significa que les intereso) el usuario vea la opcion de guardar un recordatorio.

    alineación

    Hola, primero quería decir que está muy bonita la website! no sé si este sea el lugar adecuado para reportar esta cosita de alineación

    align

    Saludos!

    Cambiar las horas de la fecha de presentación

    Mi idea seria ->

    Cambiar las horas de la fecha de presentación y adecuarlas a cada zona local de cada persona, la cual ingrese y pueda ver la hora exacta, la cual él pueda entrar a la hora adecuada.

    Saludos.

    Estado del directo

    Hola buenas chicos,

    No estoy seguro si será buena idea pero la dejo a elección de ustedes. Estaba pensando que talvez podría usarse el icono de Twitch (o alguna otra imagen representativa) para poder revisar el estado en directo de ibai en el momento que se entre a la página, la idea sería hacer este proceso de manera asíncrona con los procesos que se están realizando actualmente, para que no interrumpa el resto, de manera que si Ibai está en directo, la página incentive al usuario a ir en ese momento a su directo, modo:

    image

    Y si está offline demuestre también que en ese momento no está conectado:

    image

    Tengo entendido que actualmente estas imagenes (y el color intermedio) sólo varían según la posición del usuario en la página (si estás arriba muestra la segunda y sino la primera), pero personalmente creo que agregaría algo de dinamismo al sistema (aunque repito, igual puede ser algun otro simbolo o texto como un "en directo" arriba a la derecha de la pantalla)

    Saludos

    Bug en la animación del Konami Code

    Parece que hay un problema con el Konami Code. Cuando se ingresa el código (Arriba, arriba, abajo, abajo, izquierda, derecha, izquierda, derecha, B, A), la animación asociada no se completa y se interrumpe antes de tiempo.

    Pregunta Figma

    Esta el figma de alguna forma publico para la visualizacion?

    `pnpm install` error on Windows 11

    Como dice el título, aparece un error en mi máquina al ejecutar pnpm install:

    image

    Parece estar relacionado a este script (introducido en #178):

    "scripts": {
      "postinstall": "[ -d '.husky' ] && husky install || true"
    }

    Error en el countdown por región

    Estoy en Argentina y veo que el evento se va a realizar a las 15:00hs de Argentina. Sin embargo, el timer dice que faltan 10h y 10m para el evento, lo cual me estaría indicando que el evento se haría a las 07:00hs.

    image

    image

    ¿Puede que tenga algo que ver el usar un timestamp hardcodeado EVENT_TIMESTAMP sin ajustar al horario argentino vs un Date.now()?

    Recommend Projects

    • React photo React

      A declarative, efficient, and flexible JavaScript library for building user interfaces.

    • Vue.js photo Vue.js

      🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

    • Typescript photo Typescript

      TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

    • TensorFlow photo TensorFlow

      An Open Source Machine Learning Framework for Everyone

    • Django photo Django

      The Web framework for perfectionists with deadlines.

    • D3 photo D3

      Bring data to life with SVG, Canvas and HTML. 📊📈🎉

    Recommend Topics

    • javascript

      JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

    • web

      Some thing interesting about web. New door for the world.

    • server

      A server is a program made to process requests and deliver data to clients.

    • Machine learning

      Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

    • Game

      Some thing interesting about game, make everyone happy.

    Recommend Org

    • Facebook photo Facebook

      We are working to build community through open source technology. NB: members must have two-factor auth.

    • Microsoft photo Microsoft

      Open source projects and samples from Microsoft.

    • Google photo Google

      Google ❤️ Open Source for everyone.

    • D3 photo D3

      Data-Driven Documents codes.