refactor[partials]: reorganize partials to enhance code reuse

Partials have been reorganized, to improve general understandability and
enhance code reuse (ex. when adding pages, the "wave" will be loaded as
a partial)

layouts/index.html

@@ -1,3 +1,3 @@
 {{ define "main" }}
-      {{ partial "home.html" . }}
+      {{ partial "home/home.html" . }}
 {{ end }}

layouts/partials/header.html

@@ -1 +1 @@
-{{ partial "navbar.html" . }}
+{{ partial "utilities/navbar.html" . }}

layouts/partials/home/home.html

@@ -1,36 +1,29 @@
 <div>
-  <div
-    id="mainBG"
-    style="background-image: url('{{ if $.Site.Params.mainbg }}{{ $.Site.Params.mainbg }}{{ else }}https://picsum.photos/1920/1080{{ end }}');"
-  >
-    <div
-      class="wave wave1"
-      style="background-image: url('{{ .Site.BaseURL }}/img/wave.png');"
-    ></div>
-    <div
-      class="wave wave2"
-      style="background-image: url('{{ .Site.BaseURL }}/img/wave.png');"
-    ></div>
-    <div
-      class="wave wave3"
-      style="background-image: url('{{ .Site.BaseURL }}/img/wave.png');"
-    ></div>
-    <div
-      class="wave wave4"
-      style="background-image: url('{{ .Site.BaseURL }}/img/wave.png');"
-    ></div>
-    <div class="centerAll">
-      <div class="title text-6xl font-bold text-center">
-        {{if  $.Site.Params.maintitle }}{{ $.Site.Params.maintitle }}{{else}}Hello, World{{end}}
-      </div>
-      <div class="text text-xl text-center">{{if $.Site.Params.maintext}}{{ $.Site.Params.maintext }}{{else}}Edit config.toml/params{{end}}</div>
-    </div>
-  </div>
+
+        <div
+        id="mainBG"
+        style="background-image: url('{{ if $.Site.Params.mainbg }}{{ $.Site.Params.mainbg }}{{ else }}https://picsum.photos/1920/1080{{ end }}');"
+        >
+
+            {{ partial "utilities/wave"}}
+
+            <div class="centerAll">
+                <div class="title text-6xl font-bold text-center">
+                    {{if  $.Site.Params.maintitle }}{{ $.Site.Params.maintitle }}{{else}}Hello, World{{end}}
+                </div>
+
+                <div class="text text-xl text-center">
+                    {{if $.Site.Params.maintext}}{{ $.Site.Params.maintext }}{{else}}Edit config.toml/params{{end}}
+                </div>
+            </div>
+        </div>
+
+
   {{ $data := .Site.Data.home }}
   <main class="container mx-auto mt-8 px-4 xl:px-0">
     <section id="about" class="md:flex justify-around">
       <div class="my-auto md:mr-4">
-        {{ partial "home_title" (dict "title" "About Me") }}
+        {{ partial "home/homeTitle" (dict "title" "About Me") }}
         <div class="flex mt-3 gap-3 text-xl">
           {{ range $data.about.link }}
           <a href="{{.url}}"><i class="{{ .icon }}"></i></a>{{end}}
@@ -52,9 +45,9 @@
     </section>
     <section id="skills" class="mt-12">
       <div class="md:flex justify-center">
-        {{ partial "home_title" (dict "title" "Skills") }}
+        {{ partial "home/homeTitle" (dict "title" "Skills") }}
       </div>
-      
+
       {{if $data.skills.list}}
         <div
          class="mt-8 grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
@@ -87,9 +80,9 @@
     </section>
     <section id="projects" class="mt-12">
       <div class="md:flex justify-center">
-        {{ partial "home_title" (dict "title" "Projects") }}
+        {{ partial "home/homeTitle" (dict "title" "Projects") }}
       </div>
-      
+
       {{if $data.skills.list}}
       <div
         class="mt-8 grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
@@ -101,8 +94,8 @@
             class="w-full h-48"
             src="{{ .image }}"
             alt="Sunset in the mountains"
-            />            
-          </a>         
+            />
+          </a>
           <div class="px-6 py-4">
             <div class="font-bold text-xl mb-2">{{ .title }}</div>
             <p class="text-gray-700 text-base">

layouts/partials/utilities/wave.html

@@ -0,0 +1,16 @@
+    <div
+      class="wave wave1"
+      style="background-image: url('{{ .Site.BaseURL }}/img/wave.png');"
+    ></div>
+    <div
+      class="wave wave2"
+      style="background-image: url('{{ .Site.BaseURL }}/img/wave.png');"
+    ></div>
+    <div
+      class="wave wave3"
+      style="background-image: url('{{ .Site.BaseURL }}/img/wave.png');"
+    ></div>
+    <div
+      class="wave wave4"
+      style="background-image: url('{{ .Site.BaseURL }}/img/wave.png');"
+    ></div>