Apply linkedin approach to experiences section

layouts/partials/experiences/multiple-positions.html

@@ -1,30 +1,29 @@
-<div class="col-10 col-lg-8">
-    <div class="experience-entry-heading">
-        <!-- For multiple positions, give emphasis on the company name-->
+<div class="company">
+    <div class="company-logo">
+        <img src="{{ .company.logo_path }} ">
+    </div>
+    <div class="company-info">
         <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 }},
+        <span class="text-muted">
+            {{ $oldestPosition.start }} - {{ $mostRecentPosition.end }},
             {{ .company.location }}
-        </p>
-        <!-- Add company overview -->
+        </span>
         <p>{{ .company.overview | markdownify }}</p>
     </div>
-    <!-- Add the positions information -->
-    <div class="positions">
-    {{ range $index,$position:= .positions }}
+</div>
+
+<div class="company-timeline">
+{{ range $index,$position:= .positions }}
+    <div class="company-timeline-item position">
         <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">
+        <ul class="justify-content-around responsabilities">
         {{ range $position.responsibilities }}
             <li>{{ . | markdownify }}</li>
         {{ end }}
         </ul>
-        <br>
-    {{ end }}
     </div>
+{{ end }}
 </div>