Rework front matter data

.vscode/settings.json

@@ -0,0 +1,22 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.activeBackground": "#968349",
+        "activityBar.background": "#968349",
+        "activityBar.foreground": "#15202b",
+        "activityBar.inactiveForeground": "#15202b99",
+        "activityBarBadge.background": "#94cbbd",
+        "activityBarBadge.foreground": "#15202b",
+        "commandCenter.border": "#e7e7e799",
+        "sash.hoverBorder": "#968349",
+        "statusBar.background": "#746538",
+        "statusBar.foreground": "#e7e7e7",
+        "statusBarItem.hoverBackground": "#968349",
+        "statusBarItem.remoteBackground": "#746538",
+        "statusBarItem.remoteForeground": "#e7e7e7",
+        "titleBar.activeBackground": "#746538",
+        "titleBar.activeForeground": "#e7e7e7",
+        "titleBar.inactiveBackground": "#74653899",
+        "titleBar.inactiveForeground": "#e7e7e799"
+    },
+    "peacock.color": "#746538"
+}

src/_includes/about.liquid

@@ -0,0 +1,18 @@
+<section id="{{ subpage.data.title | slug }}" class="{{ subpage.data.classes }}">
+  <div class="about">
+    {% if subpage.data.img %}
+      <div>
+        <img src="{{subpage.data.img.src}}" alt="{{subpage.data.img.alt}}">
+      </div>
+    {% endif %}
+    <div>
+      {% if subpage.data.showTitle != false %}
+        <h2>{{ subpage.data.title }}</h2>
+      {% endif %}
+      {{ subpage.templateContent }}
+      {% if subpage.data.socials %}
+        <strong>socials here</strong>
+      {% endif %} 
+    </div>
+  </div>
+</section>

src/_includes/page.liquid

@@ -1,6 +1,6 @@
 <section id="{{ subpage.data.title | slug }}" class="{{ subpage.data.classes }}">
   {% if subpage.data.img %}
-    <strong>img here</strong>
+    <img src="{{subpage.data.img.src}}" alt="{{subpage.data.img.alt}}">
   {% endif %}
   {% if subpage.data.showTitle != false %}
     <h2>{{ subpage.data.title }}</h2>

src/pages/index.liquid

@@ -9,7 +9,11 @@ permalink: /
     {% if subpage.data.pageOrderId == 0 %}
       {% include 'title.liquid' %}
     {% else %}
-      {% include 'page.liquid' %}
+      {% if subpage.data.sectionType == 'about' %}
+        {% include 'about.liquid' %}
+      {% else %}
+        {% include 'page.liquid' %}
+      {% endif %}
     {% endif %}
   {% endif %}
 {% endfor %}

src/pages/subpages/about.liquid

@@ -2,9 +2,12 @@
 title: About me
 pageOrderId: 1
 classes: 'wrapper about-section'
-img: test.jpg
+sectionType: 'about'
+img: 
+  src: https://placehold.co/400
+  alt: This is a placeholder
 socials:
-    github: https://github.com
+  github: https://github.com
 ---
 
 <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit culpa dignissimos laborum, dolor voluptatem perspiciatis earum placeat modi minus officia perferendis rerum alias maiores deleniti et quia provident quo doloribus.</p>