+ Simple timeline for jobs

! Some styling is in order but overall its not bad

themes/resume/layouts/index.html

@@ -33,18 +33,36 @@
 
 <div class="container">
     {{ with .Site.GetPage "/projects" }}
-        <h1 class="section-header">{{.Title}}</h1>
+        <h1 class="section-header" id="projects">{{.Title}}</h1>
         <div class="section">
             {{ range .Pages }}
                 <div class="card">
                     <a href="{{.Params.Link}}"><h1 class="card-title title-link">{{.Title}}</h1></a>
                     <h6 class="card-subtitle mb-2 text-muted">{{.Params.Slogan}}</h6>
-                    <a href="{{.Params.Link}}"><img src="{{.Params.Img}}" class="card-img"></a>
+                    <a href="{{.Params.Link}}" class="card-img"><img src="{{.Params.Img}}" class="card-img"></a>
                     <div class="card-body"> {{.Content}} </div>
                 </div>
             {{ end }}
         </div>
     {{ end }}
+    {{ with .Site.GetPage "/experience"}}
+        <h1 class="section-header" id="experience">{{.Title}}</h1>
+        <div class="section">
+            <ul class="timeline">
+                {{ range .Pages }}
+                    <li>
+                        <a>
+                            <strong class="bigger">{{.Title}}</strong> 
+                            <em class="text-muted">@</em> 
+                            <a class="bigger">{{.Params.Company}}</a>
+                        </a>
+                        <p class="float-right">{{.Params.When}}</p>
+                        <p>{{.Content}}</p>
+                    </li>
+                {{ end }}
+            </ul>
+        </div>
+    {{ end }}
 </div>
 </body>
 </html>

themes/resume/static/css/style.css

@@ -12,6 +12,9 @@ html {
     scroll-behavior: smooth;
 }
 
+.container {
+  max-width: 75%;
+}
 .banner-container {
     position: relative;
     text-align: center;
@@ -116,6 +119,8 @@ html {
 
 .section-header {
   color: #EAA221;
+  font-weight: bold;
+  padding-top: 1em;
 }
 .section {
   display: flex;
@@ -139,7 +144,38 @@ a:hover { color: #EAA221; }
   border:none;
 }
 
-@media screen and (max-width: 600px) {
+ul.timeline {
-  .headline {
+    list-style-type: none;
-  }
+    position: relative;
+    padding-top: 1emy Wy W;
+}
+ul.timeline:before {
+    content: ' ';
+    background: #d4d9df;
+    display: inline-block;
+    position: absolute;
+    left: 29px;
+    width: 2px;
+    height: 100%;
+    z-index: 400;
+}
+ul.timeline > li {
+    margin: 20px 0;
+    padding-left: 20px;
+}
+ul.timeline > li:before {
+    content: ' ';
+    background: white;
+    display: inline-block;
+    position: absolute;
+    border-radius: 50%;
+    border: 3px solid #22c0e8;
+    left: 20px;
+    width: 20px;
+    height: 20px;
+    z-index: 400;
+}
+
+.bigger {
+  font-size: 1.5rem;
 }