Add optional skills breakdown modal

[fabiofenoglio]

I'd like to propose a feature consisting in a detailed breakdown modal for the skills sections.

Description

This PR adds support for a "breakdown" parameter in the "skills" section.

If present, a dialog will popup when clicking on the skill, presenting a detailed skill breakdown.
The breakdown is highly customizable and can be nested at will.

Each entry of the skill breakdown can have optionally any combination of:

• name and summary
• logo to display an image
• percentage and color to display a scaled-down circular progress, similar to the soft skill badges but much smaller
• progress to display the skill as a progress bar. If progressClass is not provided, the class/color is automatically derived.
• breakdown list allowing for arbitrary nesting
• expandBreakdown to optionally force the accordion of the children breakdown to be opened by default

As a side effect the following would be introduced:

• a standalone circular-progress component to allow reusing of the circular soft-skill badges in other places, supporting "sm" and "xs" versions
• the option to display a bunch of small logos at the bottom of a skill card, as a preview of the breakdown:
  

Test Evidence

Attaching a demo animation:

Here's a sample mixed and nested configuration:

# Your Skills.
# Give a summary of you each skill in the summary section.
skills:
- name: Cloud Computing
  logo: /images/sections/skills/cloud.png
  summary: "This skill has small icons and a breakdown popup opens when clicked. "
  icons: # this is new. display a bunch of small icons in the bottom of the card.
    - /images/sections/skills/aws.png
    - /images/sections/skills/azure.png
    - /images/sections/skills/gcp.png
  popup: # this is new
    summary: "This is the summary that comes in the popup. May be a little more detailed."
    showButton: true # optional parameter. if false, don't show the "search" icon to open the popup
    breakdown:
      - name: AWS
        logo: /images/sections/skills/aws.png
        summary: I'm a certified AWS Cloud Architect
        breakdown:
          - name: EC2
            summary: lot of experience on EC2 fleets
            percentage: 80 # display a round indicator (like the soft skills one)
            color: green
            breakdown:
              - name: On-demand instances
                progress: 80 # display a progress-bar, automatic color
              - name: Auto-scaling
                progress: 70
              - name: Spot instances
                progress: 35
          - name: Serverless computing
            summary: used some lambda function here and there
            percentage: 60
            color: yellow
          - name: Other secondary entries
            summary: this is unstyled and has no progress
      - name: Microsoft Azure
        logo: /images/sections/skills/azure.png
        summary: Have real hands-on experience
        breakdown:
          - name: App service
            summary: deployed services in App Service in python and as containers running Go applications
            progress: 80
          - name: Database
            summary: breakdown of this section will be expanded by default
            progress: 55
            expandBreakdown: true
            breakdown:
              - name: Postgres
                percentage: 80
                color: green
              - name: MySql
                percentage: 60
                color: yellow
          - name: Other
            summary: some other less-known services
            progress: 25
      - name: Google Cloud Platform
        logo: /images/sections/skills/gcp.png
        summary: Not really experienced, just using it for some APIs
        breakdown:
          - name: Cloud Directory APIs
            progress: 50
          - name: Translation APIs
            progress: 25
          - name: Google Actions
            progress: 35

Please let me know if you'd like the feature, if the parameters format is ok or if I forgot something like documentation.

[hossainemruz]

@fabiofenoglio Thank you for the PR. Look like a great idea. I will review soon.

[hossainemruz]

Hi @fabiofenoglio, I have started reviewing this PR. We need a better design for the breakdown popup. Probably, more simple but should be useful. I am thinking of removing the circular progress bar entirely. They don't provide any value. We can keep the horizontal progress bar but might make it optional. We need a simple and consistent view for multi-level items. Also, we must consider responsiveness of the popup.

I might take few more weeks to come up with any mockup.