fix: Re-order items on coding page

Author: ripixel

Diff for: pages/coding.html

@@ -9,6 +9,63 @@
     <main class="coding">
       <p>Shall we take a look at some projects I&apos;ve done?</p>
       <section class="area">
+        <section class="area">
+          <h3>Presentation Timer</h3>
+          <p>
+            A simple presentation countdown timer with music streaming for use
+            on streams/presentations - because every stream could use some
+            suspense and music!
+          </p>
+          <p>
+            When doing presentations, it's nice to have a countdown to the start
+            at the beginning, and it's even nicer to have some music playing in
+            the background. However, combining these two things usually means a
+            lot of messing around with audio inputs/outputs, or you just resort
+            to playing the music out your speakers and detecting it with your
+            microphone, or capturing your entire machine's audio.
+          </p>
+          <p>
+            Having the presentation countdown and the music playing in the same
+            tab means most streaming tools can pick up the audio in a nice way.
+          </p>
+          <a class="button" href="https://pt.ripixel.co.uk"
+            >Start that countdown</a
+          >
+          <a class="button" href="https://github.com/ripixel/presentation-timer"
+            >GitHub Repo</a
+          >
+        </section>
+        <section class="area">
+          <h3>Janky Werewolf</h3>
+          <p>A browser-based version of the Ultimate Werewolf card game</p>
+          <p>
+            Created during the great-lockdown of &apos;20, my friends and I
+            adore the Ultimate Werewolf game, and would play it every evening
+            whenever we met up. However, as meetings turned virtual, there was
+            no way to do this! So what did we do as a bunch of CompSci nerds?
+            Create our own web version of course!
+          </p>
+          <p>
+            The front-end is made in React, utilising Websockets to talk to
+            lambdas that handle the running of the game and tracking of game
+            state (aka who&apos;s dead Jim). The back-end is written by
+            <a href="https://www.mgoddard.net/">Michael Goddard</a>, the big
+            ol&apos; Rust nerd.
+          </p>
+          <a class="button" href="https://www.jankywerewolf.co.uk"
+            >Check it out</a
+          >
+          <a
+            class="button"
+            href="https://github.com/ripixel/janky-werewolf-client"
+            >GitHub Repo (FE)</a
+          >
+          <a
+            class="button"
+            href="https://github.com/mcgoddard/janky_werewolf_backend"
+            >GitHub Repo (BE)</a
+          >
+        </section>
         <h3>ripixel.co.uk</h3>
         <p>
           This website! It&apos;s cool, isn&apos;t it? Why use a static site
@@ -34,63 +91,6 @@ <h3>ripixel.co.uk</h3>
           >GitHub Repo</a
         >
       </section>
-      <section class="area">
-        <h3>Janky Werewolf</h3>
-        <p>A browser-based version of the Ultimate Werewolf card game</p>
-        <p>
-          Created during the great-lockdown of &apos;20, my friends and I adore
-          the Ultimate Werewolf game, and would play it every evening whenever
-          we met up. However, as meetings turned virtual, there was no way to do
-          this! So what did we do as a bunch of CompSci nerds? Create our own
-          web version of course!
-        </p>
-        <p>
-          The front-end is made in React, utilising Websockets to talk to
-          lambdas that handle the running of the game and tracking of game state
-          (aka who&apos;s dead Jim). The back-end is written by
-          <a href="https://www.mgoddard.net/">Michael Goddard</a>, the big
-          ol&apos; Rust nerd.
-        </p>
-        <a class="button" href="https://www.jankywerewolf.co.uk"
-          >Check it out</a
-        >
-        <a
-          class="button"
-          href="https://github.com/ripixel/janky-werewolf-client"
-          >GitHub Repo (FE)</a
-        >
-        <a
-          class="button"
-          href="https://github.com/mcgoddard/janky_werewolf_backend"
-          >GitHub Repo (BE)</a
-        >
-      </section>
-      <section class="area">
-        <h3>Presentation Timer</h3>
-        <p>
-          A simple presentation countdown timer with music streaming for use on
-          streams/presentations - because every stream could use some suspense
-          and music!
-        </p>
-        <p>
-          When doing presentations, it's nice to have a countdown to the start
-          at the beginning, and it's even nicer to have some music playing in
-          the background. However, combining these two things usually means a
-          lot of messing around with audio inputs/outputs, or you just resort to
-          playing the music out your speakers and detecting it with your
-          microphone, or capturing your entire machine's audio.
-        </p>
-        <p>
-          Having the presentation countdown and the music playing in the same
-          tab means most streaming tools can pick up the audio in a nice way.
-        </p>
-        <a class="button" href="https://pt.ripixel.co.uk"
-          >Start that countdown</a
-        >
-        <a class="button" href="https://github.com/ripixel/presentation-timer"
-          >GitHub Repo</a
-        >
-      </section>
     </main>
 
     {footer.html}