Add recommendations section

_data/data.yml

@@ -261,5 +261,14 @@ skills:
       - name: Sketch & Photoshop
         level: 60%
 
+recommendations:
+    title: Recommendations
+    list:
+      - person: p4irin
+        contact: "phone:012 345 6789, email:[email protected]"
+        role: General Director at example.com     
+        recommendation: |
+          sharu725 is a super employee!
+
 footer: >
     Designed with <i class="fas fa-heart"></i> by <a href="http://themes.3rdwavemedia.com" target="_blank" rel="nofollow">Xiaoying Riley</a>

_includes/recommendations.html

@@ -0,0 +1,37 @@
+{% assign recommendations = site.data.data.recommendations %}
+{% if recommendations %}
+<section class="section recommendations-section">
+  <h2 class="section-title">
+    <span class="fa-stack fa-xs">
+      <i class="fas fa-circle fa-stack-2x"></i>
+      <i class="fas fa-medal fa-stack-1x fa-inverse"></i>
+    </span>
+    {{ recommendations.title }}
+  </h2>
+
+  {% for recommendation in recommendations.list %}
+  <div class="item">
+
+    <div class="meta">
+
+      <div class="upper-row">
+        <h3 class="recommendation">{{ recommendation.person }}</h3>
+        <div class="recommendation-contact">{{ recommendation.contact }}</div>
+      </div><!--//upper-row-->
+
+      <div class="recommendation-role">{{ recommendation.role }}</div>
+
+    </div><!--//meta-->
+
+    {% if recommendation.recommendation %}
+    <div class="details">
+      {{ recommendation.recommendation | markdownify }}
+    </div><!--//details-->
+    {% endif %}
+
+  </div><!--//item-->
+  {% endfor %}
+
+</section><!--//section-->
+{% endif %}
+

_sass/_base.scss

@@ -178,6 +178,7 @@ p {
   }
 
   .experiences-section,
+  .recommendations-section,
   .educations-section {
     .item {
       margin-bottom: 30px;
@@ -191,6 +192,7 @@ p {
     display: flex;
   }
   .job-title,
+  .recommendation,
   .degree,
   .cert-title{
     color: $text-color;
@@ -209,6 +211,8 @@ p {
     flex: 25%;
   }
   .company,
+  .recommendation-contact,
+  .recommendation-role,
   .university,
   .cert-org {
     margin-bottom: 10px;

index.html

@@ -21,3 +21,4 @@
 
 {% include skills.html %}
 
+{% include recommendations.html %}