diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
index 0b1196fd..29a4cb93 100644
--- a/CONTRIBUTORS.md
+++ b/CONTRIBUTORS.md
@@ -260,5 +260,19 @@
+
+
+
+
+
+
+
+ ENIACCC
+
+ |
+
diff --git a/public/img/avatar/Zhang_Zhao.jpeg b/public/img/avatar/Zhang_Zhao.jpeg
new file mode 100644
index 00000000..726841a9
Binary files /dev/null and b/public/img/avatar/Zhang_Zhao.jpeg differ
diff --git a/public/img/bid_image/Zhang_Zhao.jpeg b/public/img/bid_image/Zhang_Zhao.jpeg
new file mode 100644
index 00000000..4ee466f2
Binary files /dev/null and b/public/img/bid_image/Zhang_Zhao.jpeg differ
diff --git a/src/Jsons/Contributors.json b/src/Jsons/Contributors.json
index e9b4c8bc..cde78494 100644
--- a/src/Jsons/Contributors.json
+++ b/src/Jsons/Contributors.json
@@ -223,5 +223,14 @@
"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"
}
]
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框架构建,你需要在本地启动开发服务后才能查看该项目。
+
+
+---
+
+## Step 1. Fork 仓库
+在GitHub访问 [仓库地址](https://github.com/BeforeIDieCode/BeforeIDieAchievements)并且点击Fork按钮. 这会在你账号上创建一个仓库的副本
+
+
+https://github.com/BeforeIDieCode/BeforeIDieAchievements/assets/120526253/a8425d90-5f3e-4ee6-8499-2cf50643573c
+
+
+## Step 2. 克隆,打开,安装,然后开始开发
+
+打开终端然后在其中运行以下的git命令:
+
+`git clone url-you-just-copied`
+将“url-you-just-copied”替换为指向该存储库(你fork的这个项目)的URL。请参考前面的步骤获取URL。
+
+
+然后跳转到项目的目录并且运行
以下的命令:
+
+`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 1f228147..0376096d 100644
--- a/translations/Mandarin_Chinese/README.md
+++ b/translations/Mandarin_Chinese/README.md
@@ -1,10 +1,80 @@
-_Read this in [other languages](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/translations/Translations.md)_
+
+
+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 文件结构
+
+
+
+### 我大部分的工作和主要贡献:
+
+- [public/img/avatar](https://github.com/BeforeIDieCode/BeforeIDieAchievements/tree/main/public/img/avatar) — 创建了一个存储贡献者GitHub照片的图片文件
+
+- [public/img/bid_image](https://github.com/BeforeIDieCode/BeforeIDieAchievements/tree/main/public/img/bid_image) — 创建了一个存储贡献者bid_image(Before I Die图片)的图片文件。该图片代表了贡献者在死之前想要完成的事情。
+
+- [public/img/dummy-image](https://github.com/BeforeIDieCode/BeforeIDieAchievements/tree/main/public/img/dummy_image) — 创建了一个图片文件,用于在网站顶部显示九张主要图片,供所有用户观看。
+
+- [src/Components](https://github.com/BeforeIDieCode/BeforeIDieAchievements/tree/main/src/Components) — 我为每个列出的组件定制了CSS和JSX:BrickLayout、ContainerCard、Elements、Header、MasoaryLayout和Nav。我使用JavaScript库React构建用户界面。它让我将UI拆分为小而可重用的组件。React利用虚拟DOM和高效的更新算法使更新更快更高效。我喜欢React遵循声明式编程方法。作为开发者,这让我可以专注于UI的外观,而不是实现该外观的逐步指令。
+
+- [src/Jsons/Contributors.json](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/src/Jsons/Contributors.json) — 我需要为贡献者创建一种简便的方式,将他们的信息添加到预设的JSON模板中。这个JSON数据表示一个对象数组,每个对象包含一个人的标识符、图片URL、姓名、位置、GitHub个人资料和描述他们在死之前想要完成的事情的文本。这些数据提供了显示每个人的个人资料、图片和目标在 Before I Die Code 网页上所需的信息。
+
+- 在React项目的scr目录中的其余文件只有我进行了一些很小的改动。
+
+- [CODE_OF_CONDUCT.md](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/CODE_OF_CONDUCT.md) — 我需要创建一个所有成功的开源项目都有的代码规范的第一个版本。在这方面,我的代码规范基于Mozilla的 行为准则执行阶梯。
+
+- [CONTRIBUTION-GUIDELINES.md](http://CONTRIBUTION-GUIDELINES.md) — 我需要创建一份说明,向新贡献者解释如何执行正确的步骤和工作流,将他们的信息添加到这个开源项目中。为此,我不得不学习快速解决方案,以便在我的Markdown文件中包含视频,以帮助我解释步骤,并确保贡献者在第一次拉取请求后感到有动力继续贡献。
+
+- [CONTRIBUTORS.md](http://CONTRIBUTORS.md) — 所有成功的开源项目都会展示并向所有为项目提供帮助的个人表示感谢,这也是这个文件的主要目的。它显示了贡献者的图片和GitHub个人资料链接。
+
+- [README.md](http://README.md) — 我需要确保我的README文件组织良好,以便于清楚说明了这个项目的目的,为谁提供价值,并以有组织的方式介绍新贡献者以及如何贡献到这个项目。如前所述,我的Markdown文件使用动画来辅助我创造性地记录这个项目。
+
+- [ROADMAP.md](http://ROADMAP.md) — 最后,我添加了一个项目的潜在方向路线图。这是我脑海中的想法的第一个版本,我期待开源社区能够进一步扩展、完善它,并创建开放的问题和新功能,继续推动这个项目的发展。
+
+### Where does Before I Die Code go from here?
+
+这就过渡到了我在 [ROADMAP.md](http://ROADMAP.md)中描述的关于这个项目的想法,以及这个项目如何能够随着社区的发展而持续的成长。个人可以运用他们已有的技能和新学的技能来持续的推动这个项目的发展。技术是不断变化的,但人们在四千想要完成更加有意义的生活的愿景是始终存在的。我的第一个目标是让100人参与到项目中,分享他们的Before I Die贡献。通过阅读roadmap, 你会找到许多想法,了解如何使用新的技术栈改进项目,包括使用人工智能或其他API接口,根据屏幕大小调整项目的响应性,改进用户界面,使用Python分析人们在死之前想要做的事情, 并不断将这个项目打造成新开发者可以贡献并学习开源项目工作流程的主要开源项目。
+
+
+

+
+2023年8月17日的Before I Die Code的 [ROADMAP.MD](http://ROADMAP.MD)
+
+
+
+_你的贡献提供了多元化的观点,使这个项目真正充分和宏伟。我非常希望你能分享你最疯狂的梦想!_
+
+### 帮助建立 Before I Die 开源社区
+
+除了项目本身,参与Before I Die Code 还能让你与充满激情的开源社区连接在一起。 我们一起学习,共同合作编写代码,做出有意义的开源贡献——----无论是软件还是我们的生活。
+
+请分享你的想法和反馈!查看这个项目,给GitHub仓库点赞⭐️,并立即进行你的第一次拉取请求。感谢你抽出时间阅读我的文章。
+
+### 我创建了这个项目目的是让我们能够实现自己的目标和梦想。让我们开始吧!
+
+1. [BeforeIDieAchievements 🌟](https://github.com/BeforeIDieCode/BeforeIDieAchievements)
+
+2. [README.md](http://README.md) [📚](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/README.md)
+
+3. [CONTRIBUTION-GUIDELINES.md](http://CONTRIBUTION-GUIDELINES.md) [🤝](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/CONTRIBUTION-GUIDELINES.md)
+
+4. [ROADMAP.md](http://ROADMAP.md) [🗺️](https://github.com/BeforeIDieCode/BeforeIDieAchievements/blob/main/ROADMAP.md)
+
+#### 通过以下方式与我联系!
+
+- [MEDIUM 📝](https://xanderclemens.medium.com/)
+
+- [LINKEDIN 💼](https://www.linkedin.com/in/alexanderclemens/)
+
+- [GITHUB 🐙](https://github.com/XanderRubio)
+
+- [YOUTUBE 🎥](https://www.youtube.com/channel/UCocfFCNHRhCT27RnHLPRcSw)
+
+- [WEBSITE 🌐](https://www.xanderclemens.com/)
\ No newline at end of file