Multiple experience blocks

.gitignore

@@ -2,6 +2,7 @@
 /content
 /static/images
 .vscode
+.DS_Store
 
 ### Hugo ###
 # Generated files by hugo

exampleSite/config.yaml

@@ -159,69 +159,70 @@ params:
         - "Express"
 
   # Experience
-  experience:
-    enable: true
-    # title: "Custom Name"
-    items:
-      - job: "Senior Software Developer"
-        company: "Facebook"
-        companyUrl: "https://example.com"
-        date: "Jan 2022 - present"
-        featuredLink:
-          enable: true
-          name: "View the project"
-          url: "https://example.com"
-        content: "I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city."
-
-      - job: "Software Developer"
-        company: "Amazon"
-        companyUrl: "https://example.com"
-        date: "Sep 2020 - Dec 2021"
-        featuredLink:
-          enable: true
-          url: "https://example.com"
-        info:
-          enable: true
-          content: I worked as a software developer for more than one year in Amazon.
-        content: |
-          I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city.
-
-          - Lead backend developer for a product.
-          - Created a frontend design for a product.
-
-      - job: "Junior Software Developer"
-        company: "Apple"
-        companyUrl: "https://example.com"
-        date: "Jan 2020 - Aug 2020"
-        info:
-          enable: false
-        featuredLink:
-          enable: true
-          url: "https://example.com"
-        content: |
-          I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city.
-
-          - Lead backend developer for a product.
-          - Created a frontend design for a product.
-
-      - job: "UI/UX Designer"
-        company: "Netflix"
-        companyUrl: "https://example.com"
-        date: "June 2017 - Nov 2019"
-        featuredLink:
-          enable: true
-          url: "https://example.com"
-        content: |
-          I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city.
-
-          - Lead backend developer for a product.
-          - Created a frontend design for a product.
-
-      - job: "Product Designer"
-        company: "Google"
-        companyUrl: "https://example.com"
-        date: "Feb 2016 - Mar 2017"
-        content: "I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city."
+  experiences:
+    - key: "exp"
+      enable: true
+      # title: "Custom Name"
+      items:
+        - job: "Senior Software Developer"
+          company: "Facebook"
+          companyUrl: "https://example.com"
+          date: "Jan 2022 - present"
+          featuredLink:
+            enable: true
+            name: "View the project"
+            url: "https://example.com"
+          content: "I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city."
+
+        - job: "Software Developer"
+          company: "Amazon"
+          companyUrl: "https://example.com"
+          date: "Sep 2020 - Dec 2021"
+          featuredLink:
+            enable: true
+            url: "https://example.com"
+          info:
+            enable: true
+            content: I worked as a software developer for more than one year in Amazon.
+          content: |
+            I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city.
+
+            - Lead backend developer for a product.
+            - Created a frontend design for a product.
+
+        - job: "Junior Software Developer"
+          company: "Apple"
+          companyUrl: "https://example.com"
+          date: "Jan 2020 - Aug 2020"
+          info:
+            enable: false
+          featuredLink:
+            enable: true
+            url: "https://example.com"
+          content: |
+            I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city.
+
+            - Lead backend developer for a product.
+            - Created a frontend design for a product.
+
+        - job: "UI/UX Designer"
+          company: "Netflix"
+          companyUrl: "https://example.com"
+          date: "June 2017 - Nov 2019"
+          featuredLink:
+            enable: true
+            url: "https://example.com"
+          content: |
+            I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city.
+
+            - Lead backend developer for a product.
+            - Created a frontend design for a product.
+
+        - job: "Product Designer"
+          company: "Google"
+          companyUrl: "https://example.com"
+          date: "Feb 2016 - Mar 2017"
+          content: "I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city."
 
   # Education
   education:

layouts/index.html

@@ -14,7 +14,9 @@
 {{ define "main" }}
 {{- partial "sections/hero/index.html" . -}}
 {{- partial "sections/about.html" . -}}
-{{- partial "sections/experience.html" . -}}
+{{ range $index, $element := .Site.Params.experiences }}
+    {{- partial "sections/experience/experience.html" $element -}}
+{{ end }}
 {{- partial "sections/education.html" . -}}
 {{- partial "sections/projects.html" . -}}
 {{- partial "sections/achievements.html" . -}}

layouts/partials/sections/experience/experience-tab-entry.html

@@ -0,0 +1,58 @@
+<!--
+params:
+    - index
+    - key
+    - info
+        - enable
+        - content
+    - company
+    - companyUrl
+    - date
+    - job
+    - featuredLink
+        - enable
+        - name
+    - content
+-->
+
+<div
+    class="tab-pane fade {{ if (eq .index 0) }} show active {{ end }} bg-transparent"
+    role="tabpanel"
+    id='{{.key}}-pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
+    aria-labelledby='pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}-tab'
+>
+    <div>
+        <span class="h4">{{ .job }}</span>
+        <small>-</small>
+        <a href="{{.key}}-{{ .companyUrl }}" target="_blank">{{ .company }}</a>
+        <div class="pb-1">
+            <small>{{ .date }}</small>
+            {{ if .info | default false}}
+                {{ if .info.enable | default true }}
+                <span class="p-2">
+                    <span
+                        style="cursor: pointer;"
+                        data-bs-toggle="tooltip"
+                        data-bs-placement="top"
+                        data-bs-original-title={{ .info.content | default (print "Working as a " .job " at " .company ) }}
+                    >
+                        <i class="fas fa-info-circle fa-xs"></i>
+                    </span>
+                </span>
+                {{ end }}
+            {{ end }}
+        </div>
+
+        {{ if .featuredLink | default false}}
+            {{ if .featuredLink.enable | default false }}
+            <div class="py-2 featuredLink">
+                <a class="p-2 px-4 btn btn-outline-primary btn-sm" href={{ .featuredLink.url | default "#" }} target="_blank">
+                {{ .featuredLink.name | default "Featured Link" }}
+                </a>
+            </div>
+            {{ end }}
+        {{ end}}
+    </div>
+
+    {{ .content | markdownify}}
+</div>

layouts/partials/sections/experience/experience-tab.html

@@ -0,0 +1,21 @@
+<!--
+params:
+    - index
+    - key
+    - company
+    - date  
+-->
+
+<li class="nav-item px-1 bg-transparent" role="presentation">
+    <div
+            class="nav-link {{ if (eq .index 0) }}active{{ end }} bg-transparent"
+            aria-selected="true"
+            role="tab"
+            data-bs-toggle="pill"
+            id='{{.key}}-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}-tab'
+            data-bs-target='#{{.key}}-pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
+            aria-controls='{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
+    >
+        {{ .company }}
+    </div>
+</li>