Configure section title and menu urls in section yaml files

layouts/index.html

@@ -33,7 +33,11 @@
       {{ range sort .Site.Data.sections "section.weight" }}
         {{ if .section.enable }}
           <div class="container-fluid section-holder d-flex {{ $background }}">
+            {{ if .section.template }}
+              {{- partial .section.template . -}}
+            {{ else }}
               {{- partial (printf "%s.html" (replace (lower .section.name) " " "-")) . -}}
+            {{ end }}
           </div>
           <!--- alter background color for next section --->
           {{ if eq $background "bg-white" }}

layouts/partials/about.html

@@ -1,4 +1,5 @@
-<div class="container anchor p-md-5" id="about">
+<div class="container anchor p-md-5" id="{{ replace (lower .section.name) " " "-" }}">
+  <div id="about">
     <div class="row pt-sm-2 pt-md-4 align-self-center">
       <!-- summery -->
       <div class="col-md-6">
@@ -43,3 +44,4 @@
       </div>
     </div>
   </div>
+</div>

layouts/partials/achievements.html

@@ -1,4 +1,5 @@
-<div class="container-fluid anchor pb-5" id="achievements">
+<div class="container-fluid anchor pb-5" id="{{ replace (lower .section.name) " " "-" }}">
+  <div id="achievements">
     <h1 class="text-center">{{ .section.name }}</h1>
     <div class="container">
       <div class="row" id="gallery">
@@ -11,3 +12,4 @@
       {{ end }}
     </div>
   </div>
+</div>

layouts/partials/experiences.html

@@ -1,4 +1,5 @@
-<div class="container-fluid anchor" id="experiences">
+<div class="container-fluid anchor pb-5" id="{{ replace (lower .section.name) " " "-" }}">
+  <div id="experiences">
     <h1 class="text-center">{{ .section.name }}</h1>
 
     <div class="container timeline text-justify">
@@ -21,3 +22,4 @@
      {{ end }}
     </div>
   </div>
+</div>

layouts/partials/projects.html

@@ -1,4 +1,5 @@
-<div class="container-fluid anchor pb-5" id="projects">
+<div class="container-fluid anchor pb-5" id="{{ replace (lower .section.name) " " "-" }}">
+  <div id="projects">
     <h1 class="text-center">{{ .section.name }}</h1>
     <div class="container ml-auto text-center">
       <div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
@@ -17,3 +18,4 @@
       </div>
     </div>
   </div>
+</div>

layouts/partials/recent-posts.html

@@ -1,4 +1,5 @@
-<div class="container-fluid anchor pb-5" id="recent-posts">
+<div class="container-fluid anchor pb-5" id="{{ replace (lower .section.name) " " "-" }}">
+  <div id="recent-posts">
     <h1 class="text-center">{{ .section.name }}</h1>
     <div class="container">
       <div class="row" id="recent-post-cards">
@@ -8,3 +9,4 @@
       </div>
     </div>
   </div>
+</div>

layouts/partials/skills.html

@@ -1,6 +1,6 @@
-<div class="container-fluid anchor pb-5" id="skills">
+<div class="container-fluid anchor pb-5" id="{{ replace (lower .section.name) " " "-" }}">
+  <div id="skills">
     <h1 class="text-center">{{ .section.name }}</h1>
-
     <div class="container d-flex-block">
       <div class="row" id="primary-skills">
         {{ range .skills }}
@@ -9,3 +9,4 @@
       </div>
     </div>
   </div>
+</div>