Scroll to the targeted section of Affiliations when pills are clicked

[onlyphantom]

Current Behavior

On the Developer Profile page, when clicking on the pills at the top section (under the introductory text), it navigates / scrolls to the Affiliation section. This is implemented in Toprow/index.js:

<Pills tags={data.tags} maxWidth="800px"
    onClick={
    // () => scrollToSection(`aff-0`)
    () => scrollToSection("affiliations")
     }
/>

Desired Behavior

We should write a simple function, that maps each tag to the first Affiliation where said tag is mentioned. For example, supposed the individual has an affiliations like the following, then clicking on the "Data Science" pill should scroll to the Algoritma section since it's the first instance of affiliation with that in its tags list.

[
        {
            "title": "Supertype",
            ...,
            "tags": [
                "API Engineering",
                "Cloud Infrastructure",
                "Analytics Engineering",
                "Django",
                "REST Framework",
                "React"
            ]
        },
        {
            "title": "Algoritma",
            ...,
            "tags": [
                "Data Science",
                "Data Analytics",
                "Bash"
            ]
        },
        {
            "title": "Adaro Energy",
            ...,
            "tags": [
                "Data Science",
                "Machine Learning",
                "Data Engineering",
            ]
        }
]

In Affiliations/index.js, there is an id associated to each affiliations:

<div className="w-full" key={index} id={`aff-${index}`}>
...
</div>

So really the function needs to only output the right id corresponding to the pill (eg () => scrollToSection(aff-2) and default to scrolling to Affiliations if not found (if none of the affiliations contain the corresponding pill in their tags array).

[collisioncataclysm]

https://github.com/supertypeai/collective/labels/good%20first%20issue