Feature - adding responsiveness #287

[N-Dijkstra]

Issue Addressed

Closes #287

Proposed Changes and Benefits

I added responsiveness to mainly the header component, before it was difficult to read on smaller screens since both the text container and the animation container took up quite a lot of room while sharing a small screen. I have now changed the text container into a navigation bar at the top of the page with a hamburger menu whenever the screen width comes below 900 pixels. This gives the animation the full width of the screen making it stand out more again like on larger screens. I also made RandomContributor responsive for smaller screens.

Overall, I think these changes enhance the responsiveness and usability of the application. They make the header adaptable for various screen sizes, improve navigation through a mobile-friendly hamburger menu, and ensure consistency in the visual design with making sure the project title reappeared in the navigation bar. These improvements will enhance the user experience, especially on smaller devices.

Screenshots

)

Notes to Reviewers

No specific notes

Checklist

• I have thoroughly read and understand The Contribution Guidelines.
• The title of this PR follows the keyword: brief description of change format, using one of the following keywords:
  • Feature - adds new or amends existing user-facing behavior.
  • Chore - changes that have no user-facing value, refactors, dependency bumps, etc.
  • Fix - bug fixes.
  • Docs - fixing typos and adding new content.
• I have listed my proposed changes and their benefits.
• I have linked the corresponding issue in the Issues section.

[vercel]

@N-Dijkstra is attempting to deploy a commit to the Before I Die Code Team on Vercel.

A member of the Team first needs to authorize it.