Encoder/Decoder Tech Demo

_tabs/about.md

@@ -4,4 +4,9 @@ icon: fas fa-info-circle
 order: 4
 ---
 
-soon...
+Welcome to my webpage!
+
+I plan on filling this with various tech-demos as a way of practicing my JavaScript.
+I also plan on making this a portfolio of some sort so I can show my other projects!
+
+There isn't much here yet but that'll change quickly :D

index.markdown

@@ -1,8 +1,23 @@
 ---
 # Feel free to add content and custom Front Matter to this file.
 # To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
-
-layout: page
+title: Welcome!
+layout: default
 ---
+# {{ page.title | default: site.title }}
 
-# Hi
+<div id="post-list" class="flex-grow-1 px-xl-1">
+  <article class="card-wrapper card">
+    <a href="/techdemos" class="post-preview row g-0 flex-md-row-reverse">
+      {% assign card_body_col = '12' %}
+      <div class="col-md-{{ card_body_col }}">
+        <div class="card-body d-flex flex-column">
+          <h1 class="card-title my-2 mt-md-0">Tech Demos</h1>
+          <div class="card-text content mt-0 mb-3">
+            <p>Try various tech demos</p>
+          </div>
+        </div>
+      </div>
+    </a>
+  </article>
+</div>

techdemos/encode/index.markdown

@@ -0,0 +1,74 @@
+---
+# Feel free to add content and custom Front Matter to this file.
+# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
+
+layout: page
+title: Encoder/Decoder
+---
+#### Input
+<textarea id="inputText" rows="10" class="panel" spellcheck="false" style="resize:none; width:100%;"></textarea>
+
+#### Options
+Mode:
+<select name="mode" id="mode" style="width: 100%">
+</select>
+
+<button id="encode" style="width: calc(50% - 2px);">Encode</button>
+<button id="decode" style="width: calc(50% - 2px);">Decode</button>
+<input type="checkbox" id="livemode" name="livemode">
+<label for="livemode"> Live mode</label><br>
+
+#### Output
+<textarea id="outputText" rows="10" class="panel" spellcheck="false" style="resize:none; width:100%;"></textarea>
+
+<!-- Encode/Decode -->
+<script type="text/javascript">
+    const mode = document.getElementById("mode");
+    const encode = document.getElementById("encode");
+    const decode = document.getElementById("decode");
+    const livemode = document.getElementById("livemode");
+    const input = document.getElementById("inputText");
+    const output = document.getElementById("outputText");
+
+    const codes = {
+        "Base64": {
+            encode: text => btoa(text),
+            decode: text => atob(text)
+        },
+        "URL": {
+            encode: text => encodeURI(text),
+            decode: text => decodeURI(text)
+        },
+        "URL (component)": {
+            encode: text => encodeURIComponent(text),
+            decode: text => decodeURIComponent(text)
+        }
+    }
+
+    for (const code in codes) {
+        let element = document.createElement("option");
+        element.value = code;
+        element.innerText = code;
+        mode.appendChild(element);
+    }
+
+    encode.addEventListener("click", () => {
+        output.value = codes[mode.value].encode(input.value);
+    });
+
+    decode.addEventListener("click", () => {
+        input.value = codes[mode.value].decode(output.value);
+    });
+
+    input.addEventListener("input", () => {
+        if (livemode.checked) {
+            output.value = codes[mode.value].encode(input.value);
+        }
+    });
+
+    output.addEventListener("input", () => {
+        if (livemode.checked) {
+            input.value = codes[mode.value].decode(output.value);
+        }
+    });
+</script>

techdemos/index.markdown

@@ -0,0 +1,34 @@
+---
+# Feel free to add content and custom Front Matter to this file.
+# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
+
+title: Tech Demos
+layout: default
+---
+# {{ page.title | default: site.title }}
+
+<div id="post-list" class="flex-grow-1 px-xl-1">
+  <article class="card-wrapper card">
+    <a href="encode" class="post-preview row g-0 flex-md-row-reverse">
+      {% assign card_body_col = '12' %}
+      {% assign image = '/assets/img/previews/encode.png' %}
+      {% if image %}
+        {% assign src = image %}
+        {% assign alt = 'Preview Image' %}
+        <div class="col-md-5">
+          <img src="{{ src }}" alt="{{ alt }}" {{ lqip }}>
+        </div>
+        {% assign card_body_col = '7' %}
+      {% endif %}
+      <div class="col-md-{{ card_body_col }}">
+        <div class="card-body d-flex flex-column">
+          <h1 class="card-title my-2 mt-md-0">Encoder/Decoder</h1>
+          <div class="card-text content mt-0 mb-3">
+            <p>Encode and decode text with various encodings.</p>
+          </div>
+        </div>
+      </div>
+    </a>
+  </article>
+</div>
+