add visuals section

Author: Bhupesh-V

_config.yml

@@ -78,6 +78,9 @@ collections:
   lists:
     output: true
     permalink: /lists/:title/
+  visuals:
+    output: true
+    permalink: /visuals/:title/
 
 # Use the following plug-ins
 plugins:

_visuals/6hats.md

@@ -0,0 +1,12 @@
+---
+layout: page
+title: Practicing Systemic Thinking with Six Thinking Hats
+date: 2026-04-04
+description: A visual guide to the Six Thinking Hats decision-making technique
+---
+
+Edward de Bono's [Six Thinking Hats](https://www.debonogroup.com/services/core-programs/six-thinking-hats/) is a nice tool to practive systems thinking, here's my take on it.
+
+<br>
+
+<iframe src="https://drive.google.com/file/d/1mIpg7FDmmwQbT8BRiAoSZU6gRjpMADAD/preview" width="100%" height="1200px" allow="autoplay"></iframe>

light.scss

@@ -516,6 +516,18 @@ i.fa.fa-link {
   transform: rotate(45deg);
 }
 
+.all-visuals {
+  section {
+    margin-bottom: 1.5em;
+    padding-bottom: 1em;
+    border-bottom: 1px solid #ddd;
+  }
+
+  h4 {
+    margin: 0.5em 0;
+  }
+}
+
 // Settled on moving the import of syntax highlighting to the bottom of the CSS
 // ... Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start
 @import "highlights";

style.scss

@@ -630,6 +630,18 @@ i.fa.fa-link {
   content: "]";
 }
 
+.all-visuals {
+  section {
+    margin-bottom: 1.5em;
+    padding-bottom: 1em;
+    border-bottom: 1px solid #333;
+  }
+
+  h4 {
+    margin: 0.5em 0;
+  }
+}
+
 // Settled on moving the import of syntax highlighting to the bottom of the CSS
 // ... Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start
 @import "highlights";

visuals.md

@@ -0,0 +1,24 @@
+---
+layout: page
+title: Visuals
+description: A collection of visual content, diagrams, and illustrations I've created.
+permalink: /visuals/
+---
+
+This page showcases visual content including diagrams, illustrations, and other visual materials I've created.
+
+{% if site.visuals.size > 0 %}
+<div class="all-visuals">
+  {% assign sorted_visuals = site.visuals | sort: 'date' | reverse %}
+  {% for visual in sorted_visuals %}
+    <section>
+      <h4>
+        <a class="mark" href="{{ site.baseurl }}{{ visual.url }}">{{ visual.title }}</a>
+        📅 {{ visual.date | date: "%B %e, %Y" }}
+      </h4>
+    </section>
+  {% endfor %}
+</div>
+{% else %}
+  <p>No visuals yet. Check back soon!</p>
+{% endif %}