Storybook Skills

Here some of the componants and filters particular to the resume are discussed. These componants are build on top of floaty and include some additional configuration. Further, these also have PDF equivalents - hoverever this must be implemented for each floaty item as the intended rendering differs quite a bit.

Minimal

The following shows what is possible with minimal configuration and presents the various sizes in a carousel.

Programming Skills

Learn more about my programming skills.

7 Years, 6 Months

APIs and Databases

Learn about my background in API development.

4 Years

Dashboards and UIs

Learn more about UI/UX skills.

3 Years, 9 Months

DevOps Engineering

About my devops experience.

3 Years, 8 Months

Filter Config: Minimal Configuration

The elements in the above carousel are modifications of the following configuration.

  - identifier: skills-minimal
    container:
      columns: 2
      include_titles: true
      include_descriptions: true
      classes_rows:
        - py-3
    content:
      - title: Programming Skills
        description: Learn more about my programming skills.
        key: impl
        since: 2017-08-01
        image:
          iconify:
            set: misc
            name: binary

      - title: APIs and Databases
        description: Learn about my background in API development.
        key: api-and-db
        since: 2021-02-01
        image:
          iconify:
            set: misc
            name: api

      - title: Dashboards and UIs
        description: Learn more about UI/UX skills.
        key: uiux
        since: 2021-05-01
        image:
          iconify:
            set: misc
            name: dashboard

      - title: DevOps Engineering
        description: About my devops experience.
        key: devops
        since: 2021-06-01
        image:
          iconify:
            set: misc
            name: devops

Rows and Custom Progress Bar Classes

Skills can be put into rows just like the base floaty. Each row can be customized to have a different color.

Docker

3 Years, 10 Months

Pipelines

3 Years, 7 Months

Terraform

2 Years, 10 Months

Kuberenetes

2 Years, 10 Months

Ansible

3 Years, 4 Months

Cloud

3 Years, 8 Months

Pulumi

1 Years, 1 Months

Filter Config: Extended Styles and Rows.

The Following Shows How Individual Configuration can be Specified.

  - identifier: skills-listed
    container:
      size: 6
      classes_progress_bar: ["progress-bar-animated", "progress-bar-striped"]
      columns: -1
      include_titles: true
      classes_rows:
        - py-3
    content:
      - title: Docker
        key: docker
        since: 2021-04-01
        image:
          iconify:
            set: devicon
            name: docker
        classes_progress_bar:
          - bg-red
      - title: Pipelines
        key: pipelines
        since: 2021-07-01
        image:
          iconify:
            set: logos
            name: github-actions
        classes_progress_bar:
          - bg-indigo
      - title: Terraform
        key: terraform
        since: 2022-04-01
        image:
          iconify:
            set: devicon
            name: terraform
        classes_progress_bar:
          - bg-blue
      - title: Kuberenetes
        key: k8s
        since: 2022-04-01
        image:
          iconify:
            set: devicon
            name: kubernetes
        classes_progress_bar:
          - bg-teal
      - title: Ansible
        key: ansible
        since: 2021-10-01
        image:
          iconify:
            set: devicon
            name: ansible
        classes_progress_bar:
          - bg-pink
      - title: Cloud
        key: cloud
        since: 2021-06-01
        image:
          iconify:
            set: hugeicons
            name: cloud
        classes_progress_bar:
          - bg-orange

      - title: Pulumi
        key: pulumi
        since: 2024-01-01
        image:
          iconify:
            set: devicon
            name: pulumi
        classes_progress_bar:
          - bg-yellow