Make home page sections dynamic and configurable (#14)

* Make home page sections dynamic and configurable

* Fix navbar issue when no section is configured + fix next-prev navigator

* Update exampleSite

* Fix next-prev navigator

* Make navbar brand URL context aware

32 files changed, 453 insertions, 361 deletions

diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index 63405cf..f28da75 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -20,5 +20,31 @@ enableEmoji: true
 
 # Custom parameters
 params:
-  # Github Repo URL. This is used to add "Improve This Page" button
+  # background image of the landing page
+  background: "images/background.jpg"
+
+  # GitHub repo URL of your site
   gitRepo: https://github.com/hossainemruz/toha-example-site
+
+  # specify whether you want to write blog post or not
+  enableBlogPost: true
+
+  # specify the list of custom menus that you want to show in the top navbar.
+  # they will be separated by a divider from the main menus.
+  customMenus:
+  - name: Notes
+    url: https://hossainnotes.netlify.app/docs/example/
+
+  # some information about you
+  author:
+    name: "Jane Doe"
+    image: "images/avatar.png"
+    # give your some contact information. they will be used in the footer
+    contactInfo:
+      email: "janedoe@example.com"
+      phone: "+0123456789"
+    # a summary of what you do
+    summary:
+    - I am a Developer
+    - I work with Go
+    - I love to work with some fun projects
diff --git a/exampleSite/data/achievements.yaml b/exampleSite/data/achievements.yaml
deleted file mode 100644
index fb4bc23..0000000
--- a/exampleSite/data/achievements.yaml
+++ /dev/null
@@ -1,14 +0,0 @@
-# Your achievements achievements
-achievements:
-  - title: Best Presenter
-    image: images/achievements/presenter.jpg
-    summary: Best presenter in 2020 XYZ conference.
-  - title: Champion
-    image: images/achievements/sport.jpg
-    summary: Champion in cycling inter-city cycling championship 2020.
-  - title: Graduation
-    image: images/achievements/graduation-cap.jpg
-    summary: Received Bachelor of Science (B.Sc.) in Computer Science and Engineer from XYZ University.
-  - title: Award Winner
-    image: images/achievements/woman-winner.jpg
-    summary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus architecto minus facere vero?
diff --git a/exampleSite/data/experiences.yaml b/exampleSite/data/experiences.yaml
deleted file mode 100644
index abefadc..0000000
--- a/exampleSite/data/experiences.yaml
+++ /dev/null
@@ -1,43 +0,0 @@
-# Your experiences
-experiences:
-  - designation: Software Engineer
-    company:
-      name: Example Co.
-      url: "https://www.example.com"
-      location: Dhaka Branch
-      # company overview
-      overview: Example Co. is a widely recognized company for cloud native development. It build tools for Kubernetes.
-    start: Nov 2017
-    # don't provide end date if you are currently working there. It will be replaced by "Present"
-    # end: Dec 2020
-    # give some points about what was your responsibilities at the company.
-    responsibilities:
-      - Design, develop and manage disaster recovery tool [Xtool](https://www.example.com) that backup Kubernetes volumes, databases and cluster's resource definition.
-      - My another responsibilities.
-      - My more responsibilities.
-
-  - designation: Software Engineer
-    company:
-      name: PreExample Co.
-      url: "https://www.preexample.com"
-      location: Nowhere
-      overview: PreExample Co. is gateway company to enter into Example co. So, nothing special here.
-    start: March 2016
-    end: May 2017
-    responsibilities:
-      - Write lots of example codes.
-      - Read lots of examples.
-      - See lots of example videos.
-
-  - designation: Intern
-    company:
-      name: Intern Counting Company (ICC).
-      url: "https://www.intern.com"
-      location: Intern Land
-      overview: Intern counting Company (ICC) is responsible for counting worldwide intern Engineer.
-    start: Jun 2015
-    end: Jan 2016
-    responsibilities:
-      - Count lost of interns.
-      - Count more interns.
-      - Count myself as intern.
diff --git a/exampleSite/data/projects.yaml b/exampleSite/data/projects.yaml
deleted file mode 100644
index 99dd016..0000000
--- a/exampleSite/data/projects.yaml
+++ /dev/null
@@ -1,54 +0,0 @@
-# filter buttons
-buttons:
-  - name: All
-    filter: "all"
-  - name: Professional
-    filter: "professional"
-  - name: Academic
-    filter: "academic"
-  - name: Hobby
-    filter: "hobby"
-
-# your projects
-projects:
-  - name: Kubernetes
-    logo: images/projects/kubernetes.png
-    role: Contributor
-    timeline: "March 2018 - Present"
-    repo: https://github.com/kubernetes/kubernetes # if your project is public repo on github, then provide this link. it will show star count.
-    #url: ""  # if your project is not a public repo but it has a website, or any external details url then provide it here. don't provide "repo" and "url" simultaneously.
-    summary: Production-Grade Container Scheduling and Management .
-    tags: ["professional", "kubernetes", "cloud"]
-
-  - name: Tensorflow
-    logo: images/projects/tensorflow.png
-    role: Developer
-    timeline: "Jun 2018 - Present"
-    repo: https://github.com/tensorflow/tensorflow
-    #url: ""
-    summary: An Open Source Machine Learning Framework for Everyone.
-    tags: ["professional", "machine-learning","academic"]
-
-  - name: A sample academic paper
-    role: Team Lead
-    timeline: "Jan 2017 - Nov 2017"
-    url: "https://www.example.com"
-    summary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente eius reprehenderit animi suscipit autem eligendi esse amet aliquid error eum. Accusantium distinctio soluta aliquid quas placeat modi suscipit eligendi nisi.
-    tags: ["academic","iot"]
-
-  - name: Nocode
-    logo: images/projects/no-code.png
-    role: Nothing
-    timeline: "Oct 2019 - Dec 2019"
-    repo: https://github.com/kelseyhightower/nocode
-    #url: ""
-    summary: The best way to write secure and reliable applications. Write nothing; deploy nowhere.
-    tags: ["hobby", "fun"]
-
-  - name: Toha
-    logo: images/projects/toha.png
-    role: Owner
-    timeline: "Jun 2019 - Present"
-    repo: https://github.com/hossainemruz/toha
-    summary: A Hugo theme for personal portfolio.
-    tags: ["hobby","hugo","theme","professional"]
diff --git a/exampleSite/data/about.yaml b/exampleSite/data/sections/about.yaml
index 5fac037..8ae9359 100644
--- a/exampleSite/data/about.yaml
+++ b/exampleSite/data/sections/about.yaml
@@ -1,3 +1,10 @@
+# section information
+section:
+  name: About
+  enable: true
+  weight: 1
+  showOnNavbar: true
+
 # your designation
 designation: Software Engineer
 # your company information
@@ -53,4 +60,4 @@ softSkills:
   color: pink
 - name: Hard Working
   percentage: 85
-  color: green
+  color: green
\ No newline at end of file
diff --git a/exampleSite/data/sections/achievements.yaml b/exampleSite/data/sections/achievements.yaml
new file mode 100644
index 0000000..5877753
--- /dev/null
+++ b/exampleSite/data/sections/achievements.yaml
@@ -0,0 +1,21 @@
+# section information
+section:
+  name: Achievements
+  enable: true
+  weight: 6
+  showOnNavbar: true
+
+# Your achievements achievements
+achievements:
+- title: Best Presenter
+  image: images/achievements/presenter.jpg
+  summary: Best presenter in the 2020 XYZ conference.
+- title: Champion
+  image: images/achievements/sport.jpg
+  summary: Champion in cycling inter-city cycling championship 2020.
+- title: Graduation
+  image: images/achievements/graduation-cap.jpg
+  summary: Received Bachelor of Science (B.Sc.) in Computer Science and Engineer from XYZ University.
+- title: Award Winner
+  image: images/achievements/woman-winner.jpg
+  summary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus architecto minus facere vero?
diff --git a/exampleSite/data/sections/experiences.yaml b/exampleSite/data/sections/experiences.yaml
new file mode 100644
index 0000000..3ed8349
--- /dev/null
+++ b/exampleSite/data/sections/experiences.yaml
@@ -0,0 +1,51 @@
+# section information
+section:
+  name: Experiences
+  enable: true
+  weight: 3
+  showOnNavbar: true
+
+
+# Your experiences
+experiences:
+- designation: Software Engineer
+  company:
+    name: Example Co.
+    url: "https://www.example.com"
+    location: Dhaka Branch
+    # company overview
+    overview: Example Co. is a widely recognized company for cloud-native development. It builds tools for Kubernetes.
+  start: Nov 2017
+  # don't provide end date if you are currently working there. It will be replaced by "Present"
+  # end: Dec 2020
+  # give some points about what was your responsibilities at the company.
+  responsibilities:
+  - Design, develop and manage disaster recovery tool [Xtool](https://www.example.com) that backup Kubernetes volumes, databases, and cluster's resource definition.
+  - My another responsibility.
+  - My more responsibilities.
+
+- designation: Software Engineer
+  company:
+    name: PreExample Co.
+    url: "https://www.preexample.com"
+    location: Nowhere
+    overview: PreExample Co. is a gateway company to enter into Example co. So, nothing special here.
+  start: March 2016
+  end: May 2017
+  responsibilities:
+  - Write lots of example codes.
+  - Read lots of examples.
+  - See lots of example videos.
+
+- designation: Intern
+  company:
+    name: Intern Counting Company (ICC).
+    url: "https://www.intern.com"
+    location: Intern Land
+    overview: Intern counting Company (ICC) is responsible for counting worldwide intern Engineers.
+  start: Jun 2015
+  end: Jan 2016
+  responsibilities:
+  - Count lost of interns.
+  - Count more interns.
+  - Count me as an intern.
diff --git a/exampleSite/data/sections/projects.yaml b/exampleSite/data/sections/projects.yaml
new file mode 100644
index 0000000..0d84565
--- /dev/null
+++ b/exampleSite/data/sections/projects.yaml
@@ -0,0 +1,61 @@
+# section information
+section:
+  name: Projects
+  enable: true
+  weight: 4
+  showOnNavbar: true
+
+# filter buttons
+buttons:
+- name: All
+  filter: "all"
+- name: Professional
+  filter: "professional"
+- name: Academic
+  filter: "academic"
+- name: Hobby
+  filter: "hobby"
+
+# your projects
+projects:
+- name: Kubernetes
+  logo: images/projects/kubernetes.png
+  role: Contributor
+  timeline: "March 2018 - Present"
+  repo: https://github.com/kubernetes/kubernetes # If your project is a public repo on GitHub, then provide this link. it will show star count.
+  #url: ""  # If your project is not a public repo but it has a website or any external details url then provide it here. don't provide "repo" and "url" simultaneously.
+  summary: Production-Grade Container Scheduling and Management.
+  tags: ["professional", "kubernetes", "cloud"]
+
+- name: Tensorflow
+  logo: images/projects/tensorflow.png
+  role: Developer
+  timeline: "Jun 2018 - Present"
+  repo: https://github.com/tensorflow/tensorflow
+  #url: ""
+  summary: An Open Source Machine Learning Framework for Everyone.
+  tags: ["professional", "machine-learning","academic"]
+
+- name: A sample academic paper
+  role: Team Lead
+  timeline: "Jan 2017 - Nov 2017"
+  url: "https://www.example.com"
+  summary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente eius reprehenderit animi suscipit autem eligendi esse amet aliquid error eum. Accusantium distinctio soluta aliquid quas placeat modi suscipit eligendi nisi.
+  tags: ["academic","iot"]
+
+- name: Nocode
+  logo: images/projects/no-code.png
+  role: Nothing
+  timeline: "Oct 2019 - Dec 2019"
+  repo: https://github.com/kelseyhightower/nocode
+  #url: ""
+  summary: The best way to write secure and reliable applications. Write nothing; deploy nowhere.
+  tags: ["hobby", "fun"]
+
+- name: Toha
+  logo: images/projects/toha.png
+  role: Owner
+  timeline: "Jun 2019 - Present"
+  repo: https://github.com/hossainemruz/toha
+  summary: A Hugo theme for personal portfolio.
+  tags: ["hobby","hugo","theme","professional"]
diff --git a/exampleSite/data/sections/recent-posts.yaml b/exampleSite/data/sections/recent-posts.yaml
new file mode 100644
index 0000000..9fb496a
--- /dev/null
+++ b/exampleSite/data/sections/recent-posts.yaml
@@ -0,0 +1,8 @@
+# section information
+section:
+  name: Recent Posts
+  enable: true
+  weight: 5
+  showOnNavbar: true
+
+# no other configuration is required
diff --git a/exampleSite/data/skills.yaml b/exampleSite/data/sections/skills.yaml
index 00c673b..05730d8 100644
--- a/exampleSite/data/skills.yaml
+++ b/exampleSite/data/sections/skills.yaml
@@ -1,5 +1,12 @@
+# section information
+section:
+  name: Skills
+  enable: true
+  weight: 2
+  showOnNavbar: true
+
 # Your Skills.
-# Give a summary of you each skill in summary section.
+# Give a summary of you each skill in the summary section.
 skills:
 - name: Kubernetes
   icon: "images/skills/kubernetes.png"
@@ -7,7 +14,7 @@ skills:
 
 - name: Go Development
   icon: "images/skills/go.png"
-  summary: "Using as main language for professional development. Capable of writing scalable, testable, and maintainable program."
+  summary: "Using as the main language for professional development. Capable of writing scalable, testable, and maintainable program."
 
 - name: Cloud Computing
   icon: "images/skills/cloud.png"
@@ -23,11 +30,11 @@ skills:
 
 - name: Linux
   icon: "images/skills/linux.png"
-  summary: "Using as main operating system. Capable of writing bash/shell scripts."
+  summary: "Using as the main operating system. Capable of writing bash/shell scripts."
 
 - name: Git
   icon: "images/skills/git.png"
-  summary: "Experienced with git based development. Mostly, use Github. Also have experience in working with GitLab."
+  summary: "Experienced with git-based development. Mostly, use Github. Also, have experience in working with GitLab."
 
 - name: C++
   icon: "images/skills/c++.png"
diff --git a/exampleSite/data/site.yaml b/exampleSite/data/site.yaml
deleted file mode 100644
index 019d8b6..0000000
--- a/exampleSite/data/site.yaml
+++ /dev/null
@@ -1,40 +0,0 @@
-# background image of the landing page
-background: "images/background.jpg"
-
-# some information about you
-author:
-  name: "Jane Doe"
-  image: "images/avatar.png"
-  # give your some contact information. they will be used in the footer
-  contactInfo:
-    email: "janedoe@example.com"
-    phone: "+0123456789"
-  # a summary of what you do
-  summary:
-  - I am a Developer
-  - I work with Go
-  - I love to work with some fun projects
-
-# Menus of the home page
-menus:
-- name: Home
-  url: "#home"
-  weight: 1
-- name: About
-  url: "#about"
-  weight: 2
-- name: Skills
-  url: "#skills"
-  weight: 3
-- name: Experiences
-  url: "#experiences"
-  weight: 4
-- name: Projects
-  url: "#projects"
-  weight: 5
-- name: Recent Posts
-  url: "#recent-posts"
-  weight: 6
-- name: Achievements
-  url: "#achievements"
-  weight: 7
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 7b00091..5f463ab 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -3,7 +3,7 @@
 {{ end }}
 
 {{ define "navbar" }}
-    {{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" true) }}
+    {{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" true "navBrandURL"  .Site.BaseURL ) }}
 {{ end }}
 
 {{ define "content" }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 30dc63d..42b71f7 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -7,7 +7,7 @@
 {{ end }}
 
 {{ define "navbar" }}
-    {{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" false) }}
+    {{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" false "navBrandURL"  "/posts") }}
 {{ end }}
 
 {{ define "content" }}
@@ -44,31 +44,7 @@
 
     <!---Next and Previous Navigator -->
   <hr />
-  <div class="row next-prev-navigator">
-    {{ $currentPage := . }}
-    {{ range .Site.RegularPages.ByDate }}
-      {{ if eq .RelPermalink  $currentPage.RelPermalink }}
-        {{ if .Next }}
-        <div class="col-md-6 previous-article">
-          <a href="{{.Next.RelPermalink}}" class="btn btn-outline-info">
-            <span><i class="fas fa-chevron-circle-left"></i> Prev</span>
-            <br />
-            <span>{{ .Next.Title }}</span>
-          </a>
-        </div>
-        {{ end }}
-        {{ if .Prev }}
-        <div class="{{ if .Next }}col-md-6{{ else }}col-md-12{{ end }} next-article">
-          <a href="{{ .Prev.RelPermalink }}" class="btn btn-outline-info">
-            <span>Next <i class="fas fa-chevron-circle-right"></i></span>
-            <br />
-            <span>{{ .Prev.Title }}</span>
-          </a>
-        </div>
-        {{ end }}
-      {{ end }}
-    {{ end }}
-  </div>
+    {{ partial "next-prev-navigator.html" . }}
   <hr />
   <!-- Add Disqus forum  -->
   {{ if .Site.DisqusShortname }}
diff --git a/layouts/index.html b/layouts/index.html
index a9dd4ea..507e1a8 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -19,30 +19,31 @@
         {{ template "_internal/google_analytics_async.html" . }}
     {{ end }}
   </head>
-  <body data-spy="scroll" data-target="#top-navbar" data-offset="50">
+  <body data-spy="scroll" data-target="#top-navbar" data-offset="100">
+
     <!--- NAVBAR ------------------------->
     {{- partial "navbar.html" . -}}
 
     <!--- ADD HOME SECTION ---------------->
     {{- partial "home.html" . -}}
 
-    <!--- ADD ABOUT SECTION --------------->
-    {{- partial "about.html" . -}}
-
-    <!--- ADD SKILLS SECTION -------------->
-    {{- partial "skills.html" . -}}
-
-    <!--- ADD EXPERIENCE SECTION ----------->
-    {{- partial "experiences.html" . -}}
-
-    <!--- ADD PROJECT SECTION -------------->
-    {{- partial "projects.html" . -}}
-
-    <!--- ADD RECENT-POSTS SECTION --------->
-    {{- partial "recent-posts.html" . -}}
-
-    <!--- ADD ACHIEVEMENT SECTION ---------->
-    {{- partial "achievements.html" . -}}
+    <!--- ADD OPTIONAL SECTIONS ----------->
+    {{ if .Site.Data.sections }}
+      {{ $background:= "bg-white"}}
+      {{ range sort .Site.Data.sections "section.weight" }}
+        {{ if .section.enable }}
+          <div class="container-fluid section-holder d-flex {{ $background }}">
+            {{- partial (printf "%s.html" (replace (lower .section.name) " " "-")) . -}}
+          </div>
+          <!--- alter background color for next section --->
+          {{ if eq $background "bg-white" }}
+            {{ $background = "bg-dimmed" }}
+          {{ else }}
+            {{ $background = "bg-white" }}
+          {{end}}
+        {{ end }}
+      {{ end }}
+    {{ end }}
 
     <!--- ADD FOOTER ----------------------->
     {{- partial "footer.html" . -}}
diff --git a/layouts/partials/about.html b/layouts/partials/about.html
index ab178dc..2af5476 100644
--- a/layouts/partials/about.html
+++ b/layouts/partials/about.html
@@ -1,49 +1,45 @@
-<div class="container-fluid about bg-white anchor p-md-5 d-flex" id="about">
-  <div class="container">
-    <div class="row pt-sm-2 pt-md-4 align-self-center">
-      {{ if .Site.Data.about }}
-        <!-- summery -->
-        <div class="col-md-6">
-          <h3 class="p-1">{{ .Site.Data.site.author.name }}</h3>
-          {{ if .Site.Data.about.designation }}
-          <h5 class="p-1">
-            {{ .Site.Data.about.designation }}
-            {{ if .Site.Data.about.company }}
-              at <a href="{{ .Site.Data.about.company.url }}">{{ .Site.Data.about.company.name }}</a>
+<div class="container anchor p-md-5" id="about">
+  <div class="row pt-sm-2 pt-md-4 align-self-center">
+    <!-- summery -->
+    <div class="col-md-6">
+      <h3 class="p-1">{{ site.Params.author.name }}</h3>
+      {{ if .designation }}
+      <h5 class="p-1">
+        {{ .designation }}
+        {{ if .company }}
+          at <a href="{{ .company.url }}">{{ .company.name }}</a>
+        {{ end }}
+      </h5>
+      {{ end }}
+      <p class="p-1 text-justify">
+        {{ .summary | markdownify }}
+      </p>
+      <div class="text-container ml-auto">
+        <ul class="social-link d-flex">
+          {{ range .socialLinks }}
+          <li>
+            {{ if eq .name "Email" }}
+              <a href="mailto:{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
+            {{ else }}
+              <a href="{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
             {{ end }}
-          </h5>
-          {{ end }}
-          <p class="p-1 text-justify">
-            {{ .Site.Data.about.summary | markdownify }}
-          </p>
-          <div class="text-container ml-auto">
-            <ul class="social-link d-flex">
-              {{ range .Site.Data.about.socialLinks }}
-              <li>
-                {{ if eq .name "Email" }}
-                  <a href="mailto:{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
-                {{ else }}
-                  <a href="{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
-                {{ end }}
-              </li>
-              {{ end }}
-            </ul>
-          </div>
-          {{ if .Site.Data.about.resume }}
-          <a href="{{ .Site.Data.about.resume }}" target="#"
-            ><button class="btn btn-dark">My Resume</button></a
-          >
+          </li>
           {{ end }}
-        </div>
-        <!-- soft skills circular-progressbar -->
-        <div class="col-md-6 pt-5 pl-md-4 pl-sm-3 pt-md-0">
-          <div class="row">
-            {{ range .Site.Data.about.softSkills }}
-              {{ partial "progress/soft-skills" . }}
-            {{ end }}
-          </div>
-        </div>
+        </ul>
+      </div>
+      {{ if .resume }}
+      <a href="{{ .resume }}" target="#"
+        ><button class="btn btn-dark">My Resume</button></a
+      >
       {{ end }}
     </div>
+    <!-- soft skills circular-progressbar -->
+    <div class="col-md-6 pt-5 pl-md-4 pl-sm-3 pt-md-0">
+      <div class="row">
+        {{ range .softSkills }}
+          {{ partial "progress/soft-skills" . }}
+        {{ end }}
+      </div>
+    </div>
   </div>
 </div>
diff --git a/layouts/partials/achievements.html b/layouts/partials/achievements.html
index 7cc6ebf..49b3ce9 100644
--- a/layouts/partials/achievements.html
+++ b/layouts/partials/achievements.html
@@ -1,16 +1,13 @@
-<div class="container-fluid achievements bg-dimmed anchor pb-5" id="achievements">
-  {{ if .Site.Data.achievements }}
-    <h1 class="text-center">Achievements</h1>
-
-    <div class="container">
-      <div class="row" id="gallery">
-      </div>
+<div class="container-fluid anchor pb-5" id="achievements">
+  <h1 class="text-center">{{ .section.name }}</h1>
+  <div class="container">
+    <div class="row" id="gallery">
     </div>
-    <!-- achievements-holder holds achievement-entry -->
-    <div class="d-none" id="achievements-holder">
-      {{ range .Site.Data.achievements.achievements }}
-        {{ partial "misc/achievement.html" . }}
-      {{ end }}
-    </div>
-  {{ end }}
+  </div>
+  <!-- achievements-holder holds achievement-entry -->
+  <div class="d-none" id="achievements-holder">
+    {{ range .achievements }}
+      {{ partial "misc/achievement.html" . }}
+    {{ end }}
+  </div>
 </div>
diff --git a/layouts/partials/experiences.html b/layouts/partials/experiences.html
index 91ad594..1c24938 100644
--- a/layouts/partials/experiences.html
+++ b/layouts/partials/experiences.html
@@ -1,25 +1,23 @@
-<div class="container-fluid experiences bg-white anchor" id="experiences">
-  {{ if .Site.Data.experiences }}
-    <h1 class="text-center">Experiences</h1>
+<div class="container-fluid anchor" id="experiences">
+  <h1 class="text-center">{{ .section.name }}</h1>
 
-    <div class="container timeline text-justify">
-      {{ $totalExperiences:= len .Site.Data.experiences.experiences }}
-      {{ range $index,$experience:= .Site.Data.experiences.experiences }}
-        {{ if eq (mod $index 2) 0 }}
-          <div class="row align-items-center  d-flex">
-            {{ partial "experiences/vertical-line.html" $index }}
-            {{ partial "experiences/experience-info.html" $experience }}
-          </div>
-        {{else}}
-          <div class="row align-items-center justify-content-end d-flex">
-            {{ partial "experiences/experience-info.html" $experience }}
-            {{ partial "experiences/vertical-line.html" $index }}
-          </div>
-        {{ end }}
-        {{ if lt $index (sub $totalExperiences 1) }}
-          {{ partial "experiences/horizontal-line.html" $index }}
-        {{ end }}
+  <div class="container timeline text-justify">
+    {{ $totalExperiences:= len .experiences }}
+    {{ range $index,$experience:= .experiences }}
+      {{ if eq (mod $index 2) 0 }}
+        <div class="row align-items-center  d-flex">
+          {{ partial "experiences/vertical-line.html" $index }}
+          {{ partial "experiences/experience-info.html" $experience }}
+        </div>
+      {{else}}
+        <div class="row align-items-center justify-content-end d-flex">
+          {{ partial "experiences/experience-info.html" $experience }}
+          {{ partial "experiences/vertical-line.html" $index }}
+        </div>
       {{ end }}
-    </div>
-  {{ end }}
+      {{ if lt $index (sub $totalExperiences 1) }}
+        {{ partial "experiences/horizontal-line.html" $index }}
+      {{ end }}
+    {{ end }}
+  </div>
 </div>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 326aad2..555e211 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -3,20 +3,23 @@
     <div class="row text-left">
       <div class="col-md-4 col-sm-12">
         <h5>Navigation</h5>
-        {{ if .Site.Data.site }}
-          <ul>
-            {{ range .Site.Data.site.menus }}
+        {{ if .Site.Data.sections }}
+        <ul>
+          {{- range sort .Site.Data.sections "section.weight" }}
+            {{ if .section.enable }}
             <li class="nav-item">
-              <a class="smooth-scroll" href="{{ .url }}">{{ .name }}</a>
+              <a class="smooth-scroll" href="#{{ replace (lower .section.name) " " "-" }}">{{ .section.name }}</a>
             </li>
             {{ end }}
-          </ul>
+          {{- end }}
+        </ul>
         {{ end }}
+
       </div>
       <div class="col-md-4 col-sm-12">
         <h5>Contact Me</h5>
         <ul>
-          {{ range $key,$value:=.Site.Data.site.author.contactInfo }}
+          {{ range $key,$value:=.Site.Params.author.contactInfo }}
           <li><span>{{ title $key }}: </span> <span>{{ $value }}</span></li>
           {{ end }}
         </ul>
diff --git a/layouts/partials/home.html b/layouts/partials/home.html
index a201309..d67eccd 100644
--- a/layouts/partials/home.html
+++ b/layouts/partials/home.html
@@ -1,20 +1,20 @@
 <div class="container-fluid home" id="home">
   <div
     class="background container-fluid"
-    style="background-image: url('{{ if .Site.Data.site.background }}{{ .Site.Data.site.background }}{{ else }}/assets/images/default-background.jpg{{ end }}');"
+    style="background-image: url('{{ if .Site.Params.background }}{{ .Site.Params.background }}{{ else }}/assets/images/default-background.jpg{{ end }}');"
   ></div>
   <div class="container content text-center">
-    <img src="{{ if .Site.Data.site.author.image }}{{ .Site.Data.site.author.image }}{{ else }}/assets/images/default-avatar.png{{ end }}"
+    <img src="{{ if .Site.Params.author.image }}{{ .Site.Params.author.image }}{{ else }}/assets/images/default-avatar.png{{ end }}"
       class="rounded-circle mx-auto d-block img-fluid"
     />
-    <h1 class="greeting">Hi, I am {{ if .Site.Data.site.author.name }}{{ .Site.Data.site.author.name }}{{ else }}Jane Doe{{ end }}
+    <h1 class="greeting">Hi, I am {{ if .Site.Params.author.name }}{{ .Site.Params.author.name }}{{ else }}Jane Doe{{ end }}
     </h1>
     <div class="typing-carousel">
       <span id="ityped" class="ityped"></span>
       <span class="ityped-cursor"></span>
     </div>
     <ul id="typing-carousel-data">
-      {{ range .Site.Data.site.author.summary }}
+      {{ range .Site.Params.author.summary }}
       <li>{{ . }}</li>
       {{ end }}
     </ul>
diff --git a/layouts/partials/navbar-2.html b/layouts/partials/navbar-2.html
index c0ff089..03fb869 100644
--- a/layouts/partials/navbar-2.html
+++ b/layouts/partials/navbar-2.html
@@ -1,6 +1,6 @@
 <nav class="navbar navbar-expand-lg top-navbar final-navbar shadow">
     <div class="container">
-      <a class="navbar-brand" href="{{ .baseURL }}">
+      <a class="navbar-brand" href="{{ .navBrandURL }}">
         <img src="/assets/images/logo.png">
         {{- .title -}}
       </a>
@@ -11,7 +11,6 @@
       <div class="collapse navbar-collapse" id="top-nav-items">
         <ul class="navbar-nav ml-auto">
         </ul>
-        </ul>
       </div>
     </div>
 </nav>
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index a299fcf..253c54d 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -16,15 +16,37 @@
 
     <div class="collapse navbar-collapse" id="top-nav-items">
       <ul class="navbar-nav ml-auto">
-        {{ range .Site.Data.site.menus }}
         <li class="nav-item">
-          <a class="nav-link smooth-scroll" href="{{ .url }}">{{ .name }}</a>
+          <a class="nav-link smooth-scroll" href="#home">Home</a>
         </li>
+        {{- if .Site.Data.sections }}
+          {{- range sort .Site.Data.sections "section.weight" }}
+            {{ if .section.showOnNavbar }}
+              <li class="nav-item">
+                <a class="nav-link smooth-scroll" href="#{{ replace (lower .section.name) " " "-" }}">{{ .section.name }}</a>
+              </li>
+            {{ end }}
+          {{- end }}
+        {{- end }}
+        {{ $hasCustomMenus:= false }}
+        {{ if and site.Params.customMenus }}
+          {{ if gt (len site.Params.customMenus) 0 }}
+            {{ $hasCustomMenus = true }}
+          {{ end }}
+        {{ end }}
+        {{ if (or site.Params.enableBlogPost $hasCustomMenus) }}
+          <div class="dropdown-divider" id="top-navbar-divider"></div>
+        {{ end }}
+        {{ if site.Params.enableBlogPost }}
+          <li class="nav-item">
+            <a class="nav-link" id="blog-link" href="/posts">Posts</a>
+          </li>
+        {{ end }}
+        {{ range site.Params.customMenus }}
+          <li class="nav-item">
+            <a class="nav-link" href="{{ .url }}" target="/">{{ .name }}</a>
+          </li>
         {{ end }}
-        <div class="dropdown-divider" id="top-navbar-divider"></div>
-        <li class="nav-item">
-          <a class="nav-link" id="blog-link" href="/posts">Blog</a>
-        </li>
       </ul>
     </div>
   </div>
diff --git a/layouts/partials/next-prev-navigator.html b/layouts/partials/next-prev-navigator.html
new file mode 100644
index 0000000..eca6632
--- /dev/null
+++ b/layouts/partials/next-prev-navigator.html
@@ -0,0 +1,35 @@
+<div class="row next-prev-navigator">
+{{ $currentPage := . }}
+{{ range (where site.RegularPages.ByDate "Type" "in" site.Params.mainSections )}}
+  {{ if eq .RelPermalink  $currentPage.RelPermalink }}
+    {{ if .Next }}
+      {{ if (in site.Params.mainSections .Next.Type) }}
+      <div class="col-md-6 previous-article">
+        <a href="{{.Next.RelPermalink}}" class="btn btn-outline-info">
+          <span><i class="fas fa-chevron-circle-left"></i> Prev</span>
+          <br />
+          <span>{{ .Next.Title }}</span>
+        </a>
+      </div>
+      {{ end }}
+    {{ end }}
+    {{ if .Prev }}
+      {{ if (in site.Params.mainSections .Prev.Type)  }}
+        {{ $columnWidth:="col-md-12" }}
+        {{ if .Next }}
+          {{ if (in site.Params.mainSections .Next.Type) }}
+              {{ $columnWidth = "col-md-6" }}
+          {{ end }}
+        {{ end}}
+        <div class="{{ $columnWidth }} next-article">
+          <a href="{{ .Prev.RelPermalink }}" class="btn btn-outline-info">
+            <span>Next <i class="fas fa-chevron-circle-right"></i></span>
+            <br />
+            <span>{{ .Prev.Title }}</span>
+          </a>
+        </div>
+      {{ end }}
+    {{ end }}
+  {{ end }}
+{{ end }}
+</div>
diff --git a/layouts/partials/projects.html b/layouts/partials/projects.html
index 3d2d371..3d2bcd4 100644
--- a/layouts/partials/projects.html
+++ b/layouts/partials/projects.html
@@ -1,21 +1,19 @@
-<div class="container-fluid projects bg-dimmed anchor pb-5" id="projects">
-  {{ if .Site.Data.projects }}
-    <h1 class="text-center">Projects</h1>
-    <div class="container ml-auto text-center">
-      <div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
-        {{ range .Site.Data.projects.buttons }}
-        <button type="button" class="btn btn-dark" data-filter="{{ .filter }}">
-          {{ .name }}
-        </button>
-        {{ end }}
-      </div>
+<div class="container-fluid anchor pb-5" 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">
+      {{ range .buttons }}
+      <button type="button" class="btn btn-dark" data-filter="{{ .filter }}">
+        {{ .name }}
+      </button>
+      {{ end }}
     </div>
-    <div class="container filtr-projects">
-      <div class="row" id="project-card-holder">
-        {{ range .Site.Data.projects.projects }}
-          {{ partial "cards/project" . }}
-        {{ end }}
-      </div>
+  </div>
+  <div class="container filtr-projects">
+    <div class="row" id="project-card-holder">
+      {{ range .projects }}
+        {{ partial "cards/project" . }}
+      {{ end }}
     </div>
-  {{ end }}
+  </div>
 </div>
diff --git a/layouts/partials/recent-posts.html b/layouts/partials/recent-posts.html
index 10508f4..a69cc05 100644
--- a/layouts/partials/recent-posts.html
+++ b/layouts/partials/recent-posts.html
@@ -1,8 +1,8 @@
-<div class="container-fluid recent-posts bg-white anchor pb-5" id="recent-posts">
-  <h1 class="text-center">Recent Posts</h1>
+<div class="container-fluid anchor pb-5" id="recent-posts">
+  <h1 class="text-center">{{ .section.name }}</h1>
   <div class="container">
     <div class="row" id="recent-post-cards">
-      {{ range first 3 (where .Site.RegularPages.ByDate.Reverse "Type" "in" site.Params.mainSections )}}
+      {{ range first 3 (where site.RegularPages.ByDate.Reverse "Type" "in" site.Params.mainSections )}}
         {{ partial "cards/recent-post.html" . }}
       {{ end }}
     </div>
diff --git a/layouts/partials/skills.html b/layouts/partials/skills.html
index 8088b4d..58b1f44 100644
--- a/layouts/partials/skills.html
+++ b/layouts/partials/skills.html
@@ -1,13 +1,11 @@
-<div class="container-fluid skills bg-dimmed anchor pb-5" id="skills">
-  {{ if .Site.Data.skills }}
-    <h1 class="text-center">Skills</h1>
+<div class="container-fluid anchor pb-5" id="skills">
+  <h1 class="text-center">{{ .section.name }}</h1>
 
-    <div class="container d-flex-block">
-      <div class="row" id="primary-skills">
-        {{ range .Site.Data.skills.skills }}
-          {{ partial "cards/skill.html" . }}
-        {{ end }}
-      </div>
+  <div class="container d-flex-block">
+    <div class="row" id="primary-skills">
+      {{ range .skills }}
+        {{ partial "cards/skill.html" . }}
+      {{ end }}
     </div>
-  {{ end }}
+  </div>
 </div>
diff --git a/static/assets/css/achievements.css b/static/assets/css/achievements.css
index a13a4da..aa75925 100644
--- a/static/assets/css/achievements.css
+++ b/static/assets/css/achievements.css
@@ -1,4 +1,4 @@
-.achievements .container {
+#achievements .container {
   padding-top: 0.5rem;
 }
 
@@ -123,3 +123,35 @@
 #gallery .achievement-details {
   height: 75vh !important;
 }
+
+/* ============= Device specific fixes ======= */
+
+/* Extra small devices (portrait phones, less than 576px) */
+
+/* No media query for `xs` since this is the default in Bootstrap */
+
+/* Extra large devices (large desktops, 1200px and up) */
+
+@media (max-width: 1400px) {
+}
+
+@media (max-width: 1200px) {
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+}
+
+/* Medium devices (tablets, 768px and up) */
+
+@media only screen and (max-width: 768px) {
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+  #gallery .achievement-entry:hover {
+    transform: scale(1.05);
+  }
+}
diff --git a/static/assets/css/experiences.css b/static/assets/css/experiences.css
index 2035c52..595171c 100644
--- a/static/assets/css/experiences.css
+++ b/static/assets/css/experiences.css
@@ -1,16 +1,16 @@
-.experiences {
+#experiences {
   padding-bottom: 1rem;
 }
 
-.experiences .timeline {
+#experiences .timeline {
   margin-top: 1.5rem !important;
 }
 
-.experiences ul {
+#experiences ul {
   padding-left: 1rem;
 }
 
-.experiences ul > li {
+#experiences ul > li {
   margin-left: 0;
   color: #3c4858;
 }
diff --git a/static/assets/css/projects.css b/static/assets/css/projects.css
index d3a61d0..1c6c1a2 100644
--- a/static/assets/css/projects.css
+++ b/static/assets/css/projects.css
@@ -1,10 +1,10 @@
-.projects .card .card-header {
+#projects .card .card-header {
   background-color: #f9fafc;
   padding: 0.7rem;
   padding-bottom: 0rem;
 }
 
-.projects .card .card-img-xs {
+#projects .card .card-img-xs {
   margin-right: 0.5rem;
 }
 
@@ -15,11 +15,11 @@
   float: right;
 }
 
-.projects .card .card-body {
+#projects .card .card-body {
   padding: 0.7rem;
 }
 
-.projects .card .card-header .sub-title {
+#projects .card .card-header .sub-title {
   color: #8392a5;
   margin-top: 0.4rem;
 }
@@ -55,7 +55,7 @@
 /* Small devices (landscape phones, 576px and up) */
 
 @media only screen and (max-width: 576px) {
-  .projects .btn {
+  #projects .btn {
     margin-top: 0.3125rem;
   }
 }
diff --git a/static/assets/css/recent-posts.css b/static/assets/css/recent-posts.css
index da1855f..d2f098a 100644
--- a/static/assets/css/recent-posts.css
+++ b/static/assets/css/recent-posts.css
@@ -1,19 +1,19 @@
-.recent-posts .container{
+#recent-posts .container{
   padding-top: 1rem;
 }
 
-.recent-posts .card .card-footer span {
+#recent-posts .card .card-footer span {
   font-size: 10pt;
   color: #6c757d !important;
   padding-top: 5px;
 }
 
-.recent-posts .card .card-footer {
+#recent-posts .card .card-footer {
   background: #fff;
   margin-top: auto;
 }
 
-.recent-posts .post-card-link{
+#recent-posts .post-card-link{
   text-decoration: none;
 }
 
diff --git a/static/assets/css/skills.css b/static/assets/css/skills.css
index cf4e8c3..a197c52 100644
--- a/static/assets/css/skills.css
+++ b/static/assets/css/skills.css
@@ -1,4 +1,4 @@
-.skills .card .card-head {
+#skills .card .card-head {
   background-color: #f9fafc;
   height: fit-content;
   padding: 0.7rem;
@@ -6,16 +6,16 @@
   border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.125);
 }
 
-.skills .card .card-img-xs {
+#skills .card .card-img-xs {
   margin-right: 0.5rem;
 }
 
-.skills .card {
+#skills .card {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
-.skills .card .card-body {
+#skills .card .card-body {
   padding-top: 0.2rem;
   padding-left: 0.7rem;
 }
diff --git a/static/assets/css/style.css b/static/assets/css/style.css
index 986bb2a..7e1a022 100644
--- a/static/assets/css/style.css
+++ b/static/assets/css/style.css
@@ -245,12 +245,16 @@ img.right{
 /* Small devices (landscape phones, 576px and up) */
 
 @media only screen and (max-width: 576px) {
-  .container-fluid.about,
-  .container-fluid.skills,
-  .container-fluid.projects,
-  .container-fluid.recent-posts,
-  .container-fluid.achievements {
+  .section-holder {
     padding-left: 5px;
     padding-right: 5px;
   }
+
+  #skills,
+  #projects,
+  #recent-posts,
+  #achievements{
+    padding-left: 0;
+    padding-right: 0;
+  }
 }
diff --git a/static/assets/js/home.js b/static/assets/js/home.js
index cca42df..cf800d2 100644
--- a/static/assets/js/home.js
+++ b/static/assets/js/home.js
@@ -145,15 +145,18 @@ var projectCards;
 
     function adjustRecentPostsHeight() {
       if (!isMobile) { // no need to adjust height for mobile devices
-        let el = document.getElementById("recent-post-cards").children;
-        let maxHeight = 0;
-        for (let i = 0; i < el.length; i++) {
-          if (el[i].children[1].clientHeight > maxHeight) {
-            maxHeight = el[i].children[1].clientHeight;
+        let recentPostCards = document.getElementById("recent-post-cards")
+        if (recentPostCards != null) {
+          let el = recentPostCards.children;
+          let maxHeight = 0;
+          for (let i = 0; i < el.length; i++) {
+            if (el[i].children[1].clientHeight > maxHeight) {
+              maxHeight = el[i].children[1].clientHeight;
+            }
+          }
+          for (let i = 0; i < el.length; i++) {
+            el[i].children[1].setAttribute("style", "min-height: " + maxHeight + "px;")
           }
-        }
-        for (let i = 0; i < el.length; i++) {
-          el[i].children[1].setAttribute("style", "min-height: " + maxHeight + "px;")
         }
       }
     }