update home page publications card

README.md

@@ -1,6 +1,7 @@
 # Dumbarton
+[![Netlify Status](https://api.netlify.com/api/v1/badges/24a6b9c4-6586-4e8d-8540-92942a0c47e8/deploy-status)](https://app.netlify.com/sites/admiring-bassi-e955ad/deploys)
 ![](https://img.shields.io/badge/Bootstrap-v4.5.3-blue)  
-A Jekyll theme designed for academics, powered by Bootstrap 4.
+A Jekyll theme designed for academics, powered by Bootstrap 4. [Demo](https://dumbarton.netlify.app/) page hosted on Netlify.
 
 - [Dumbarton](#dumbarton)
   - [Installation](#installation)

_config.yml

@@ -37,7 +37,8 @@ sass:
 
     query: "@*"
 
-
+home_sections:
+
 
 font_awesome_id: 32a2b2a489
 # =============================

_data/sections.yml

@@ -0,0 +1,14 @@
+- name: Publications
+  id: publications
+  description: My Recent Publications
+  first: true
+
+- name: Presentations
+  id: presentations
+  description: Description 2
+  first: false
+
+- name: BugBounties
+  id: bugbounties
+  description: Description 3
+  first: false

_layouts/home.html

@@ -17,30 +17,47 @@ <h5 class="card-title">{{ page.title }}</h5>
   </div>
 </div>
 
-<div class="card text-center mx-auto" style="max-width: 95%;">
+<div class="card mx-auto" style="max-width: 95%;">
   <div class="card-header">
-    <ul class="nav nav-tabs card-header-tabs">
-      <li class="nav-item">
-        <a class="nav-link active" href="#">Publications</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" href="#">Link</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
-      </li>
+    <ul class="nav nav-tabs card-header-tabs" id="test-list" role="tablist">
+      {% for section in site.data.sections %}
+        {% if section.first %}
+          <li class="nav-item">
+            <a class="nav-link active" href="#{{section.id}}" role="tab" aria-controls="{{section.id}}}" aria-selected="true">{{section.name}}</a>
+          </li>
+        {% else %}
+          <li class="nav-item">
+            <a class="nav-link"  href="#{{section.id}}" role="tab" aria-controls="{{section.id}}" aria-selected="false">{{section.name}}</a>
+          </li>
+        {% endif %}
+      {% endfor %}
     </ul>
   </div>
-  <div class="card-body">
-    <h5 class="card-title">A list of my publications</h5>
-    <p class="card-text">
-        <div class="publications">
-            {% bibliography -f papers %}
-        </div>
-    </p>
+  <div class="card-body">          
+      <div class="tab-content mt-3">
+        {% for section in site.data.sections %}
+          {% if section.first %}
+            {% if section.name == "Publications" %}
+              <div class="tab-pane active" id="{{section.id}}" role="tabpanel">
+                <h5 class="card-title text-center">{{section.description}}</h5>
+                <p class="card-text">{% bibliography -f papers %}</p>
+              </div>
+            {% else %}
+              <div class="tab-pane" id="{{section.id}}" role="tabpanel">
+                <p class="card-text">{{section.description}}</p>
+              </div>
+            {% endif %}
+          {% else %}
+            <div class="tab-pane" id="{{section.id}}" role="tabpanel" aria-labelledby="{{section.id}}-tab">  
+              <p class="card-text">{{section.description}}</p>
+            </div>
+          {% endif %}
+        {% endfor %}
+      </div>
   </div>
 </div>
 
+
 <div class="dumbarton-spacer">
 </div>
 <!--
@@ -52,3 +69,10 @@ <h5 class="mt-0">{{ page.title }}</h5>
   </div>
 </div>
 -->
+
+<script>
+    $('#test-list a').on('click', function (e) {
+    e.preventDefault()
+    $(this).tab('show')
+    })
+</script>

css/main.css

@@ -15,8 +15,7 @@ html {
     line-height: 60px; /* Vertically center the text there */
     background-color: #f5f5f5;
   }
-
-
+
   /* Custom page CSS
   -------------------------------------------------- */
   /* Not required for template or sticky footer method. */
@@ -80,3 +79,7 @@ a:link{
   padding-bottom: 50px;
   padding-top: 50px;
 }
+
+.publications {
+  text-align: left;
+}