diff --git a/config.yaml b/config.yaml
index c69fb4e..7c568f3 100644
--- a/config.yaml
+++ b/config.yaml
@@ -12,6 +12,9 @@ enableInlineShortcodes: True
 
 # Robot.txt file
 enableRobotsTXT: True
+
+# Summary length
+summaryLength: 24
 #################################################################
 
 
@@ -170,15 +173,15 @@ menu:
     main:
         - name: Blog
           pre: ""
-          url: blog
+          url: blog/
           weight: 1
         - name: Portfolio
           pre: ""
-          url: portfolio
+          url: portfolio/
           weight: 2
         - name: About Me
           pre: ""
-          url: about
+          url: about/
           weight: 3
         - name: Contact
           pre: '#'
diff --git a/content/blog/2020-12-02-docker-cheat-sheet.md b/content/blog/2020-12-02-docker-cheat-sheet.md
index b281f30..8121c38 100644
--- a/content/blog/2020-12-02-docker-cheat-sheet.md
+++ b/content/blog/2020-12-02-docker-cheat-sheet.md
@@ -2,7 +2,7 @@
 title: Docker & Compose Cheat Sheet
 description: This is my list of use full Docker commands.
 date: 2020-12-02T00:00:00.000Z
-lastmod: 2024-02-13T21:23:00.829Z
+lastmod: 2024-09-11T21:04:52.148Z
 image: /images/blog/Image-Docker-Command-Cheat-Sheet.png
 tags:
   - Cheat-Sheet
@@ -10,6 +10,7 @@ tags:
   - Docker
   - Linux
 slug: docker-compose-cheat-sheet
+draft: true
 ---
 
 # A list of docker commands
diff --git a/content/blog/2022-05-25-shebang-#!-tutorial-in-linux.md b/content/blog/2022-05-25-shebang-#!-tutorial-in-linux.md
index 5c1e195..0c87af8 100644
--- a/content/blog/2022-05-25-shebang-#!-tutorial-in-linux.md
+++ b/content/blog/2022-05-25-shebang-#!-tutorial-in-linux.md
@@ -1,21 +1,15 @@
 ---
 title: "Shebang #! Tutorial In Linux"
 description: ""
-
 date: 2022-05-25T12:50:05.057Z
-lastmod: 2023-01-03T16:39:00.682Z
-
+lastmod: 2024-09-11T21:10:00.957Z
 image: /images/blog/shebang.jpg
-
 draft: false
-
 tags:
   - Linux
   - Cheat-Sheet
-
 slug: shebang-tutorial-linux
 ---
-# Shebang #! Tutorial In Linux
 
 In computing and Linux the shebang is a character sequence that consists of `#` and `!`. Simply the shebang is expressed as `#!`. The shebang is also called sha-bang, hashbang, pound-bang, and hash-pling. The shebang is used to specify an interpreter for script files. Linux is popular with its script files and scripting languages like Bash, ZSH, Python, Perl, PHP, etc. The shebang is used to specify the interpreter type and location. When a script file is called the first line contains the shebang with the interpreter path.
 
diff --git a/content/blog/2023-08-04-creating-360°-equirectangular-images-with-hugin.md b/content/blog/2023-08-04-creating-360°-equirectangular-images-with-hugin.md
index 50bba0b..a7cbd1f 100644
--- a/content/blog/2023-08-04-creating-360°-equirectangular-images-with-hugin.md
+++ b/content/blog/2023-08-04-creating-360°-equirectangular-images-with-hugin.md
@@ -1,7 +1,7 @@
 ---
 title: Creating 360° Equirectangular Images with Hugin
 date: 2023-08-04T11:58:40.938Z
-lastmod: 2023-11-15T20:37:52.008Z
+lastmod: 2024-09-11T17:46:39.391Z
 image: /images/blog/2023-08-04-creating-360°-equirectangular-images-with-hugin/ExampleEqui.jpg
 description: Creating equirectangular images from 6 separate cube map images using Hugin
 tags:
@@ -11,8 +11,6 @@ draft: false
 slug: creating-360-equirectangular-images-hugin
 ---
 
-# Creating 360° Equirectangular Images with Hugin
-
 We can use [Hugin](https://hugin.sourceforge.io/) to create an equirectangular image from a six-image cube. For ease of keeping track of things, it is recommended that you name the files back, front, left, right, down, and up.
 
 First, start Hugin and after it starts go to the Interface menu and select Expert from there.
diff --git a/content/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough.md b/content/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough.md
index ddca193..3c58356 100644
--- a/content/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough.md
+++ b/content/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough.md
@@ -1,7 +1,7 @@
 ---
-title: Cyberpunk-Style Glitch Text Walkthrough
+title: Cyberpunk - Style Glitch Text Walkthrough
 date: 2024-07-23T18:35:26.560Z
-lastmod: 2024-07-24T20:43:47.560Z
+lastmod: 2024-09-11T20:48:16.374Z
 image: /images/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough/Peek 2024-07-24 22-34.gif
 description: Discover how to create a cyberpunk-style glitch text effect using pure CSS. This guide covers text layering, clip-paths, and animations for a dynamic, futuristic look. Dive in and start glitching!
 tags:
@@ -12,512 +12,7 @@ draft: false
 slug: cyberpunk-style-glitch-text-walkthrough
 ---
 
-<style>
-.post-single-content .hero {
-  font-size: clamp(40px, 10vw, 100px);
-  line-height: 1;
-  display: inline-block;
-  color: #fff;
-  z-index: 2;
-  letter-spacing: 10px;
-
-  /* Bright things in dark environments usually cast that light, giving off a glow */
-  filter: drop-shadow(0 1px 3px);
-}
-
-.post-single-content .demo {
-  height: 100px;
-  background: #fff;
-}
-
-.post-single-content .layers {
-  position: relative;
-}
-
-.post-single-content .layers::before,
-.post-single-content .layers::after {
-  content: attr(data-text);
-  position: absolute;
-  width: 110%;
-  z-index: -1;
-}
-
-.post-single-content .layers::before {
-  top: 10px;
-  left: 15px;
-  color: #e0287d;
-}
-
-.post-single-content .layers::after {
-  top: 5px;
-  left: -10px;
-  color: #1bc7fb;
-}
-
-.post-single-content .single-path {
-  clip-path: polygon(
-    0% 12%,
-    53% 12%,
-    53% 26%,
-    25% 26%,
-    25% 86%,
-    31% 86%,
-    31% 0%,
-    53% 0%,
-    53% 84%,
-    92% 84%,
-    92% 82%,
-    70% 82%,
-    70% 29%,
-    78% 29%,
-    78% 65%,
-    69% 65%,
-    69% 66%,
-    77% 66%,
-    77% 45%,
-    85% 45%,
-    85% 26%,
-    97% 26%,
-    97% 28%,
-    84% 28%,
-    84% 34%,
-    54% 34%,
-    54% 89%,
-    30% 89%,
-    30% 58%,
-    83% 58%,
-    83% 5%,
-    68% 5%,
-    68% 36%,
-    62% 36%,
-    62% 1%,
-    12% 1%,
-    12% 34%,
-    60% 34%,
-    60% 57%,
-    98% 57%,
-    98% 83%,
-    1% 83%,
-    1% 53%,
-    91% 53%,
-    91% 84%,
-    8% 84%,
-    8% 83%,
-    4% 83%
-  );
-}
-
-.post-single-content .paths {
-  animation: paths 5s step-end infinite;
-}
-
-@keyframes paths {
-  0% {
-    clip-path: polygon(
-      0% 43%,
-      83% 43%,
-      83% 22%,
-      23% 22%,
-      23% 24%,
-      91% 24%,
-      91% 26%,
-      18% 26%,
-      18% 83%,
-      29% 83%,
-      29% 17%,
-      41% 17%,
-      41% 39%,
-      18% 39%,
-      18% 82%,
-      54% 82%,
-      54% 88%,
-      19% 88%,
-      19% 4%,
-      39% 4%,
-      39% 14%,
-      76% 14%,
-      76% 52%,
-      23% 52%,
-      23% 35%,
-      19% 35%,
-      19% 8%,
-      36% 8%,
-      36% 31%,
-      73% 31%,
-      73% 16%,
-      1% 16%,
-      1% 56%,
-      50% 56%,
-      50% 8%
-    );
-  }
-
-  5% {
-    clip-path: polygon(
-      0% 29%,
-      44% 29%,
-      44% 83%,
-      94% 83%,
-      94% 56%,
-      11% 56%,
-      11% 64%,
-      94% 64%,
-      94% 70%,
-      88% 70%,
-      88% 32%,
-      18% 32%,
-      18% 96%,
-      10% 96%,
-      10% 62%,
-      9% 62%,
-      9% 84%,
-      68% 84%,
-      68% 50%,
-      52% 50%,
-      52% 55%,
-      35% 55%,
-      35% 87%,
-      25% 87%,
-      25% 39%,
-      15% 39%,
-      15% 88%,
-      52% 88%
-    );
-  }
-
-  30% {
-    clip-path: polygon(
-      0% 53%,
-      93% 53%,
-      93% 62%,
-      68% 62%,
-      68% 37%,
-      97% 37%,
-      97% 89%,
-      13% 89%,
-      13% 45%,
-      51% 45%,
-      51% 88%,
-      17% 88%,
-      17% 54%,
-      81% 54%,
-      81% 75%,
-      79% 75%,
-      79% 76%,
-      38% 76%,
-      38% 28%,
-      61% 28%,
-      61% 12%,
-      55% 12%,
-      55% 62%,
-      68% 62%,
-      68% 51%,
-      0% 51%,
-      0% 92%,
-      63% 92%,
-      63% 4%,
-      65% 4%
-    );
-  }
-
-  45% {
-    clip-path: polygon(
-      0% 33%,
-      2% 33%,
-      2% 69%,
-      58% 69%,
-      58% 94%,
-      55% 94%,
-      55% 25%,
-      33% 25%,
-      33% 85%,
-      16% 85%,
-      16% 19%,
-      5% 19%,
-      5% 20%,
-      79% 20%,
-      79% 96%,
-      93% 96%,
-      93% 50%,
-      5% 50%,
-      5% 74%,
-      55% 74%,
-      55% 57%,
-      96% 57%,
-      96% 59%,
-      87% 59%,
-      87% 65%,
-      82% 65%,
-      82% 39%,
-      63% 39%,
-      63% 92%,
-      4% 92%,
-      4% 36%,
-      24% 36%,
-      24% 70%,
-      1% 70%,
-      1% 43%,
-      15% 43%,
-      15% 28%,
-      23% 28%,
-      23% 71%,
-      90% 71%,
-      90% 86%,
-      97% 86%,
-      97% 1%,
-      60% 1%,
-      60% 67%,
-      71% 67%,
-      71% 91%,
-      17% 91%,
-      17% 14%,
-      39% 14%,
-      39% 30%,
-      58% 30%,
-      58% 11%,
-      52% 11%,
-      52% 83%,
-      68% 83%
-    );
-  }
-
-  76% {
-    clip-path: polygon(
-      0% 26%,
-      15% 26%,
-      15% 73%,
-      72% 73%,
-      72% 70%,
-      77% 70%,
-      77% 75%,
-      8% 75%,
-      8% 42%,
-      4% 42%,
-      4% 61%,
-      17% 61%,
-      17% 12%,
-      26% 12%,
-      26% 63%,
-      73% 63%,
-      73% 43%,
-      90% 43%,
-      90% 67%,
-      50% 67%,
-      50% 41%,
-      42% 41%,
-      42% 46%,
-      50% 46%,
-      50% 84%,
-      96% 84%,
-      96% 78%,
-      49% 78%,
-      49% 25%,
-      63% 25%,
-      63% 14%
-    );
-  }
-
-  90% {
-    clip-path: polygon(
-      0% 41%,
-      13% 41%,
-      13% 6%,
-      87% 6%,
-      87% 93%,
-      10% 93%,
-      10% 13%,
-      89% 13%,
-      89% 6%,
-      3% 6%,
-      3% 8%,
-      16% 8%,
-      16% 79%,
-      0% 79%,
-      0% 99%,
-      92% 99%,
-      92% 90%,
-      5% 90%,
-      5% 60%,
-      0% 60%,
-      0% 48%,
-      89% 48%,
-      89% 13%,
-      80% 13%,
-      80% 43%,
-      95% 43%,
-      95% 19%,
-      80% 19%,
-      80% 85%,
-      38% 85%,
-      38% 62%
-    );
-  }
-
-  1%,
-  7%,
-  33%,
-  47%,
-  78%,
-  93% {
-    clip-path: none;
-  }
-}
-
-.post-single-content .movement {
-  /* Normally this position would be absolute & on the layers, set to relative here so we can see it on the div */
-  position: relative;
-  animation: movement 8s step-end infinite;
-}
-
-@keyframes movement {
-  0% {
-    top: 0px;
-    left: -20px;
-  }
-
-  15% {
-    top: 10px;
-    left: 10px;
-  }
-
-  60% {
-    top: 5px;
-    left: -10px;
-  }
-
-  75% {
-    top: -5px;
-    left: 20px;
-  }
-
-  100% {
-    top: 10px;
-    left: 5px;
-  }
-}
-
-.post-single-content .opacity {
-  animation: opacity 5s step-end infinite;
-}
-
-@keyframes opacity {
-  0% {
-    opacity: 0.1;
-  }
-
-  5% {
-    opacity: 0.7;
-  }
-
-  30% {
-    opacity: 0.4;
-  }
-
-  45% {
-    opacity: 0.6;
-  }
-
-  76% {
-    opacity: 0.4;
-  }
-
-  90% {
-    opacity: 0.8;
-  }
-
-  1%,
-  7%,
-  33%,
-  47%,
-  78%,
-  93% {
-    opacity: 0;
-  }
-}
-
-.post-single-content .font {
-  animation: font 7s step-end infinite;
-}
-
-@keyframes font {
-  0% {
-    font-weight: 100;
-    color: #e0287d;
-    filter: blur(3px);
-  }
-
-  20% {
-    font-weight: 500;
-    color: #fff;
-    filter: blur(0);
-  }
-
-  50% {
-    font-weight: 300;
-    color: #1bc7fb;
-    filter: blur(2px);
-  }
-
-  60% {
-    font-weight: 700;
-    color: #fff;
-    filter: blur(0);
-  }
-
-  90% {
-    font-weight: 500;
-    color: #e0287d;
-    filter: blur(6px);
-  }
-}
-
-.post-single-content .glitch span {
-  animation: paths 5s step-end infinite;
-}
-
-.post-single-content .glitch::before {
-  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
-    font 8s step-end infinite, movement 10s step-end infinite;
-}
-
-.post-single-content .glitch::after {
-  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
-    font 7s step-end infinite, movement 8s step-end infinite;
-}
-
-.post-single-content .hero-container {
-  position: relative;
-  padding: 200px 0;
-  text-align: center;
-}
-
-.post-single-content .environment {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  opacity: 0.5;
-  filter: blur(5px);
-  background: url(https://images.unsplash.com/photo-1602136773736-34d445b989cb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80)
-    center no-repeat;
-  background-size: cover;
-}
-
-</style>
-
-# The Effect
-
-{{< details "The Effect (What we are going to make)">}}
-<div class="hero-container">
-    <div class="environment"></div>
-    <h2 class="hero glitch layers" data-text="近設計"><span>近設計</span></h2>
-</div>
-{{< /details >}}
-
-## Walkthrough
-
-This came out of a 24-hour work sprint to replicate some sophisticated video VFX in to make it more flexible.
+This came out of a 24-hour work sprint to replicate some sophisticated video VFX and to make it more flexible.
 
 There's a lot of pieces that go into an effect like this. What follows is an outline of the animations and VFX concepts, all in pure css :)
 
@@ -534,6 +29,511 @@ There's a lot of pieces that go into an effect like this. What follows is an out
 
 ---
 
+<style>
+.post-single-content .hero {
+    font-size: clamp(40px, 10vw, 100px);
+    line-height: 1;
+    display: inline-block;
+    color: #fff;
+    z-index: 2;
+    letter-spacing: 10px;
+
+    /* Bright things in dark environments usually cast that light, giving off a glow */
+    filter: drop-shadow(0 1px 3px);
+}
+
+.post-single-content .demo {
+    height: 100px;
+    margin: 0 20px 0 20px;
+    background: #fff;
+}
+
+.post-single-content .layers {
+    position: relative;
+}
+
+.post-single-content .layers::before,
+.post-single-content .layers::after {
+    content: attr(data-text);
+    position: absolute;
+    width: 110%;
+    z-index: -1;
+}
+
+.post-single-content .layers::before {
+    top: 10px;
+    left: 15px;
+    color: #e0287d;
+}
+
+.post-single-content .layers::after {
+    top: 5px;
+    left: -10px;
+    color: #1bc7fb;
+}
+
+.post-single-content .single-path {
+    clip-path: polygon(
+        0% 12%,
+        53% 12%,
+        53% 26%,
+        25% 26%,
+        25% 86%,
+        31% 86%,
+        31% 0%,
+        53% 0%,
+        53% 84%,
+        92% 84%,
+        92% 82%,
+        70% 82%,
+        70% 29%,
+        78% 29%,
+        78% 65%,
+        69% 65%,
+        69% 66%,
+        77% 66%,
+        77% 45%,
+        85% 45%,
+        85% 26%,
+        97% 26%,
+        97% 28%,
+        84% 28%,
+        84% 34%,
+        54% 34%,
+        54% 89%,
+        30% 89%,
+        30% 58%,
+        83% 58%,
+        83% 5%,
+        68% 5%,
+        68% 36%,
+        62% 36%,
+        62% 1%,
+        12% 1%,
+        12% 34%,
+        60% 34%,
+        60% 57%,
+        98% 57%,
+        98% 83%,
+        1% 83%,
+        1% 53%,
+        91% 53%,
+        91% 84%,
+        8% 84%,
+        8% 83%,
+        4% 83%
+    );
+}
+
+.post-single-content .paths {
+    animation: paths 5s step-end infinite;
+}
+
+@keyframes paths {
+    0% {
+        clip-path: polygon(
+            0% 43%,
+            83% 43%,
+            83% 22%,
+            23% 22%,
+            23% 24%,
+            91% 24%,
+            91% 26%,
+            18% 26%,
+            18% 83%,
+            29% 83%,
+            29% 17%,
+            41% 17%,
+            41% 39%,
+            18% 39%,
+            18% 82%,
+            54% 82%,
+            54% 88%,
+            19% 88%,
+            19% 4%,
+            39% 4%,
+            39% 14%,
+            76% 14%,
+            76% 52%,
+            23% 52%,
+            23% 35%,
+            19% 35%,
+            19% 8%,
+            36% 8%,
+            36% 31%,
+            73% 31%,
+            73% 16%,
+            1% 16%,
+            1% 56%,
+            50% 56%,
+            50% 8%
+        );
+    }
+
+    5% {
+        clip-path: polygon(
+            0% 29%,
+            44% 29%,
+            44% 83%,
+            94% 83%,
+            94% 56%,
+            11% 56%,
+            11% 64%,
+            94% 64%,
+            94% 70%,
+            88% 70%,
+            88% 32%,
+            18% 32%,
+            18% 96%,
+            10% 96%,
+            10% 62%,
+            9% 62%,
+            9% 84%,
+            68% 84%,
+            68% 50%,
+            52% 50%,
+            52% 55%,
+            35% 55%,
+            35% 87%,
+            25% 87%,
+            25% 39%,
+            15% 39%,
+            15% 88%,
+            52% 88%
+        );
+    }
+
+    30% {
+        clip-path: polygon(
+            0% 53%,
+            93% 53%,
+            93% 62%,
+            68% 62%,
+            68% 37%,
+            97% 37%,
+            97% 89%,
+            13% 89%,
+            13% 45%,
+            51% 45%,
+            51% 88%,
+            17% 88%,
+            17% 54%,
+            81% 54%,
+            81% 75%,
+            79% 75%,
+            79% 76%,
+            38% 76%,
+            38% 28%,
+            61% 28%,
+            61% 12%,
+            55% 12%,
+            55% 62%,
+            68% 62%,
+            68% 51%,
+            0% 51%,
+            0% 92%,
+            63% 92%,
+            63% 4%,
+            65% 4%
+        );
+    }
+
+    45% {
+        clip-path: polygon(
+            0% 33%,
+            2% 33%,
+            2% 69%,
+            58% 69%,
+            58% 94%,
+            55% 94%,
+            55% 25%,
+            33% 25%,
+            33% 85%,
+            16% 85%,
+            16% 19%,
+            5% 19%,
+            5% 20%,
+            79% 20%,
+            79% 96%,
+            93% 96%,
+            93% 50%,
+            5% 50%,
+            5% 74%,
+            55% 74%,
+            55% 57%,
+            96% 57%,
+            96% 59%,
+            87% 59%,
+            87% 65%,
+            82% 65%,
+            82% 39%,
+            63% 39%,
+            63% 92%,
+            4% 92%,
+            4% 36%,
+            24% 36%,
+            24% 70%,
+            1% 70%,
+            1% 43%,
+            15% 43%,
+            15% 28%,
+            23% 28%,
+            23% 71%,
+            90% 71%,
+            90% 86%,
+            97% 86%,
+            97% 1%,
+            60% 1%,
+            60% 67%,
+            71% 67%,
+            71% 91%,
+            17% 91%,
+            17% 14%,
+            39% 14%,
+            39% 30%,
+            58% 30%,
+            58% 11%,
+            52% 11%,
+            52% 83%,
+            68% 83%
+        );
+    }
+
+    76% {
+        clip-path: polygon(
+            0% 26%,
+            15% 26%,
+            15% 73%,
+            72% 73%,
+            72% 70%,
+            77% 70%,
+            77% 75%,
+            8% 75%,
+            8% 42%,
+            4% 42%,
+            4% 61%,
+            17% 61%,
+            17% 12%,
+            26% 12%,
+            26% 63%,
+            73% 63%,
+            73% 43%,
+            90% 43%,
+            90% 67%,
+            50% 67%,
+            50% 41%,
+            42% 41%,
+            42% 46%,
+            50% 46%,
+            50% 84%,
+            96% 84%,
+            96% 78%,
+            49% 78%,
+            49% 25%,
+            63% 25%,
+            63% 14%
+        );
+    }
+
+    90% {
+        clip-path: polygon(
+            0% 41%,
+            13% 41%,
+            13% 6%,
+            87% 6%,
+            87% 93%,
+            10% 93%,
+            10% 13%,
+            89% 13%,
+            89% 6%,
+            3% 6%,
+            3% 8%,
+            16% 8%,
+            16% 79%,
+            0% 79%,
+            0% 99%,
+            92% 99%,
+            92% 90%,
+            5% 90%,
+            5% 60%,
+            0% 60%,
+            0% 48%,
+            89% 48%,
+            89% 13%,
+            80% 13%,
+            80% 43%,
+            95% 43%,
+            95% 19%,
+            80% 19%,
+            80% 85%,
+            38% 85%,
+            38% 62%
+        );
+    }
+
+    1%,
+    7%,
+    33%,
+    47%,
+    78%,
+    93% {
+        clip-path: none;
+    }
+}
+
+.post-single-content .movement {
+    /* Normally this position would be absolute & on the layers, set to relative here so we can see it on the div */
+    position: relative;
+    animation: movement 8s step-end infinite;
+}
+
+@keyframes movement {
+    0% {
+        top: 0px;
+        left: -20px;
+    }
+
+    15% {
+        top: 10px;
+        left: 10px;
+    }
+
+    60% {
+        top: 5px;
+        left: -10px;
+    }
+
+    75% {
+        top: -5px;
+        left: 20px;
+    }
+
+    100% {
+        top: 10px;
+        left: 5px;
+    }
+}
+
+.post-single-content .opacity {
+    animation: opacity 5s step-end infinite;
+}
+
+@keyframes opacity {
+    0% {
+        opacity: 0.1;
+    }
+
+    5% {
+        opacity: 0.7;
+    }
+
+    30% {
+        opacity: 0.4;
+    }
+
+    45% {
+        opacity: 0.6;
+    }
+
+    76% {
+        opacity: 0.4;
+    }
+
+    90% {
+        opacity: 0.8;
+    }
+
+    1%,
+    7%,
+    33%,
+    47%,
+    78%,
+    93% {
+        opacity: 0;
+    }
+}
+
+.post-single-content .font {
+    animation: font 7s step-end infinite;
+}
+
+@keyframes font {
+    0% {
+        font-weight: 100;
+        color: #e0287d;
+        filter: blur(3px);
+    }
+
+    20% {
+        font-weight: 500;
+        color: #fff;
+        filter: blur(0);
+    }
+
+    50% {
+        font-weight: 300;
+        color: #1bc7fb;
+        filter: blur(2px);
+    }
+
+    60% {
+        font-weight: 700;
+        color: #fff;
+        filter: blur(0);
+    }
+
+    90% {
+        font-weight: 500;
+        color: #e0287d;
+        filter: blur(6px);
+    }
+}
+
+.post-single-content .glitch span {
+    animation: paths 5s step-end infinite;
+}
+
+.post-single-content .glitch::before {
+    animation: paths 5s step-end infinite, opacity 5s step-end infinite,
+        font 8s step-end infinite, movement 10s step-end infinite;
+}
+
+.post-single-content .glitch::after {
+    animation: paths 5s step-end infinite, opacity 5s step-end infinite,
+        font 7s step-end infinite, movement 8s step-end infinite;
+}
+
+.post-single-content .hero-container {
+    position: relative;
+    padding: 200px 0;
+    text-align: center;
+}
+
+.post-single-content .environment {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0.5;
+    filter: blur(5px);
+    background: url(https://images.unsplash.com/photo-1602136773736-34d445b989cb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80)
+        center no-repeat;
+    background-size: cover;
+}
+</style>
+
+## The Effect
+
+This is how the complete effect looks like
+
+{{< details "The Effect (What we are going to make)">}}
+<div class="hero-container">
+    <div class="environment"></div>
+    <h2 class="hero glitch layers" data-text="近設計"><span>近設計</span></h2>
+</div>
+{{< /details >}}
+
 ## Layers
 
 Create multiple layers to play with. For this example I'll use `::before` & `::after` elements, but this could just as easily be multiple div's overlapped, or whatever.
@@ -544,27 +544,27 @@ Create multiple layers to play with. For this example I'll use `::before` & `::a
 
 ```css {linenos=true}
 .layers {
-  position: relative;
+    position: relative;
 }
 
 .layers::before,
 .layers::after {
-  content: attr(data-text);
-  position: absolute;
-  width: 110%;
-  z-index: -1;
+    content: attr(data-text);
+    position: absolute;
+    width: 110%;
+    z-index: -1;
 }
 
 .layers::before {
-  top: 10px;
-  left: 15px;
-  color: #e0287d;
+    top: 10px;
+    left: 15px;
+    color: #e0287d;
 }
 
 .layers::after {
-  top: 5px;
-  left: -10px;
-  color: #1bc7fb;
+    top: 5px;
+    left: -10px;
+    color: #1bc7fb;
 }
 ```
 
@@ -572,7 +572,7 @@ Create multiple layers to play with. For this example I'll use `::before` & `::a
 
 ## Paths
 
-Build out a set of clip-paths (I wrote up a <a href="/tools/randomly-generated-clip-path/">generator util</a> for this project)
+Build out a set of clip-paths (I wrote up a [generator util](/tools/randomly-generated-clip-path/) for this project)
 
 **Example Path:**
 
@@ -586,312 +586,312 @@ Build out a set of clip-paths (I wrote up a <a href="/tools/randomly-generated-c
 
 ```css {linenos=true}
 .single-path {
-  clip-path: polygon(
-    0% 12%,
-    53% 12%,
-    53% 26%,
-    25% 26%,
-    25% 86%,
-    31% 86%,
-    31% 0%,
-    53% 0%,
-    53% 84%,
-    92% 84%,
-    92% 82%,
-    70% 82%,
-    70% 29%,
-    78% 29%,
-    78% 65%,
-    69% 65%,
-    69% 66%,
-    77% 66%,
-    77% 45%,
-    85% 45%,
-    85% 26%,
-    97% 26%,
-    97% 28%,
-    84% 28%,
-    84% 34%,
-    54% 34%,
-    54% 89%,
-    30% 89%,
-    30% 58%,
-    83% 58%,
-    83% 5%,
-    68% 5%,
-    68% 36%,
-    62% 36%,
-    62% 1%,
-    12% 1%,
-    12% 34%,
-    60% 34%,
-    60% 57%,
-    98% 57%,
-    98% 83%,
-    1% 83%,
-    1% 53%,
-    91% 53%,
-    91% 84%,
-    8% 84%,
-    8% 83%,
-    4% 83%
-  );
+    clip-path: polygon(
+        0% 12%,
+        53% 12%,
+        53% 26%,
+        25% 26%,
+        25% 86%,
+        31% 86%,
+        31% 0%,
+        53% 0%,
+        53% 84%,
+        92% 84%,
+        92% 82%,
+        70% 82%,
+        70% 29%,
+        78% 29%,
+        78% 65%,
+        69% 65%,
+        69% 66%,
+        77% 66%,
+        77% 45%,
+        85% 45%,
+        85% 26%,
+        97% 26%,
+        97% 28%,
+        84% 28%,
+        84% 34%,
+        54% 34%,
+        54% 89%,
+        30% 89%,
+        30% 58%,
+        83% 58%,
+        83% 5%,
+        68% 5%,
+        68% 36%,
+        62% 36%,
+        62% 1%,
+        12% 1%,
+        12% 34%,
+        60% 34%,
+        60% 57%,
+        98% 57%,
+        98% 83%,
+        1% 83%,
+        1% 53%,
+        91% 53%,
+        91% 84%,
+        8% 84%,
+        8% 83%,
+        4% 83%
+    );
 }
 
 .paths {
-  animation: paths 5s step-end infinite;
+    animation: paths 5s step-end infinite;
 }
 
 @keyframes paths {
-  0% {
-    clip-path: polygon(
-      0% 43%,
-      83% 43%,
-      83% 22%,
-      23% 22%,
-      23% 24%,
-      91% 24%,
-      91% 26%,
-      18% 26%,
-      18% 83%,
-      29% 83%,
-      29% 17%,
-      41% 17%,
-      41% 39%,
-      18% 39%,
-      18% 82%,
-      54% 82%,
-      54% 88%,
-      19% 88%,
-      19% 4%,
-      39% 4%,
-      39% 14%,
-      76% 14%,
-      76% 52%,
-      23% 52%,
-      23% 35%,
-      19% 35%,
-      19% 8%,
-      36% 8%,
-      36% 31%,
-      73% 31%,
-      73% 16%,
-      1% 16%,
-      1% 56%,
-      50% 56%,
-      50% 8%
-    );
-  }
+    0% {
+        clip-path: polygon(
+            0% 43%,
+            83% 43%,
+            83% 22%,
+            23% 22%,
+            23% 24%,
+            91% 24%,
+            91% 26%,
+            18% 26%,
+            18% 83%,
+            29% 83%,
+            29% 17%,
+            41% 17%,
+            41% 39%,
+            18% 39%,
+            18% 82%,
+            54% 82%,
+            54% 88%,
+            19% 88%,
+            19% 4%,
+            39% 4%,
+            39% 14%,
+            76% 14%,
+            76% 52%,
+            23% 52%,
+            23% 35%,
+            19% 35%,
+            19% 8%,
+            36% 8%,
+            36% 31%,
+            73% 31%,
+            73% 16%,
+            1% 16%,
+            1% 56%,
+            50% 56%,
+            50% 8%
+        );
+    }
 
-  5% {
-    clip-path: polygon(
-      0% 29%,
-      44% 29%,
-      44% 83%,
-      94% 83%,
-      94% 56%,
-      11% 56%,
-      11% 64%,
-      94% 64%,
-      94% 70%,
-      88% 70%,
-      88% 32%,
-      18% 32%,
-      18% 96%,
-      10% 96%,
-      10% 62%,
-      9% 62%,
-      9% 84%,
-      68% 84%,
-      68% 50%,
-      52% 50%,
-      52% 55%,
-      35% 55%,
-      35% 87%,
-      25% 87%,
-      25% 39%,
-      15% 39%,
-      15% 88%,
-      52% 88%
-    );
-  }
+    5% {
+        clip-path: polygon(
+            0% 29%,
+            44% 29%,
+            44% 83%,
+            94% 83%,
+            94% 56%,
+            11% 56%,
+            11% 64%,
+            94% 64%,
+            94% 70%,
+            88% 70%,
+            88% 32%,
+            18% 32%,
+            18% 96%,
+            10% 96%,
+            10% 62%,
+            9% 62%,
+            9% 84%,
+            68% 84%,
+            68% 50%,
+            52% 50%,
+            52% 55%,
+            35% 55%,
+            35% 87%,
+            25% 87%,
+            25% 39%,
+            15% 39%,
+            15% 88%,
+            52% 88%
+        );
+    }
 
-  30% {
-    clip-path: polygon(
-      0% 53%,
-      93% 53%,
-      93% 62%,
-      68% 62%,
-      68% 37%,
-      97% 37%,
-      97% 89%,
-      13% 89%,
-      13% 45%,
-      51% 45%,
-      51% 88%,
-      17% 88%,
-      17% 54%,
-      81% 54%,
-      81% 75%,
-      79% 75%,
-      79% 76%,
-      38% 76%,
-      38% 28%,
-      61% 28%,
-      61% 12%,
-      55% 12%,
-      55% 62%,
-      68% 62%,
-      68% 51%,
-      0% 51%,
-      0% 92%,
-      63% 92%,
-      63% 4%,
-      65% 4%
-    );
-  }
+    30% {
+        clip-path: polygon(
+            0% 53%,
+            93% 53%,
+            93% 62%,
+            68% 62%,
+            68% 37%,
+            97% 37%,
+            97% 89%,
+            13% 89%,
+            13% 45%,
+            51% 45%,
+            51% 88%,
+            17% 88%,
+            17% 54%,
+            81% 54%,
+            81% 75%,
+            79% 75%,
+            79% 76%,
+            38% 76%,
+            38% 28%,
+            61% 28%,
+            61% 12%,
+            55% 12%,
+            55% 62%,
+            68% 62%,
+            68% 51%,
+            0% 51%,
+            0% 92%,
+            63% 92%,
+            63% 4%,
+            65% 4%
+        );
+    }
 
-  45% {
-    clip-path: polygon(
-      0% 33%,
-      2% 33%,
-      2% 69%,
-      58% 69%,
-      58% 94%,
-      55% 94%,
-      55% 25%,
-      33% 25%,
-      33% 85%,
-      16% 85%,
-      16% 19%,
-      5% 19%,
-      5% 20%,
-      79% 20%,
-      79% 96%,
-      93% 96%,
-      93% 50%,
-      5% 50%,
-      5% 74%,
-      55% 74%,
-      55% 57%,
-      96% 57%,
-      96% 59%,
-      87% 59%,
-      87% 65%,
-      82% 65%,
-      82% 39%,
-      63% 39%,
-      63% 92%,
-      4% 92%,
-      4% 36%,
-      24% 36%,
-      24% 70%,
-      1% 70%,
-      1% 43%,
-      15% 43%,
-      15% 28%,
-      23% 28%,
-      23% 71%,
-      90% 71%,
-      90% 86%,
-      97% 86%,
-      97% 1%,
-      60% 1%,
-      60% 67%,
-      71% 67%,
-      71% 91%,
-      17% 91%,
-      17% 14%,
-      39% 14%,
-      39% 30%,
-      58% 30%,
-      58% 11%,
-      52% 11%,
-      52% 83%,
-      68% 83%
-    );
-  }
+    45% {
+        clip-path: polygon(
+            0% 33%,
+            2% 33%,
+            2% 69%,
+            58% 69%,
+            58% 94%,
+            55% 94%,
+            55% 25%,
+            33% 25%,
+            33% 85%,
+            16% 85%,
+            16% 19%,
+            5% 19%,
+            5% 20%,
+            79% 20%,
+            79% 96%,
+            93% 96%,
+            93% 50%,
+            5% 50%,
+            5% 74%,
+            55% 74%,
+            55% 57%,
+            96% 57%,
+            96% 59%,
+            87% 59%,
+            87% 65%,
+            82% 65%,
+            82% 39%,
+            63% 39%,
+            63% 92%,
+            4% 92%,
+            4% 36%,
+            24% 36%,
+            24% 70%,
+            1% 70%,
+            1% 43%,
+            15% 43%,
+            15% 28%,
+            23% 28%,
+            23% 71%,
+            90% 71%,
+            90% 86%,
+            97% 86%,
+            97% 1%,
+            60% 1%,
+            60% 67%,
+            71% 67%,
+            71% 91%,
+            17% 91%,
+            17% 14%,
+            39% 14%,
+            39% 30%,
+            58% 30%,
+            58% 11%,
+            52% 11%,
+            52% 83%,
+            68% 83%
+        );
+    }
 
-  76% {
-    clip-path: polygon(
-      0% 26%,
-      15% 26%,
-      15% 73%,
-      72% 73%,
-      72% 70%,
-      77% 70%,
-      77% 75%,
-      8% 75%,
-      8% 42%,
-      4% 42%,
-      4% 61%,
-      17% 61%,
-      17% 12%,
-      26% 12%,
-      26% 63%,
-      73% 63%,
-      73% 43%,
-      90% 43%,
-      90% 67%,
-      50% 67%,
-      50% 41%,
-      42% 41%,
-      42% 46%,
-      50% 46%,
-      50% 84%,
-      96% 84%,
-      96% 78%,
-      49% 78%,
-      49% 25%,
-      63% 25%,
-      63% 14%
-    );
-  }
+    76% {
+        clip-path: polygon(
+            0% 26%,
+            15% 26%,
+            15% 73%,
+            72% 73%,
+            72% 70%,
+            77% 70%,
+            77% 75%,
+            8% 75%,
+            8% 42%,
+            4% 42%,
+            4% 61%,
+            17% 61%,
+            17% 12%,
+            26% 12%,
+            26% 63%,
+            73% 63%,
+            73% 43%,
+            90% 43%,
+            90% 67%,
+            50% 67%,
+            50% 41%,
+            42% 41%,
+            42% 46%,
+            50% 46%,
+            50% 84%,
+            96% 84%,
+            96% 78%,
+            49% 78%,
+            49% 25%,
+            63% 25%,
+            63% 14%
+        );
+    }
 
-  90% {
-    clip-path: polygon(
-      0% 41%,
-      13% 41%,
-      13% 6%,
-      87% 6%,
-      87% 93%,
-      10% 93%,
-      10% 13%,
-      89% 13%,
-      89% 6%,
-      3% 6%,
-      3% 8%,
-      16% 8%,
-      16% 79%,
-      0% 79%,
-      0% 99%,
-      92% 99%,
-      92% 90%,
-      5% 90%,
-      5% 60%,
-      0% 60%,
-      0% 48%,
-      89% 48%,
-      89% 13%,
-      80% 13%,
-      80% 43%,
-      95% 43%,
-      95% 19%,
-      80% 19%,
-      80% 85%,
-      38% 85%,
-      38% 62%
-    );
-  }
+    90% {
+        clip-path: polygon(
+            0% 41%,
+            13% 41%,
+            13% 6%,
+            87% 6%,
+            87% 93%,
+            10% 93%,
+            10% 13%,
+            89% 13%,
+            89% 6%,
+            3% 6%,
+            3% 8%,
+            16% 8%,
+            16% 79%,
+            0% 79%,
+            0% 99%,
+            92% 99%,
+            92% 90%,
+            5% 90%,
+            5% 60%,
+            0% 60%,
+            0% 48%,
+            89% 48%,
+            89% 13%,
+            80% 13%,
+            80% 43%,
+            95% 43%,
+            95% 19%,
+            80% 19%,
+            80% 85%,
+            38% 85%,
+            38% 62%
+        );
+    }
 
-  1%,
-  7%,
-  33%,
-  47%,
-  78%,
-  93% {
-    clip-path: none;
-  }
+    1%,
+    7%,
+    33%,
+    47%,
+    78%,
+    93% {
+        clip-path: none;
+    }
 }
 ```
 
@@ -958,42 +958,42 @@ There's an art to getting this transition to work without making the user feel m
 
 ```css {linenos=true}
 .opacity {
-  animation: opacity 5s step-end infinite;
+    animation: opacity 5s step-end infinite;
 }
 
 @keyframes opacity {
-  0% {
-    opacity: 0.1;
-  }
+    0% {
+        opacity: 0.1;
+    }
 
-  5% {
-    opacity: 0.7;
-  }
+    5% {
+        opacity: 0.7;
+    }
 
-  30% {
-    opacity: 0.4;
-  }
+    30% {
+        opacity: 0.4;
+    }
 
-  45% {
-    opacity: 0.6;
-  }
+    45% {
+        opacity: 0.6;
+    }
 
-  76% {
-    opacity: 0.4;
-  }
+    76% {
+        opacity: 0.4;
+    }
 
-  90% {
-    opacity: 0.8;
-  }
+    90% {
+        opacity: 0.8;
+    }
 
-  1%,
-  7%,
-  33%,
-  47%,
-  78%,
-  93% {
-    opacity: 0;
-  }
+    1%,
+    7%,
+    33%,
+    47%,
+    78%,
+    93% {
+        opacity: 0;
+    }
 }
 ```
 
@@ -1009,39 +1009,39 @@ The next layer is changes to the font directly. These could be any properties, b
 
 ```css {linenos=true}
 .font {
-  animation: font 7s step-end infinite;
+    animation: font 7s step-end infinite;
 }
 
 @keyframes font {
-  0% {
-    font-weight: 100;
-    color: #e0287d;
-    filter: blur(3px);
-  }
+    0% {
+        font-weight: 100;
+        color: #e0287d;
+        filter: blur(3px);
+    }
 
-  20% {
-    font-weight: 500;
-    color: #fff;
-    filter: blur(0);
-  }
+    20% {
+        font-weight: 500;
+        color: #fff;
+        filter: blur(0);
+    }
 
-  50% {
-    font-weight: 300;
-    color: #1bc7fb;
-    filter: blur(2px);
-  }
+    50% {
+        font-weight: 300;
+        color: #1bc7fb;
+        filter: blur(2px);
+    }
 
-  60% {
-    font-weight: 700;
-    color: #fff;
-    filter: blur(0);
-  }
+    60% {
+        font-weight: 700;
+        color: #fff;
+        filter: blur(0);
+    }
 
-  90% {
-    font-weight: 500;
-    color: #e0287d;
-    filter: blur(6px);
-  }
+    90% {
+        font-weight: 500;
+        color: #e0287d;
+        filter: blur(6px);
+    }
 }
 ```
 
@@ -1063,17 +1063,17 @@ Then I try to separately sync the color/text/filter other effects, and keep the
 
 ```css {linenos=true}
 .glitch span {
-  animation: paths 5s step-end infinite;
+    animation: paths 5s step-end infinite;
 }
 
 .glitch::before {
-  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
-    font 8s step-end infinite, movement 10s step-end infinite;
+    animation: paths 5s step-end infinite, opacity 5s step-end infinite,
+        font 8s step-end infinite, movement 10s step-end infinite;
 }
 
 .glitch::after {
-  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
-    font 7s step-end infinite, movement 8s step-end infinite;
+    animation: paths 5s step-end infinite, opacity 5s step-end infinite,
+        font 7s step-end infinite, movement 8s step-end infinite;
 }
 ```
 
@@ -1096,22 +1096,22 @@ background image from: [unsplash.com](https://images.unsplash.com/photo-16021367
 
 ```css {linenos=true}
 .hero-container {
-  position: relative;
-  padding: 200px 0;
-  text-align: center;
+    position: relative;
+    padding: 200px 0;
+    text-align: center;
 }
 
 .environment {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  opacity: 0.5;
-  filter: blur(5px);
-  background: url(https://images.unsplash.com/photo-1602136773736-34d445b989cb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80)
-    center no-repeat;
-  background-size: cover;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0.5;
+    filter: blur(5px);
+    background: url(https://images.unsplash.com/photo-1602136773736-34d445b989cb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80)
+        center no-repeat;
+    background-size: cover;
 }
 ```
 
diff --git a/static/img/avatar-100.png b/static/img/avatar-100.png
new file mode 100644
index 0000000..75a553e
Binary files /dev/null and b/static/img/avatar-100.png differ
diff --git a/static/img/avatar-512.png b/static/img/avatar-512.png
new file mode 100644
index 0000000..b7fd55c
Binary files /dev/null and b/static/img/avatar-512.png differ
diff --git a/themes/Rinkusu b/themes/Rinkusu
index 2c47cd3..8a56aca 160000
--- a/themes/Rinkusu
+++ b/themes/Rinkusu
@@ -1 +1 @@
-Subproject commit 2c47cd338caf1f807f7c5e831009bd8d0a68d55b
+Subproject commit 8a56acab670e949152919c8201b837eca1300996