Fix: reorder "The Effet" section

content/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough.md

@@ -506,16 +506,7 @@ slug: cyberpunk-style-glitch-text-walkthrough
 }
 </style>
 
-# The Effect
+# Walkthrough
-
-{{< 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 and to make it more flexible.
 
@@ -534,6 +525,17 @@ There's a lot of pieces that go into an effect like this. What follows is an out
 
 ---
 
+## 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.