Fix mobile responsiveness based on tasks listed.

[lefty93]

• [x] The header of the Logo.gif and Github avatar arranged with flex-direction: column when the screen size is smaller than 640px.
• [x] Adjust the text "An Open Source Project".
• [x] The dummy images will not displayed in the background behind "An Open Source Project" when the screen size is smaller than 640px.
• [x] Reformat contributors bid_image and avatar image
• [x] The display text of the answer for "Before I Die" is arranged when the screen size is smaller than 640px.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
before-i-die-achievements	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 25, 2023 3:21am

[XanderRubio]

Hi @lefty93,

Thank you for your time in assisting in this issue #14. I'm traveling and will review upon settling in at my destination. I appreciate you looking into this issue, Chu. Have a great day! And looking forward to seeing your work😀

Xander

[XanderRubio]

Hi @lefty93,

I hope you're well, I'm all settled back in after traveling and confirming that I will be reviewing today for merging.

[XanderRubio]

Great job, Chu! Your updates have greatly improved the responsiveness of our project. Adjusting the screen window and viewing on mobile is now much smoother and cleaner. These small changes make the project more user-friendly and appealing.

I noticed that you added a state variable named "isMobile" and used the useEffect hook to add an event listener to the window object, which listens for the resize event. When triggered, the "handleSize" function updates the value of "isMobile" based on the width of the window. If the width is less than 768 pixels, "isMobile" is set to true, indicating that the application is being viewed on a mobile device. The useEffect hook also removes the event listener when the component unmounts.

You have done an excellent job using the value of "isMobile" to conditionally render the BrickLayout component. If "isMobile" is true, the BrickLayout component is rendered; otherwise, it is not.

Overall, your continual improvements to our UI interface are greatly appreciated. Keep up the great work, Chu! 👏🏻👏🏻Have a wonderful day!

And please feel free to add open issues of your own that you see fit for improving the Before I Die Code Project.

Merging now to close out issue #14 for mobile adaption and screen size change.