Merge pull request #24 from chriswachira/add-site-stack-section

feat(hugo): Introduce dynamic & configurable Tech Stack section

.gitmodules

@@ -1,3 +1,3 @@
 [submodule "themes/hugo-profile"]
 	path = themes/hugo-profile
-	url = https://github.com/gurusabarish/hugo-profile.git
+	url = https://github.com/chriswachira/hugo-profile.git

config.yaml

@@ -129,7 +129,7 @@ params:
     content: "A passionate DevOps & Cloud Infrastructure engineer. I make use of modern cloud technologies to run web applications at scale, fast and secure. All for the users' best experiences."
     image: /images/hero.jpeg
     bottomImage:
-      enable: true
+      enable: false
     # roundImage: true # Make hero image circular | default false
     button:
       enable: true
@@ -144,6 +144,18 @@ params:
         - icon: fab fa-linkedin
           url: https://www.linkedin.com/in/chris-wachira
 
+  # Tech stack
+  stack:
+    enable: true
+    title: "This site's tech stack"
+    items:
+    - name: gohugo
+      image: "/images/stacks/gohugo.png"
+    - name: Amazon Web Services (AWS)
+      image: "/images/stacks/aws-white.png"
+    - name: HashiCorp Terraform
+      image: "/images/stacks/terraform-white.png"
+
   # About
   about:
     enable: true

layouts/index.html

@@ -13,6 +13,7 @@
 
 {{ define "main" }}
 {{- partial "sections/hero/index.html" . -}}
+{{- partial "sections/tech-stack.html" . -}}
 {{- partial "sections/about.html" . -}}
 {{- partial "sections/experience.html" . -}}
 {{- partial "sections/education.html" . -}}

layouts/partials/sections/tech-stack.html

@@ -0,0 +1,23 @@
+{{ if .Site.Params.stack.enable | default false }}
+<section id="tech-stack" class="py-0 py-sm-5">
+    <div class="container bg-transparent">
+        <h3 class="text-center bg-transparent">{{ .Site.Params.stack.title }}</h3>
+        <div class="bg-transparent row justify-content-center px-3 py-5">
+
+            {{ range .Site.Params.stack.items }}
+            <div class="col-sm-12 col-md-12 col-lg-4">
+                <div class="row justify-content-center">
+                    <div class="col-sm-12 col-md-9 pt-5 image {{ if .Site.Params.animate }}animate{{ end }} px-5 px-md-5 px-lg-0 text-center">
+                        <img src="{{ .image }}"
+                            class="img-thumbnail mx-auto{{ if .Site.Params.hero.roundImage }} rounded-circle{{ end }}"
+                            alt=""
+                        >
+                    </div>
+                </div>
+            </div>
+            {{ end }}
+
+        </div>
+    </div>
+</section>
+{{ end }}