-
+
An Open
@@ -41,7 +49,7 @@ const Header = () => {
{" "}
-
+
{
+const MasonryBox = ({
+ wallSrc,
+ userProf,
+ userName,
+ userJob,
+ githubUrl,
+ userText,
+}) => {
const handleUserProfClick = () => {
if (githubUrl) {
- window.open(githubUrl, '_blank');
+ window.open(githubUrl, "_blank");
}
};
-
+ const [randomColor, setRandomColor] = useState();
const [isEnlarged, setIsEnlarged] = useState(false);
const [isUserTextVisible, setIsUserTextVisible] = useState(true);
const [isTextVisible, setIsTextVisible] = useState(false);
-
+ const { ipInfo, loading, error } = useIPInfo();
+ const { t } = useTranslation();
const toggleEnlarged = () => {
setIsEnlarged(!isEnlarged);
setIsUserTextVisible(!isUserTextVisible);
@@ -22,38 +33,100 @@ const MasonryBox = ({ wallSrc, userProf, userName, userJob, githubUrl, userText
const toggleText = () => {
setIsTextVisible(!isTextVisible);
};
+ useEffect(() => {
+ setRandomColor(() => {
+ const minBrightness = 80;
+
+ // Generate random RGB values with a minimum brightness
+ let red, green, blue;
+ do {
+ red = Math.floor(Math.random() * 256);
+ green = Math.floor(Math.random() * 256);
+ blue = Math.floor(Math.random() * 256);
+ } while (red + green + blue < minBrightness * 3);
+
+ // Convert RGB values to a hexadecimal color
+ const color = `#${red.toString(16)}${green.toString(16)}${blue.toString(
+ 16
+ )}`;
+ return color;
+ });
+ }, [isEnlarged]);
const presetText = (
- Before I Die
- 💭 🌎 🎨 🎓 ❤️ 🌲 🏠 ✈️ 🏆
💵 🤝 🌃 📚 🎸 🚴 🌟 🏰 🚀
+ {t("BEFORE-I-DIE")}...
+
+
);
+ useEffect(() => {
+ // Change the language when the component mounts based on ipInfo
+ i18next.changeLanguage(languages[ipInfo?.country_code]);
+ }, [ipInfo]); // Empty dependency array to run this effect only once when the component mounts
return (
-
+
{isEnlarged && (
-
-
-
{presetText} {userText}
{/* Add preset text here */}
+
+
+
+
+
{presetText}
+
{userText}
+
{" "}
+
+
+ {/* Add preset text here */}
{isTextVisible && (
-
{presetText} {userText}
{/* Add preset text here */}
+
+ {presetText} {userText}
+
{" "}
+ {/* Add preset text here */}
)}
)}
{isUserTextVisible && (
-
+
-
+
{userName}
{/* Add preset text here */}
{userJob}
diff --git a/src/Components/MasonryLayout/MasonryBox/MasonryBox.module.css b/src/Components/MasonryLayout/MasonryBox/MasonryBox.module.css
index 236622ab..c2dd35c7 100644
--- a/src/Components/MasonryLayout/MasonryBox/MasonryBox.module.css
+++ b/src/Components/MasonryLayout/MasonryBox/MasonryBox.module.css
@@ -1,4 +1,8 @@
/* MasonryBox.module.css */
+@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@1,700&display=swap');
+
+
.my-masonry {
position: relative;
@@ -6,10 +10,11 @@
display: flex;
border-radius: 10px;
overflow: hidden;
+
}
.my-masonry img:hover {
- border: 7px solid #004AAD;
+ border: 7px solid #004aad;
}
.enlargedPhoto {
@@ -23,29 +28,89 @@
justify-content: center;
align-items: center;
z-index: 999;
+ padding: 0 30px;
+}
+
+.enlargedPhotoContainer {
+ display: flex;
+ background: url(https://raw.github.com/mmoustafa/Chalkboard/master/img/bg.png);
+ width: 80%;
+ height: 70%;
+ border-radius: 10px;
}
.enlargedPhotoImage {
- max-width: 90%;
- max-height: 90%;
+width: 50%;
+object-fit: cover;
+border-radius: 10px 0px 0px 10px
+ /* max-height: 50%; */
}
.enlargedPhotoText {
- color: black;
+ overflow-y: scroll;
+ color: azure;
font-size: 18px;
- margin-top: 20px;
- padding: 30px;
- background: linear-gradient(to right, #006dff, rgb(254, 234, 58));
- float: right;
- width: 20%;
+ font-family: "Fira Code", monospace;
+ padding: 20px;
+ /* background: url(https://raw.github.com/mmoustafa/Chalkboard/master/img/bg.png); */
+ max-width: 50%;
+ width: auto;
/* adjust the width as needed */
- margin-left: 50px;
+ margin-left: 0px;
/* adjust the margin as needed */
- text-align: center;
+ /* text-align: center; */
/* add this property to center the text */
+ scrollbar-width: thin;
+ scrollbar-color: #888 #2f2e2e;
+}
+.enlargedPhotoText::-webkit-scrollbar {
+ width: 5px;
+}
+
+.enlargedPhotoText::-webkit-scrollbar-thumb {
+ background-color: #888;
+}
+.enlargedPhotoText::-webkit-scrollbar-thumb:hover {
+ background-color: #555;
}
+.enlargedPhotoText p{
+ line-height: normal;
+ max-height: 70%;
+ font-family: "Chalk_3", sans-serif;
+}
+@media (max-width: 640px) {
+ /* When screen & mobile size less than 640px */
+ .enlargedPhoto {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .enlargedPhotoContainer{
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 90%;
+ }
+ .enlargedPhotoImage {
+ width: auto;
+ height: 50%;
+ border-radius: 10px 10px 0 0;
+ }
+
+ .enlargedPhotoText {
+ margin: 0;
+ max-width: 100%;
+
+ }
+
+ }
+
+
+
+
+
.enlargedPhotoTextBox {
position: absolute;
bottom: 0;
@@ -73,7 +138,7 @@
justify-content: center;
opacity: 0;
visibility: hidden;
- transition: .7s;
+ transition: 0.7s;
background-color: rgba(255, 255, 255, 0.3);
}
@@ -83,7 +148,7 @@
margin-bottom: 20px;
column-gap: 20px;
margin-bottom: -80px;
- transition: .5s;
+ transition: 0.5s;
}
.my-masnry-user-prof {
@@ -107,21 +172,20 @@
font-size: 1.5rem;
text-transform: capitalize;
font-weight: bold;
-
}
.my-masnry-user-prof-desc h1 {
color: var(--green-400);
- text-shadow: -1px -1px 5px #FEEA3A, 1px -1px 5px #FEEA3A, -1px 1px 5px #FEEA3A, 1px 1px 5px #FEEA3A;
+ text-shadow: -1px -1px 5px #feea3a, 1px -1px 5px #feea3a, -1px 1px 5px #feea3a,
+ 1px 1px 5px #feea3a;
}
-
.my-masnry-user-prof-desc h3 {
- color: #FEEA3A;
- text-shadow: -1px -1px 5px #004AAD, 1px -1px 5px #004AAD, -1px 1px 5px #004AAD, 1px 1px 5px #004AAD;
+ color: #feea3a;
+ text-shadow: -1px -1px 5px #004aad, 1px -1px 5px #004aad, -1px 1px 5px #004aad,
+ 1px 1px 5px #004aad;
}
-
.my-masonry:hover .my-masnry-description {
visibility: visible;
opacity: 1;
@@ -131,12 +195,25 @@
margin-bottom: 15px;
}
+@media (max-width: 640px) {
+ .my-masnry-description {
+ height: auto;
+ }
+ .my-masnry-user-prof {
+ width: 100px;
+ height: 100px;
+ }
+ .my-masnry-user-prof-desc {
+ font-size: 1rem;
+ }
+
+}
.boldText {
+ color: azure;
font-weight: bolder;
- font-size: 25px;
+ font-size: 30px;
+ font-family: "Chalk_3", sans-serif;
/* Adjust the font size as desired */
text-align: center;
-
-
}
diff --git a/src/Components/MasonryLayout/MasonryLayout.jsx b/src/Components/MasonryLayout/MasonryLayout.jsx
index 44765b86..f07934d8 100644
--- a/src/Components/MasonryLayout/MasonryLayout.jsx
+++ b/src/Components/MasonryLayout/MasonryLayout.jsx
@@ -1,18 +1,18 @@
// import styles of this component
-import styles from "./MasonryLayout.module.css"
+import styles from "./MasonryLayout.module.css";
// import other react pkg to use
-import Masonry from "react-masonry-css"
+import Masonry from "react-masonry-css";
// import other component to use
-import MasonryBox from './MasonryBox/MasonryBox';
+import MasonryBox from "./MasonryBox/MasonryBox";
// MasonryLayout Component
const MasonryLayout = ({ images }) => {
const breakpointColumnsObj = {
default: 3,
1100: 2,
- 700: 1
+ 700: 1,
};
// Shuffle the images array
@@ -24,7 +24,7 @@ const MasonryLayout = ({ images }) => {
className={styles["my-masonry-grid"]}
columnClassName={styles["my-masonry-grid_column"]}
>
- {shuffledImages.map(item => (
+ {shuffledImages.map((item) => (
{
/>
))}
- )
-}
+ );
+};
-export default MasonryLayout
+export default MasonryLayout;
diff --git a/src/Components/MasonryLayout/MasonryLayout.module.css b/src/Components/MasonryLayout/MasonryLayout.module.css
index 8421aa16..61a82761 100644
--- a/src/Components/MasonryLayout/MasonryLayout.module.css
+++ b/src/Components/MasonryLayout/MasonryLayout.module.css
@@ -2,9 +2,12 @@
display: -webkit-box;
display: -ms-flexbox;
display: flex;
- margin-left: -30px;
+ /* margin-left: -30px; */
width: auto;
}
.my-masonry-grid_column {
padding-left: 30px;
}
+.my-masonry-grid_column:first-child {
+ padding-left: 0;
+ }
diff --git a/src/Components/Nav/Nav.jsx b/src/Components/Nav/Nav.jsx
index 1b4ce7b1..560f22d4 100644
--- a/src/Components/Nav/Nav.jsx
+++ b/src/Components/Nav/Nav.jsx
@@ -11,7 +11,7 @@ const Nav = () => {
diff --git a/src/Components/Nav/Nav.module.css b/src/Components/Nav/Nav.module.css
index 82ab8331..79dece91 100644
--- a/src/Components/Nav/Nav.module.css
+++ b/src/Components/Nav/Nav.module.css
@@ -1,78 +1,94 @@
.nav {
- padding: 40px 40px 0 40px;
- z-index: 2;
+ padding: 40px 40px 0 40px;
+ z-index: 2;
}
-.github-link {
- color: black;
+
+@media (max-width: 769px) {
+ .nav {
+ z-index: 2;
display: flex;
- align-items: center;
- font-size: 30px;
- font: bolder;
+ flex-direction: column;
}
+ .imgfluid {
+ width: 100%;
+ }
+ .navbar-buttons {
+ margin: 20px auto;
+ column-gap: 20px;
+}
+}
+
+.github-link {
+ color: black;
+ display: flex;
+ align-items: center;
+ font-size: 30px;
+ font: bolder;
+}
.github-link:hover {
- color: #006DFF
+ color: #006dff;
}
.nav-title {
- font-size: 1.8rem;
- color: var(--green-400);
+ font-size: 1.8rem;
+ color: var(--green-400);
}
.navbar-nav {
- margin-left: 140px;
- column-gap: 25px;
+ margin-left: 140px;
+ column-gap: 25px;
}
.nav-item {
- color: var(--dark-600);
+ color: var(--dark-600);
}
.nav-item.active {
- color: var(--green-white-100);
- position: relative;
+ color: var(--green-white-100);
+ position: relative;
}
.nav-item.active::before {
- content: '';
- position: absolute;
- width: 14px;
- height: 14px;
- top: 50%;
- left: -30px;
- background: var(--green-400);
- border-radius: 5px;
- transform: rotate(45deg) translateY(-70%);
+ content: "";
+ position: absolute;
+ width: 14px;
+ height: 14px;
+ top: 50%;
+ left: -30px;
+ background: var(--green-400);
+ border-radius: 5px;
+ transform: rotate(45deg) translateY(-70%);
}
.nav-link {
- color: inherit;
+ color: inherit;
}
.navbar-buttons {
- margin-left: auto;
- column-gap: 20px;
+ margin-left: auto;
+ column-gap: 20px;
}
.navbar-responsive-menu {
- display: none !important;
+ display: none !important;
}
@media screen and (max-width: 1100px) {
- .d-none-1100 {
- display: none;
- }
+ .d-none-1100 {
+ display: none;
+ }
- .navbar-responsive-menu {
- display: block !important;
- }
+ .navbar-responsive-menu {
+ display: block !important;
+ }
- .navbar-nav {
- margin-left: 90px;
- }
+ .navbar-nav {
+ margin-left: 90px;
+ }
}
@media screen and (max-width: 960px) {
- .navbar-nav {
- display: none !important;
- }
+ .navbar-nav {
+ display: none !important;
+ }
}
diff --git a/src/Jsons/Contributors.json b/src/Jsons/Contributors.json
index 693a979b..03ea1fa0 100644
--- a/src/Jsons/Contributors.json
+++ b/src/Jsons/Contributors.json
@@ -1,146 +1,245 @@
[
- {
- "id": "Alexander Clemens",
- "image": "img/bid_image/Alexander_Clemens.jpg",
- "avatar": "img/avatar/Alexander_Clemens.jpg",
- "name": "Alexander Clemens",
- "location": "Santa Rosa de Cabal, Colombia 🇨🇴",
- "GitHub": "https://github.com/XanderRubio",
- "text": "Becoming a professional tango dancer and competing in Buenos Aires🇦🇷. Donating to the CORE Foundation for spinal cord injury rehabilitation in Orlando, Florida. Marrying my best friend and growing our life together. Starting and raising a family. Seeing Earth from space. Visiting the Baseball Hall of Fame with my father in Cooperstown, New York. Getting baptized in Mirror Lake, Alaska. Walking the Great Wall of China from start to finish."
- },
- {
- "id": "Diogo Ferreira Cavalcanti",
- "image": "img/bid_image/Diogo_Ferreira_Cavalcanti.jpg",
- "avatar": "img/avatar/Diogo_Ferreira_Cavalcanti.jpg",
- "name": "Diogo Ferreira Cavalcanti",
- "location": "Recife, Brazil 🇧🇷",
- "GitHub": "https://github.com/BeforeIDieCode/BeforeIDieAchievements",
- "text": "One of the things I want to do before I die is to travel to all seven continents. It's a dream that I have always had, and I believe that it will be an incredible experience to explore the diverse cultures, cuisines, and landscapes of each continent. From the majestic Amazon rainforest in South America to the stunning Great Barrier Reef in Australia, each continent offers unique and awe-inspiring experiences that I would love to witness. Traveling to all seven continents will also foster personal growth, broaden my perspective, and enhance my adaptability. It's a goal that will bring a sense of fulfillment and pride, and I am excited to embark on this remarkable journey."
- },
- {
- "id": "Jasmien Laning",
- "image": "img/bid_image/Jasmien_Laning.jpg",
- "avatar": "img/avatar/Jasmien_Laning.jpg",
- "name": "Jasmien Laning",
- "location": "Pietersburg, South Africa 🇿🇦",
- "GitHub": "https://github.com/BeforeIDieCode/BeforeIDieAchievements",
- "text": "As an adventurous backpacker, I have long dreamt of hiking Mount Kilimanjaro. The mental and physical challenge, breathtaking landscapes, and sense of accomplishment upon reaching the summit at almost 6,000 meters make it a bucket list item I aspire to conquer. The support of porters, guides, and fellow climbers adds to the allure of this incredible journey."
- },
- {
- "id": "月井 葵",
- "image": "img/bid_image/月井 葵.jpg",
- "avatar": "img/avatar/月井 葵.jpg",
- "name": "月井 葵",
- "location": "Hiroshima, Japan 🇯🇵",
- "GitHub": "https://github.com/BeforeIDieCode/BeforeIDieAchievements",
- "text": "I believe that Antarctica is a stunning destination that boasts incredible wildlife, majestic glaciers, and breathtaking natural beauty. I have always dreamed of visiting this remote and extreme environment on Earth, as it would be the ultimate adventure for me and provide a once-in-a-lifetime experience. Adding Antarctica to my bucket list inspires me to appreciate and protect the fragile magic of our planet."
- },
- {
- "id": "Irakli Ignatiev",
- "image": "img/bid_image/Irakli_Ignatiev.jpg",
- "avatar": "img/avatar/Irakli_Ignatiev.jpg",
- "name": "Irakli Ignatiev",
- "location": "Yekaterinburg, Russia 🇷🇺",
- "GitHub": "https://github.com/BeforeIDieCode/BeforeIDieAchievements",
- "text": "Playing guitar has always been my lifelong dream. The sound of the strings and the way a gifted musician can evoke emotions has always fascinated me. I want to learn to play guitar to express myself through my own lyrics and chord progressions, and keep myself connected to my passions. Making music is such a human act, and I don't want to miss out on the experience of learning an instrument. With practice and dedication, I know I could turn this dream into a reality and play my favorite songs from start to finish."
- },
- {
- "id": "Ibrahim Shah",
- "image": "img/bid_image/Ibrahim_Shah.jpg",
- "avatar": "img/avatar/Ibrahim_Shah.jpg",
- "name": "Ibrahim Shah",
- "location": "Sheikhupura, Pakistan 🇵🇰",
- "GitHub": "https://github.com/BeforeIDieCode/BeforeIDieAchievements",
- "text": "I'm enchanted by London's historic pubs, iconic landmarks, and royalty. Seeing the Crown Jewels and experiencing the Changing of the Guard at Buckingham Palace would be unforgettable. Recreating a classic red British phone booth photo is on my bucket list. London is calling my name!"
- },
- {
- "id": "Maya Kaur",
- "image": "img/bid_image/Maya_Kaur.jpg",
- "avatar": "img/avatar/Maya_Kaur.jpg",
- "name": "Maya Kaur",
- "location": "Bangalore, India 🇮🇳",
- "GitHub": "https://github.com/BeforeIDieCode/BeforeIDieAchievements",
- "text": "French pastries have enchanted me for as long as I can remember. My lifelong passion is to master the art of pâtisserie in Paris, recreating little pieces of the city in my own kitchen. Making time to appreciate life's sweet pleasures means so much to me."
- },
- {
- "id": "Chen Mei-Ling",
- "image": "img/bid_image/Chen_Mei-Ling.jpg",
- "avatar": "img/avatar/Chen_Mei-Ling.jpg",
- "name": "Chen Mei-Ling",
- "location": "Taipei, Taiwan 🇹🇼",
- "GitHub": "https://github.com/chenmeiling",
- "text": "I want to hike to the top of Yushan before I die."
- },
- {
- "id": "Artis Lotko",
- "image": "img/bid_image/Artis_Lotko.jpg",
- "avatar": "img/avatar/Artis_Lotko.jpg",
- "name": "Artis Lotko",
- "location": "Riga, Latvia 🇱🇻",
- "GitHub": "https://github.com/69966969",
- "text": "To emigrate to New Zealand."
- },
- {
- "id": "George Halterman",
- "image": "img/bid_image/George_Halterman.jpg",
- "avatar": "img/avatar/George_Halterman.jpg",
- "name": "George Halterman",
- "location": "California, USA 🇺🇸",
- "GitHub": "https://github.com/Agoews",
- "text": "To do every 4 star hike in Yosemite and live in the Eastern Sierras."
- },
- {
- "id": "Kenneth Quiggins",
- "image": "img/bid_image/Kenneth_Quiggins.jpg",
- "avatar": "img/avatar/Kenneth_Quiggins.jpg",
- "name": "Kenneth Quiggins",
- "location": "Louisville, Kentucky, USA, 🇺🇸",
- "GitHub": "https://github.com/KQuiggins",
- "text": "To become a Software Developer and work remotely from anywhere in the world, so I can provide a good life for my family."
- },
- {
- "id": "Addie Lopshire-Bratt",
- "image": "img/bid_image/Addie_Lopshire-Bratt.jpg",
- "avatar": "img/avatar/Addie_Lopshire-Bratt.jpg",
- "name": "Addie Lopshire-Bratt",
- "location": "Denver, USA 🇺🇸",
- "GitHub": "https://github.com/addielb",
- "text": "I want to live in Amsterdam and spend my free time exploring the Netherlands and Europe."
- },
- {
- "id": "Sahil Chalke",
- "image": "img/bid_image/Sahil_Chalke.jpg",
- "avatar": "img/avatar/Sahil_Chalke.jpg",
- "name": "Sahil Chalke",
- "location": "Mumbai, India 🇮🇳 ",
- "GitHub": "https://github.com/Sahilll15",
- "text": "Looking forward to an week of relaxation in the beautiful Maldives! 🏝️✈️"
- },
- {
- "id": "Cs Yong",
- "image": "img/bid_image/CS_Yong.jpg",
- "avatar": "img/avatar/CS_Yong.jpg",
- "name": "Cs Yong",
- "location": "Sarawak, Malaysia 🇲🇾",
- "GitHub": "https://github.com/lefty93",
- "text": "I want to retire in New Zealand with my love."
- },
- {
- "id": "Alandis Ayupov",
- "image": "img/bid_image/Alandis_Ayupov.jpg",
- "avatar": "img/avatar/Alandis_Ayupov.jpg",
- "name": "Alandis Ayupov",
- "location": "Edison, USA 🇺🇸",
- "GitHub": "https://github.com/AlandisAyupov",
- "text": "I want to play a game of airsoft."
- },
- {
- "id": "João Guilherme Camarota",
- "image": "img/bid_image/Joao_Camarota.jpg",
- "avatar": "img/avatar/Joao_Camarota.jpg",
- "name": "João Guilherme Camarota",
- "location": "Goiânia, Brazil 🇧🇷",
- "GitHub": "https://github.com/Camarota-234",
- "text": "I need to go skydiving before I die."
- }
+ {
+ "id": "Alexander Clemens",
+ "image": "img/bid_image/Alexander_Clemens.jpg",
+ "avatar": "img/avatar/Alexander_Clemens.jpg",
+ "name": "Alexander Clemens",
+ "location": "Santa Rosa de Cabal, Colombia 🇨🇴",
+ "GitHub": "https://github.com/XanderRubio",
+ "text": "Becoming a professional tango dancer and competing in Buenos Aires🇦🇷. Donating to the CORE Foundation for spinal cord injury rehabilitation in Orlando, Florida. Marrying my best friend and growing our life together. Starting and raising a family. Seeing Earth from space. Visiting the Baseball Hall of Fame with my father in Cooperstown, New York. Getting baptized in Mirror Lake, Alaska. Walking the Great Wall of China from start to finish."
+ },
+ {
+ "id": "Diogo Ferreira Cavalcanti",
+ "image": "img/bid_image/Diogo_Ferreira_Cavalcanti.jpg",
+ "avatar": "img/avatar/Diogo_Ferreira_Cavalcanti.jpg",
+ "name": "Diogo Ferreira Cavalcanti",
+ "location": "Recife, Brazil 🇧🇷",
+ "GitHub": "https://github.com/BeforeIDieCode/BeforeIDieAchievements",
+ "text": "One of the things I want to do before I die is to travel to all seven continents. It's a dream that I have always had, and I believe that it will be an incredible experience to explore the diverse cultures, cuisines, and landscapes of each continent. From the majestic Amazon rainforest in South America to the stunning Great Barrier Reef in Australia, each continent offers unique and awe-inspiring experiences that I would love to witness. Traveling to all seven continents will also foster personal growth, broaden my perspective, and enhance my adaptability. It's a goal that will bring a sense of fulfillment and pride, and I am excited to embark on this remarkable journey."
+ },
+ {
+ "id": "Jasmien Laning",
+ "image": "img/bid_image/Jasmien_Laning.jpg",
+ "avatar": "img/avatar/Jasmien_Laning.jpg",
+ "name": "Jasmien Laning",
+ "location": "Pietersburg, South Africa 🇿🇦",
+ "GitHub": "https://github.com/BeforeIDieCode/BeforeIDieAchievements",
+ "text": "As an adventurous backpacker, I have long dreamt of hiking Mount Kilimanjaro. The mental and physical challenge, breathtaking landscapes, and sense of accomplishment upon reaching the summit at almost 6,000 meters make it a bucket list item I aspire to conquer. The support of porters, guides, and fellow climbers adds to the allure of this incredible journey."
+ },
+ {
+ "id": "月井 葵",
+ "image": "img/bid_image/月井 葵.jpg",
+ "avatar": "img/avatar/月井 葵.jpg",
+ "name": "月井 葵",
+ "location": "Hiroshima, Japan 🇯🇵",
+ "GitHub": "https://github.com/BeforeIDieCode/BeforeIDieAchievements",
+ "text": "I believe that Antarctica is a stunning destination that boasts incredible wildlife, majestic glaciers, and breathtaking natural beauty. I have always dreamed of visiting this remote and extreme environment on Earth, as it would be the ultimate adventure for me and provide a once-in-a-lifetime experience. Adding Antarctica to my bucket list inspires me to appreciate and protect the fragile magic of our planet."
+ },
+ {
+ "id": "Irakli Ignatiev",
+ "image": "img/bid_image/Irakli_Ignatiev.jpg",
+ "avatar": "img/avatar/Irakli_Ignatiev.jpg",
+ "name": "Irakli Ignatiev",
+ "location": "Yekaterinburg, Russia 🇷🇺",
+ "GitHub": "https://github.com/BeforeIDieCode/BeforeIDieAchievements",
+ "text": "Playing guitar has always been my lifelong dream. The sound of the strings and the way a gifted musician can evoke emotions has always fascinated me. I want to learn to play guitar to express myself through my own lyrics and chord progressions, and keep myself connected to my passions. Making music is such a human act, and I don't want to miss out on the experience of learning an instrument. With practice and dedication, I know I could turn this dream into a reality and play my favorite songs from start to finish."
+ },
+ {
+ "id": "Ibrahim Shah",
+ "image": "img/bid_image/Ibrahim_Shah.jpg",
+ "avatar": "img/avatar/Ibrahim_Shah.jpg",
+ "name": "Ibrahim Shah",
+ "location": "Sheikhupura, Pakistan 🇵🇰",
+ "GitHub": "https://github.com/BeforeIDieCode/BeforeIDieAchievements",
+ "text": "I'm enchanted by London's historic pubs, iconic landmarks, and royalty. Seeing the Crown Jewels and experiencing the Changing of the Guard at Buckingham Palace would be unforgettable. Recreating a classic red British phone booth photo is on my bucket list. London is calling my name!"
+ },
+ {
+ "id": "Maya Kaur",
+ "image": "img/bid_image/Maya_Kaur.jpg",
+ "avatar": "img/avatar/Maya_Kaur.jpg",
+ "name": "Maya Kaur",
+ "location": "Bangalore, India 🇮🇳",
+ "GitHub": "https://github.com/BeforeIDieCode/BeforeIDieAchievements",
+ "text": "French pastries have enchanted me for as long as I can remember. My lifelong passion is to master the art of pâtisserie in Paris, recreating little pieces of the city in my own kitchen. Making time to appreciate life's sweet pleasures means so much to me."
+ },
+ {
+ "id": "Chen Mei-Ling",
+ "image": "img/bid_image/Chen_Mei-Ling.jpg",
+ "avatar": "img/avatar/Chen_Mei-Ling.jpg",
+ "name": "Chen Mei-Ling",
+ "location": "Taipei, Taiwan 🇹🇼",
+ "GitHub": "https://github.com/chenmeiling",
+ "text": "I want to hike to the top of Yushan before I die."
+ },
+ {
+ "id": "Artis Lotko",
+ "image": "img/bid_image/Artis_Lotko.jpg",
+ "avatar": "img/avatar/Artis_Lotko.jpg",
+ "name": "Artis Lotko",
+ "location": "Riga, Latvia 🇱🇻",
+ "GitHub": "https://github.com/69966969",
+ "text": "To emigrate to New Zealand."
+ },
+ {
+ "id": "George Halterman",
+ "image": "img/bid_image/George_Halterman.jpg",
+ "avatar": "img/avatar/George_Halterman.jpg",
+ "name": "George Halterman",
+ "location": "California, USA 🇺🇸",
+ "GitHub": "https://github.com/Agoews",
+ "text": "To do every 4 star hike in Yosemite and live in the Eastern Sierras."
+ },
+ {
+ "id": "Kenneth Quiggins",
+ "image": "img/bid_image/Kenneth_Quiggins.jpg",
+ "avatar": "img/avatar/Kenneth_Quiggins.jpg",
+ "name": "Kenneth Quiggins",
+ "location": "Louisville, Kentucky, USA 🇺🇸",
+ "GitHub": "https://github.com/KQuiggins",
+ "text": "To become a Software Developer and work remotely from anywhere in the world, so I can provide a good life for my family."
+ },
+ {
+ "id": "Addie Lopshire-Bratt",
+ "image": "img/bid_image/Addie_Lopshire-Bratt.jpg",
+ "avatar": "img/avatar/Addie_Lopshire-Bratt.jpg",
+ "name": "Addie Lopshire-Bratt",
+ "location": "Denver, Colorado, USA 🇺🇸",
+ "GitHub": "https://github.com/addielb",
+ "text": "I want to live in Amsterdam and spend my free time exploring the Netherlands and Europe."
+ },
+ {
+ "id": "Sahil Chalke",
+ "image": "img/bid_image/Sahil_Chalke.jpg",
+ "avatar": "img/avatar/Sahil_Chalke.jpg",
+ "name": "Sahil Chalke",
+ "location": "Mumbai, India 🇮🇳 ",
+ "GitHub": "https://github.com/Sahilll15",
+ "text": "Looking forward to an week of relaxation in the beautiful Maldives! 🏝️✈️"
+ },
+ {
+ "id": "Cs Yong",
+ "image": "img/bid_image/CS_Yong.jpg",
+ "avatar": "img/avatar/CS_Yong.jpg",
+ "name": "Cs Yong",
+ "location": "Sarawak, Malaysia 🇲🇾",
+ "GitHub": "https://github.com/lefty93",
+ "text": "I want to retire in New Zealand with my love."
+ },
+ {
+ "id": "Alandis Ayupov",
+ "image": "img/bid_image/Alandis_Ayupov.jpg",
+ "avatar": "img/avatar/Alandis_Ayupov.jpg",
+ "name": "Alandis Ayupov",
+ "location": "Edison, New Jersey, USA 🇺🇸",
+ "GitHub": "https://github.com/AlandisAyupov",
+ "text": "I want to play a game of airsoft."
+ },
+ {
+ "id": "João Guilherme Camarota",
+ "image": "img/bid_image/Joao_Camarota.jpg",
+ "avatar": "img/avatar/Joao_Camarota.jpg",
+ "name": "João Guilherme Camarota",
+ "location": "Goiânia, Brazil 🇧🇷",
+ "GitHub": "https://github.com/Camarota-234",
+ "text": "I need to go skydiving before I die."
+ },
+ {
+ "id": "Luciano Juarez",
+ "image": "img/bid_image/Luciano_Juarez.jpg",
+ "avatar": "img/avatar/Luciano_Juarez.jpg",
+ "name": "Luciano Juarez",
+ "location": "Puebla, Mexico 🇲🇽",
+ "GitHub": "https://github.com/luc881",
+ "text": "I want to visit as many countries as possible before I die."
+ },
+ {
+ "id": "Tyler Celestin",
+ "image": "img/bid_image/Tyler_Celestin.jpg",
+ "avatar": "img/avatar/Tyler_Celestin.jpg",
+ "name": "Tyler Celestin",
+ "location": "Brooklyn, New York, USA 🇺🇸",
+ "GitHub": "https://github.com/ccelest1",
+ "text": "I sincerely appreciate great design and aesthetics. In that same vein, I would cherish the opportunity to travel to vistas that exhibit careful and detailed architecture that is synergistic with their cultural and environmental surroundings. One of those places is, of course, Japan, which is renowned for its talented engineers and attention to green practices. One of my dreams is to work in the field of design, or potentially civil engineering if possible."
+ },
+ {
+ "id": "Negar Nasiri",
+ "image": "img/bid_image/Negar_Nasiri.jpg",
+ "avatar": "img/avatar/Negar_Nasiri.jpg",
+ "name": "Negar Nasiri",
+ "location": "Lisbon, Portugal 🇵🇹",
+ "GitHub": "https://github.com/negar-75",
+ "text": "I've always dreamed of owning my own business, generating income, creating numerous job opportunities, and leaving a significant mark on the world."
+ },
+ {
+ "id": "Hanny Jangra",
+ "image": "img/bid_image/Hanny_Jangra.jpg",
+ "avatar": "img/avatar/Hanny_Jangra.jpg",
+ "name": "Hanny Jangra",
+ "location": "Mahendergarh, Haryana, India 🇮🇳",
+ "GitHub": "https://github.com/honeyjangra2309",
+ "text": "I want to write a science fiction and a romantic novel before I die."
+ },
+ {
+ "id": "Sangjune Lee",
+ "image": "img/bid_image/Sangjune_Lee.jpg",
+ "avatar": "img/avatar/Sangjune_Lee.jpg",
+ "name": "Sangjune Lee",
+ "location": "Seoul, Korea 🇰🇷",
+ "GitHub": "https://github.com/SJLEE411",
+ "text": "I want to become an impactful person who can bring changes to this world."
+ },
+ {
+ "id": "Tomás Arrativel",
+ "image": "img/bid_image/Tomas_Arrativel.jpg",
+ "avatar": "img/avatar/Tomas_Arrativel.jpg",
+ "name": "Tomás Arrativel",
+ "location": "Gualeguay, Argentina 🇦🇷",
+ "GitHub": "https://github.com/Tomas-Arrativel",
+ "text": "I want to be a motocross champion in my country."
+ },
+ {
+ "id": "Ben Tracy",
+ "image": "img/bid_image/Ben_Tracy.jpg",
+ "avatar": "img/avatar/Ben_Tracy.jpeg",
+ "name": "Ben Tracy",
+ "location": "Charlottesville, Virginia, USA 🇺🇸",
+ "GitHub": "https://github.com/BenTracyDotCom",
+ "text": "I want to see and sleep under the Northern Lights."
+ },
+ {
+ "id": "Varun Patodia",
+ "image": "img/bid_image/varun_patodia.jpg",
+ "avatar": "img/avatar/varun_patodia.jpg",
+ "name": "Varun Patodia",
+ "location": "Bhopal, Madhaya Pradesh, India 🇮🇳",
+ "GitHub": "https://github.com/vrun4750",
+ "text": "I want to go trekking all the places in India before I die."
+ },
+ {
+ "id": "Dinesh Anbazhagan",
+ "image": "img/bid_image/Dinesh_Anbazhagan.jpg",
+ "avatar": "img/avatar/Dinesh_Anbazhagan.jpg",
+ "name": "Dinesh Anbazhagan",
+ "location": "Vellore, Tamil Nadu, India 🇮🇳",
+ "GitHub": "https://github.com/itzmidinesh",
+ "text": "I have always been fascinated by computers and technology. I want to become a software developer and feed my hunger for technology. If I can contribute something of significance to open source software, that is an added benifit I will take any day."
+ },
+ {
+ "id": "Zhang Zhao",
+ "image": "img/bid_image/Zhang_Zhao.jpeg",
+ "avatar": "img/avatar/Zhang_Zhao.jpeg",
+ "name": "Zhang Zhao",
+ "location": "Beijing,China 🇨🇳",
+ "GitHub": "https://github.com/EniacTNB",
+ "text": "1. Living by the water, with mountains and snow\n 2. Forgetting all worldly matters, leading a tranquil life and accompanied by family\n 3. Making a small contribution to improve people's lives in leisurely times"
+ },
+ {
+ "id": "Lucas Firmo",
+ "image": "img/bid_image/Lucas_Firmo.jpg",
+ "avatar": "img/avatar/Lucas_Firmo.jpg",
+ "name": "Lucas Firmo",
+ "location": "Campo Mourão, Paraná, Brasil 🇧🇷",
+ "GitHub": "https://github.com/lucasfirmo62",
+ "text": "I like codes"
+ }
]
diff --git a/src/css-reset.css b/src/css-reset.css
index 4203c1a0..1091a437 100644
--- a/src/css-reset.css
+++ b/src/css-reset.css
@@ -7,8 +7,8 @@ b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button, input {
margin: 0;
@@ -19,9 +19,9 @@ time, mark, audio, video, button, input {
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
- font-family: 'Poppins', sans-serif !important;
+ font-family: 'Poppins', sans-serif ;
}
-article, aside, details, figcaption, figure,
+article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
@@ -45,4 +45,4 @@ table {
}
a {
text-decoration: none;
-}
\ No newline at end of file
+}
diff --git a/src/fonts/Chalk/Chalk-3.ttf b/src/fonts/Chalk/Chalk-3.ttf
new file mode 100644
index 00000000..24bff7f6
Binary files /dev/null and b/src/fonts/Chalk/Chalk-3.ttf differ
diff --git a/src/hooks/useIPInfo.js b/src/hooks/useIPInfo.js
new file mode 100644
index 00000000..6ba1e510
--- /dev/null
+++ b/src/hooks/useIPInfo.js
@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+import axios from "axios";
+
+function useIPInfo() {
+ const [ipInfo, setIpInfo] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ // Fetch IP information
+ axios
+ .get("https://ipapi.co/json/")
+ .then((response) => {
+ setIpInfo(response.data);
+ setLoading(false);
+ })
+ .catch((error) => {
+ setError(error);
+ setLoading(false);
+ });
+ }, []);
+ return { ipInfo, loading, error };
+}
+
+export default useIPInfo;
diff --git a/src/i18nextConfig.js b/src/i18nextConfig.js
new file mode 100644
index 00000000..a04453dd
--- /dev/null
+++ b/src/i18nextConfig.js
@@ -0,0 +1,33 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+i18n
+ .use(initReactI18next) // passes i18n down to react-i18next
+ .init({
+ resources: {
+ en: {
+ translation: require("./locales/en/translation.json"),
+ },
+ pt: {
+ translation: require("./locales/pt/translation.json"),
+ },
+ fr: {
+ translation: require("./locales/fr/translation.json"),
+ },
+ it: {
+ translation: require("./locales/it/translation.json"),
+ },
+ es: {
+ translation: require("./locales/es/translation.json"),
+ },
+ de: {
+ translation: require("./locales/de/translation.json"),
+ },
+ },
+ lng: "en", // Set the default language
+ fallbackLng: "en", // Fallback language if a translation is missing
+ interpolation: {
+ escapeValue: false, // React already escapes by default
+ },
+ returnNull: false,
+ });
diff --git a/src/index.css b/src/index.css
index 17d31fc4..762a684a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -8,6 +8,13 @@
--green-white-100: #C3EFC0;
}
+@font-face {
+
+ font-family: "Chalk_3";
+ src: local("Chalk_3"),
+ url("./fonts/Chalk/Chalk-3.ttf") format("truetype");
+
+}
body {
background: var(--dark-900);
}
diff --git a/src/index.js b/src/index.js
index 53db037e..7af6ab3e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,9 @@ import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import "./index.css"
+import "./fonts/Chalk/Chalk-3.ttf";
+import "./i18nextConfig.js";
const container = document.getElementById("root");
const root = createRoot(container);
-root.render(
);
\ No newline at end of file
+root.render(
);
diff --git a/src/locales/de/translation.json b/src/locales/de/translation.json
new file mode 100644
index 00000000..2acd42e9
--- /dev/null
+++ b/src/locales/de/translation.json
@@ -0,0 +1,3 @@
+{
+ "BEFORE-I-DIE": "Bevor ich sterbe"
+}
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
new file mode 100644
index 00000000..e838e96f
--- /dev/null
+++ b/src/locales/en/translation.json
@@ -0,0 +1,3 @@
+{
+ "BEFORE-I-DIE": "Before I die"
+}
diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json
new file mode 100644
index 00000000..c6810578
--- /dev/null
+++ b/src/locales/es/translation.json
@@ -0,0 +1,3 @@
+{
+ "BEFORE-I-DIE": "Antes de morir"
+}
diff --git a/src/locales/fr/translation.json b/src/locales/fr/translation.json
new file mode 100644
index 00000000..cd953561
--- /dev/null
+++ b/src/locales/fr/translation.json
@@ -0,0 +1,3 @@
+{
+ "BEFORE-I-DIE": "Avant de mourir"
+}
diff --git a/src/locales/it/translation.json b/src/locales/it/translation.json
new file mode 100644
index 00000000..776a8add
--- /dev/null
+++ b/src/locales/it/translation.json
@@ -0,0 +1,3 @@
+{
+ "BEFORE-I-DIE": "Prima di morire"
+}
diff --git a/src/locales/pt/translation.json b/src/locales/pt/translation.json
new file mode 100644
index 00000000..7d8cc0e9
--- /dev/null
+++ b/src/locales/pt/translation.json
@@ -0,0 +1,3 @@
+{
+ "BEFORE-I-DIE": "Antes de morrer"
+}
diff --git a/src/translation/languages.json b/src/translation/languages.json
new file mode 100644
index 00000000..28d71956
--- /dev/null
+++ b/src/translation/languages.json
@@ -0,0 +1,27 @@
+{
+ "US": "en",
+ "GB": "en",
+ "CA": "en",
+ "AU": "en",
+ "FR": "fr",
+ "DE": "de",
+ "ES": "es",
+ "IT": "it",
+ "PT": "pt",
+ "BR": "pt",
+ "NL": "nl",
+ "BE": "nl",
+ "SE": "sv",
+ "NO": "no",
+ "DK": "da",
+ "FI": "fi",
+ "RU": "ru",
+ "CN": "zh",
+ "JP": "ja",
+ "IN": "hi",
+ "AR": "es",
+ "MX": "es",
+ "CO": "es",
+ "CL": "es",
+ "PE": "es"
+}
diff --git a/translations/Arabic/README.md b/translations/Arabic/README.md
index e69de29b..5a6c1df1 100644
--- a/translations/Arabic/README.md
+++ b/translations/Arabic/README.md
@@ -0,0 +1,9 @@
+_Read this in [other languages](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/translations/Translations.md)_
+
+
+
+
+
+
+
+
diff --git a/translations/French/CODE_OF_CONDUCT.md b/translations/French/CODE_OF_CONDUCT.md
index e69de29b..00fd27c7 100644
--- a/translations/French/CODE_OF_CONDUCT.md
+++ b/translations/French/CODE_OF_CONDUCT.md
@@ -0,0 +1,130 @@
+# Code de conduite du Contributeur
+
+## Notre engagement
+
+En tant que membres, contributeurs et dirigeants, nous nous engageons à participer à notre
+communauté une expérience sans harcèlement pour tous, quels que soient leur âge et leur corps
+taille, handicap visible ou invisible, origine ethnique, caractéristiques sexuelles, genre
+identité et expression, niveau d’expérience, éducation, statut socio-économique,
+nationalité, apparence personnelle, race, religion ou identité sexuelle
+et l'orientation.
+
+Nous nous engageons à agir et à interagir de manière à contribuer à un environnement ouvert, accueillant et
+communauté diversifiée, inclusive et saine.
+
+## Nos normes
+
+Exemples de comportements qui contribuent à un environnement positif pour notre
+la communauté comprend :
+
+* Faire preuve d'empathie et de gentillesse envers les autres
+* Être respectueux des différentes opinions, points de vue et expériences
+* Donner et accepter gracieusement des commentaires constructifs
+* Accepter la responsabilité et présenter ses excuses aux personnes touchées par nos erreurs,
+ et apprendre de l'expérience
+* Se concentrer sur ce qui est le mieux non seulement pour nous en tant qu'individus, mais aussi pour
+ communauté globale
+
+Voici des exemples de comportements inacceptables :
+
+* L'utilisation d'un langage ou d'images sexualisés et l'attention ou l'attention sexuelle
+ avances de toute nature
+* Commentaires trollants, insultants ou désobligeants, et attaques personnelles ou politiques
+* Harcèlement public ou privé
+* Publication des informations privées d'autrui, telles qu'une adresse physique ou un courrier électronique
+ adresse, sans leur autorisation explicite
+* Autre conduite qui pourrait raisonnablement être considérée comme inappropriée dans un
+ cadre professionnel
+
+
+
+## Responsabilités d'application
+
+Les dirigeants communautaires sont responsables de clarifier et de faire respecter nos normes de
+comportement acceptable et prendra des mesures correctives appropriées et équitables
+réponse à tout comportement qu'ils jugent inapproprié, menaçant, offensant,
+ou nuisible.
+
+Les dirigeants de la communauté ont le droit et la responsabilité de supprimer, modifier ou rejeter
+commentaires, commits, code, modifications du wiki, problèmes et autres contributions qui sont
+non aligné sur ce code de conduite, et communiquera les raisons de la modération
+décisions le cas échéant.
+
+## Portée
+
+Ce code de conduite s'applique dans tous les espaces communautaires, et s'applique également lorsque
+un individu représente officiellement la communauté dans les espaces publics.
+Des exemples de représentation de notre communauté incluent l'utilisation d'une adresse e-mail officielle,
+la publication via un compte de réseau social officiel, ou agir en tant que
+représentant désigné lors d’un événement en ligne ou hors ligne.
+
+## Enforcement
+
+Des cas de comportement abusif, harcelant ou autrement inacceptable peuvent être
+signalé aux dirigeants communautaires responsables de l’application des règles à
+.
+Toutes les plaintes seront examinées et feront l’objet d’une enquête rapide et équitable.
+
+Tous les dirigeants communautaires sont tenus de respecter la vie privée et la sécurité des
+journaliste de tout incident.
+
+## Lignes directrices d'application
+
+Les dirigeants communautaires suivront ces lignes directrices sur l’impact communautaire
+pour déterminer les conséquences de toute action qu’ils jugent en violation de ce Code de Conduite:
+
+### 1. Correction
+
+**Impact sur la communauté** : Utilisation d'un langage inapproprié ou d'un autre comportement jugé
+non professionnel ou indésirable dans la communauté.
+
+**Conséquence** : Un avertissement privé et écrit de la part des dirigeants de la communauté, fournissant
+des précisions sur la nature de la violation et une explication des raisons pour lesquelles
+le comportement était inapproprié. Des excuses publiques peuvent être demandées.
+
+### 2. Avertissement
+
+**Impact sur la communauté** : une violation résultant d'un seul incident ou d'une série
+d'actions.
+
+**Conséquence** : un avertissement avec des conséquences en cas de comportement continu. Non
+interaction avec les personnes impliquées, y compris les interactions non sollicitées avec
+ceux qui appliquent le Code de conduite, pendant une période de temps déterminée. Ce
+inclut d'éviter les interactions dans les espaces communautaires ainsi que les canaux externes
+comme les réseaux sociaux. La violation de ces conditions peut entraîner une suspension temporaire ou
+Interdiction permanente.
+
+### 3. Interdiction temporaire
+
+**Impact sur la communauté** : Une violation grave des normes de la communauté, notamment
+un comportement inapproprié soutenu.
+
+**Conséquence** : Une interdiction temporaire de toute sorte d'interaction ou de public
+communication avec la communauté pendant une période de temps déterminée. Pas de public ou
+interaction privée avec les personnes impliquées, y compris les interactions non sollicitées
+avec ceux qui appliquent le Code de conduite, est autorisé pendant cette période.
+La violation de ces conditions peut entraîner une interdiction permanente.
+
+### 4. Interdiction permanente
+
+**Impact sur la communauté** : démonstration d'un schéma de violation de la communauté
+normes, y compris un comportement inapproprié soutenu, le harcèlement d'un
+individu, ou agression ou dénigrement envers des catégories d’individus.
+
+**Conséquence** : une interdiction permanente de toute sorte d'interaction publique au sein
+la communauté.
+
+## Attribution
+
+Ce code de conduite est adapté du [Engagement de contributeur][homepage],
+version 2.0, disponible sur
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Les lignes directrices sur l’impact communautaire ont été inspirées par [Le code de conduite de Mozilla
+échelle d'application](https://github.com/mozilla/diversity).
+
+[page d'accueil]: https://www.contributor-covenant.org
+
+Pour obtenir des réponses aux questions courantes sur ce code de conduite, consultez la FAQ à l'adresse
+https://www.contributor-covenant.org/faq. Les traductions sont disponibles sur
+https://www.contributor-covenant.org/translations.
\ No newline at end of file
diff --git a/translations/French/CONTRIBUTION-GUIDELINES.md b/translations/French/CONTRIBUTION-GUIDELINES.md
index e69de29b..4f47d2a4 100644
--- a/translations/French/CONTRIBUTION-GUIDELINES.md
+++ b/translations/French/CONTRIBUTION-GUIDELINES.md
@@ -0,0 +1,249 @@
+
+
Directives de contribution
+ Cette documentation contient un ensemble de lignes directrices pour vous aider pendant le processus de contribution à ce projet. Cette ouverture
Le projet source a été construit à l'aide du framework React et le serveur de développement devra être démarré afin de visualiser le projet sur votre ordinateur local.
+
+
+---
+
+## Étape 1. Forkez ce référentiel
+Visiter le [repository](https://github.com/BeforeIDieCode/BeforeIDieAchievements) sur Github et cliquez sur le bouton Fork. Cela créera une copie dans votre compte.
+
+
+https://github.com/BeforeIDieCode/BeforeIDieAchievements/assets/120526253/a8425d90-5f3e-4ee6-8499-2cf50643573c
+
+
+## Étape 2. Cloner, ouvrir, installer et démarrer
+
+Ouvrez un terminal et exécutez la commande git suivante :
+
+`git clone url-vous-venez-de-copier`
+où url-you-just-copied est remplacé par l'url de ce référentiel (votre fork de ce projet). Voir les étapes précédentes pour obtenir l'url.
+
+
+Allez ensuite dans le répertoire où le projet est enregistré et exécutez
la commande suivante :
+
+`npm i` pour installer les dépendances pour pouvoir exécuter le React Development Server.
+
+
+
+Exécutez ensuite la commande suivante pour ensuite démarrer et exécuter le serveur de développement React ⚛️ :
+
+`npm start`
+
+
+
+Une fois exécuté avec succès, votre terminal ressemblera à ceci ci-dessous
+
+
+
+Ouvrez maintenant un navigateur Web et accédez à localhost : 3000 si vous n'y êtes pas dirigé en exécutant la commande `npm start`.
+
+
+
+
+## Étape 3. Créez une nouvelle branche
+
+Ouvrez le référentiel cloné dans un outil d'édition de code tel que Visual Studio Code ou tout autre éditeur de code de votre choix. Les étapes suivantes illustrent le processus à l'aide de Visual Studio Code, mais le même flux de travail s'applique à d'autres éditeurs de code ou à l'aide des espaces de codes GitHub.
+
+Accédez au répertoire du référentiel sur votre ordinateur (si vous n'y êtes pas déjà):
+
+```
+cd BeforeIDieAchievements
+```
+
+Now create a branch using the command:
+
+```
+git checkout -b your-branch-name
+```
+
+For example:
+
+```
+git checkout -b add-Xander-Clemens
+```
+## Étape 4. COLLEZ votre fichier JSON
+
+* Collez le code JSON suivant dans src/Jsons/Contributors.json
+* Faites défiler vers le bas de la liste et ajoutez un "," au dernier contributeur JSON avant de coller votre code JSON
+
+```
+{
+ "id": "YOUR_NAME",
+ "image": "img/bid_image/YOUR_NAME.jpg",
+ "avatar": "img/avatar/YOUR_NAME.jpg",
+ "name": "YOUR_NAME",
+ "location": "YOUR_CITY_COUNTRY_AND_FLAG",
+ "GitHub": "GITHUB_PROFILE_URL",
+ "text": "PASTE_WHAT_YOU_WANT_TO_DO_BEFORE_YOU_DIE"
+}
+```
+
COLLEZ VOTRE CODE CI-DESSUS ET ASSUREZ-VOUS D'AJOUTER "," AVANT LE PRÉCÉDENT
+
+
+
+## Étape 5. REMPLISSEZ vos informations JSON
+Pour remplir le code JSON donné, suivez ces instructions :
+1. Remplacez "VOTRE_NOM" par votre nom réel dans toutes les occurrences.
+2. Remplacez "VOTRE_CITY_COUNTRY_AND_FLAG" par votre ville, votre pays et le drapeau de votre pays.
émoji.
+3. Remplacez "GITHUB_PROFIL_URL" par l'URL de votre profil GitHub.
+4. Remplacez "COLLEZ_CE_QUE_VOUS_VOULEZ_FAIRE_AVANT_DE_MOURIR" par un texte décrivant ce que vous voulez faire avant de mourir.
+* C'est le moment de réfléchir
et réfléchissez à ce que VOUS voulez faire avant de mourir et partagez-le ici. Ce texte décrira l'image que vous téléchargez dans le dossier bid_image. Veuillez limiter votre texte à 130 mots.
+```
+{
+ "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"
+}
+```
+
+## Étape 6. AJOUTEZ VOTRE image de profil GitHub
+- Accédez à votre profil GitHub puis enregistrez l'image de votre avatar en le formatant
.jpg. Veuillez remplacer `` avec votre nom.
+
+- Vous pouvez ajouter une image différente si vous le souhaitez, mais assurez-vous qu'il s'agit d'une image jpeg, qu'elle mesure `450*450` pixels et qu'elle suit la structure de nom ci-dessus.
+
+
+
+- 
Une fois enregistrée, faites glisser votre image dans le `dossier public/img/avatar`.
+
+
+
+
+## Étape 7. AJOUTEZ VOTRE ENCHÈRE (avant de mourir) Image 
+- Trouvez ou créez une image qui représente ce que vous voulez faire avant de mourir. Il peut s'agir d'un collage ou d'un seul élément. Prenez le temps de réfléchir et de lui donner du sens pendant que vous investissez en vous-même en contribuant à ce projet open source et en définissant ce qui est significatif et important pour vous.
+- L'image doit être formatée au moins « 500*500 » pixels.
+- Ajoutez votre image dans le dossier `public/img/bid_image`.
+- Vous pouvez jouer avec la façon dont la taille de votre image affecte la galerie de photos et l'ajuster en conséquence.
+Il peut être utile de trouver des images de haute qualité sur des sites Web comme [UnSplash](https://unsplash.com/) ou d'utiliser les outils AI Generative Images. De plus, la modification de vos images sur des outils tels que [Canva](https://www.canva.com/) peut rendre vos images superbes et significatives pour vous.
+
+
+
+## Étape 8. AJOUTER au fichier CONTRIBUTORS.md
+
+Copiez le code ci-dessous, puis collez-le dans le fichierCONTRIBUTORS de ce dépôt. Assurez-vous de le coller sous une autre colonne de fin de contributeurs. Et puis procédez à la modification avec vos propres informations.
+
+```html
+
+
+
+ 
+
+ YOUR_NAME
+
+ |
+
+```
+
+
+
+### Quelques choses à changer:
+
+- Remplacez le lien par votre propre lien de profil
+ ``
+
+- Faites un clic droit sur votre image de profil github et copiez le lien de l'image et collez-le dans la balise `img`. Laissez la propriété `width="100px"`
+
+```html
+
+```
+
+Accédez simplement à votre page de profil GitHub pour obtenir votre image de profil et votre lien.
+
+
+
+- Remplacez la sous-balise par votre propre nom.
+
+```html
+Votre nom
+```
+
+Enregistrez ensuite vos modifications.
+
+
+
+## Étape 9. Git Add, Commit et Push 
+Ajoutez vos nouvelles modifications à la branche que vous avez créée à l'aide de la commande `git add` :
+
+```javascript
+git ajouter .
+```
+
+Validez maintenant ces modifications à l'aide de la commande `git commit` :
+
+```javascript
+git commit -m "Ajoutez votre nom à Before I Die"
+```
+
+Remplacer « votre-nom » par votre nom.
+
+
+Push vos modifications à l'aide de la commande `git push` :
+
+```javascript
+git push origin votre-nom-de-branche
+```
+
+Remplacer `votre-nom-de-branche` par le nom de la branche que vous avez créée précédemment.
+
+
+ - Avant de poursuivre ces étapes, assurez-vous que vos modifications répondent aux exigences des étapes précédentes
+ - Assurez-vous d'avoir ajouté l'image de l'avatar, l'image d'enchère (avant de mourir) et que tout votre texte JSON a été correctement saisi et s'affiche correctement sur votre serveur de développement React
+ - Validez vos modifications avec le message "Ajoutez une invite ici"
+ - Envoyez vos modifications à la branche que vous avez créée précédemment lors de l'exécution de la commande `git checkout`
+ - Voir ci-dessous pour un exemple
+
+
+### Exemple de workflow d'ajout/commit/push:
+
+Si vous êtes dans le répertoire BeforeIDieAchievements de votre terminal:
+ ```javascript
+ git add .
+ git commit -m "Ajouter Xander Clemens à Avant de mourir"
+ git push -u origin add-Xander-Clemens
+ ```
+
+
+## Étape 10. Soumettez vos modifications pour examen 
+
+Si vous accédez à votre référentiel sur GitHub, vous verrez un bouton `Compare & pull request`. Cliquez sur ce bouton.
+
+
+
+Soumettez maintenant la pull request en cliquant sur le bouton `Create pull request`. Assurez-vous d'ajouter des détails sur ce que vous ajoutez à la demande d'extraction.
+
+
+
+
+Si le déploiement réussit, il y aura une option sur l'écran ci-dessous pour afficher un « aperçu » de votre contribution avant qu'elle ne passe en production!
+
+
+En voyant cet écran, soit votre contribution sera acceptée et fusionnée dans la branche principale, soit votre contribution recevra un retour et des modifications seront demandées.
+Je vais fusionner toutes vos modifications dans la branche principale de ce projet. Vous recevrez un e-mail de notification une fois les modifications fusionnées.
+
+
+ - Dans le cas où des modifications sont demandées, suivez le même workflow pour demander et mettre à jour votre pull request.
+ - Si aucune modification n'a été demandée, elle sera fusionnée dans la branche de production.
+
+
+## Besoin d'aide? 
+Si vous avez besoin d'aide supplémentaire pour résoudre un problème, n'hésitez pas à me contacter au [LinkedIn](https://www.linkedin.com/in/alexanderclemens/) ou retrouvez mes coordonnées sur mon [website](https://www.xanderclemens.com/).
+
+## Merci d'avoir contribué!
+- Bravo! 
Vous venez de terminer le workflow standard fork -> clone -> edit -> pull request que vous rencontrerez souvent en tant que contributeur!
+
+- S'il te plaît, étoile 
ce référentiel et partagez-le avec quelqu'un que vous connaissez qui pourrait aimer contribuer !
+
+J'espère que vous aurez beaucoup de plaisir en contribuant à ce projet. Si vous vous êtes inspiré de vos propres recherches sur ce que vous voulez faire avant de mourir, veuillez mettre en vedette 
ce dépôt et partagez-le avec d'autres pour les encourager à contribuer et identifier ce qu'ils veulent faire avant de mourir.
+
+
+# Contribuant 
+
+Nous aimons 
tirer des demandes de tout le monde. En participant à ce projet, vous
+accepter de respecter les [Code de conduite](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/CODE_OF_CONDUCT.md). Veuillez continuer à ajouter ce projet en consultant la [Feuille de route](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/ROADMAP.md) 
de ce projet en plus de créer ou de contribuer à [issues](https://github.com/BeforeIDieCode/BeforeIDieAchievements/issues) pour améliorer davantage ce projet avec des fonctionnalités.
diff --git a/translations/French/LICENSE b/translations/French/LICENSE
index e69de29b..b2bd7ce1 100644
--- a/translations/French/LICENSE
+++ b/translations/French/LICENSE
@@ -0,0 +1,21 @@
+Licence MIT
+
+Copyright (c) 2022 Arash
+
+La permission est accordée gratuitement à toute personne obtenant une copie
+de ce logiciel et des fichiers de documentation associés (le « Logiciel »), pour traiter
+dans le Logiciel sans restriction, y compris, sans limitation, les droits
+utiliser, copier, modifier, fusionner, publier, distribuer, sous-licencier et/ou vendre
+copies du Logiciel, et pour permettre aux personnes à qui le Logiciel est
+fourni à cet effet, sous réserve des conditions suivantes :
+
+L'avis de droit d'auteur ci-dessus et cet avis d'autorisation doivent être inclus dans toutes
+les copies ou les parties substantielles du Logiciel.
+
+LE LOGICIEL EST FOURNI « TEL QUEL », SANS GARANTIE D'AUCUNE SORTE, EXPRESSE OU
+IMPLICITES, Y COMPRIS MAIS SANS LIMITATION LES GARANTIES DE QUALITÉ MARCHANDE,
+APTITUDE À UN USAGE PARTICULIER ET NON-VIOLATION. EN AUCUN CAS LES
+AUTEURS OU TITULAIRES DES DROITS D'AUTEUR NE SONT RESPONSABLES DE TOUTE RÉCLAMATION, DOMMAGES OU AUTRES
+RESPONSABILITÉ, QUE CE SOIT DANS UNE ACTION CONTRACTUELLE, DÉLIT OU AUTRE, DÉCOULANT DE,
+EN RAISON OU EN RELATION AVEC LE LOGICIEL OU L'UTILISATION OU D'AUTRES TRANSACTIONS DANS LE
+LOGICIEL.
diff --git a/translations/French/README.md b/translations/French/README.md
index e69de29b..9d48a5b2 100644
--- a/translations/French/README.md
+++ b/translations/French/README.md
@@ -0,0 +1,79 @@
+
+
+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/)
+
+[](https://github.com/BeforeIDieCode/BeforeIDieAchievements/issues)
+[](https://github.com/BeforeIDieCode/BeforeIDieAchievements/pulls)
+[](http://makeapullrequest.com)
+[](http://www.firsttimersonly.com/)
+→ come look at our [good first issues](https://github.com/BeforeIDieCode/BeforeIDieAchievements/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22)
+
+
+
+_Lisez ceci dans [autres langues](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/translations/Translations.md)_
+
+
+
+
+
+
+
+
+
+
+# Avant de mourirRéalisations
+
+🌟 Bienvenue sur BeforeIDieAchievements , un projet open source qui aide les développeurs à faire leur première pull request et à contribuer à des projets open source. Voir le [lien en direct](https://before-i-die-achievements.vercel.app/).
+
+## 🚀🎯 Qu’est-ce que BeforeIDieAchievements?
+
+BeforeIDieAchievements est une plateforme pour aider les développeurs à s'impliquer dans un projet open source et à documenter leurs objectifs de vie
. Les développeurs peuvent partager leurs aspirations avec une image 
et texte 
décrivant ce qu'ils veulent accomplir avant de mourir. Partagez vos objectifs et aspirations de vie avec les autres, réfléchissez à ce qui compte vraiment pour vous dans la vie et connectez-vous avec des personnes partageant les mêmes idées. Tirez parti du pouvoir de la communauté pour réaliser vos rêves
. Before I Die Code est une plate-forme pour documenter vos objectifs de vie, apprendre à contribuer à un projet open source et constitue `UN GRAND PROJET CONVIVIAL POUR LES DÉBUTANTS`. Vous pouvez en savoir plus sur ce projet à partir de ceci [MEDIUM](https://xanderclemens.medium.com/discover-your-life-goals-and-make-your-first-open-source-contribution-with-before-i-die-code-aea8e1130d96) article ou en visitant le [about.md](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/about.md) 
file.
+
+## 💡🔗 Comment contribuer
+
+Merci de votre intérêt à contribuer à notre projet open source ! Nous apprécions les contributions d’ingénieurs logiciels comme vous. Voici comment commencer :
+
+1. Vérifiez le [CONTRIBUTION_GUIDELINES](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/CONTRIBUTION-GUIDELINES.md) : ce fichier contient des instructions sur la façon de contribuer au projet. Il fournit des détails sur les exigences spécifiques pour ajouter votre image et votre texte « Avant de mourir » à notre galerie de photos.
. Assurez-vous de suivre ces directives pour vous assurer que votre contribution est acceptée
.
+2. Améliorez le projet : jetez un œil aux [problèmes ouverts](https://github.com/BeforeIDieCode/BeforeIDieAchievements/issues) et à la [ROADMAP](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main /ROADMAP.md) pour le projet. Ce sont des domaines dans lesquels vous pouvez contribuer et faire la différence. Choisissez un problème ou une tâche qui correspond à vos compétences et intérêts. Vous pouvez commencer par commenter le problème pour exprimer votre intérêt à y travailler.
+3. Créez votre propre numéro : si vous avez vos propres idées 
pour valoriser le projet, n'hésitez pas à créer votre propre problématique. Décrivez votre idée et les améliorations que vous souhaiteriez apporter. Cela permet aux autres de collaborer avec vous et de fournir des commentaires. Ensemble, nous pouvons continuellement perfectionner et améliorer nos compétences.
+4. Soumettez votre contribution : une fois que vous avez effectué vos modifications ou ajouts, soumettez votre contribution en suivant les directives fournies dans les [CONTRIBUTION_GUIDELINES](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/CONTRIBUTION-GUIDELINES.md).
+
+N'oubliez pas que la communication et la collaboration sont essentielles dans les projets open source. N'hésitez pas à poser des questions, demander des éclaircissements ou demander de l'aide aux responsables du projet ou à d'autres contributeurs. Nous apprécions vos contributions et sommes impatients de travailler avec vous pour valoriser ce projet
.
+Heureux de contribuer! 
.
+
+## 
Getting Started
+
+Pour commencer avec BeforeIDieAchievements, il suffit de créer un fork 
le référentiel et commencez à contribuer ! Nous accueillons tous les nouveaux contributeurs et sommes heureux de vous aider à faire votre première pull request. Consultez les [CONTRIBUTION_GUIDELINES] (https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/CONTRIBUTION-GUIDELINES.md).
+
+## 🎉
License
+
+BeforeIDieAchievements est sous licence MIT. Voir la [LICENCE](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/LICENSE) fichier pour plus d'informations.
+
+## 
Contributeurs 
+
+Nous tenons à remercier tous les contributeurs qui ont contribué à rendre BeforeIDieAchievements possible. Consultez le fichier [CONTRIBUTORS](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/CONTRIBUTORS.md) pour voir une liste de toutes les personnes extraordinaires qui ont contribué à ce projet.
+
+## 
Contact
+
+Si vous avez des questions ou des commentaires sur BeforeIDieAchievements, n'hésitez pas à nous contacter. Nous aimerions avoir de vos nouvelles ! Pour le moment, vous pouvez me contacter sur [LinkedIn](https://www.linkedin.com/in/alexanderclemens/) ou trouver mes coordonnées sur mon [site web](https://www.xanderclemens.com/).
+
+Merci de votre intérêt pour BeforeIDieAchievements. Nous espérons que vous apprécierez contribuer à ce projet, en documentant vos objectifs de vie et 
mettant en vedette ce référentiel!
+
+## 
Pile de codes
+
+Le projet est construit en utilisant les technologies et le framework suivants:
+
+| [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/) |
+| ------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+|  |  |  |  |  |
+
+De plus, les emojis utilisés pour les fichiers Markdown de ce dépôt ont été créés par [Tarikul Islam Anik](https://github.com/Tarikul-Islam-Anik) qui a créé le référentiel 
[Animated Fluent Emojis](https://github.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis)
pour vous aider à utiliser les émojis fluides animés Microsoft disponibles en un seul endroit et prêts à être utilisés dans votre prochain projet ou fichier README. Le [lien](https://animated-fluent-emoji.vercel.app/) vers le site Web.
diff --git a/translations/French/about.md b/translations/French/about.md
index e69de29b..bbf4d3aa 100644
--- a/translations/French/about.md
+++ b/translations/French/about.md
@@ -0,0 +1,239 @@
+
+
+# Découvrez vos objectifs de vie ✨ et apportez votre première contribution Open Source 📝 avec Before I Die Code
+
+
+
+
+
+Être assis avec des patients en soins palliatifs à Altamonte Springs, en Floride, dans leurs derniers instants, a profondément changé ma vision de la vie quand j'avais 23 ans. Au cours de ma formation, nous avons fait un exercice dans lequel nous rédigions nos listes de choses à faire et les partagions à voix haute. En faisant le tour de la pièce, j’ai réalisé que, que l’on ait 25 ou 95 ans, nous avons tous des rêves que nous aspirons à réaliser avant la fin de notre temps.
+
+
+
+
+Ma liste de choses à faire de 2017 et lorsque j'étais bénévole à l'Hospice of the Comforter à Altamonte Springs, en Floride.
+
+
+
+
+
+Mains réconfortantes dans une unité de soins palliatifs
+
+
+
+Après avoir demandé à des amis et à des inconnus ce qu’ils voulaient faire avant de mourir, j’ai été étonné par la diversité et la profondeur de leurs réponses. Certains voulaient tomber amoureux❤️, d'autres assister à un glacier🧊. Beaucoup souhaitaient renouer avec leur ancienne famille, visiter un lieu exotique ou participer à un sport extrême. Leurs réponses étaient pleines de sens et de passion.
+
+J'ai voyagé à travers tous les continents, mon téléphone à la main, [collectant ces histoires](https://www.xanderclemens.com/what-do-you-want-to-do-before-you-die). Des côtes de l’Alaska à la Nouvelle-Zélande et entre les deux. J'ai documenté des gens partageant pensivement leurs objectifs ultimes dans la vie. Jeunes et vieux, riches et pauvres, nous avons tous des rêves à porter.
+
+Cette expérience m'a montré le pouvoir d'une réflexion approfondie sur la question : qu'est-ce qui compte le plus ? Cela lie notre humanité commune. Nous voulons tous aimer, créer, nous connecter, explorer et laisser une marque positive sur ce monde.
+
+Photo de Megan Bucknall sur Unsplash
+
+J'ai créé le projet open source [Before I Die Code](https://github.com/BeforeIDieCode/BeforeIDieAchievements) pour inspirer les autres à identifier leur objectif. C'est un endroit pour partager vos rêves parallèlement à votre première contribution à l'open source. Parce que la vie n’est pas censée être vécue passivement – elle est censée être vécue avec intention. Découvrons nos objectifs les plus significatifs… avant de mourir.
+
+Je suis ravi de partager Before I Die Code, un projet open source qui aide les développeurs à contribuer à l'open source tout en réfléchissant à leurs objectifs et à leurs rêves de vie.
+
+➡️ [AVANT DE MOURIR GitHub Repo](https://github.com/BeforeIDieCode/BeforeIDieAchievements)
+
+#### Vidéo expliquant le code Avant de mourir ⬇️
+
+[](https://www.youtube.com/watch?v=xiszqfD_W6U)
+
+### Partagez vos aspirations grâce à l'Open Source
+
+L'idée derrière Before I Die Code est simple mais puissante : les développeurs partagent une image et un texte décrivant ce qu'ils veulent accomplir dans la vie avant de mourir.
+
+
+
+
+
+Mon partage de ce que je veux accomplir avant de mourir grâce au projet open source Before I Die Code💻
+
+
+
+### Cela vous permet de:
+
+- Réfléchissez profondément à vos objectifs, à vos rêves et aux éléments de votre liste de choses à faire
+
+- Identifiez ce qui compte le plus pour vous et l'héritage que vous souhaitez laisser
+
+- Partagez ouvertement vos aspirations avec le monde
+
+- Connectez-vous plus profondément avec d'autres développeurs autour de rêves partagés
+
+- Faites votre première contribution open source de manière personnelle et significative !
+
+### Un projet Open Source créé pour les débutants
+
+Before I Die, Code est intentionnellement conçu pour être convivial aux débutants. Je l'ai créé pour offrir une entrée facile à ceux qui souhaitent se lancer dans l'open source.
+
+#### Le projet propose:
+
+- Des directives de contribution étape par étape pour vous guider lors de votre première demande de tirage
+
+- Commentaires de code clairs et détaillés expliquant la configuration du serveur de développement React, la modification de Contributors.json, l'ajout d'images et la mise à jour du fichier [CONTRIBUTORS.md](http://CONTRIBUTORS.md)
+
+- Une communauté accueillante et solidaire de passionnés de l'open source
+
+C'est l'endroit parfait pour apprendre le processus de pull request, perfectionner vos compétences en programmation, vous connecter avec d'autres passionnés et donner un sens à votre vie.
+
+### Comment s'impliquer dans le Code Avant de Mourir
+
+Contribuer est simple:
+
+1. [Forkez le référentiel GitHub](https://github.com/BeforeIDieCode/BeforeIDieAchievements/fork)
+
+2. Suivre la [directives de contribution](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/CONTRIBUTION-GUIDELINES.md) Pour ajouter votre objectif “Avant de mourir“, y compris une image et un texte de description.
+
+3. Ouvrez une demande d'extraction pour soumettre votre contribution.
+
+4. Commentaires supplémentaires, rapports de bugs 🪲 et nouvelles idées 💡sont les bienvenus
+
+Le front-end du projet Before I Die Code est construit avec [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), et il est actuellement déployé sur [Vercel](https://vercel.com/). Cependant, la technologie évoluera avec le déploiement car j'ai l'intention de postuler pour que ce projet open source soit présenté sur [Page d'exploration de GitHub](https://github.com/explore). Pour cela, le projet devra utiliser les pages GitHub.
+
+### Un peu sur la façon dont ce projet a été construit
+
+J'ai eu cette idée en apprenant à contribuer de manière indépendante à des projets open source. Les principaux référentiels recommandent aux débutants de mettre à jour le fichier Markdown avec leurs informations GitHub, ce qui est approprié pour comprendre le flux de travail sur la manière de contribuer et de compléter une pull request. Cependant, je voulais voir un projet qui démontre que les nouveaux contributeurs doivent réfléchir par eux-mêmes à ce qui est important pour eux et partager cet aspect. Le fait de partager cela publiquement permettra aux individus de ressentir davantage de sens et d'attachement pour continuer à développer la base de code, la pile technologique et l'impact de la manière dont ce projet peut évoluer et grandir avec le temps.
+
+Pour le début de ce projet, je tiens à créditer l'utilisateur GitHub [Arash](https://github.com/Banana021s) pour avoir partagé et créé une [Galerie thématique React](https://github.com/Banana021s/Gallery-Media) que j'ai utilisée comme point de départ pour développer la première version de Before I Die Code. J'ai fait cela parce que je n'ai pas réussi à trouver la galerie de photos exacte que je souhaitais pour ce projet sans devoir installer des bibliothèques React supplémentaires. Au début de ce projet, j'ai cherché à limiter l'utilisation de bibliothèques à des fins de taille, tout en cherchant à mieux comprendre les capacités du CSS et du JSX de React par eux-mêmes. Arash a fait un excellent travail en créant une galerie multimédia que j'ai pu comprendre et personnaliser pour ce projet.
+
+La plupart de mes recherches et ajouts de blocs de code spécifiques proviennent de l'utilisation de [Perplexity.ai](http://Perplexity.ai), un moteur de recherche et un outil de découverte d'informations alimentés par l'IA. Par exemple, cela m'a conduit à configurer et à utiliser le bloc de code dans mon composant MasonryLayout.jsx component (qui se trouve dans le src/Components/MasonryLayout/MasonryLayout.jsx du projet) pour randomiser les images des contributeurs à chaque fois qu'un utilisateur consulte ou actualise la page Web.
+
+#### Vidéo du mélange d'images ⬇️
+
+[](https://www.youtube.com/watch?v=XbAL3ajad3c)
+
+### Le code React.jsx que j'ai utilisé pour ce composant
+
+```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;
+```
+
+- J'ai importé les styles, la bibliothèque React Masonry et le composant MasonryBox dont j'avais besoin pour mon composant MasonryLayout. J'ai également défini la fonction du composant MasonryLayout.
+
+- À l'intérieur de mon composant, je spécifie les points de rupture de la mise en page en colonnes pour différentes tailles d'écran dans un objet breakpointColumns. Je mélange ensuite le tableau d'images de manière aléatoire afin que les éléments s'affichent dans un ordre mélangé.
+
+- J'itère sur le tableau d'images mélangées pour rendre les composants MasonryBox individuels pour chaque élément d'image transmis. Le composant MasonryLayout renvoie lui-même la disposition en grille Masonry.
+
+- Lorsque je renvoie la mise en page, je transmets les colonnes de points de rupture que j'ai définies, les classes de style et les composants MasonryBox mappés. Cela permet d'afficher la grille de mosaïque d'images réactive avec les éléments d'image mélangés dans les composants MasonryBox.
+
+Une aide supplémentaire et des ressources supplémentaires sont venues de l'étude d'autres projets open source et de référentiels de développeurs. Par exemple, en cherchant sur GitHub, j'ai découvert le développeur frontend, le développeur open source et le rédacteur technique [Victor Eke](https://github.com/Evavic44). Parmi les nombreux projets open source auxquels il a contribué et qu'il a créés, j'ai utilisé son dépôt [Portfolio Ideas](https://github.com/Evavic44/portfolio-ideas) pour obtenir des idées sur la structure de la documentation. De plus, j'ai lu son article 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) sur ce qu'il a fait pour dépasser les 1 000 étoiles sur son projet open source. J'ai également étudié l'un des dépôts les plus populaires de [first-contributions repositories](https://github.com/firstcontributions/first-contributions) (qui compte plus de 37 000 étoiles) pour sa structure de documentation excellente. Enfin, pour ajouter davantage d'intérêt visuel à la documentation présente dans le Before I Die Code, j'ai utilisé le projet open source [Animated Fluent Emojis](https://github.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis) projet de [Tarikul Islam Anik](https://github.com/Tarikul-Islam-Anik).
+
+Le projet est construit avec le framework React, structuré avec un répertoire public et src. La structure des dossiers de ce projet s'est ouverte dans mon Visual Studio Code.
+
+
+
+
+Structure du fichier Avant de mourir Code
+
+
+
+
+[ROADMAP.MD](http://ROADMAP.MD) actuel pour le code Before I Die en date du 17 août 2023
+
+
+
+
+
+
+
+
+
+
+
+# BeforeIDieAchievements - (बिफोर आई डाई अचीवमेंट्स)
+
+
+
+🌟 beforeIDieAchievements में आपका स्वागत है , एक ओपन सोर्स प्रोजेक्ट जो डेवलपर्स को अपना पहला पुल अनुरोध करने और ओपन सोर्स प्रोजेक्ट्स में योगदान करने में मदद करता है। [लाइव लिंक](https://before-i-die-achievements.vercel.app/) देखें |
+
+
+
+
+
+## 🚀🎯 क्या है BeforeIDieAchievements?
+
+
+
+beforeIDieAchievements डेवलपर्स को एक ओपन-सोर्स प्रोजेक्ट में शामिल होने और उनके जीवन लक्ष्यों का दस्तावेजीकरण करने में सहायता करने के लिए एक मंच है।. डेवलपर्स अपनी आकांक्षाओं को एक छवि और पेन के साथ साझा कर सकते हैं जो यह बताता है कि मरने से पहले वे क्या हासिल करना चाहते हैं। अपने जीवन के लक्ष्यों और आकांक्षाओं को दूसरों के साथ साझा करें, इस पर विचार करें कि जीवन में आपके लिए वास्तव में क्या मायने रखता है, और समान विचारधारा वाले व्यक्तियों से जुड़ें। अपने सपनों को हासिल करने के लिए समुदाय की शक्ति का लाभ उठाएं, मुस्कुराती आंखों के साथ । बिफोर आई डाई कोड आपके जीवन के लक्ष्यों का दस्तावेजीकरण करने, एक ओपन सोर्स प्रोजेक्ट में योगदान करने का तरीका सीखने के लिए एक मंच है और यह एक महान शुरुआती अनुकूल परियोजना है। आप इस प्रोजेक्ट के बारे में इस [MEDIUM](https://xanderclemens.medium.com/discover-your-life-goals-and-make-your-first-open-source-contribution-with-before-i-die-code-aea8e1130d96) आलेख से या [about.md](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/about.md) अपसाइड-डाउन फेस फ़ाइल पर जाकर अधिक जान सकते हैं।
+
+
+
+## 💡🔗 योगदान कैसे करें
+
+
+
+हमारे ओपन सोर्स प्रोजेक्ट में योगदान देने में आपकी रुचि के लिए धन्यवाद! हम आप जैसे सॉफ्टवेयर इंजीनियरों के योगदान का स्वागत करते हैं। यहां बताया गया है कि आप कैसे शुरुआत कर सकते हैं:
+
+
+1. [योगदान दिशानिर्देश](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/CONTRIBUTION-GUIDELINES.md): की जाँच करें: इस फ़ाइल में परियोजना में योगदान करने के निर्देश शामिल हैं। यह हमारी फोटो गैलरी में आपकी "मरने से पहले" छवि और टेक्स्ट को जोड़ने के लिए विशिष्ट आवश्यकताओं पर विवरण प्रदान करता है। यह सुनिश्चित करने के लिए कि आपका योगदान स्वीकार किया जाए, इन दिशानिर्देशों का पालन करना सुनिश्चित करें.
+
+2. प्रोजेक्ट को बेहतर बनाएं: प्रोजेक्ट के लिए खुले मुद्दों और [ओपन इशूस](https://github.com/BeforeIDieCode/BeforeIDieAchievements/issues) and [रोडमैप](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/ROADMAP.md) पर एक नज़र डालें। ये ऐसे क्षेत्र हैं जहां आप योगदान कर सकते हैं और बदलाव ला सकते हैं। ऐसा मुद्दा या कार्य चुनें जो आपके कौशल और रुचियों से मेल खाता हो। आप इस मुद्दे पर काम करने में अपनी रुचि व्यक्त करने के लिए इस मुद्दे पर टिप्पणी करके शुरुआत कर सकते हैं।
+
+3. अपना खुद का मुद्दा बनाएं: यदि आपके पास परियोजना को बढ़ाने के लिए अपने खुद के विचार हैं, तो अपना खुद का मुद्दा बनाने में संकोच न करें। अपने विचार और उन सुधारों का वर्णन करें जो आप करना चाहते हैं। इससे अन्य लोग आपके साथ सहयोग कर सकते हैं और फीडबैक दे सकते हैं। साथ मिलकर, हम अपने कौशल को लगातार निखार और सुधार सकते हैं।
+
+5. अपना योगदान जमा करें: एक बार जब आप अपना परिवर्तन या परिवर्धन कर लें, तो दिए गए दिशानिर्देशों का पालन करते हुए अपना योगदान जमा करें [योगदान दिशानिर्देश](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/CONTRIBUTION-GUIDELINES.md).
+
+
+
+याद रखें, ओपन सोर्स प्रोजेक्ट्स में संचार और सहयोग महत्वपूर्ण हैं। बेझिझक प्रश्न पूछें, स्पष्टीकरण मांगें, या परियोजना अनुरक्षकों या अन्य योगदानकर्ताओं से सहायता का अनुरोध करें। हम आपके योगदान को महत्व देते हैं और इसे बढ़ाने के लिए आपके साथ काम करने को तत्पर हैं।
+
+ख़ुशी से योगदान करें! .
+
+
+
+## शुरू करना
+
+
+beforeIDieAchievements के साथ शुरुआत करने के लिए, बस रिपॉजिटरी को फोर्क करें और योगदान देना शुरू करें! हम पहली बार योगदान करने वाले सभी योगदानकर्ताओं का स्वागत करते हैं और आपका पहला पुल अनुरोध करने में आपकी सहायता करने में प्रसन्न हैं। [योगदान दिशानिर्देश](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/CONTRIBUTION-GUIDELINES.md). देखें.
+
+
+
+## 🎉 लाइसेंस
+
+
+beforeIDieAchievements को MIT लाइसेंस के तहत लाइसेंस प्राप्त है। अधिक जानकारी के लिए [LICENSE](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/LICENSE) फ़ाइल देखें।
+
+
+
+## योगदानकर्ता
+
+
+हम उन सभी योगदानकर्ताओं को धन्यवाद देना चाहते हैं जिन्होंने beforeIDieAchievements को संभव बनाने में मदद की है। इस परियोजना में योगदान देने वाले सभी अद्भुत लोगों की सूची देखने के लिए [योगदानकर्ता](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/CONTRIBUTORS.md) फ़ाइल देखें।
+
+
+
+## संपर्क
+
+यदि आपके पास beforeIDieAchievements के बारे में कोई प्रश्न या प्रतिक्रिया है, तो कृपया बेझिझक हमसे संपर्क करें। हमें आपसे सुनना प्रिय लगेगा! फिलहाल आप मुझसे [लिंक्डइन](https://www.linkedin.com/in/alexanderclemens/) पर संपर्क कर सकते हैं या मेरी [वेबसाइट](https://www.xanderclemens.com/) पर मेरा संपर्क विवरण पा सकते हैं।
+
+ beforeIDieAchievements में आपकी रुचि के लिए धन्यवाद। हमें आशा है कि आप इस परियोजना में योगदान देने, अपने जीवन के लक्ष्यों का दस्तावेजीकरण करने और इस भंडार को अभिनीत करने का आनंद लेंगे!
+
+
+
+## कोड स्टैक
+
+
+
+परियोजना निम्नलिखित प्रौद्योगिकियों और ढांचे का उपयोग करके बनाई गई है:
+
+
+
+| [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/) |
+| ------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+|  |  |  |  |  |
+
+
+इसके अतिरिक्त, इस रेपो के लिए मार्कडाउन फ़ाइलों के लिए उपयोग किए जाने वाले इमोजिस को [तारिकुल इस्लाम अनिक](https://github.com/Tarikul-Islam-Anik) द्वारा बनाया गया था, जिन्होंने Microsoft [एनिमेटेड फ़्लुएंट इमोजी](https://github.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis) को एक ही स्थान पर उपलब्ध होने और आपके अगले प्रोजेक्ट या रीडमी (README) फ़ाइल में उपयोग करने के लिए तैयार करने में सहायता के लिए रिपॉजिटरी एनिमेटेड फ़्लुएंट बनाया था। वेबसाइट का [लिंक](https://animated-fluent-emoji.vercel.app/)
+
diff --git a/translations/Mandarin_Chinese/CODE_OF_CONDUCT.md b/translations/Mandarin_Chinese/CODE_OF_CONDUCT.md
index e69de29b..74041830 100644
--- a/translations/Mandarin_Chinese/CODE_OF_CONDUCT.md
+++ b/translations/Mandarin_Chinese/CODE_OF_CONDUCT.md
@@ -0,0 +1,84 @@
+# 贡献者代码规范准则公约
+
+## 我们承诺
+
+作为参与者、贡献者和领导者，我们承诺为每个社区中的参与者提供一个无骚扰的参与体验，而不论是他们的年龄、提醒、明显或不明显的残疾、种族、性别、性别认同表达、经验、教育程度、社会经济地位、国籍、形象、宗教或者是他们的性取向。
+
+我们承诺以行动和互动的方式，促进一个开放、欢迎、多样化、包容和健康的社区。
+
+## 我们的标准
+
+一些为社区营造积极的环境的示例行为包括:
+
+* 向他人展示同理心和善心
+* 尊重不同的意见、观点和经验
+* 优雅的给予或者接受建设性的反馈
+* 承担责任并向受到错误影响的人们道歉，并且从中吸取教训
+* 将注意力放到对社区发展最好而并非对个人发展最好的的内容上
+
+一些不可接受的行为示例:
+
+* 使用性暗示的语言或图像，以及任何形式的性关注
+* 挑衅、侮辱或贬低的言论，以及个人或政治攻击
+* 公开或者私下的骚然
+* 未经明确许可就公开他人的私人信息，如主治或者电子邮件地址
+* 其他的一些在专业场景下被公认的不适当的行为
+
+
+
+## 执行责任
+
+社区的领导者负责声明和改进关于可接受行为的标准，并且采取适当和公正的纠正措施来应对他们认为的不当、威胁、冒犯或者其他有害行为
+
+社区的领导者有责任和权利去删除、编辑或者拒绝与本行为准则不一致的评论、提交、代码、维基编辑、issue以及其他的贡献，并且将在适当的时间向用户解释该审核决策的原因。
+
+## 范围
+
+这个行为准则适用于所有社区空间以及适用于当个人在公共区域中中代表社区时。包括例如使用官方电子邮件地址、通过官方社交媒体账号发布帖子，或在在线或离线活动中担任相应角色的时候。
+
+## 执行准则
+
+任何滥用、骚扰或其他不可接受的行为都可以向负责执法的社区领导者报告。所有投诉将被迅速、公正地审查和调查。
+
+所有社区领导者有责任尊重举报人的隐私和安全。
+
+## 执法指南
+
+社区领导者将遵循以下社区影响指南，确定违反本行为准则的行为所产生的后果：
+
+### 1. 更正
+
+**社区影响**: 使用不适当的语言或其他被认为在社区中不专业或不受欢迎的行为。
+
+**后果**: 社区领导者会以私下书面警告的形式提醒，明确违反的性质，并解释为什么该行为不适当。可能会要求公开道歉。
+
+### 2. 警告
+
+**Community Impact**:通过单个事件或一系列行动违反规定。
+
+**Consequence**: 发出警告并附带持续行为的后果。在指定的时间内，不得与相关人员进行任何交流，包括与执行行为准则的人员的非请求交流。这包括在社区空间以及社交媒体等外部渠道上避免交流。违反这些规定可能会导致暂时或永久封禁。
+
+### 3. 暂时封禁
+
+**Community Impact**: 严重违反社区标准，包括持续不当行为。
+
+**Consequence**: 在指定的时间内，被暂时禁止与社区进行任何形式的互动或公开交流。在此期间不得与相关人员进行公开或私下交流，包括与执行行为准则的人员的非请求交流。违反这些规定可能会导致永久封禁。
+
+### 4. 永久封禁
+
+**社区影响**: 展示了违反社区标准的模式，包括持续不当行为、对个人的骚扰或对某些人群的攻击或贬低。
+
+**后果**: 永久禁止在社区内进行任何形式的公开互动。
+
+## 归属
+
+本行为准则改编自 [贡献者公约][homepage],2.0, 可以在
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html 上进行查阅.
+
+社区影响指南的灵感来自于 [Mozilla's代码行为准则](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+关于本行为准则的QA，请参阅
+https://www.contributor-covenant.org/faq. 翻译版本请参阅
+https://www.contributor-covenant.org/translations.
\ No newline at end of file
diff --git a/translations/Mandarin_Chinese/CONTRIBUTION-GUIDELINES.md b/translations/Mandarin_Chinese/CONTRIBUTION-GUIDELINES.md
index e69de29b..fcf1f0ae 100644
--- a/translations/Mandarin_Chinese/CONTRIBUTION-GUIDELINES.md
+++ b/translations/Mandarin_Chinese/CONTRIBUTION-GUIDELINES.md
@@ -0,0 +1,248 @@
+
+
贡献指南
+ 这份文档包含了一系列指南，以帮助你在贡献过程中参与这个项目。这个开源项目。
使用React框架构建，你需要在本地启动开发服务后才能查看该项目。
+
以下的命令:
+
+`npm i` 安装运行React服务开发所必要的依赖。
+
+
+
+然后运行下面的命令，运行React 开发服务⚛️:
+
+`npm start`
+
+
+
+当启动成功时，你的终端应该看起来像下图差不多
+
+
+
+在运行`npm start` 命令后如果没有自动跳转，那就打开浏览器，跳转到 localhost: 3000 .
+
+
+
+
+## Step 3. 创建新的分支
+
+在代码编辑工具（如Visual Studio Code）或你选择的其他代码编辑器中打开克隆的存储库。以下步骤演示了使用Visual Studio Code的过程，但同样的流程也适用于其他代码编辑器或使用GitHub Codespaces。
+
+切换到你电脑上的仓库的目录（如果你当前不在那个目录下的话）。
+
+```
+cd BeforeIDieAchievements
+```
+
+然后使用下面的命令创建一个新的分支:
+
+```
+git checkout -b your-branch-name
+```
+
+例如:
+
+```
+git checkout -b add-Xander-Clemens
+```
+## Step 4. 粘贴 JSON 文件 
+
+* 在src/Jsons/Contributors.json 中粘贴下面的JSON 代码
+* 在你粘贴Json代码之前，请将滚轮滑倒列表的最后，增加一个逗号“，”
+
+```
+{
+ "id": "YOUR_NAME",
+ "image": "img/bid_image/YOUR_NAME.jpg",
+ "avatar": "img/avatar/YOUR_NAME.jpg",
+ "name": "YOUR_NAME",
+ "location": "YOUR_CITY_COUNTRY_AND_FLAG",
+ "GitHub": "GITHUB_PROFILE_URL",
+ "text": "PASTE_WHAT_YOU_WANT_TO_DO_BEFORE_YOU_DIE"
+}
+```
+请将你的代码粘贴在上面，并确保在之前的贡献者JSON代码之前添加“,”
+
+
+
+## Step 5. 填充你的信息到JSON当中
+想要将个人信息填充给到的json代码当中，请遵循以下指令:
+1. 请在所有出现的地方将“YOUR_NAME”替换为你的真实姓名。
+2. 请将“YOUR_CITY_COUNTRY_AND_FLAG”替换为你的城市、国家和国旗。 图表.
+3. 请将“GITHUB_PROFILE_URL”替换为你的GitHub个人资料的URL。
+4. 请将“PASTE_WHAT_YOU_WANT_TO_DO_BEFORE_YOU_DIE”替换为描述你在死前想做的事情的文字。
+* 这是你思考 和反思你在死前想做的事情，并在这里分享。这段文字将描述你在bid_image文件夹中上传的图片。请将你的文字限制在130字以内。
+```
+{
+ "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"
+}
+```
+
+## Step 6. 增加你Github Profile 的图片
+- 去你的GitHub个人资料页面，然后保存你的头像图片，格式为.jpg。请将替换为你的名字。
+
+- 如果你喜欢，你也可以添加一张不同的图片，但请确保它是一张jpeg格式的图片，并且尺寸为`450*450` 像素，并按照上述的命名结构来命名。
+
+
+
+- 一旦你保存了，把图像拖到 `public/img/avatar 文件夹中`.
+
+
+
+
+## Step 7. 增加你 BID (Before I Die) 图片
+- 找到或创建一张代表你希望在死前完成的事情的图片。它可以是一张拼贴图或者单个物品的图片。花些时间反思，并让其对你有意义，因为你通过为这个开源项目做出贡献来投资于自己，定义了对你来说什么是有意义和重要的。
+- 这张图片的尺寸至少应为 `500*500` 像素.
+- 在 `public/img/bid_image`文件夹中增加图片.
+- 你可以尝试一下图片尺寸对图片库的影响，并进行相应的调整。
+在网站上（如 [UnSplash](https://unsplash.com/)）找到高质量的图片或使用AI生成图片工具可能会有所帮助。此外，使用[Canva](https://www.canva.com/)等工具编辑你的图片可以使你的视觉效果更加出色，对你来说更有意义。
+
+
+
+## Step 8. 在 CONTRIBUTORS.md 增加内容
+
+复制下面的代码，然后将其粘贴到此仓库的 CONTRIBUTORS 文件中.确保将其粘贴在其他贡献者的末尾列下面。然后继续编辑并填写你自己的信息。记得将替换为你的GitHub用户名，将替换为你的名字，将替换为你的国家，将替换为你的贡献描述。
+
+```html
+
+
+
+
+
+ YOUR_NAME
+
+ |
+
+```
+
+
+
+### 需要改动的有:
+
+- 请将链接替换为你自己的个人资料链接
+ ``
+
+- 键点击你的GitHub个人资料图片，复制图片链接，然后将其粘贴到 `img` 标签内. 请保留 `width="100px"` 属性
+
+```html
+
+```
+
+只需进入你的GitHub个人资料页面获取你的个人资料图片和链接。
+
+
+
+- 将子标签替换为你自己的名字。
+
+```html
+Your Name
+```
+
+保存更改。
+
+
+
+## Step 9. Git Add, Commit and Push
+使用 `git add` 命令将你的新更改添加到你创建的分支中：
+
+```javascript
+git add .
+```
+
+然后通过 `git commit` 命令提交更改:
+
+```javascript
+git commit -m "Add your-name to Before I Die"
+```
+
+使用你的名字替换 `your-name` .
+
+
+是用命令 `git push` 推送你的更改:
+
+```javascript
+git push origin your-branch-name
+```
+
+使用你之前创建的分支名称来替换 `your-branch-name` 。
+
+
+ - 在继续下面的步骤之前，请确保你的更改满足之前步骤中的要求
+ - 确保你已经添加了头像图片，Before I Die的图片，并且你的所有JSON文本已经正确输入，并在React开发服务器上正确显示
+ - 使用消息"add prompt your prompt here"提交你的更改"
+ - 将你的更改推送到之前创建的分支
+ - 请看下面的示例
+
+
+### Example add/commit/push workflow:
+
+ 如果你在终端中已经进入了Before I Die 的目录:
+ ```javascript
+ git add .
+ git commit -m "Add Xander Clemens to Before I Die"
+ git push -u origin add-Xander-Clemens
+ ```
+
+
+## Step 10. 提交更改以供审查
+
+如果你打开 GitHub 上的仓库，你会看到一个 `Compare & pull request` 按钮。点击这个按钮。
+
+
+
+现在点击`Create pull request` 按钮提交拉取请求。确保添加你要添加的详细信息。
+
+
+
+
+如果部署成功，下面的屏幕上会有一个选项，在进入生产环境之前，可以预览你的贡献！
+
+
+在看到这个截图后，你的贡献要么会被接受并合并到主分支中，要么会收到反馈并要求进行更改。
+我将把你的所有更改合并到这个项目的主分支中。更改合并后，你将收到通知邮件。
+
+
+ - 如果要求更改，请按照相同的步骤请求并更新你的拉取请求。
+ - 如果没有要求更改，它将被合并到生产分支中。
+
+
+## 需要更多帮助?
+如果你在任何问题上需要额外的帮助，请随时在LinkedIn[LinkedIn](https://www.linkedin.com/in/alexanderclemens/)上与我联系，或在我的 [网站](https://www.xanderclemens.com/)上找到我的联系方式。
+
+## 感谢您的贡献!
+- 恭喜! 你刚刚完成了标准的fork -> clone -> 编辑 -> PR的工作流程，作为贡献者，你经常会遇到这样的流程！
+
+- 请给这个仓库 一个小星星，并且分享给你认为对其感兴趣的人。
+
+我希望你在为这个项目做贡献的过程中能玩得很开心！如果你从自己的研究中得到了灵感，想要在去世之前完成一些事情，请给这个仓库加星星并与他人分享，鼓励他们做出贡献并确定自己在去世之前想要做的事情。
+
+
+# 贡献
+
+我们非常欢迎大家提出拉取请求。参与这个项目，你需要遵守 [代码规范](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/CODE_OF_CONDUCT.md). 请继续通过查看这个项目的[Road Map](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/ROADMAP.md) 
来发展这个项目 并通过创建或为[issues](https://github.com/BeforeIDieCode/BeforeIDieAchievements/issues) 贡献来进一步的完善这个项目。
\ No newline at end of file
diff --git a/translations/Mandarin_Chinese/LICENSE b/translations/Mandarin_Chinese/LICENSE
index e69de29b..a0fd2df2 100644
--- a/translations/Mandarin_Chinese/LICENSE
+++ b/translations/Mandarin_Chinese/LICENSE
@@ -0,0 +1,9 @@
+MIT许可证
+
+版权所有 (c) 2022 Arash
+
+特此免费授予任何获得本软件及相关文档文件（以下简称"软件"）副本的个人无需支付任何费用而使用、复制、修改、合并、发布、分发、再授权及/或出售本软件的副本的权限，并允许获得该软件的个人在以下条件下执行这些操作：
+
+上述版权声明和本许可声明应包含在所有软件的所有副本或实质部分中。
+
+本软件按"原样"提供，不提供任何形式的明示或暗示担保，包括但不限于对适销性、特定目的的适用性和非侵权性的担保。无论是在合同诉讼、侵权行为或其他情况下，作者或版权持有人均不承担任何索赔、损害赔偿或其他责任，无论是因为使用本软件或与本软件的使用或其他交易有关。
diff --git a/translations/Mandarin_Chinese/README.md b/translations/Mandarin_Chinese/README.md
index e69de29b..0376096d 100644
--- a/translations/Mandarin_Chinese/README.md
+++ b/translations/Mandarin_Chinese/README.md
@@ -0,0 +1,80 @@
+
+
+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/)
+
+[](https://github.com/BeforeIDieCode/BeforeIDieAchievements/issues)
+[](https://github.com/BeforeIDieCode/BeforeIDieAchievements/pulls)
+[](http://makeapullrequest.com)
+[](http://www.firsttimersonly.com/)
+→ come look at our [good first issues](https://github.com/BeforeIDieCode/BeforeIDieAchievements/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22)
+
+
+
+_使用 [其他语言阅读](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/translations/Translations.md)_
+
+
+
+
+
+
+
+
+
+
+# 落日余愿BeforeIDieAchievements
+
+🌟 欢迎来到 BeforeIDieAchievements 项目 , 这是一给开源项目，希望能够帮助开发者完成他们的第一个Pull Request 和第一个开源贡献。了解详情请查看 [线上链接](https://before-i-die-achievements.vercel.app/).
+
+## 🚀🎯 BeforeIDieAchievements是什么?
+
+BeforeIDieAchievements是一个平台，旨在帮助开发者参与开源项目并记录他们的人生目标. 开发者可以通过图片分享他们的梦想 也可以通过文字 描述他们在离世前最想要完成的事情。与他人分享你的人生目标和愿望，思考生活中真正重要的事情，并与志同道合的人建立联系。利用社区的力量来实现你的梦想。. Before I Die Code 是一个记录你人生目标、学习如何为开源项目做出贡献的平台，也是一个非常适合`初学者的项目`。你可以从这篇 [MEDIUM](https://xanderclemens.medium.com/discover-your-life-goals-and-make-your-first-open-source-contribution-with-before-i-die-code-aea8e1130d96) 文章或者通过[about.md](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/about.md) 文件了解更多关于这个项目的信息。
+
+## 💡🔗 如何贡献
+
+感谢你对我们的开源项目感兴趣！我们欢迎像您这样的软件工程师做出贡献。以下是你贡献的步骤：
+
+1. 查看[CONTRIBUTION_GUIDELINES](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/CONTRIBUTION-GUIDELINES.md): 这个文件包含了如何为项目做出贡献的说明。它详细介绍了将你的"Before I Die"图片和文本添加到我们的照片库
的具体要求。请确保遵循这些准则，以确保你的贡献被接受.
+2. 改进项目: 查看项目的[open issues](https://github.com/BeforeIDieCode/BeforeIDieAchievements/issues) 和 [ROADMAP](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/ROADMAP.md) 。这些是你可以贡献和产生影响的领域。选择一个与你的技能和兴趣相符的问题或任务。你可以通过评论问题来表达你对参与该问题的兴趣。
+3. 创建issue: 如果你有你自己的饿想法 能够促进本项目的发展, 请不要犹豫的提出issue。请在其中描述你的想法和你想要达到的效果。这样其他人就可以与你合作，并提供反馈。我们可以一起不断提升和改进我们的技能。
+4. 提交贡献: 当你做出修改和完善的后，请按照[贡献指南](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/CONTRIBUTION-GUIDELINES.md)的提示提交修改完成贡献.
+
+记住，在开源项目中，沟通和合作是关键。随时提问、澄清问题或寻求项目维护者或其他贡献者的帮助。我们非常重视你的贡献，并期待与你一起改进这个项目。 .
+欢迎加入! .
+
+## 开始
+
+要开始使用BeforeIDieAchievements，只需fork 这个仓库并开始贡献！我们欢迎所有初次贡献者，并乐意帮助你完成第一个拉取请求。请查看[贡献指南](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/CONTRIBUTION-GUIDELINES.md).
+
+## 🎉 开源协议
+
+BeforeIDieAchievements采用MIT许可证。有关更多信息，请参阅 [LICENSE](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/LICENSE) 。
+
+## 贡献者
+
+我们要感谢所有帮助实现BeforeIDieAchievements的贡献者。请查看 [CONTRIBUTORS](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/CONTRIBUTORS.md) 文件看看所有为这个项目做出贡献的了不起的人们。
+
+## 联系方式
+
+如果你对BeforeIDieAchievements有任何问题或反馈，请随时联系我们。我们非常乐意收到你的来信！目前你可以在[LinkedIn](https://www.linkedin.com/in/alexanderclemens/)上联系我或者在[我的网站上](https://www.xanderclemens.com/)找到更多关于我的信息.
+
+感谢您对 BeforeIDieAchievements项目的关注.们希望你享受为这个项目做贡献的过程，记录你的人生目标，并为这个 仓库 点赞!
+
+## 技术栈
+
+本项目在构建过程中使用了下方的技术或者架构:
+
+| [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/) |
+| ------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+|  |  |  |  |  |
+
+另外，用于此存储库的Markdown文件的表情符号是由 [Tarikul Islam Anik](https://github.com/Tarikul-Islam-Anik) 创建的，他创建了仓库 [Animated Fluent Emojis](https://github.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis) 以帮助使用Microsoft动画流畅表情符号的人在一个地方快速使用它们在项目或README文件中。[链接](https://animated-fluent-emoji.vercel.app/) 到这个网站.
+
diff --git a/translations/Mandarin_Chinese/about.md b/translations/Mandarin_Chinese/about.md
index e69de29b..0c0ccae3 100644
--- a/translations/Mandarin_Chinese/about.md
+++ b/translations/Mandarin_Chinese/about.md
@@ -0,0 +1,239 @@
+
+
+# 发现你的人生目标 ✨ 并通过Before I Die Code 项目完成第一次的开源贡献
+
+
+
+
+
+当我23岁，在弗罗里达的阿尔塔蒙特斯普林斯市陪伴临终关怀的患者的时候，我深刻的改变了对生活的看法。在培训的时候，我们做了一个“写下人生愿望清单并大声分享”的活动，当我们在房间里一轮一轮的进行这个活动的时候，我意识到，无论是25岁还是95岁，我们都有梦想，都渴望在离世之前实现它们！
+
+
+
+
+2017年我在阿尔塔蒙特斯普林斯市的Hospice of the Comforter做志愿者时写下的愿望清单。
+
+
+
+
+
+在临终关怀病房中的安慰的手
+
+
+
+在询问朋友和一些陌生人关于他们在临死前想做什么的时候，我被他们有深度的回答所震撼。有些人希望陷入爱河之中，有些人想要亲眼目睹冰川，还有许多人希望与失散的家人重新联系、参观一个异国情调之地或者参加极限运动，他们的回答充满了激情和人生的意义。
+
+我拿着手机，穿越整片大陆，[收集这些故事](https://www.xanderclemens.com/what-do-you-want-to-do-before-you-die)。从阿拉斯加的海岸到新西兰以及过程中的每一个地方，我记录下了人们分享的经过深思熟虑的终极人生目标。无论是年轻人还是老年人，穷人还是富人，所有人都怀揣着梦想
+
+这次经历向我展示了深入思考“什么最重要”的问题的力量。它连接了我们共同的人性。我们都希望去爱，创造，交流，探索，并在这个世界上留下积极的印记。
+
+由Megan Bucknall在Unsplash上拍摄的照片。
+
+我创建了开源项目[Before I Die Code](https://github.com/BeforeIDieCode/BeforeIDieAchievements) 来激发他人找到他们的人生目的。这个项目是一个能够在分享你的梦想的同时能够完成第一个开源贡献的平台。因为生活并非是被动的，而是应该充满目的和主观意识的去生活。让我们一起去发现我们最有意义的目标吧...在离世之前
+
+我非常激动的分享 Before I Die Code — 一个帮助开发者在为开源做贡献的同时分享他们的人生目标和梦想的开源项目
+
+➡️ [BEFORE I DIE GitHub Repo](https://github.com/BeforeIDieCode/BeforeIDieAchievements)
+
+#### 视频介绍 Before I Die Code ⬇️
+
+[](https://www.youtube.com/watch?v=xiszqfD_W6U)
+
+### 通过开源项目分享你的目标
+
+虽然Before I Die Code项目的目的很简单，但是却很有力量：开发者们可以分享一张图片和文字，描述他们在人生中想要在离世之前实现的目标。
+
+
+
+
+
+我在Before I Die Code这个开源项目中分享了我在离世之前想要实现的目标💻
+
+
+
+### 这个项目让你可以:
+
+- 深入反思你的目标、梦想和愿望清单
+
+- 确定对你来说最重要的事情和你想留下的东西
+
+- 向世界公开的分享你的抱负
+
+- 与其他开发者在共同的梦想上更深入地连接
+
+- 以个人、有意义的方式进行你的第一个开源贡献！
+
+### 为初始者创建的开源项目
+
+Before I Die, Code 是特意设计成适合初学者的。我构建它是为了为那些想要开始参与开源项目的人提供一个简单的入门途径。
+
+#### 这个项目提供:
+
+- 手把手的贡献指南，帮助你完成第一个pull request
+
+- 清晰详细的代码注释，解释了React开发者服务的设置、编辑Contributor.json，添加图片和编辑 [CONTRIBUTORS.md](http://CONTRIBUTORS.md) 文件
+
+- 开放友好的社区，提供支持和帮助的开源爱好者
+
+这是一个完美的学习拉取请求工作流程、提升编程技能、与他人联系并定义你的人生目标的空间。
+
+### 如何参与Before I Die Code
+
+参与很简单:
+
+1. [Fork GitHub 仓库](https://github.com/BeforeIDieCode/BeforeIDieAchievements/fork)
+
+2. 参照 [贡献指南] (https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/CONTRIBUTION-GUIDELINES.md) 添加你的 “Before I Die” 目标, 包括图片和文字描述。
+
+3. 发送 pull request 来提交贡献
+
+4. 欢迎提供额外的反馈，错误报告和新的想法
+
+The Before I Die Code 项目的项目的前端使用了 [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)来构建，并且目前部署在Vercel上。然而，随着项目的部署，技术可能会发生变化，因为我计划申请将这个开源项目展示在GitHub探索页面上。为此，项目将需要使用GitHub页面。
+
+### 关于这个项目构建的一些故事
+
+我在学习如何独立的参与开源项目的过程中想到了这个创意。大多数鼓励初学者更新GitHub信息的MD文件确实对于理解如何贡献、发送Pr非常合适，但我更想看到一个展示新的贡献者思考对他们来说什么是真正重要的事物并且能够分享的一个项目。公开的分享能够让参与者感到更加的有意义，并且能够对其感兴趣，能够持续的发展代码、技术栈以及感受到项目随着时间发展和演化
+
+我要感谢GitHub用户 [Arash](https://github.com/Banana021s) 分享和构建了一个React主题的图库，我将其作为构建 Before I Die Code第一个版本的起点。之所以这么做，是因为我没有找到适用于这个项目的图库而无需额外安装额外的React库依赖，并且在项目的早起阶段,我试图限制在理解CSS和React JSX能力的情况下限制使用库的大小，但Arash在构建媒体库的方面做的非常好，以至于我能够弄清楚如何自定义和操作来适应这个项目。
+
+我的大部分研究和特定代码块的添加都来自于使用P [Perplexity.ai](http://Perplexity.ai)，这是一个由人工智能驱动的搜索引擎和信息发现工具。例如，这让我配置和利用了我的MasonryLayout.jsx组件（位于项目的src/Components/MasonryLayout/MasonryLayout.jsx）中的代码块，用于每次用户查看或刷新网页时随机改变贡献者的图片。
+
+#### 随机排序图片的录制视频 ⬇️
+
+[](https://www.youtube.com/watch?v=XbAL3ajad3c)
+
+### 我在这个模块使用的 React.jsx 代码
+
+```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;
+```
+
+- 我导入了我在MasonryLayout组件中所需的样式、React Masonry库和MasonryBox组件。还定义了MasonryLayout组件函数。
+
+- 在组件内部，我使用breakpointColumnsObj为不同屏幕尺寸指定了列布局断点。我随机打乱了图片数组，以便项目以混合顺序显示。
+
+- 我对打乱后的图片数组进行了映射，为每个传入的图片项渲染单独的MasonryBox组件。MasonryLayout组件返回Masonry网格布局本身。
+
+- 在返回布局时，我传入了我定义的断点列、样式类和映射的MasonryBox组件。这样就可以呈现响应式的图片马赛克网格，其中使用Masonry Box组件显示打乱后的图片项。
+
+我还从研究其他开源项目和开发者的存储库中获得了额外的帮助和资源。例如，在GitHub上搜索时，我发现了前端开发者、开源开发者和技术作家 [Victor Eke](https://github.com/Evavic44). 他协助和创建的许多开源项目中，我使用了他的仓库 [Portfolio Ideas](https://github.com/Evavic44/portfolio-ideas)来获取关于文档结构的思路；此外,我阅读了他的博客文章 [“How my open source project got 1000 stars on GitHub in 4 months（什么样的开源项目在四个月内获得了1000个star）”](https://eke.hashnode.dev/how-my-open-source-project-got-1000-stars-on-github-in-4-months) 了解了他是如何让自己的开源项目超过1000颗星星的；我还学习了最受欢迎的[first-contributions 仓库](https://github.com/firstcontributions/first-contributions)（拥有超过37,000颗星星）的文档结构 ，最后，为了增加Before I Die 项目的趣味性，我使用了 [Tarikul Islam Anik](https://github.com/Tarikul-Islam-Anik)创建的[Animated Fluent Emojis](https://github.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis) 开源项目
+
+该项目是使用React框架构建的，结构化为公共(public)和源(src)目录。在我的Visual Studio Code中打开了这个项目的文件夹结构。
+
+
+
+
+Before I Die Code 文件结构
+
+
+
+
+2023年8月17日的Before I Die Code的 [ROADMAP.MD](http://ROADMAP.MD)
+
+
+
Directrices de Contribución
+ Esta documentación contiene un conjunto de directrices para ayudarte durante el proceso de contribución a este proyecto. Este proyecto de código abierto
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.
+
+
+
+
+ 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..b76ca744 100644
--- a/translations/Spanish/README.md
+++ b/translations/Spanish/README.md
@@ -0,0 +1,73 @@
+
+
+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/)
+
+
+
+_Leer en [otros idiomas](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/translations/Translations.md)_
+
+
+
+
+
+
+
+
+
+
+# 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
+
+
| [हिन्दी](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/translations/Hindi/README.md) |
+| 
| [Français](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/translations/French/README.md) |
+| 
| [Español](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/translations/Spanish/README.md) |
+| 
| [中文(Simplified)](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/translations/Mandarin_Chinese/README.md), [中文(Traditional)](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/translations/Mandarin_Chinese/README.md) |
+| 
| [العربية](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/translations/Arabic/README.md) |
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
about how to continue to grow and build upon this project.
- Ensure responsive screen adaptation to make the Before I Die Code show up well on mobile and other screen sizes.
- Add React Native code to this project so that it can be used on mobile.
- Add a Maps page that pinpoints users to the location they identified in the JSON file.
-- ~~Add a clickable contribution page that displays all members who have contributed to the project.~~
+- Add a clickable contribution page that displays all members who have contributed to the project.
- Add the ability for contributors to list other social media platforms for contact information and have that displayed when you click on the Before I Die Image.
- Before clicking on a contributor's avatar to direct the viewer to the user's profile, add a small GitHub image that will be displayed over the avatar image to let the user know where they will be taken when clicked.
- Once enough user data has been received, add Python code and libraries to extract data to display the most common or unique activities individuals want to do before they die.
@@ -37,8 +68,29 @@ Integrate with wearable devices like smart watches to track progress on fitness/
- Analyze data to identify trends and correlations between demographics, interests etc. and goals.
- using the Python for analyzing the data of contributors' locations in your open-source project and creating a high-quality UI design map to display their locations, you can use the Python library called ["Leafmap"](https://leafmap.org/).
- Adding users ability to contribute by verifying identity using the OAuth token to authenticate to Google, LinkedIn, Github. OAuth is an open standard for authorization that allows third-party applications to access user data from various services such as Google, LinkedIn, and GitHub without requiring the user to share their login credentials. OAuth provides a secure and standardized way for users to grant access to their data to third-party applications.
+
+### Machine Learning and AI Ideas
+- Build a machine learning model that analyzes people's "before I die" goals and categorizes them into different themes (e.g. travel, career, relationships, thrills, etc.). You could visualize the results in interesting ways.
+- Use natural language processing to generate word clouds from the text of people's submissions, highlighting the most common dreams and aspirations.
+- Create a chatbot that engages visitors in a conversation about their dreams and bucket list goals. The bot could provide encouraging responses and thought-provoking questions to spur reflection.
+- Implement image recognition on the uploaded photos to auto-tag them with relevant keywords and categories. This makes the images more findable and shareable.
+- Build a recommendation engine that suggests related or commonly paired goals to users as they submit theirs. This could help spark new ideas.
+- Analyze the location data attached to submissions to identify geographical trends and hotspots for certain goals. Create data visualizations on a map.
+ 
+