diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index 8132b96..2cd6e1d 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -41,6 +41,7 @@ params:
   # some information about you
   author:
     name: "Jane Doe"
+    nickname: "Jane"
     image: "images/avatar.png"
     # give your some contact information. they will be used in the footer
     contactInfo:
diff --git a/exampleSite/data/sections/about.yaml b/exampleSite/data/sections/about.yaml
index 8ae9359..048bff1 100644
--- a/exampleSite/data/sections/about.yaml
+++ b/exampleSite/data/sections/about.yaml
@@ -47,7 +47,7 @@ socialLinks:
 
 # your soft skills
 # give the percentage between 50 to 100 with 5 intervals.
-# currently supported color: blue, yellow, pink, green
+# currently supported colors: blue, yellow, pink, green, sky, orange
 softSkills:
 - name: Leadership
   percentage: 85
@@ -60,4 +60,17 @@ softSkills:
   color: pink
 - name: Hard Working
   percentage: 85
-  color: green
\ No newline at end of file
+  color: green
+- name: Fast Learner
+  percentage: 85
+  color: sky
+- name: Problem Solving
+  percentage: 85
+  color: orange
+# you can also provide color code instead of pre-defined color name
+# - name: Example 1
+#   percentage: 75
+#   color: "#00adb5"
+# - name: Example 2
+#   percentage: 65
+#   color: "#8b8383"
diff --git a/exampleSite/data/sections/achievements.yaml b/exampleSite/data/sections/achievements.yaml
index 5877753..eee213b 100644
--- a/exampleSite/data/sections/achievements.yaml
+++ b/exampleSite/data/sections/achievements.yaml
@@ -4,6 +4,8 @@ section:
   enable: true
   weight: 6
   showOnNavbar: true
+  # Can optionally hide the title in sections
+  # hideTitle: true 
 
 # Your achievements achievements
 achievements:
diff --git a/exampleSite/data/sections/experiences.yaml b/exampleSite/data/sections/experiences.yaml
index 3ed8349..b5366d6 100644
--- a/exampleSite/data/sections/experiences.yaml
+++ b/exampleSite/data/sections/experiences.yaml
@@ -4,7 +4,8 @@ section:
   enable: true
   weight: 3
   showOnNavbar: true
-
+  # Can optionally hide the title in sections
+  # hideTitle: true 
 
 # Your experiences
 experiences:
diff --git a/exampleSite/data/sections/projects.yaml b/exampleSite/data/sections/projects.yaml
index 0d84565..ea0c02e 100644
--- a/exampleSite/data/sections/projects.yaml
+++ b/exampleSite/data/sections/projects.yaml
@@ -4,6 +4,8 @@ section:
   enable: true
   weight: 4
   showOnNavbar: true
+  # Can optionally hide the title in sections
+  # hideTitle: true 
 
 # filter buttons
 buttons:
diff --git a/exampleSite/data/sections/recent-posts.yaml b/exampleSite/data/sections/recent-posts.yaml
index 9fb496a..357e99f 100644
--- a/exampleSite/data/sections/recent-posts.yaml
+++ b/exampleSite/data/sections/recent-posts.yaml
@@ -4,5 +4,7 @@ section:
   enable: true
   weight: 5
   showOnNavbar: true
+  # Can optionally hide the title in sections
+  # hideTitle: true 
 
 # no other configuration is required
diff --git a/exampleSite/data/sections/skills.yaml b/exampleSite/data/sections/skills.yaml
index 05730d8..8a8aaac 100644
--- a/exampleSite/data/sections/skills.yaml
+++ b/exampleSite/data/sections/skills.yaml
@@ -4,6 +4,8 @@ section:
   enable: true
   weight: 2
   showOnNavbar: true
+  # Can optionally hide the title in sections
+  # hideTitle: true 
 
 # Your Skills.
 # Give a summary of you each skill in the summary section.
diff --git a/layouts/partials/achievements.html b/layouts/partials/achievements.html
index 1805631..75995a9 100644
--- a/layouts/partials/achievements.html
+++ b/layouts/partials/achievements.html
@@ -1,5 +1,7 @@
 <div class="container-fluid anchor pb-5 achievements-section" id="{{ replace (lower .section.name) " " "-" }}">
-  <h1 class="text-center">{{ .section.name }}</h1>
+  {{ if not (.section.hideTitle) }}
+    <h1 class="text-center">{{ .section.name }}</h1>
+  {{ end }}
   <div class="container">
     <div class="row" id="gallery">
     </div>
diff --git a/layouts/partials/experiences.html b/layouts/partials/experiences.html
index 5c63d14..d63b319 100644
--- a/layouts/partials/experiences.html
+++ b/layouts/partials/experiences.html
@@ -1,5 +1,7 @@
 <div class="container-fluid anchor pb-5 experiences-section" id="{{ replace (lower .section.name) " " "-" }}">
-  <h1 class="text-center">{{ .section.name }}</h1>
+  {{ if not (.section.hideTitle) }}
+    <h1 class="text-center">{{ .section.name }}</h1>
+  {{ end }}
 
   <div class="container timeline text-justify">
    {{ $totalExperiences:= len .experiences }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 8c8649a..77693ce 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -6,7 +6,7 @@
         {{ if .Site.Data.sections }}
         <ul>
           {{- range sort .Site.Data.sections "section.weight" }}
-            {{ if .section.enable }}
+            {{ if and (.section.enable) (.section.showOnNavbar)}}
             <li class="nav-item">
               <a class="smooth-scroll" href="#{{ replace (lower .section.name) " " "-" }}">{{ .section.name }}</a>
             </li>
diff --git a/layouts/partials/home.html b/layouts/partials/home.html
index d87a3fb..2f825a7 100644
--- a/layouts/partials/home.html
+++ b/layouts/partials/home.html
@@ -7,7 +7,14 @@
     <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.Params.author.name }}{{ .Site.Params.author.name }}{{ else }}Jane Doe{{ end }}
+    <h1 class="greeting">Hi, I am
+      {{ if .Site.Params.author.nickname }}
+        {{ .Site.Params.author.nickname }}
+      {{ else if .Site.Params.author.name }}
+        {{ .Site.Params.author.name }}
+      {{ else }}
+        Jane Doe
+      {{ end }}
     </h1>
     <div class="typing-carousel">
       <span id="ityped" class="ityped"></span>
@@ -18,7 +25,10 @@
       <li>{{ . }}</li>
       {{ end }}
     </ul>
-    <!-- @todo this section should go to the first section, not necessarily about -->
-    <a href="#about"><i class="arrow bounce fa fa-chevron-down"></i></a>
+    {{ if .Site.Data.sections }}
+      {{ range first 1 (where (sort .Site.Data.sections "section.weight") ".section.enable" true) }}
+        <a href="#{{ replace (lower .section.name) " " "-" }}"><i class="arrow bounce fa fa-chevron-down"></i></a>
+      {{ end }}
+    {{ end }}
   </div>
 </div>
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 253c54d..fba1b31 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -21,7 +21,7 @@
         </li>
         {{- if .Site.Data.sections }}
           {{- range sort .Site.Data.sections "section.weight" }}
-            {{ if .section.showOnNavbar }}
+            {{ if and (.section.enable) (.section.showOnNavbar)}}
               <li class="nav-item">
                 <a class="nav-link smooth-scroll" href="#{{ replace (lower .section.name) " " "-" }}">{{ .section.name }}</a>
               </li>
@@ -44,7 +44,7 @@
         {{ end }}
         {{ range site.Params.customMenus }}
           <li class="nav-item">
-            <a class="nav-link" href="{{ .url }}" target="/">{{ .name }}</a>
+            <a class="nav-link" href="{{ .url }}">{{ .name }}</a>
           </li>
         {{ end }}
       </ul>
diff --git a/layouts/partials/progress/soft-skills.html b/layouts/partials/progress/soft-skills.html
index 4c32067..cbdc0ae 100644
--- a/layouts/partials/progress/soft-skills.html
+++ b/layouts/partials/progress/soft-skills.html
@@ -1,12 +1,24 @@
 <div class="col-6 col-lg-4 p-2">
-  <div class="circular-progress {{ .color }}">
+  {{ $predefinedColor:= true}}
+  {{ if hasPrefix .color "#"}}
+    {{ $predefinedColor = false }}
+  {{ end }}
+  <div class="circular-progress {{if $predefinedColor}}{{ .color }}{{end}}">
     <span class="circular-progress-left">
       <span
         class="circular-progress-bar circular-progress-percentage-{{ .percentage }}"
+        {{ if not $predefinedColor }}
+          style="border-color: {{.color}};"
+        {{ end }}
       ></span>
     </span>
     <span class="circular-progress-right">
-      <span class="circular-progress-bar"></span>
+      <span
+      class="circular-progress-bar"
+      {{ if not $predefinedColor }}
+          style="border-color: {{.color}};"
+      {{ end }}
+      ></span>
     </span>
     <div class="circular-progress-value">{{ .name }}</div>
   </div>
diff --git a/layouts/partials/projects.html b/layouts/partials/projects.html
index e8a9f35..fc23c72 100644
--- a/layouts/partials/projects.html
+++ b/layouts/partials/projects.html
@@ -1,5 +1,7 @@
 <div class="container-fluid anchor pb-5 projects-section" id="{{ replace (lower .section.name) " " "-" }}">
-  <h1 class="text-center">{{ .section.name }}</h1>
+  {{ if not (.section.hideTitle) }}
+    <h1 class="text-center">{{ .section.name }}</h1>
+  {{ end }}
   <div class="container ml-auto text-center">
     <div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
       {{ range .buttons }}
diff --git a/layouts/partials/recent-posts.html b/layouts/partials/recent-posts.html
index 03142fc..2d0cc87 100644
--- a/layouts/partials/recent-posts.html
+++ b/layouts/partials/recent-posts.html
@@ -1,5 +1,7 @@
 <div class="container-fluid anchor pb-5 recent-posts-section" id="{{ replace (lower .section.name) " " "-" }}">
-  <h1 class="text-center">{{ .section.name }}</h1>
+  {{ if not (.section.hideTitle) }}
+    <h1 class="text-center">{{ .section.name }}</h1>
+  {{ end }}
   <div class="container">
     <div class="row" id="recent-post-cards">
       {{ range first 3 (where site.RegularPages.ByDate.Reverse "Type" "in" site.Params.mainSections )}}
diff --git a/layouts/partials/skills.html b/layouts/partials/skills.html
index 5fab89a..8790be6 100644
--- a/layouts/partials/skills.html
+++ b/layouts/partials/skills.html
@@ -1,5 +1,7 @@
 <div class="container-fluid anchor pb-5 skills-section" id="{{ replace (lower .section.name) " " "-" }}">
-  <h1 class="text-center">{{ .section.name }}</h1>
+  {{ if not (.section.hideTitle) }}
+    <h1 class="text-center">{{ .section.name }}</h1>
+  {{ end }}
   <div class="container d-flex-block">
     <div class="row" id="primary-skills">
       {{ range .skills }}
diff --git a/static/assets/css/about.css b/static/assets/css/about.css
index a125768..96ce207 100644
--- a/static/assets/css/about.css
+++ b/static/assets/css/about.css
@@ -100,7 +100,7 @@
 }
 
 .circular-progress.yellow .circular-progress-bar {
-  border-color: #ffc212;
+  border-color: #eebb4d;
 }
 
 .circular-progress.pink .circular-progress-bar {
@@ -111,6 +111,14 @@
   border-color: #2dca73;
 }
 
+.circular-progress.sky .circular-progress-bar {
+  border-color: #00c9e3;
+}
+
+.circular-progress.orange .circular-progress-bar {
+  border-color: #ff7c7c;
+}
+
 .circular-progress-percentage-50 {
   animation: circular-loading-50 0s linear forwards 1.8s;
 }