Allow multiple position in one company experience (#9)

* Add partials for multiple positions on one company

* Remove unnecessary codes + Fix CSS

Co-authored-by: hossainemruz <emruz@appscode.com>

exampleSite/data/sections/experiences.yaml

@@ -9,44 +9,55 @@ section:
 
 # Your experiences
 experiences:
-- designation: Software Engineer
+- company:
-  company:
     name: Example Co.
     url: "https://www.example.com"
     location: Dhaka Branch
     # company overview
     overview: Example Co. is a widely recognized company for cloud-native development. It builds tools for Kubernetes.
-  start: Nov 2017
+  positions:
-  # don't provide end date if you are currently working there. It will be replaced by "Present"
+  - designation: Senior Software Engineer
-  # end: Dec 2020
+    start: Nov 2019
-  # give some points about what was your responsibilities at the company.
+    # don't provide end date if you are currently working there. It will be replaced by "Present"
-  responsibilities:
+    # end: Dec 2020
-  - Design, develop and manage disaster recovery tool [Xtool](https://www.example.com) that backup Kubernetes volumes, databases, and cluster's resource definition.
+    # give some points about what was your responsibilities at the company.
-  - My another responsibility.
+    responsibilities:
-  - My more responsibilities.
+    - Design and develop XYZ tool for ABC task
+    - Design, develop and manage disaster recovery tool [Xtool](https://www.example.com) that backup Kubernetes volumes, databases, and cluster's resource definition.
+    - Lead backend team.
 
-- designation: Software Engineer
+  - designation: Junior Software Engineer
-  company:
+    start: Nov 2017
+    end: Oct 2019
+    responsibilities:
+    - Implement and test xyz feature for abc tool.
+    - Support client for abc tool.
+    - Learn k,d,w technology for xyz.
+
+- company:
     name: PreExample Co.
     url: "https://www.preexample.com"
     location: Nowhere
     overview: PreExample Co. is a gateway company to enter into Example co. So, nothing special here.
-  start: March 2016
+  positions:
-  end: May 2017
+  - designation: Software Engineer
-  responsibilities:
+    start: March 2016
-  - Write lots of example codes.
+    end: May 2017
-  - Read lots of examples.
+    responsibilities:
-  - See lots of example videos.
+    - Write lots of example codes.
+    - Read lots of examples.
+    - See lots of example videos.
 
-- designation: Intern
+- company:
-  company:
     name: Intern Counting Company (ICC).
     url: "https://www.intern.com"
     location: Intern Land
     overview: Intern counting Company (ICC) is responsible for counting worldwide intern Engineers.
-  start: Jun 2015
+  positions:
-  end: Jan 2016
+  - designation: Intern
-  responsibilities:
+    start: Jun 2015
-  - Count lost of interns.
+    end: Jan 2016
-  - Count more interns.
+    responsibilities:
-  - Count me as an intern.
+    - Count lost of interns.
+    - Count more interns.
+    - Count me as an intern.

exampleSite/data/sections/recent-posts.yaml

@@ -7,4 +7,4 @@ section:
   # Can optionally hide the title in sections
   # hideTitle: true 
 
-# no other configuration is required
+# no additional configuration is required

layouts/partials/experiences/experience-info.html

@@ -1,14 +1,5 @@
-<div class="col-10 col-lg-8">
+{{ if gt (len .positions) 1 }}
-  <div class="experience-entry-heading">
+  {{ partial "experiences/multiple-positions" . }}
-    <h5><a href="{{ .company.url }}">{{ .company.name }}</a></h5>
+{{ else }}
-    <h6>{{ .designation }}</h6>
+  {{ partial "experiences/single-position.html" . }}
-    <p class="text-muted">{{ .start }} - {{ if .end }} {{ .end }} {{ else }}Present{{ end }}, {{ .company.location }}</p>
+{{ end }}
-  </div>
-  <p>{{ .company.overview | markdownify }}</p>
-  <h6 class="text-muted">Responsibilities:</h6>
-  <ul class="justify-content-around">
-      {{ range .responsibilities }}
-        <li>{{ . | markdownify }}</li>
-      {{ end }}
-  </ul>
-</div>

layouts/partials/experiences/multiple-positions.html

@@ -0,0 +1,29 @@
+<div class="col-10 col-lg-8">
+    <div class="experience-entry-heading">
+        <!-- For multiple positions, give emphasis on the company name-->
+        <h5>{{ if .company.url }}<a href={{.company.url}}>{{ .company.name }}</a>{{ else }}{{ .company.name }}{{ end }}</h5>
+
+        <!-- Total experience duration on a company is time between the starting date of the oldest position and ending date of most recent position -->
+        {{ $oldestPosition := index (last 1 .positions) 0}}
+        {{ $mostRecentPosition := index (first 1 .positions) 0}}
+        <p class="text-muted">
+            {{ $oldestPosition.start }} - {{ if $mostRecentPosition.end }}{{ $mostRecentPosition.end }}{{ else }}Present{{ end }},
+            {{ .company.location }}
+        </p>
+        <!-- Add company overview -->
+        <p>{{ .company.overview | markdownify }}</p>
+    </div>
+    <!-- Add the positions information -->
+    <div class="positions">
+    {{ range $index,$position:= .positions }}
+        <h6 class="designation">{{ $position.designation }}</h6>
+        <p class="text-muted">{{ $position.start }} - {{if $position.end }} {{ $position.end }} {{else}} Present {{end}}</p>
+        <!-- Add the responsibilities handled at this position -->
+        <ul class="justify-content-around">
+        {{ range $position.responsibilities }}
+            <li>{{ . | markdownify }}</li>
+        {{ end }}
+        </ul>
+    {{ end }}
+    </div>
+</div>

layouts/partials/experiences/single-position.html

@@ -0,0 +1,21 @@
+<div class="col-10 col-lg-8">
+    <div class="experience-entry-heading">
+        {{ $position:= index .positions 0 }}
+        <!-- For single position, give emphasis on the designation-->
+        <h5>{{ $position.designation }}</h5>
+        <h6>{{ if .company.url }}<a href={{.company.url}}>{{ .company.name }}</a>{{ else }}{{ .company.name }}{{ end }}</h6>
+        <!-- Add experience duration info -->
+        <p class="text-muted">{{ $position.start }} - {{ if $position.end }} {{ $position.end }} {{ else }}Present{{ end }},
+            {{ .company.location }}
+        </p>
+    </div>
+    <!-- Add company overview -->
+    <p>{{ .company.overview | markdownify }}</p>
+    <!-- Add the responsibilities handled at this position -->
+    <h6 class="text-muted">Responsibilities:</h6>
+    <ul class="justify-content-around">
+    {{ range $position.responsibilities }}
+        <li>{{ . | markdownify }}</li>
+    {{ end }}
+    </ul>
+</div>

static/assets/css/experiences.css

@@ -1,20 +1,24 @@
-#experiences {
+.experiences-section {
   padding-bottom: 1rem;
 }
 
-#experiences .timeline {
+.experiences-section .timeline {
   margin-top: 1.5rem !important;
 }
 
-#experiences ul {
+.experiences-section ul {
   padding-left: 1rem;
 }
 
-#experiences ul > li {
+.experiences-section ul > li {
   margin-left: 0;
   color: #3c4858;
 }
 
+.experiences-section .designation{
+ font-weight: 600;
+}
+
 .circle {
   padding: 13px 20px;
   border-radius: 50%;
@@ -152,4 +156,4 @@
     left: 64%;
     top: -50%;
   }
-}
+}