diff --git a/src/assets/images/posts/ugly_keyboards/default_keyboard.svg b/src/assets/images/posts/ugly_keyboards/default_keyboard.svg
new file mode 100644
index 0000000..2139ae6
--- /dev/null
+++ b/src/assets/images/posts/ugly_keyboards/default_keyboard.svg
@@ -0,0 +1,1990 @@
+
+  <svg width='810px'
+       height='270px'
+       viewBox='0 0 810 270'
+       xmlns='http://www.w3.org/2000/svg'
+       xmlns:xlink="http://www.w3.org/1999/xlink">
+
+    <style type='text/css'>
+    .keycap .border { stroke: black; stroke-width: 2; }
+    .keycap .inner.border { stroke: rgba(0,0,0,.1); }
+    </style>
+    <defs>
+      <linearGradient id="DCS">
+        <stop offset="0%" stop-color="black" stop-opacity="0"/>
+        <stop offset="40%" stop-color="black" stop-opacity="0.1"/>
+        <stop offset="60%" stop-color="black" stop-opacity="0.1"/>
+        <stop offset="100%" stop-color="black" stop-opacity="0"/>
+      </linearGradient>
+      <linearGradient id="SPACE" x1="0%" x2="0%" y1="0%" y2="100%">
+        <stop offset="0%" stop-color="black" stop-opacity="0.1"/>
+        <stop offset="20%" stop-color="black" stop-opacity="0.0"/>
+        <stop offset="40%" stop-color="black" stop-opacity="0.0"/>
+        <stop offset="100%" stop-color="black" stop-opacity="0.1"/>
+      </linearGradient>
+      <radialGradient id="DSA">
+        <stop offset="0%" stop-color="black" stop-opacity="0.1"/>
+        <stop offset="10%" stop-color="black" stop-opacity="0.1"/>
+        <stop offset="100%" stop-color="black" stop-opacity="0"/>
+      </radialGradient>
+      <radialGradient id="SA" xlink:href="#DSA" />
+    </defs>
+
+    <g transform='translate(0,0)'>
+      <g transform='translate(0,0)'>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="1" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="1" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="7" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="7" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="55" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="55" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="61" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="61" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="109" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="109" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="115" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="115" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="163" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="163" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="169" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="169" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="217" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="217" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="223" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="223" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="271" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="271" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="277" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="277" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="325" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="325" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="331" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="331" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="379" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="379" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="385" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="385" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="433" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="433" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="439" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="439" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="487" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="487" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="493" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="493" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="541" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="541" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="547" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="547" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="595" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="595" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="601" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="601" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="649" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="649" y="1"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="655" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="655" y="4"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="703" y="1"
+          width="106" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="703" y="1"
+          width="106" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="709" y="4"
+            width="94" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="709" y="4"
+            width="94" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="1" y="55"
+          width="79" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="1" y="55"
+          width="79" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="7" y="58"
+            width="67" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="7" y="58"
+            width="67" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="82" y="55"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="82" y="55"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="88" y="58"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="88" y="58"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="136" y="55"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="136" y="55"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="142" y="58"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="142" y="58"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="190" y="55"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="190" y="55"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="196" y="58"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="196" y="58"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="244" y="55"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="244" y="55"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="250" y="58"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="250" y="58"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="298" y="55"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="298" y="55"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="304" y="58"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="304" y="58"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="352" y="55"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="352" y="55"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="358" y="58"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="358" y="58"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="406" y="55"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="406" y="55"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="412" y="58"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="412" y="58"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="460" y="55"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="460" y="55"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="466" y="58"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="466" y="58"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="514" y="55"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="514" y="55"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="520" y="58"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="520" y="58"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="568" y="55"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="568" y="55"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="574" y="58"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="574" y="58"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="622" y="55"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="622" y="55"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="628" y="58"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="628" y="58"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="676" y="55"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="676" y="55"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="682" y="58"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="682" y="58"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="730" y="55"
+          width="79" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="730" y="55"
+          width="79" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="736" y="58"
+            width="67" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="736" y="58"
+            width="67" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="1" y="109"
+          width="92.5" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="1" y="109"
+          width="92.5" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="7" y="112"
+            width="80.5" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="7" y="112"
+            width="80.5" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="95.5" y="109"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="95.5" y="109"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="101.5" y="112"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="101.5" y="112"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="149.5" y="109"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="149.5" y="109"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="155.5" y="112"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="155.5" y="112"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="203.5" y="109"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="203.5" y="109"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="209.5" y="112"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="209.5" y="112"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="257.5" y="109"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="257.5" y="109"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="263.5" y="112"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="263.5" y="112"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="311.5" y="109"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="311.5" y="109"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="317.5" y="112"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="317.5" y="112"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="365.5" y="109"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="365.5" y="109"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="371.5" y="112"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="371.5" y="112"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="419.5" y="109"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="419.5" y="109"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="425.5" y="112"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="425.5" y="112"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="473.5" y="109"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="473.5" y="109"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="479.5" y="112"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="479.5" y="112"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="527.5" y="109"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="527.5" y="109"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="533.5" y="112"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="533.5" y="112"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="581.5" y="109"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="581.5" y="109"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="587.5" y="112"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="587.5" y="112"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="635.5" y="109"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="635.5" y="109"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="641.5" y="112"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="641.5" y="112"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="689.5" y="109"
+          width="119.5" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="689.5" y="109"
+          width="119.5" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="695.5" y="112"
+            width="107.5" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="695.5" y="112"
+            width="107.5" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="1" y="163"
+          width="119.5" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="1" y="163"
+          width="119.5" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="7" y="166"
+            width="107.5" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="7" y="166"
+            width="107.5" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="122.5" y="163"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="122.5" y="163"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="128.5" y="166"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="128.5" y="166"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="176.5" y="163"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="176.5" y="163"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="182.5" y="166"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="182.5" y="166"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="230.5" y="163"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="230.5" y="163"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="236.5" y="166"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="236.5" y="166"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="284.5" y="163"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="284.5" y="163"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="290.5" y="166"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="290.5" y="166"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="338.5" y="163"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="338.5" y="163"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="344.5" y="166"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="344.5" y="166"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="392.5" y="163"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="392.5" y="163"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="398.5" y="166"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="398.5" y="166"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="446.5" y="163"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="446.5" y="163"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="452.5" y="166"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="452.5" y="166"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="500.5" y="163"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="500.5" y="163"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="506.5" y="166"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="506.5" y="166"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="554.5" y="163"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="554.5" y="163"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="560.5" y="166"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="560.5" y="166"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="608.5" y="163"
+          width="52" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="608.5" y="163"
+          width="52" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="614.5" y="166"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="614.5" y="166"
+            width="40" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="662.5" y="163"
+          width="146.5" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="662.5" y="163"
+          width="146.5" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="668.5" y="166"
+            width="134.5" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="668.5" y="166"
+            width="134.5" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="1" y="217"
+          width="65.5" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="1" y="217"
+          width="65.5" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="7" y="220"
+            width="53.5" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="7" y="220"
+            width="53.5" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="68.5" y="217"
+          width="65.5" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="68.5" y="217"
+          width="65.5" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="74.5" y="220"
+            width="53.5" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="74.5" y="220"
+            width="53.5" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="136" y="217"
+          width="65.5" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="136" y="217"
+          width="65.5" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="142" y="220"
+            width="53.5" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="142" y="220"
+            width="53.5" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="203.5" y="217"
+          width="335.5" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="203.5" y="217"
+          width="335.5" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="209.5" y="220"
+            width="323.5" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="209.5" y="220"
+            width="323.5" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="541" y="217"
+          width="65.5" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="541" y="217"
+          width="65.5" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="547" y="220"
+            width="53.5" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="547" y="220"
+            width="53.5" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="608.5" y="217"
+          width="65.5" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="608.5" y="217"
+          width="65.5" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="614.5" y="220"
+            width="53.5" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="614.5" y="220"
+            width="53.5" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="676" y="217"
+          width="65.5" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="676" y="217"
+          width="65.5" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="682" y="220"
+            width="53.5" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="682" y="220"
+            width="53.5" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+  <g class='  keycap'
+  >
+
+
+    <!-- Outer Border -->
+    <rect x="743.5" y="217"
+          width="65.5" height="52"
+          rx="5" fill="#cccccc" class="outer border"/>
+
+    <!-- Outer Fill -->
+    <rect x="743.5" y="217"
+          width="65.5" height="52"
+          rx="5" fill="#cccccc"/>
+
+
+
+      <!-- Inner Border -->
+      <rect x="749.5" y="220"
+            width="53.5" height="40"
+            rx="5" fill="#fcfcfc" class="inner border"/>
+
+      <!-- Inner Fill -->
+      <rect x="749.5" y="220"
+            width="53.5" height="40"
+            rx="5" fill="#fcfcfc"/>
+
+
+
+
+
+  </g>
+
+      </g>
+    </g>
+  </svg>
diff --git a/src/assets/images/posts/ugly_keyboards/typewriter.jpg b/src/assets/images/posts/ugly_keyboards/typewriter.jpg
new file mode 100644
index 0000000..e6b45d6
Binary files /dev/null and b/src/assets/images/posts/ugly_keyboards/typewriter.jpg differ
diff --git a/src/assets/images/posts/ugly_keyboards/typing_zones_default.png b/src/assets/images/posts/ugly_keyboards/typing_zones_default.png
new file mode 100644
index 0000000..fa5cc3e
Binary files /dev/null and b/src/assets/images/posts/ugly_keyboards/typing_zones_default.png differ
diff --git a/src/assets/images/posts/ugly_keyboards/typing_zones_default_no_hands.png b/src/assets/images/posts/ugly_keyboards/typing_zones_default_no_hands.png
new file mode 100644
index 0000000..12085b9
Binary files /dev/null and b/src/assets/images/posts/ugly_keyboards/typing_zones_default_no_hands.png differ
diff --git a/src/assets/images/posts/ugly_keyboards/typing_zones_ergo.png b/src/assets/images/posts/ugly_keyboards/typing_zones_ergo.png
new file mode 100644
index 0000000..4f0c97f
Binary files /dev/null and b/src/assets/images/posts/ugly_keyboards/typing_zones_ergo.png differ