Merge pull request #2 from matthh9797/add_travel_section

Add travel section

assets/scss/components/_travel.scss

@@ -0,0 +1,94 @@
+.travel {
+    &__extra_padding {
+        padding-top: 4rem !important;
+    }
+
+    &__item {
+        display: block;
+        position: relative;
+        @include avoid-break;
+        // &:not(:first-child) {
+        //     // padding-top: 1.5rem;
+        // }
+        margin-bottom: 10px;
+        margin-top: 10px;
+
+        &::before {
+            content: "";
+            height: 90%;
+            width: 1.5px;
+            position: absolute;
+            background: linear-gradient($color-page-background, rgba(255, 255, 255, 0));
+            //background: linear-gradient(blue, red);
+            margin-top: 25px;
+        }
+    }
+
+    &__header,
+    &__subheader {
+        display: flex;
+        width: 100%;
+        height: 2.4rem;
+    }
+
+    &__details {
+        position: relative;
+        transition: transform 0.2s cubic-bezier($cubic);
+        margin-bottom: 2rem;
+
+        &:hover {
+            transform: translateX(0.5rem);
+        }
+    }
+
+    &__place,
+    &__position {
+        text-align: left;
+        width: 70%;
+        float: left;
+    }
+
+    &__place {
+        color: $color-dark;
+    }
+
+    &__position {
+        text-transform: uppercase;
+        font-size: 1.3rem;
+        color: $color-dark;
+        margin-left: 1rem;
+    }
+
+    &__date {
+        float: right;
+        text-align: right;
+        width: 30%;
+        color: $color-secondary;
+    }
+
+    &__date {
+        font-weight: 400;
+    }
+
+    &__bullet {
+        list-style: square inside;
+        margin-left: 1rem;
+    }
+
+    &__badges {
+        display: block;
+        text-align: right;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    &__badge {
+        font-size: 0.9rem;
+        font-weight: 400;
+        display: inline-block;
+        background-color: $color-icon-background;
+        color: $color-icon-primary;
+        border-radius: 1rem;
+        padding: 0.1rem 0.6rem;
+    }
+}

assets/scss/main.scss

@@ -36,5 +36,6 @@ $pages: {{ .Site.Params.pages | default 1}} !default;
 @import "components/interests";
 @import "components/404";
 @import "components/certifications";
+@import "components/travel";
 
 @import "custom";

layouts/index.html

@@ -13,6 +13,7 @@
             <h1 class="mainHeading">{{ $data.BasicInfo.FirstName }} <span>{{ $data.BasicInfo.LastName }}</span></h1>
             {{ partial "_profile.html" $data }}
             {{ partial "_experience.html" $data }}
+            {{ partial "_travel.html" $data }}
             {{ partial "_education.html" $data }}
             {{ partial "_references.html" $data }}
         </div>

layouts/partials/_travel.html

@@ -0,0 +1,29 @@
+{{ if .Travel }}
+<div id="travel" class="section">
+    <div class="section__heading">
+        <h2 class="section__title">Travel</h2>
+    </div>
+    <div class="section__content">
+        <div class="travel">
+            {{ range .Travel }}
+            <div class="travel__item">
+                <div class="travel__header">
+                    <h3 class="travel__place">
+                        {{ .Place | safeHTML }}
+                    </h3>
+                    <h3 class="travel__date">{{ .Date | safeHTML }}</h3>
+                </div>
+                <div class="travel__details">
+                    <ul>
+                        {{ range .Details }}
+                        <li class="travel__bullet">{{ . | safeHTML }}</li>
+                        {{ end }}
+                    </ul>
+                </div>
+            </div>
+            {{ end }}
+        </div>
+    </div>
+</div>
+{{ end }}
+