Update the Technologies dropdown in the Projects page to match the Figma design

[abuna1985]

Overview

We need to update the Technology Languages / Technologies dropdown menu on the Projects page to match the newly created Figma design so that we can provide a better user experience for our end-user.

Details

With the addition of Languages into the now Languages / Technologies dropdown (formerly Technologies dropdown), this issue had to be modified to take into account the inclusion of languages in the dropdown. @IsaacDesigns from Design Team said to go ahead with implementing Version C of the desktop design and implementing the mobile design. (See #2672 (comment) for more info.)

Click here to see the current projects page `Languages / Technologies` dropdown on the live website for desktop and mobile(before changes)

On desktop

On mobile

Click here to see the proposed projects page `Languages / Technologies` dropdown Figma designs for desktop and mobile (after changes)

Desktop design Version C

Mobile design

Outdated screenshots (Do not use these)

Click here to see the current projects page `Technologies` dropdown (before changes)

Click here to see the proposed projects page `Technologies` dropdown Figma design (after changes)

Action Items

• Refactor the CSS for the desktop version of the Technologies Languages / Technologies dropdown to be 768px wide and the checkboxes create the appropriate columns to fit all technologies and languages. Also, include the scrollbar.
• Ensure the dropdown matches Version A Version C of the Projects page Figma design
• Refactor the CSS for the mobile version of the Languages / Technologies dropdown to include a scrollbar
• Ensure the dropdown matches the Projects page Figma design for mobile
• When complete, submit a pull request with the proposed changes
• Make sure the page looks fine for smaller viewport screens as well, such as tablet, mobile (responsiveness)

Resources/Instructions

• Version A Version C and mobile design within Adjust Projects Page Dropdown to account for length #2069 (comment)
  ~ Figma- Projects page dropdown (Version A Version C and mobile)

[github-actions]

Hi @abuna1985.

Good job adding the required labels to this issue.

Additional Resources:
Wiki: How to add status labels to issues (WIP. Link will be updated when the wiki is done)
Wiki: How to create issues (WIP. Link will be updated when the wiki is done)