con tu nombre.
+
+- Puedes añadir una imagen diferente si lo prefieres, pero asegúrate de que sea una imagen jpeg y que tenga un tamaño de 450\*450 píxeles, siguiendo la estructura de nombres mencionada anteriormente.
+
+
+
+- 
Una vez guardada, arrastra tu imagen a la carpeta public/img/avatar.
+
+
+
+## Paso 7. AGREGA la imagen de tu BID (Antes de Morir) 
+
+- Encuentra o crea una imagen que represente lo que deseas hacer antes de morir. Puede ser un collage o un elemento único. Tómate tiempo para reflexionar y haz que tenga un significado personal, ya que estás invirtiendo en ti mismo al contribuir a este proyecto de código abierto y definir lo que es significativo e importante para ti.
+- La imagen debe tener un tamaño de al menos 500\*500 píxeles.
+- Agrega tu imagen a la carpeta `public/img/bid_image`.
+- Puedes experimentar con cómo el tamaño de tu imagen afecta la galería de fotos y ajustarlo en consecuencia.
+ Puede ser útil encontrar imágenes de alta calidad en sitios web como [UnSplash](https://unsplash.com/) o utilizar herramientas de generación de imágenes con IA. Además, editar tus imágenes en herramientas como [Canva](https://www.canva.com/) puede hacer que tu imaginería sea excelente y significativa para ti.
+
+
+
+## Paso 8. AGREGA al archivo CONTRIBUTORS.md
+
+Copia el código de abajo y pégalo en el CONTRIBUTORS archivo de este repositorio. Asegúrate de pegarlo debajo de la columna final de otro colaborador. Luego procede a editar con tu propia información.
+
+```html
+
+
+
+ 
+
+ YOUR_NAME
+
+ |
+
+```
+
+
+
+### Algunas cosas para cambiar:
+
+- Reemplaza el enlace con tu propio enlace de perfil
+ ``
+
+- Haz clic derecho en la imagen de tu perfil de GitHub, copia el enlace de la imagen y pégalo dentro de la etiqueta `img`. Deja la propiedad `width="100px"`.
+
+```html
+
+```
+
+Solo ve a tu página de perfil de GitHub para obtener tu imagen y enlace de perfil.
+
+
+
+- Reemplaza la etiqueta `sub` con tu propio nombre.
+
+```html
+Tu Nombre
+```
+
+Luego guarda los cambios.
+
+
+
+## Paso 9. Git Add, Commit y Push 
+
+Agrega tus nuevos cambios a la rama que creaste usando el comando `git add`:
+
+```javascript
+git add .
+```
+
+Ahora, confirma esos cambios usando el comando `git commit`:
+
+```javascript
+git commit -m "Add tu-nombre to Before I Die"
+```
+
+Reemplaza `tu-nombre` con tu nombre.
+
+Empuja tus cambios usando el comando `git push`:
+
+```javascript
+git push origin nombre-de-tu-rama
+```
+
+Reemplaza `nombre-de-tu-rama` con el nombre de la rama que creaste anteriormente.
+
+
+ - Antes de continuar con estos pasos, asegúrate de que tus cambios cumplan con los requisitos de los pasos anteriores
+ - Asegúrate de haber agregado la imagen de avatar, la imagen del BID (Antes de Morir) y de que todo tu texto JSON se haya ingresado correctamente y se muestre correctamente en tu servidor de desarrollo React
+ - Confirma tus cambios con el mensaje "añadir tu mensaje aquí"
+ - Empuja tus cambios a la rama que creaste anteriormente al hacer el comando `git checkout`
+ - Mira el ejemplo a continuación
+
+
+### Ejemplo de flujo de trabajo de add/commit/push:
+
+Si estás en el directorio BeforeIDieAchievements en tu terminal:
+
+```javascript
+ git add .
+ git commit -m "Add Xander Clemens to Before I Die"
+ git push -u origin add-Xander-Clemens
+```
+
+## Paso 10. Envía tus cambios para revisión 
+
+Si vas a tu repositorio en GitHub, verás un botón `Compare & pull request` . Haz clic en ese botón.
+
+
+
+Ahora envía la solicitud de extracción haciendo clic en el botón `Create pull request`. Asegúrate de agregar detalles sobre lo que estás añadiendo a la solicitud de extracción.
+
+
+
+Si la implementación es exitosa, habrá una opción en la pantalla de abajo para ver una "vista previa" de tu contribución antes de que se publique.
+
+
+Al ver esta pantalla, tu contribución será aceptada y fusionada en la rama principal o se te brindará retroalimentación y se solicitarán cambios.
+Estare fusionando todos tus cambios en la rama principal de este proyecto. Recibirás un correo electrónico de notificación una vez que los cambios se hayan fusionado.
+
+
+ - En caso de que se soliciten cambios, sigue el mismo flujo de trabajo para solicitar y actualizar tu solicitud de extracción.
+ - Si no se han solicitado cambios, se fusionará en la rama de producción.
+
+
+## ¿Necesitas más ayuda? 
+
+Si necesitas ayuda adicional con cualquier problema, no dudes en contactarme en [LinkedIn](https://www.linkedin.com/in/alexanderclemens/) o encuentra mis detalles de contacto en mi [sitio web](https://www.xanderclemens.com/).
+
+## ¡Gracias por contribuir! 
+
+- ¡Felicitaciones! 
Acabas de completar el flujo de trabajo estándar de fork -> clone -> edit -> pull request que a menudo encontrarás como colaborador!
+
+- Por favor, agrega una estrella 
a este repositorio y compártelo con alguien que pueda disfrutar contribuyendo.
+
+Espero que te diviertas mucho mientras contribuyes a este proyecto. Si te inspiraste en tu propia investigación sobre lo que deseas hacer antes de morir, por favor agrega una estrella 
a este repositorio y compártelo con otros para animarlos a contribuir e identificar lo que quieren hacer antes de morir.
+
+# Contribuciones 
+
+Nos encantan 
las solicitudes de extracción de todos. Al participar en este proyecto, aceptas cumplir con el [Codigo de Conducta](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/translations/Spanish/CODE_OF_CONDUCT.md). Por favor, continúa agregando a este proyecto al observar el [Road Map](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/ROADMAP.md) 
de este proyecto, además de crear o contribuir a [problemas](https://github.com/BeforeIDieCode/BeforeIDieAchievements/issues) para mejorar aún más este proyecto con funciones.
diff --git a/translations/Spanish/LICENSE b/translations/Spanish/LICENSE
index e69de29b..525093ad 100644
--- a/translations/Spanish/LICENSE
+++ b/translations/Spanish/LICENSE
@@ -0,0 +1,19 @@
+Licencia MIT
+
+Derechos de autor (c) 2022 Arash
+
+Por la presente se concede permiso, de forma gratuita, a cualquier persona que obtenga una copia
+de este software y archivos de documentación asociados (el "Software"), para utilizar el Software
+sin restricciones, incluidos, entre otros, los derechos a usar, copiar, modificar, fusionar,
+publicar, distribuir, sublicenciar y/o vender copias del Software, y a permitir a las personas a
+las que se les proporcione el Software que lo hagan, sujeto a las siguientes condiciones:
+
+El aviso de derechos de autor anterior y este aviso de permiso se incluirán en todas las
+copias o partes sustanciales del Software.
+
+EL SOFTWARE SE PROPORCIONA "TAL CUAL", SIN GARANTÍA DE NINGÚN TIPO, EXPRESA O IMPLÍCITA,
+INCLUYENDO PERO NO LIMITADO A GARANTÍAS DE COMERCIABILIDAD,
+IDENOIDAD PARA UN PROPÓSITO PARTICULAR Y NO INFRACCIÓN. EN NINGÚN CASO, LOS AUTORES O TITULARES
+DE LOS DERECHOS DE AUTOR SERÁN RESPONSABLES DE NINGÚN RECLAMO, DAÑO U OTRA RESPONSABILIDAD,
+YA SEA EN UNA ACCIÓN DE CONTRATO, AGRAVIO O CUALQUIER OTRO MOTIVO, QUE SURJA DE O EN RELACIÓN CON
+EL SOFTWARE O SU USO U OTROS NEGOCIOS EN EL SOFTWARE.
diff --git a/translations/Spanish/README.md b/translations/Spanish/README.md
index e69de29b..fe2325b0 100644
--- a/translations/Spanish/README.md
+++ b/translations/Spanish/README.md
@@ -0,0 +1,61 @@
+
+
+https://github.com/BeforeIDieCode/BeforeIDieAchievements/assets/120526253/69f2cac2-e8cb-4d6c-9ffd-5588c6aebb73
+
+
+
+[](https://github.com/firstcontributions/open-source-badges)
+[](https://opensource.org/licenses/MIT)
+
+
+
+[](https://hits.sh/github.com/BeforeIDieCode/BeforeIDieAchievements/)
+
+
+# BeforeIDieAchievements
+
+🌟 Bienvenido a BeforeIDieAchievements 
, un proyecto de código abierto que ayuda a los desarrolladores a hacer su primera solicitud de extracción (pull request) y contribuir a proyectos de código abierto. Ver el [enlace en vivo](https://before-i-die-achievements.vercel.app/).
+
+## 🚀🎯 ¿Qué es BeforeIDieAchievements?
+
+BeforeIDieAchievements es una plataforma para ayudar a los desarrolladores a involucrarse en proyectos de código abierto y documentar sus metas de vida
. Los desarrolladores pueden compartir sus aspiraciones con una imagen 
y texto 
describiendo lo que desean lograr antes de morir. Comparte tus metas y aspiraciones de vida con otros, reflexiona sobre lo que realmente importa en tu vida y conecta con personas con ideas afines. Aprovecha el poder de la comunidad para alcanzar tus sueños
. Before I Die Code es una plataforma para documentar tus metas de vida, aprender cómo contribuir a un proyecto de código abierto y es `UN PROYECTO EXCELENTE PARA PRINCIPIANTES`. Puedes obtener más información sobre este proyecto en este [ARTÍCULO DE MEDIUM](https://xanderclemens.medium.com/discover-your-life-goals-and-make-your-first-open-source-contribution-with-before-i-die-code-aea8e1130d96) 
o visitando el archivo [about.md](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/about.md) 
.
+
+## 💡🔗 Cómo Contribuir
+
+¡Gracias por tu interés en contribuir a nuestro proyecto de código abierto! Damos la bienvenida a las contribuciones de ingenieros de software como tú. Así es cómo puedes empezar:
+
+1. Consulta las [GUÍAS DE CONTRIBUCIÓN](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/translations/Spanish/CONTRIBUTION-GUIDELINES.md): Este archivo contiene instrucciones sobre cómo contribuir al proyecto. Proporciona detalles sobre los requisitos específicos para agregar tu imagen "Before I Die" y texto a nuestra galería de fotos
. Asegúrate de seguir estas pautas para que tu contribución sea aceptada
.
+2. Mejora el proyecto: Echa un vistazo a los [problemas abiertos](https://github.com/BeforeIDieCode/BeforeIDieAchievements/issues) y [ROADMAP](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/ROADMAP.md) del proyecto. Estas son áreas en las que puedes contribuir y marcar la diferencia. Elige un problema o tarea que se alinee con tus habilidades e intereses. Puedes comenzar comentando en el problema para expresar tu interés en trabajar en él.
+3. Crea tu propio problema: Si tienes ideas propias 
para mejorar el proyecto, no dudes en crear tu propio problema. Describe tu idea y las mejoras que te gustaría hacer. Esto permite que otros colaboren contigo y brinden comentarios. Juntos, podemos seguir mejorando nuestras habilidades.
+4. Envía tu contribución: Una vez que hayas realizado tus cambios o adiciones, envía tu contribución siguiendo las pautas proporcionadas en las [GUÍAS DE CONTRIBUCIÓN](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/translations/Spanish/CONTRIBUTION-GUIDELINES.md).
+
+Recuerda que la comunicación y la colaboración son clave en los proyectos de código abierto. No dudes en hacer preguntas, buscar aclaraciones o solicitar ayuda a los mantenedores del proyecto u otros colaboradores. Valoramos tus contribuciones y esperamos trabajar contigo 
para mejorar este proyecto
.
+¡Feliz contribución! 
.
+
+## 
Empezando
+
+Para comenzar con BeforeIDieAchievements, simplemente haz un fork 
del repositorio y comienza a contribuir. Damos la bienvenida a todos los contribuidores primerizos y estamos felices de ayudarte a hacer tu primera solicitud de extracción. Consulta las [GUÍAS DE CONTRIBUCIÓN](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/translations/Spanish/CONTRIBUTION-GUIDELINES.md).
+
+## 🎉
Licencia
+
+BeforeIDieAchievements está licenciado bajo la Licencia MIT. Consulta el archivo [LICENCIA](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/translations/Spanish/LICENSE) para obtener más información.
+
+## 
Contribuidores 
+
+Nos gustaría agradecer a todos los contribuidores que han ayudado a hacer posible BeforeIDieAchievements. Consulta el archivo [CONTRIBUTORES](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/CONTRIBUTORS.md) para ver una lista de todas las personas increíbles que han contribuido a este proyecto.
+
+## 
Contacto
+
+Si tienes alguna pregunta o comentario sobre BeforeIDieAchievements, no dudes en ponerte en contacto con nosotros. ¡Nos encantaría saber de ti! Por el momento, puedes contactarme en [LinkedIn](https://www.linkedin.com/in/alexanderclemens/) o encontrar mis detalles de contacto en mi [sitio web](https://www.xanderclemens.com/).
+
+Gracias por tu interés en BeforeIDieAchievements. Esperamos que disfrutes contribuyendo a este proyecto, documentando tus metas de vida y 
marcando con una este repositorio.
+
+## 
Pila de Tecnologías
+
+El proyecto está construido utilizando las siguientes tecnologías y marco:
+
+| [React](https://reactjs.org/) | [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5) | [CSS3](https://developer.mozilla.org/en-US/docs/Web/CSS) | [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) | [Vercel](https://vercel.com/) |
+| ------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+|  |  |  |  |  |
+
+Adicionalmente, los emojis utilizados para los archivos Markdown de este repositorio fueron creados por [Tarikul Islam Anik](https://github.com/Tarikul-Islam-Anik), quien creó el repositorio 
[Animated Fluent Emojis](https://github.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis)
para ayudar con el uso de los emojis animados y fluidos de Microsoft disponibles en un solo lugar y listos para usar en tu próximo proyecto o archivo README. El [enlace](https://animated-fluent-emoji.vercel.app/) al sitio web.
diff --git a/translations/Spanish/about.md b/translations/Spanish/about.md
index e69de29b..e4188184 100644
--- a/translations/Spanish/about.md
+++ b/translations/Spanish/about.md
@@ -0,0 +1,239 @@
+
+
+# Descubre tus Metas de Vida ✨ y Haz Tu Primera Contribución de Código de Código Abierto 📝 con Before I Die
+
+
+
+
+
+Sentarme junto a pacientes en cuidados paliativos en Altamonte Springs, Florida, en sus últimos momentos cambió profundamente mi perspectiva sobre la vida cuando tenía 23 años. Durante mi entrenamiento, hicimos un ejercicio en el que escribimos nuestras listas de deseos y las compartimos en voz alta. A medida que avanzábamos por la habitación, me di cuenta de que, ya sea que tengas 25 o 95 años, todos tenemos sueños que anhelamos cumplir antes de que se acabe nuestro tiempo.
+
+
+
+
+Mi lista de deseos de 2017, cuando era voluntario en Hospice of the Comforter en Altamonte Springs, Florida.
+
+
+
+
+
+Manos reconfortantes en una unidad de cuidados paliativos
+
+
+
+Después de preguntar a amigos y desconocidos qué quieren hacer antes de morir, me sorprendió la diversidad y profundidad de sus respuestas. Algunos querían enamorarse❤️, otros presenciar un glaciar🧊. Muchos deseaban reconectar con su familia distanciada, visitar un lugar exótico o participar en un deporte extremo. Sus respuestas estaban llenas de significado y pasión.
+
+Viajé por todos los continentes, con mi teléfono en mano, [recolectando estas historias](https://www.xanderclemens.com/what-do-you-want-to-do-before-you-die). Desde las costas de Alaska hasta Nueva Zelanda y en el camino. Documenté a personas compartiendo cuidadosamente sus objetivos de vida definitivos. Jóvenes y viejos, ricos y pobres, todos tenemos sueños que llevamos.
+
+Esta experiencia me mostró el poder de reflexionar profundamente sobre la pregunta: ¿Qué es lo que más importa? Une nuestra humanidad compartida. Todos queremos amar, crear, conectar, explorar y dejar una marca positiva en este mundo.
+
+Foto de Megan Bucknall en Unsplash
+
+Creé el proyecto de código abierto [Before I Die Code](https://github.com/BeforeIDieCode/BeforeIDieAchievements) para inspirar a otros a identificar su propósito. Es un lugar para compartir tus sueños junto con tu primera contribución al código abierto. Porque la vida no está destinada a vivirse pasivamente, sino a vivirse con intención. Descubramos nuestras metas más significativas... antes de morir.
+
+Me emociona compartir Before I Die Code, un proyecto de código abierto que ayuda a los desarrolladores a contribuir al código abierto mientras reflexionan sobre sus metas y sueños de vida.
+
+➡️ [BEFORE I DIE GitHub Repo](https://github.com/BeforeIDieCode/BeforeIDieAchievements)
+
+#### Video Explicativo de Before I Die Code ⬇️
+
+[](https://www.youtube.com/watch?v=xiszqfD_W6U)
+
+### Comparte Tus Aspiraciones a Través del Código Abierto
+
+La idea detrás de Before I Die Code es simple pero poderosa: los desarrolladores comparten una imagen y un texto que describe lo que quieren lograr en la vida antes de morir.
+
+
+
+
+
+Mi compartición de lo que quiero lograr antes de morir desde el proyecto de código abierto Before I Die Code 💻
+
+
+
+### Esto te permite:
+
+- Reflexionar profundamente sobre tus objetivos, sueños y elementos de tu lista de deseos
+
+- Identificar lo que más te importa y el legado que deseas dejar
+
+- Compartir abiertamente tus aspiraciones con el mundo
+
+- Conectar de manera más profunda con otros desarrolladores a través de sueños compartidos
+
+- ¡Hacer tu primera contribución al código abierto de una manera personal y significativa!
+
+### Un Proyecto de Código Abierto Creado para Principiantes
+
+Before I Die, Code está diseñado intencionalmente para ser amigable para principiantes. Lo construí para proporcionar una entrada fácil a aquellos que buscan comenzar en el código abierto.
+
+#### El proyecto ofrece:
+
+- Pautas de contribución paso a paso para guiarte en la realización de tu primera solicitud de extracción (pull request).
+
+- Comentarios claros y detallados en el código que explican la configuración del servidor de desarrollo de React, la edición del archivo Contributors.json, la adición de imágenes y la edición del archivo [CONTRIBUTORS.md](http://CONTRIBUTORS.md).
+
+- Una comunidad acogedora y solidaria de entusiastas del código abierto.
+
+Es el espacio perfecto para aprender el flujo de trabajo de las solicitudes de extracción, mejorar tus habilidades de programación, conectarte con otros y definir tu propósito de vida.
+
+### Cómo Participar en Before I Die Code
+
+Contribuir es sencillo:
+
+1. [Haz un fork del repositorio en GitHub](https://github.com/BeforeIDieCode/BeforeIDieAchievements/fork)
+
+2. Sigue las [pautas de contribución](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/translations/Spanish/CONTRIBUTION-GUIDELINES.md) para añadir tu objetivo "Antes de Morir", incluyendo una imagen y un texto de descripción.
+
+3. Abre una solicitud de extracción para enviar tu contribución.
+
+4. Comentarios adicionales, reportes de errores 🪲 y nuevas ideas 💡 son bienvenidos.
+
+El proyecto Before I Die Code está construido con [React](https://reactjs.org/), [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript), [HTML](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5), and [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS), y actualmente está implementado en [Vercel](https://vercel.com/). Sin embargo, la tecnología cambiará con la implementación, ya que tengo planeado postular este proyecto de código abierto para que sea destacado en la página d [exploración de GitHub](https://github.com/explore). Para ello, el proyecto deberá utilizar páginas de GitHub.
+
+### Un poco sobre cómo se ha construido este proyecto
+
+Se me ocurrió esta idea mientras aprendía a contribuir de manera independiente en proyectos de código abierto. Los principales repositorios recomendados para principiantes consisten en actualizar el archivo markdown con su información de GitHub, lo cual es útil para entender el flujo de trabajo de cómo contribuir y completar una solicitud de extracción. Sin embargo, yo quería ver un proyecto que demostrara dónde los nuevos colaboradores tuvieran que reflexionar por sí mismos sobre lo que es importante para ellos y compartir ese aspecto. Compartir esto públicamente hará que las personas sientan más significado y apego para continuar desarrollando la base de código, la pila tecnológica y la expansión de cómo este proyecto puede evolucionar y crecer con el tiempo.
+
+El inicio de este proyecto se lo debo al usuario de GitHub [Arash](https://github.com/Banana021s) quien compartió y construyó una [Galería de Medios con Tema de React](https://github.com/Banana021s/Gallery-Media) que utilicé como punto de partida para construir la primera versión de Before I Die Code. Hice esto porque no pude encontrar la galería de fotos exacta que quería para este proyecto sin instalar bibliotecas adicionales de React, y en la fase inicial de este proyecto, intenté limitar el uso de bibliotecas por cuestiones de tamaño y para comprender mejor las capacidades de CSS y React JSX por sí mismas. Arash hizo un excelente trabajo construyendo una Galería de Medios que pude entender cómo operar y personalizar para este proyecto.
+
+La mayoría de mi investigación y las adiciones de bloques de código específicos provinieron del uso de [Perplexity.ai](http://Perplexity.ai), un motor de búsqueda impulsado por inteligencia artificial y una herramienta de descubrimiento de información. Por ejemplo, esto me llevó a configurar y utilizar el bloque de código en mi componente MasonryLayout.jsx (ubicado en src/Components/MasonryLayout/MasonryLayout.jsx del proyecto) para aleatorizar las imágenes de los colaboradores cada vez que un usuario vea o actualice la página web.
+
+#### Video de la reorganización de imágenes ⬇️
+
+[](https://www.youtube.com/watch?v=XbAL3ajad3c)
+
+### El código React.jsx que utilicé para este componente:
+
+```javascript
+// import styles of this component
+import styles from "./MasonryLayout.module.css";
+
+// import other react pkg to use
+import Masonry from "react-masonry-css";
+
+// import other component to use
+import MasonryBox from "./MasonryBox/MasonryBox";
+
+// MasonryLayout Component
+const MasonryLayout = ({ images }) => {
+ const breakpointColumnsObj = {
+ default: 3,
+ 1100: 2,
+ 700: 1,
+ };
+
+ // Shuffle the images array
+ const shuffledImages = images.sort(() => Math.random() - 0.5);
+
+ return (
+
+ {shuffledImages.map((item) => (
+
+ ))}
+
+ );
+};
+
+export default MasonryLayout;
+```
+
+- Importé los estilos, la biblioteca React Masonry y el componente MasonryBox que necesitaba para mi componente MasonryLayout. También definí la función del componente MasonryLayout.
+
+- Dentro de mi componente, especifico puntos de interrupción para el diseño de columnas en diferentes tamaños de pantalla en un objeto breakpointColumnsObj. Mezclo aleatoriamente el array de imágenes para que los elementos se muestren en un orden variado.
+
+- Hago un mapeo sobre el array de imágenes mezclado para renderizar componentes individuales de MasonryBox para cada imagen que se pasa. El componente MasonryLayout devuelve el propio diseño de cuadrícula de Masonry.
+
+- Al devolver el diseño, pasé las columnas de puntos de interrupción que definí, las clases de estilo y los componentes MasonryBox mapeados. Esto renderiza una cuadrícula de mosaico de imágenes receptiva que muestra los elementos de imagen mezclados en componentes Masonry Box.
+
+La ayuda adicional y los recursos provinieron de estudiar otros proyectos de código abierto y los repositorios de desarrolladores. Por ejemplo, mientras buscaba en GitHub, encontré al desarrollador de frontend, desarrollador de código abierto y escritor técnico [Victor Eke](https://github.com/Evavic44). De los muchos proyectos de código abierto en los que ha colaborado y creado, utilicé su repositorio [Portfolio Ideas](https://github.com/Evavic44/portfolio-ideas) para obtener ideas sobre la estructura de la documentación y, además, leí su artículo de blog [“How my open source project got 1000 stars on GitHub in 4 months”](https://eke.hashnode.dev/how-my-open-source-project-got-1000-stars-on-github-in-4-months) sobre lo que hizo para superar las 1,000 estrellas en su proyecto de código abierto. También estudié uno de los repositorios [first-contributions repositories](https://github.com/firstcontributions/first-contributions) más populares (que tiene más de 37,000 estrellas) por la excelente estructura de la documentación. Y por último, para añadir más interés visual a la documentación que se encuentra en todo el Before I Die Code, utilicé el proyecto de código abierto [Animated Fluent Emojis](https://github.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis) creado por [Tarikul Islam Anik](https://github.com/Tarikul-Islam-Anik).
+
+El proyecto está construido con el framework React y estructurado con un directorio público (public) y un directorio de código fuente (src). La estructura de carpetas de este proyecto se abrió en mi Visual Studio Code.
+
+
+
+
+Estructura de archivos de Before I Die Code
+
+
+
+
+Hoja de ruta actual de [ROADMAP.MD](http://ROADMAP.MD) para Before I Die Code a partir del 17 de agosto de 2023
+
+
+
+Ejemplos de comportamiento que contribuyen a un entorno positivo en nuestra comunidad incluyen:
+
+- Mostrar empatía y amabilidad hacia otras personas
+- Respetar opiniones, puntos de vista y experiencias diferentes
+- Dar y aceptar de manera elegante comentarios constructivos
+- Aceptar responsabilidad y disculparnos con aquellos afectados por nuestros errores, y aprender de la experiencia
+- Enfocarnos en lo que es mejor no solo para nosotros como individuos, sino para la comunidad en general
+
+Ejemplos de comportamiento inaceptable incluyen:
+
+- El uso de lenguaje o imágenes sexualizadas, y atención sexual o avances de cualquier tipo
+- Trolleo, comentarios insultantes o despectivos, y ataques personales o políticos
+- Acoso público o privado
+- Publicar información privada de otros, como una dirección física o de correo electrónico, sin su permiso explícito
+- Otro comportamiento que razonablemente se pueda considerar inapropiado en un entorno profesional
+
+## Responsabilidades de Cumplimiento 
+
+Los líderes de la comunidad son responsables de aclarar y hacer cumplir nuestros estándares de comportamiento aceptable y tomarán medidas correctivas adecuadas y justas en respuesta a cualquier comportamiento que consideren inapropiado, amenazante, ofensivo o perjudicial.
+
+Los líderes de la comunidad tienen el derecho y la responsabilidad de eliminar, editar o rechazar comentarios, confirmaciones, código, ediciones wiki, problemas y otras contribuciones que no estén alineadas con este Código de Conducta, y comunicarán las razones de las decisiones de moderación cuando sea apropiado.
+
+## Alcance 
+
+Este Código de Conducta se aplica en todos los espacios de la comunidad, y también se aplica cuando un individuo representa oficialmente a la comunidad en espacios públicos. Ejemplos de representar a nuestra comunidad incluyen usar una dirección de correo electrónico oficial, publicar a través de una cuenta oficial en redes sociales o actuar como un representante designado en un evento en línea u offline.
+
+## Cumplimiento 
+
+Los casos de comportamiento abusivo, acosador o inaceptable de alguna otra manera pueden ser
+reportados a los líderes de la comunidad responsables de la ejecución en.
+
+Todas las quejas serán revisadas e investigadas de manera rápida y justa.
+
+Todos los líderes de la comunidad tienen la obligación de respetar la privacidad y la seguridad del denunciante de cualquier incidente.
+
+## Directrices de Cumplimiento 
+
+Los líderes de la comunidad seguirán estas Directrices de Impacto en la Comunidad para determinar las consecuencias de cualquier acción que consideren una violación de este Código de Conducta:
+
+### 1. Corrección 
+
+**Impacto en la Comunidad**: Uso de lenguaje inapropiado u otro comportamiento poco profesional o no deseado en la comunidad.
+
+**Consecuencia**: Una advertencia privada por escrito de los líderes de la comunidad, proporcionando claridad sobre la naturaleza de la violación y una explicación de por qué el comportamiento fue inapropiado. Se puede solicitar una disculpa pública.
+
+### 2. Advertencia 
+
+**Impacto en la Comunidad**: Una violación a través de un solo incidente o una serie de acciones.
+
+**Consecuencia**: Una advertencia con consecuencias para el comportamiento continuo. No interacción con las personas involucradas, incluida la interacción no solicitada con aquellos que hacen cumplir el Código de Conducta, durante un período de tiempo especificado. Esto incluye evitar interacciones en espacios comunitarios, así como en canales externos como las redes sociales. Violaciones de estos términos pueden resultar en una prohibición temporal o permanente.
+
+### 3. Ban Temporal 
+
+**Impacto en la Comunidad**: Una violación grave de los estándares de la comunidad, incluida un comportamiento inapropiado sostenido.
+
+**Consecuencia**: Un ban temporal de cualquier tipo de interacción o comunicación pública con la comunidad por un período de tiempo especificado. No se permite la interacción pública o privada con las personas involucradas, incluida la interacción no solicitada con aquellos que hacen cumplir el Código de Conducta durante este período. Violaciones de estos términos pueden resultar en un ban permanente.
+
+### 4. Ban Permanente 
+
+**Impacto en la Comunidad**: Demostrar un patrón de violación de los estándares de la comunidad, incluido un comportamiento inapropiado sostenido, acoso a un individuo, o agresión hacia o denigración de clases de individuos.
+
+**Consecuencia**: Una prohibición permanente de cualquier tipo de interacción pública dentro de la comunidad.
+
+## Atribución 
fue construido utilizando el marco de trabajo React y el servidor de desarrollo debe ser iniciado para poder ver el proyecto en tu máquina local.
+
+
+Visita el [repositorio](https://github.com/BeforeIDieCode/BeforeIDieAchievements) en Github y haz clic en el botón de Fork. Esto creará una copia en tu cuenta.
+
+https://github.com/BeforeIDieCode/BeforeIDieAchievements/assets/120526253/a8425d90-5f3e-4ee6-8499-2cf50643573c
+
+## Paso 2. Clonar, abrir, instalar e iniciar 
+
+Abre una terminal y ejecuta el siguiente comando git:
+
+`git clone url-que-acabas-de-copiar`
+donde url-que-acabas-de-copiar debe ser reemplazado con la URL de este repositorio (tu fork de este proyecto). Mira los pasos anteriores para obtener la URL.
+
+
+Luego ve al directorio donde se guarda el proyecto y ejecuta
el siguiente comando:
+
+`npm i` para instalar las dependencias y poder ejecutar el Servidor de Desarrollo de React.
+
+
+
+Luego ejecuta el siguiente comando para iniciar y ejecutar el Servidor de Desarrollo de React ⚛️:
+
+`npm start`
+
+
+
+Cuando se esté ejecutando correctamente, tu terminal se verá así 
+
+Abre el repositorio clonado en un editor de código como Visual Studio Code, o cualquier otro editor de tu elección. Los siguientes pasos demuestran el proceso usando Visual Studio Code, pero el mismo flujo de trabajo se aplica a otros editores de código o utilizando GitHub Codespaces.
+
+Cambia al directorio del repositorio en tu computadora (si aún no estás allí):
+
+```
+cd BeforeIDieAchievements
+```
+
+Ahora crea una rama usando el comando:
+
+```
+git checkout -b nombre-de-tu-rama
+```
+
+Por ejemplo:
+
+```
+git checkout -b add-Xander-Clemens
+```
+
+## Paso 4. PEGA tu archivo JSON 
+
+- Pega el siguiente código JSON en src/Jsons/Contributors.json
+- Desplázate hacia la parte inferior de la lista y agrega una "," al último contribuyente en formato JSON antes de pegar tu código JSON.
+
+```
+{
+ "id": "TU_NOMBRE",
+ "image": "img/bid_image/TU_NOMBRE.jpg",
+ "avatar": "img/avatar/TU_NOMBRE.jpg",
+ "name": "TU_NOMBRE",
+ "location": "TU_CIUDAD_PAÍS_Y_BANDERA",
+ "GitHub": "URL_PERFIL_GITHUB",
+ "text": "PEGA_LO_QUE_QUIERES_HACER_ANTES_DE_MORIR"
+}
+```
+
+
+
+Para completar el código JSON proporcionado, sigue estas instrucciones:
+
+1. Reemplaza "TU_NOMBRE" con tu nombre real en todas las apariciones.
+2. Reemplaza "TU_CIUDAD_PAÍS_Y_BANDERA" con tu ciudad, país y bandera. 
emoji.
+3. Reemplaza "URL_PERFIL_GITHUB" con la URL de tu perfil en GitHub.
+4. Reemplaza "PEGA_LO_QUE_QUIERES_HACER_ANTES_DE_MORIR" con un texto que describa lo que deseas hacer antes de morir.
+
+- Este es el momento de pensar 
y reflexionar sobre lo que TÚ deseas hacer antes de morir y compartirlo aquí. Este texto describirá la imagen que subas a la carpeta bid_image. Por favor, limita tu texto a 130 palabras.
+
+```
+{
+ "id": "Juan Perez",
+ "image": "img/bid_image/Juan_Perez.jpg",
+ "avatar": "img/avatar/Juan_Perez.jpg",
+ "name": "Juan Perez",
+ "location": "Santiago, Chile 🇨🇱",
+ "GitHub": "https://github.com/juanperez",
+ "text": "I want to climb the Villarrica volcano before I die"
+}
+```
+
+## Paso 6. AGREGA la imagen de tu perfil de GitHub 
+
+- Ve a tu perfil de GitHub y luego guarda la imagen de tu avatar con el formato