Adjust Projects Page Dropdown to account for length

[Aveline-art]

Overview

The dropdown for the 'Technologies' in the projects page is getting quite long, and some awkward scrolling is required to view further into the list.

Action Items

Design

• Create a design for how the dropdown should behave in order to remove the awkward scrolling.

Development

• Read through this issue to understand what the designer's solutions are.
• Locate the code controlling the dropdown behavior.
• Implement the new design.

Resources/Instructions

None, but do be aware that the page with the dropdown is liable to change rapidly in the coming weeks, so be sure to review our architecture before proceeding.
Projects Page
Projects Page - Figma

[Aveline-art]

@hackforla/website-design Hello! This is my first design issue, so I am unsure if this is considered...good? Well done? So please review this, and reword this and then it can go straight to the backlog.

[janieche]

1. Progress: In progress (yellow rectangle). Created 2 options and want to explore a 3rd with mega menus.
2. Blockers: Need to identify any categorizations or groupings that can be made with the entire Technologies list to create an example of a mega menu
3. Availability: Weekends and weekday evenings
4. ETA: TBD pending Technology groupings
5. Pictures:

[Aveline-art]

Notes about all technologies we have thus far (unsorted):

AWS - cloud computing platforms and APIs
Adobe CC - graphic design, video editing, web development, photography,
Auth0 / OIDC / OAuth2 - open standard for access delegation
Azure App Service - cloud computing based platform for hosting websites
Code Climate - code review/testing tool
Cypress - testing for anything that runs in a browser
Django - free and open-source web framework
Docker - virtual container
ESLint - static code analysis tool for identifying problematic patterns
Express - back end web application framework
FastAPI - web framework for building APIs with Python
Figma - vector graphics editor and prototyping tool
Flask - web framework written in Python
Flutter - open-source UI software development kit (think, premade tools, such as with Android Studio)
GeoPandas - extends the datatypes used by pandas to allow spatial operations on geometric types (python library)
GitHub Pages - Build your own site from scratch or generate one for your project (hosting)
Jekyll - simple, blog-aware, static site generator
Jest - JavaScript testing framework
Leaflet - open source JavaScript library used to build web mapping applications
Mapbox - provider of custom online maps for websites and applications (basically an api for map data)
Markdown - a lightweight markup language for creating formatted text
Material-UI - a design language
Microsoft SQL Server - relational database management system
Miro - online collaborative whiteboard platform (think kanban board)
MongoDB - source-available cross-platform document-oriented database program
NoSQL - a type of database that stores and retrieves data without needing to define its structure first
Node.js - open-source, cross-platform, back-end JavaScript runtime environment
PostGIS - open source software program that adds support for geographic objects to the PostgreSQL object-relational database
PostgreSQL - relational database management system
Prefect - dataflow automation (data science thing)
Python - general-purpose programming language
React - JavaScript library for building user interfaces
React Testing Library - very light-weight solution for testing React components
Redis - in-memory data structure store, used as a distributed, in-memory key–value database, cache and message broker
Redux - open-source JavaScript library for managing application state
SASS - preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets
SCSS - SCSS syntax
TypeScript - programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript
jQuery - JavaScript library designed to simplify HTML DOM tree traversal and manipulation

[Aveline-art]

Notes about all technologies we have thus far (sorted-WIP):

Backend Frameworks

Django - free and open-source web framework (backend, python)
Express - back end web application framework (backend, js)
FastAPI - web framework for building APIs with Python (backend, python)
Flask - web framework written in Python (backend, python)

Code Review and Testing

Code Climate - code review/testing tool (review/test)
Cypress - testing for anything that runs in a browser (review/test)
ESLint - static code analysis tool for identifying problematic patterns (review/test)
Jest - JavaScript testing framework (review/testing)
React Testing Library - very light-weight solution for testing React components (review/testing)

Database Management and Database Tools

Microsoft SQL Server - relational database management system (database/database tool)
MongoDB - source-available cross-platform document-oriented database program (database/database tool)
NoSQL - a type of database that stores and retrieves data without needing to define its structure first (database/database tool)
PostGIS - open source software program that adds support for geographic objects to the PostgreSQL object-relational database (database/database tool)
PostgreSQL - relational database management system (database/database tool)
Redis - in-memory data structure store, used as a distributed, in-memory key–value database, cache and message broker (database/database tool)

Design and Design Systems

Adobe CC - graphic design, video editing, web development, photography (design)
Figma - vector graphics editor and prototyping tool (design)
Material-UI - a design language (design / design system)

Hosting/Cloud Computing

AWS - cloud computing platforms and APIs (hosting/cloud computing)
Azure App Service - cloud computing based platform for hosting websites (hosting/cloud)
GitHub Pages - Build your own site from scratch or generate one for your project (hosting)

Libraries

GeoPandas - extends the datatypes used by pandas to allow spatial operations on geometric types (python library)
jQuery - JavaScript library designed to simplify HTML DOM tree traversal and manipulation (library, js)
Leaflet - open source JavaScript library used to build web mapping applications (libraries)
React - JavaScript library for building user interfaces)
Redux - open-source JavaScript library for managing application state (js, library)

Other - Web

Jekyll - simple, blog-aware, static site generator (other)
Markdown - a lightweight markup language for creating formatted text (html, web)
Node.js - open-source, cross-platform, back-end JavaScript runtime environment (javascript)
SASS - preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (web)

Other - Misc.

Auth0 / OIDC / OAuth2 - open standard for access delegation (other)
Docker - virtual container (other)
Flutter - open-source UI software development kit (think, premade tools, such as with Android Studio) (other)
Mapbox - provider of custom online maps for websites and applications, basically an api for map data (other)
Miro - online collaborative whiteboard platform (think kanban board) (other)
Prefect - dataflow automation (data science thing)

Unlisted (unsure how to sort these)

Python - general-purpose programming language (python)
SCSS - SCSS syntax (web)
TypeScript - programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript (javascript)

[janieche]

Thanks @Aveline-art ! Can the Unlisted section be called Programming Languages? Since SCSS is a syntax of a language I'd consider that a part of the language.