Added References element

assets/scss/components/_references.scss

@@ -0,0 +1,58 @@
+.references {
+    &__item {
+        display: block;
+        @include avoid-break;
+        &:not(:first-child) {
+            padding-top: 1.5rem;
+        }
+    }
+
+    &__header,
+    &__subheader {
+        display: block;
+        width: 100%;
+        height: 2.4rem;
+    }
+
+    &__person {
+        position: relative;
+        transition: transform 0.2s cubic-bezier($cubic);
+
+        &:hover {
+            transform: translateX(0.5rem);
+        }
+    }
+
+    &__name,
+    &__relation {
+        text-align: left;
+        width: 70%;
+        float: left;
+        color: $color-dark;
+    }
+
+    &__contact {
+        position: relative;
+        font-size: 1rem;
+
+        & > i {
+            background-color: $color-icon-background;
+            color: $color-icon-primary;
+            font-size: 1rem;
+            text-align: center;
+            border-radius: 50%;
+            padding-top: 0.5rem;
+            width: 2rem;
+            height: 2rem;
+            margin-right: 0.5rem;
+            margin-bottom: 0.5rem;
+        }
+        & > span {
+            @include vt-center;
+        }
+    }
+
+    & li {
+        list-style: none;
+    }
+}

assets/scss/main.scss

@@ -28,6 +28,7 @@ $pages: {{ .Site.Params.pages | default 1}} !default;
 @import "components/side_section";
 @import "components/experience";
 @import "components/education";
+@import "components/references";
 @import "components/contact";
 @import "components/avatar";
 @import "components/skills";

exampleSite/data/content.yaml

@@ -64,6 +64,27 @@ Education:
     Date: Sep 2012 - Nov 2017
     Details: Specialised in data analysis
 
+References:
+  - Name: Person One
+    Relation: Co-worker at Super Cool Company
+    Contacts:
+    - Icon: fas fa-phone
+      Info: +44 123 456 790
+    - Icon: fas fa-envelope
+      Info: contact@person-one.com
+    - Icon: fas fa-map-marker-alt
+      Info: Melbourne, Australia
+  - Name: Person Two
+    Relation: Boss at Super Cool Company
+    Contacts:
+    - Icon: fas fa-phone
+      Info: +44 123 456 791
+    - Icon: fas fa-envelope
+      Info: contact@person-two.com
+    - Icon: fas fa-map-marker-alt
+      Info: Sydney, Australia
+
+
 Skills:
   - Family: Programming
     Items:

i18n/de.toml

@@ -7,6 +7,9 @@ other = "Erfahrung"
 [education]
 other = "Bildung"
 
+[references]
+other = "Referenzen"
+
 [skills]
 other = "Skills"
 

i18n/en.toml

@@ -7,6 +7,9 @@ other = "Experience"
 [education]
 other = "Education"
 
+[references]
+other = "References"
+
 [skills]
 other = "Skills"
 

i18n/pl.toml

@@ -7,6 +7,9 @@ other = "Doświadczenie"
 [education]
 other = "Wykształcenie"
 
+[references]
+other = "Referencje"
+
 [skills]
 other = "Umiejętności"
 

layouts/index.html

@@ -9,6 +9,7 @@
             {{ partial "_profile.html" . }}
             {{ partial "_experience.html" . }}
             {{ partial "_education.html" . }}
+            {{ partial "_references.html" . }}
 
         </div>
         <div class="content__right">

layouts/partials/_references.html

@@ -0,0 +1,32 @@
+{{ if .Site.Data.content.References }}
+<div id="references" class="section">
+    <div class="section__heading">
+        <h2 class="section__title">{{ i18n "references" }}</h2>
+    </div>
+    <div class="section__content">
+        <div class="references">
+            {{ range .Site.Data.content.References }}
+            <div class="references__item">
+                <div class="references__person">
+                    <div class="references__subheader">
+                        <h3 class="references__name">
+                            {{ .Name | safeHTML}}
+                        </h3>
+                    </div>
+                    <div class="references__subheader">
+                        <h4 class="references__relation">
+                            {{ .Relation | safeHTML}}
+                        </h4>
+                    </div>
+                    {{ range .Contacts }}
+                        <li class="references__contact">
+                            <i class="{{ .Icon }}"></i><span>{{ .Info | safeHTML }}</span>
+                        </li>
+                    {{ end }}
+                </div>
+            </div>
+            {{ end }}
+        </div>
+    </div>
+</div>
+{{ end }}