diff --git a/about.html b/about.html
index 07a0eaf..c8f7f24 100644
--- a/about.html
+++ b/about.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html lang = en-gb>
     <head>
         <meta charset = utf-8>
         <meta name = viewport content = 'width = device-width, initial-scale = 1'>
-        <meta name = keywords content = 'Joachim Ford, JavaScript games, Ios Mission'>
+        <meta name = description content = 'Free online coding blogs and open source indie games'>
 
         <script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
-        <script src = /js/analytics.js></script>
-        <script src = /js/main.js></script>
+        <script src = /src/js/analytics.js></script>
+        <script src = /src/js/main.js></script>
         <title>About | Joachim Ford</title>
-        <link rel = stylesheet href = /main.css>
-        <link rel = icon type = image/x-icon  href = /favs/favicon.ico>
+        <link rel = stylesheet href = /src/main.css>
+        <link rel = icon type = image/x-icon  href = /src/favs/favicon.ico>
         <style>
             h1 {
                 margin-left: auto;
@@ -39,14 +39,14 @@
             </div>
             <div class = nav>
                 <a href = /games>Games</a>
-                <a href = /experiments>Experiments</a>
-                <a href = /articles>Articles</a>
+                <a href = /projects>Projects</a>
+                <a href = /blogs>Blogs</a>
                 <a href = /news>News</a>
             </div>
         </section>
 
         <section class = main>
-            <img class = me src = images/me.png>
+            <img class = me src = /src/images/me.png>
 
             <div class = demo>
                 <span>
@@ -103,16 +103,16 @@ <h3>Things I've worked on...</h3>
                 <a class = normal href = https://canvas-craft.github.io target = _blank>CanvasCraft</a>,
                 which was created for the purpose of making game world design easier.</p>
                 <div class = big>
-                    <img class = img src = /images/canvas_craft_bio.png>
+                    <img class = img src = /src/images/canvas_craft_bio.png>
                 </div>
             </div>
         </section>
 
         <button class = theme onclick = toggleTheme()>Change Theme</button>
         <span class = copyright>
-            © Copyright <span class = year></span> joachimford.uk
-            <a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></img></a>
-            <a href = mailto:hello@joachimford.uk><img src = /images/mail.svg></img></a>
+            &copy; <span class = year></span> Joachim Ford. All rights reserved.
+            <a href = https://github.com/Hope41 target = _blank><img src = /src/images/github.svg></img></a>
+            <a href = mailto:hello@joachimford.uk><img src = /src/images/mail.svg></img></a>
         </span>
     </body>
 </html>
diff --git a/articles.html b/blogs.html
similarity index 57%
rename from articles.html
rename to blogs.html
index 17a19ea..95958cc 100644
--- a/articles.html
+++ b/blogs.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html lang = en-gb>
     <head>
         <meta charset = utf-8>
         <meta name = viewport content = 'width = device-width, initial-scale = 1'>
-        <meta name = keywords content = 'Joachim Ford, procedural generation, procedural worlds'>
+        <meta name = description content = 'Free online coding blogs and open source games'>
 
         <script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
-        <script src = /js/analytics.js></script>
-        <script src = /js/main.js></script>
-        <title>Articles | Joachim Ford</title>
-        <link rel = stylesheet href = /main.css>
-        <link rel = icon type = image/x-icon  href = /favs/favicon.ico>
+        <script src = /src/js/analytics.js></script>
+        <script src = /src/js/main.js></script>
+        <title>Blogs | Joachim Ford</title>
+        <link rel = stylesheet href = /src/main.css>
+        <link rel = icon type = image/x-icon  href = /src/favs/favicon.ico>
     </head>
 
     <body>
@@ -21,15 +21,15 @@
             </div>
             <div class = nav>
                 <a href = /games>Games</a>
-                <a href = /experiments>Experiments</a>
-                <a href = /articles>Articles</a>
+                <a href = /projects>Projects</a>
+                <a href = /blogs>Blogs</a>
                 <a href = /news>News</a>
             </div>
         </section>
 
         <section class = main>
-            <a class = demo href = articles/3_tips_for_game_development>
-                <img class = tiny src = /articles/extra/3_tips_for_game_development/1.png>
+            <a class = demo href = /src/blogs/3_tips_for_game_development>
+                <img class = tiny src = /src/blogs/extra/3_tips_for_game_development/1.png>
                 <h3>3 Tips for Game Development</h3>
                 <span class = description>
                     Ever wanted to create your own games, but wondered where to begin?
@@ -38,42 +38,42 @@ <h3>3 Tips for Game Development</h3>
                 </span>
             </a>
 
-            <a class = demo href = articles/splash_dash_tutorial>
-                <img class = tiny src = /articles/extra/splash_dash_tutorial/1.png>
+            <a class = demo href = /src/blogs/splash_dash_tutorial>
+                <img class = tiny src = /src/blogs/extra/splash_dash_tutorial/1.png>
                 <h3>The Splash Dash Tutorial</h3>
                 <span class = description>
                     Making a playable JavaScript game in just over 1000 characters
-                    is a difficult but motivating challenge. This article explains how
+                    is a difficult but motivating challenge. This blog explains how
                     the game <b>Splash Dash</b> was made to fit within just 1024 bytes
                 </span>
             </a>
 
-            <a class = demo href = articles/making_games_the_bits_that_nobody_notices>
-                <img class = tiny src = /articles/extra/making_games_the_bits_that_nobody_notices/1.png>
+            <a class = demo href = /src/blogs/making_games_the_bits_that_nobody_notices>
+                <img class = tiny src = /src/blogs/extra/making_games_the_bits_that_nobody_notices/1.png>
                 <h3>Making games: The Bits That Nobody Notices</h3>
                 <span class = description>
                     Adding details to the game of Io's Mission
                 </span>
             </a>
 
-            <a class = demo href = articles/using_inverse_kinematics_to_animate_your_character>
-                <img class = tiny src = /articles/extra/using_inverse_kinematics_to_animate_your_character/1.png>
+            <a class = demo href = /src/blogs/using_inverse_kinematics_to_animate_your_character>
+                <img class = tiny src = /src/blogs/extra/using_inverse_kinematics_to_animate_your_character/1.png>
                 <h3>Using Inverse Kinematics to Animate Your Character</h3>
                 <span class = description>
                     How to implement smooth character animations
                 </span>
             </a>
 
-            <a class = demo href = articles/create_and_animate_enemies_using_shapes>
-                <img class = tiny src = /articles/extra/create_and_animate_enemies_using_shapes/1.png>
+            <a class = demo href = /src/blogs/create_and_animate_enemies_using_shapes>
+                <img class = tiny src = /src/blogs/extra/create_and_animate_enemies_using_shapes/1.png>
                 <h3>Create and Animate Enemies Using Shapes</h3>
                 <span class = description>
                     How to animate and display enemies using rectangles
                 </span>
             </a>
 
-            <a class = demo href = articles/procedural_room_generation_snakes_and_ladders>
-                <img class = tiny src = /articles/extra/procedural_room_generation_snakes_and_ladders/1.png>
+            <a class = demo href = /src/blogs/procedural_room_generation_snakes_and_ladders>
+                <img class = tiny src = /src/blogs/extra/procedural_room_generation_snakes_and_ladders/1.png>
                 <h3>Procedural Room Generation - Snakes and Ladders</h3>
                 <span class = description>
                     How the levels of Snakes and Ladders were generated
@@ -83,9 +83,9 @@ <h3>Procedural Room Generation - Snakes and Ladders</h3>
 
         <button class = theme onclick = toggleTheme()>Change Theme</button>
         <span class = copyright>
-            © Copyright <span class = year></span> joachimford.uk
-            <a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></img></a>
-            <a href = mailto:hello@joachimford.uk><img src = /images/mail.svg></img></a>
+            &copy; <span class = year></span> Joachim Ford. All rights reserved.
+            <a href = https://github.com/Hope41 target = _blank><img src = /src/images/github.svg></img></a>
+            <a href = mailto:hello@joachimford.uk><img src = /src/images/mail.svg></img></a>
         </span>
     </body>
 </html>
\ No newline at end of file
diff --git a/games.html b/games.html
index 193e87b..09b152b 100644
--- a/games.html
+++ b/games.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html lang = en-gb>
     <head>
         <meta charset = utf-8>
         <meta name = viewport content = 'width = device-width, initial-scale = 1'>
-        <meta name = keywords content = 'Joachim Ford, JavaScript games, HTML5 games'>
+        <meta name = description content = 'Free online coding blogs and open source games'>
 
         <script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
-        <script src = /js/analytics.js></script>
-        <script src = /js/main.js></script>
+        <script src = /src/js/analytics.js></script>
+        <script src = /src/js/main.js></script>
         <title>Games | Joachim Ford</title>
-        <link rel = stylesheet href = /main.css>
-        <link rel = icon type = image/x-icon href = /favs/favicon.ico>
+        <link rel = stylesheet href = /src/main.css>
+        <link rel = icon type = image/x-icon  href = /src/favs/favicon.ico>
     </head>
 
     <body>
@@ -21,15 +21,15 @@
             </div>
             <div class = nav>
                 <a href = /games>Games</a>
-                <a href = /experiments>Experiments</a>
-                <a href = /articles>Articles</a>
+                <a href = /projects>Projects</a>
+                <a href = /blogs>Blogs</a>
                 <a href = /news>News</a>
             </div>
         </section>
 
         <section class = main>
-            <a class = demo href = content/squirtcopter>
-                <img class = tiny src = images/squirtcopter.png>
+            <a class = demo href = /src/content/squirtcopter>
+                <img class = tiny src = /src/images/squirtcopter.png>
                 <h3>Squirtcopter</h3>
                 <span class = description>
                     <p><b>Squirt your way to victory!</b> Squirtcopter is a fully-featured
@@ -39,8 +39,8 @@ <h3>Squirtcopter</h3>
                 </span>
             </a>
 
-            <a class = demo href = content/ios_mission>
-                <img class = tiny src = images/ios_mission.png>
+            <a class = demo href = /src/content/ios_mission>
+                <img class = tiny src = /src/images/ios_mission.png>
                 <h3>Io's Mission</h3>
                 <span class = description>
                     <p>Drillo has been captured by The Great Ominous!
@@ -51,8 +51,8 @@ <h3>Io's Mission</h3>
                 </span>
             </a>
 
-            <a class = demo href = content/snakes_and_ladders>
-                <img class = tiny src = images/snakes_and_ladders.png>
+            <a class = demo href = /src/content/snakes_and_ladders>
+                <img class = tiny src = /src/images/snakes_and_ladders.png>
                 <h3>Snakes And Ladders</h3>
                 <span class = description>
                     <p>On a mission to destroy the X-Ray Orb, help Drillo make his way through
@@ -62,8 +62,8 @@ <h3>Snakes And Ladders</h3>
                 </span>
             </a>
 
-            <a class = demo href = content/the_mitigator>
-                <img class = tiny src = images/the_mitigator.png>
+            <a class = demo href = /src/content/the_mitigator>
+                <img class = tiny src = /src/images/the_mitigator.png>
                 <h3>The Mitigator</h3>
                 <span class = description>
                     <p>Save the planet by collecting litter, planting seeds and
@@ -77,9 +77,9 @@ <h3>The Mitigator</h3>
 
         <button class = theme onclick = toggleTheme()>Change Theme</button>
         <span class = copyright>
-            © Copyright <span class = year></span> joachimford.uk
-            <a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></img></a>
-            <a href = mailto:hello@joachimford.uk><img src = /images/mail.svg></img></a>
+            &copy; <span class = year></span> Joachim Ford. All rights reserved.
+            <a href = https://github.com/Hope41 target = _blank><img src = /src/images/github.svg></img></a>
+            <a href = mailto:hello@joachimford.uk><img src = /src/images/mail.svg></img></a>
         </span>
     </body>
 </html>
diff --git a/images/canvas_craft.png b/images/canvas_craft.png
deleted file mode 100644
index c11285c..0000000
Binary files a/images/canvas_craft.png and /dev/null differ
diff --git a/images/canvas_craft_big.png b/images/canvas_craft_big.png
deleted file mode 100644
index 19f68cb..0000000
Binary files a/images/canvas_craft_big.png and /dev/null differ
diff --git a/index.html b/index.html
index 9475d44..034ac79 100644
--- a/index.html
+++ b/index.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html lang = en-gb>
     <head>
         <meta charset = utf-8>
         <meta name = viewport content = 'width = device-width, initial-scale = 1'>
-        <meta name = keywords content = 'Joachim Ford, JavaScript games, Indie game dev'>
-        <meta name = description content = 'A base of fully-featued indie games and experiments'>
+        <meta name = description content = 'Free online coding blogs and open source games'>
 
         <script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
-        <script src = /js/analytics.js></script>
-        <script src = /js/main.js></script>
-        <title>Home | Joachim Ford</title>
-        <link rel = stylesheet href = /main.css>
-        <link rel = icon type = image/x-icon  href = /favs/favicon.ico>
+        <script src = /src/js/analytics.js></script>
+        <script src = /src/js/main.js></script>
+        <title>Coding Blogs and Indie Games | Joachim Ford</title>
+        <link rel = stylesheet href = /src/main.css>
+        <link rel = icon type = image/x-icon  href = /src/favs/favicon.ico>
         <style>
             html {height: 100%}
 
@@ -48,13 +47,13 @@
             </div>
             <div class = nav>
                 <a href = /games>Games</a>
-                <a href = /experiments>Experiments</a>
-                <a href = /articles>Articles</a>
+                <a href = /projects>Projects</a>
+                <a href = /blogs>Blogs</a>
                 <a href = /news>News</a>
             </div>
         </section>
 
-        <a href = /content/squirtcopter id = link><canvas id = cvs></canvas></a>
+        <a href = /src/content/squirtcopter id = link><canvas id = cvs></canvas></a>
 
         <section class = main>
             <script>
@@ -214,7 +213,7 @@
                                 ctx.fillStyle = rgb(1,1,1,summ/3-(Math.sin(i*i)+1)-rot)
                                 ctx.save()
                                 ctx.translate(tx + gap / 2, ty - gap / 2)
-                                ctx.rotate(Math.sin(i*i)*.1*rot)
+                                ctx.rotate(Math.sin(i*i*i)*.2*rot)
                                 ctx.fillText(item.name[i], -gap / 2, gap / 2)
                                 ctx.restore()
                             }
@@ -251,17 +250,16 @@
                 const images = []
                 const makeNewImage = (name, url, color) => {
                     const img = new Image()
-                    img.src = 'images/'+name+'.png'
+                    img.src = '/src/images/'+name+'.png'
                     img.url = url
                     img.color = color
                     img.alpha = 0
                     img.init = true
                     images.push(img)
                 }
-                makeNewImage('squirtcopter_big', '/content/squirtcopter', '#756')
-                makeNewImage('ios_mission_big', '/content/ios_mission', '#69a')
-                // makeNewImage('bg2', '/content/canvas_craft', '#400')
-                makeNewImage('snakes_and_ladders_big', '/content/snakes_and_ladders', '#8ca')
+                makeNewImage('squirtcopter_big', '/src/content/squirtcopter', '#756')
+                makeNewImage('ios_mission_big', '/src/content/ios_mission', '#79b')
+                makeNewImage('snakes_and_ladders_big', '/src/content/snakes_and_ladders', '#8ca')
 
                 const booms = [
                     {name: 'SQUIRTCOPTER', time: 70, x: 0, y: 0, size: .03, expire: 30},
@@ -286,13 +284,6 @@
                     {name: 'Switch', time: 1200}
                 ]
 
-                // {name: 'CANVASCRAFT', time: 840, x: 0, y: -.01, size: .03, expire: 300},
-                // {name: '"Where Craft and Code Collide"', time: 845, x: 0, y: .07, size: .01, expire: 285},
-                // {name: 'canvas', time: 900, x: 0, y: .13, size: .01, expire: 2},
-                // {name: 'canvas-craft', time: 905, x: 0, y: .13, size: .01, expire: 10},
-                // {name: 'canvas-craft.github', time: 912, x: 0, y: .13, size: .01, expire: 2},
-                // {name: 'canvas-craft.github.io', time: 925, x: 0, y: .13, size: .01, expire: 185},
-
                 addEventListener('resize', resize)
                 resize()
                 update()
@@ -301,9 +292,9 @@
 
         <button class = theme onclick = toggleTheme()>Change Theme</button>
         <span class = copyright>
-            © Copyright <span class = year></span> joachimford.uk
-            <a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></img></a>
-            <a href = mailto:hello@joachimford.uk><img src = /images/mail.svg></img></a>
+            &copy; <span class = year></span> Joachim Ford. All rights reserved.
+            <a href = https://github.com/Hope41 target = _blank><img src = /src/images/github.svg></img></a>
+            <a href = mailto:hello@joachimford.uk><img src = /src/images/mail.svg></img></a>
         </span>
     </body>
 </html>
\ No newline at end of file
diff --git a/news.html b/news.html
index 8c39c9f..9a2e321 100644
--- a/news.html
+++ b/news.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html lang = en-gb>
     <head>
         <meta charset = utf-8>
         <meta name = viewport content = 'width = device-width, initial-scale = 1'>
-        <meta name = keywords content = 'Joachim Ford, JoBase, JoBase games, JavaScript games'>
+        <meta name = description content = 'Free online coding blogs and open source games'>
 
         <script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
-        <script src = /js/analytics.js></script>
-        <script src = /js/main.js></script>
+        <script src = /src/js/analytics.js></script>
+        <script src = /src/js/main.js></script>
         <title>News | Joachim Ford</title>
-        <link rel = stylesheet href = /main.css>
-        <link rel = icon type = image/x-icon  href = /favs/favicon.ico>
+        <link rel = stylesheet href = /src/main.css>
+        <link rel = icon type = image/x-icon  href = /src/favs/favicon.ico>
     </head>
 
     <body>
@@ -21,8 +21,8 @@
             </div>
             <div class = nav>
                 <a href = /games>Games</a>
-                <a href = /experiments>Experiments</a>
-                <a href = /articles>Articles</a>
+                <a href = /projects>Projects</a>
+                <a href = /blogs>Blogs</a>
                 <a href = /news>News</a>
             </div>
         </section>
@@ -36,9 +36,9 @@ <h2>Splash Dash ~ js1024 winner 2024</h2>
                 </div>
 
                 <div class = big>
-                    <a href = /news/splashDash target = _blank>
-                        <img class = img src = /news/splash_dash.png>
-                        <div class = play><img src = /images/play.svg></svg></div>
+                    <a href = /src/news/splashDash target = _blank>
+                        <img class = img src = /src/news/splash_dash.png>
+                        <div class = play><img src = /src/images/play.svg></svg></div>
                     </a>
                 </div>
 
@@ -54,8 +54,8 @@ <h2>Splash Dash ~ js1024 winner 2024</h2>
                     Complete each level before it runs out!</p>
                 </span>
 
-                <p>Ever wondered how these 1k games are made? Check out the article
-                <a class = normal href = /articles/splash_dash_tutorial>
+                <p>Ever wondered how these 1k games are made? Check out the blog
+                <a class = normal href = /src/blogs/splash_dash_tutorial>
                 The Splash Dash Tutorial</a> to learn more about it.</p>
                 <span>Here is the entire source code.
 
@@ -81,7 +81,7 @@ <h2>Squirtcopter</h2>
                     remake of a smaller version I made for JoBase about a year ago. Hope you enjoy!
                 </span>
 
-                <span><a class = button href = /content/squirtcopter><b>PLAY NOW</b></a></span>
+                <span><a class = button href = /src/content/squirtcopter><b>PLAY NOW</b></a></span>
             </div>
 
             <span class = date>30.12.2023</span>
@@ -102,7 +102,7 @@ <h2>Io's Mission</h2>
                     the link below. Tell me what you think!
                 </span>
 
-                <span><a class = button href = /content/ios_mission><b>PLAY NOW</b></a></span>
+                <span><a class = button href = /src/content/ios_mission><b>PLAY NOW</b></a></span>
             </div>
 
             <span class = date>10.07.2023</span>
@@ -113,9 +113,9 @@ <h2 class = news>Leap Lava</h2>
                 </div>
 
                 <div class = big>
-                    <a href = /news/leapLava target = _blank>
-                        <img class = img src = /news/leap_lava.png>
-                        <div class = play><img src = /images/play.svg></svg></div>
+                    <a href = /src/news/leapLava target = _blank>
+                        <img class = img src = /src/news/leap_lava.png>
+                        <div class = play><img src = /src/images/play.svg></svg></div>
                     </a>
                 </div>
 
@@ -139,7 +139,7 @@ <h2 class = news>Squirtcopter</h2>
                     <span class = bio>An Infinite JoBase Shooter</span>
                 </div>
 
-                <div class = big><img class = img src = /news/squirtcopter.png></div>
+                <div class = big><img class = img src = /src/news/squirtcopter.png></div>
 
                 <p>I've just finished another <a class = normal href = https://jobase.org target = _blank>JoBase</a> game!
                 Use your helicopter to explore a procedural world of procedural enemies with procedural powers!
@@ -161,7 +161,7 @@ <h2 class = news>Blue Hue</h2>
                     <span class = bio>A JoBase Platform Game</span>
                 </div>
 
-                <div class = big><img class = img src = /news/blue_hue.png></div>
+                <div class = big><img class = img src = /src/news/blue_hue.png></div>
 
                 <p>Hello! I've just finished making a platform game for
                 <a class = normal href = https://jobase.org target = _blank>JoBase</a>
@@ -179,9 +179,9 @@ <h2 class = news>Blue Hue</h2>
 
         <button class = theme onclick = toggleTheme()>Change Theme</button>
         <span class = copyright>
-            © Copyright <span class = year></span> joachimford.uk
-            <a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></img></a>
-            <a href = mailto:hello@joachimford.uk><img src = /images/mail.svg></img></a>
+            &copy; <span class = year></span> Joachim Ford. All rights reserved.
+            <a href = https://github.com/Hope41 target = _blank><img src = /src/images/github.svg></img></a>
+            <a href = mailto:hello@joachimford.uk><img src = /src/images/mail.svg></img></a>
         </span>
     </body>
 </html>
\ No newline at end of file
diff --git a/experiments.html b/projects.html
similarity index 61%
rename from experiments.html
rename to projects.html
index 0023bff..1d7fcd2 100644
--- a/experiments.html
+++ b/projects.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html lang = en-gb>
     <head>
         <meta charset = utf-8>
         <meta name = viewport content = 'width = device-width, initial-scale = 1'>
-        <meta name = keywords content = 'Joachim Ford, JavaScript experiments'>
+        <meta name = description content = 'Free online coding blogs and open source games'>
 
         <script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
-        <script src = /js/analytics.js></script>
-        <script src = /js/main.js></script>
-        <title>Experiments | Joachim Ford</title>
-        <link rel = stylesheet href = /main.css>
-        <link rel = icon type = image/x-icon  href = /favs/favicon.ico>
+        <script src = /src/js/analytics.js></script>
+        <script src = /src/js/main.js></script>
+        <title>Projects | Joachim Ford</title>
+        <link rel = stylesheet href = /src/main.css>
+        <link rel = icon type = image/x-icon  href = /src/favs/favicon.ico>
     </head>
 
     <body>
@@ -21,15 +21,15 @@
             </div>
             <div class = nav>
                 <a href = /games>Games</a>
-                <a href = /experiments>Experiments</a>
-                <a href = /articles>Articles</a>
+                <a href = /projects>Projects</a>
+                <a href = /blogs>Blogs</a>
                 <a href = /news>News</a>
             </div>
         </section>
 
         <section class = main>
-            <a class = demo href = content/canvas_craft>
-                <img class = tiny src = images/canvas_craft.png>
+            <a class = demo href = /src/content/canvas_craft>
+                <img class = tiny src = /src/images/canvas_craft.png>
                 <h3>CanvasCraft</h3>
                 <span class = description>
                     CanvasCraft is a unique online tool designed to allow creators
@@ -38,8 +38,8 @@ <h3>CanvasCraft</h3>
                 </span>
             </a>
 
-            <a class = demo href = content/ray_casting_blocks>
-                <img class = tiny src = images/ray_casting_blocks.png>
+            <a class = demo href = /src/content/ray_casting_blocks>
+                <img class = tiny src = /src/images/ray_casting_blocks.png>
                 <h3>Ray-casting Blocks</h3>
                 <span class = description>
                     A 3D city run experiment using ray-casting graphics.
@@ -48,8 +48,8 @@ <h3>Ray-casting Blocks</h3>
                 </span>
             </a>
 
-            <a class = demo href = content/infinite_zoom>
-                <img class = tiny src = images/infinite_zoom.png>
+            <a class = demo href = /src/content/infinite_zoom>
+                <img class = tiny src = /src/images/infinite_zoom.png>
                 <h3>Infinite Zoom</h3>
                 <span class = description>
                     Zoom in on an infinite fractal of faces. Inspired by
@@ -58,9 +58,9 @@ <h3>Infinite Zoom</h3>
                 </span>
             </a>
 
-            <a class = demo href = content/anthrophobia_fear_of_crowds>
-                <img class = tiny src = images/anthrophobia_fear_of_crowds.png>
-                <h3>Anthrophobia</h3>
+            <a class = demo href = /src/content/anthrophobia_fear_of_crowds>
+                <img class = tiny src = /src/images/anthrophobia_fear_of_crowds.png>
+                <h3>Procedural Crowd Simulation</h3>
                 <span class = description>
                     A procedural simulation of weird creatures walking around the screen.
                     This experiment is <span class = mobile>mobile friendly.</span>
@@ -70,9 +70,9 @@ <h3>Anthrophobia</h3>
 
         <button class = theme onclick = toggleTheme()>Change Theme</button>
         <span class = copyright>
-            © Copyright <span class = year></span> joachimford.uk
-            <a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></img></a>
-            <a href = mailto:hello@joachimford.uk><img src = /images/mail.svg></img></a>
+            &copy; <span class = year></span> Joachim Ford. All rights reserved.
+            <a href = https://github.com/Hope41 target = _blank><img src = /src/images/github.svg></img></a>
+            <a href = mailto:hello@joachimford.uk><img src = /src/images/mail.svg></img></a>
         </span>
     </body>
 </html>
\ No newline at end of file
diff --git a/articles/3_tips_for_game_development.html b/src/blogs/3_tips_for_game_development.html
similarity index 86%
rename from articles/3_tips_for_game_development.html
rename to src/blogs/3_tips_for_game_development.html
index ab40c85..3a8964d 100644
--- a/articles/3_tips_for_game_development.html
+++ b/src/blogs/3_tips_for_game_development.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html lang = en-gb>
     <head>
         <meta charset = utf-8>
         <meta name = viewport content = 'width = device-width, initial-scale = 1'>
-        <meta name = keywords content = 'Joachim Ford, Create enemies JavaScript, Platformer enemies'>
-        <meta name = description content = 'Tips for Game Development'>
+        <meta name = description content = 'Free online coding blogs and open source games'>
 
         <script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
-        <script src = /js/analytics.js></script>
-        <script src = /js/main.js></script>
+        <script src = /src/js/analytics.js></script>
+        <script src = /src/js/main.js></script>
         <title>Tips For Game Development | Joachim Ford</title>
-        <link rel = stylesheet href = /main.css>
-        <link rel = icon type = image/x-icon  href = /favs/favicon.ico>
+        <link rel = stylesheet href = /src/main.css>
+        <link rel = icon type = image/x-icon  href = /src/favs/favicon.ico>
     </head>
 
     <body>
@@ -22,8 +21,8 @@
             </div>
             <div class = nav>
                 <a href = /games>Games</a>
-                <a href = /experiments>Experiments</a>
-                <a href = /articles>Articles</a>
+                <a href = /projects>Projects</a>
+                <a href = /blogs>Blogs</a>
                 <a href = /news>News</a>
             </div>
         </section>
@@ -31,13 +30,13 @@
         <section class = main>
             <span class = date>04.06.2024</span>
             <h1>3 Tips for Game Development</h1>
-            <div class = big><img class = img src = /articles/extra/3_tips_for_game_development/1.png></div>
+            <div class = big><img class = img src = /src/blogs/extra/3_tips_for_game_development/1.png></div>
 
             <div class = demo>
                 <p>Generally speaking, code looks confusing. After all, why wouldn't it?
                 It's not called "code" for nothing. You know, Morse code, Enigma code, and...
                 coding code! It's not meant to be easy to understand!</p>
-                <p>This article discusses how my coding journey began. Through it, I realised that
+                <p>This blog discusses how my coding journey began. Through it, I realised that
                 code isn't as complicated
                 as it appears to be at first. However, even if you're "fluent" at a coding language,
                 it doesn't nessecarily mean you know what it says at first glance. Programming code,
@@ -58,7 +57,7 @@ <h3>Step 1. Free Up Your Imagination</h3>
                 gave me more motivation to make my own games. It was the drive to make these images a reality.</p>
                 <p>I vaguely remember a picture that particularly inspired me. It looked a little like this.</p>
 
-                <img style = 'max-width:350px' class = tinyRatio src = /articles/extra/3_tips_for_game_development/2.png>
+                <img style = 'max-width:350px' class = tinyRatio src = /src/blogs/extra/3_tips_for_game_development/2.png>
 
                 <p>I don't know why, the picture was so simple, but it really
                 made an impact on me. It made me think about all these really cool
@@ -81,7 +80,7 @@ <h3>Step 2. Start Small</h3>
                 <p>After messing around a bit with Pygame Zero, we decided to upgrade to Pygame,
                 as apparently it could handle more without slowing the computer down.</p>
 
-                <div class = hint><img src = /images/bulb.svg><div>
+                <div class = hint><img src = /src/images/bulb.svg><div>
                     <p>When I was younger, I aspired to become like the "top game developers"
                     - people who (I imagined) coded their games in pure binary. Sadly, I
                     quickly learned that literally <i>no one</i> makes games in binary. In case you have thought
@@ -118,9 +117,9 @@ <h3>Coin Game</h3>
                     Press any key to go to the next level.</b></p>
 
                     <div class = big style = 'max-width:500px'>
-                        <a href = /articles/extra/3_tips_for_game_development/3 target = _blank>
-                            <img class = tinyRatio style = 'max-width:500px' src = /articles/extra/3_tips_for_game_development/4.png>
-                            <div class = play><img src = /images/play.svg></svg></div>
+                        <a href = /src/blogs/extra/3_tips_for_game_development/3 target = _blank>
+                            <img class = tinyRatio style = 'max-width:500px' src = /src/blogs/extra/3_tips_for_game_development/4.png>
+                            <div class = play><img src = /src/images/play.svg></svg></div>
                         </a>
                     </div>
                 </div>
@@ -145,7 +144,7 @@ <h3>Coin Game</h3>
                 As usual, I gave up quite quickly.</p>
 
                 <div class = hint>
-                    <img src = /images/bulb.svg>
+                    <img src = /src/images/bulb.svg>
                     <p>"Well," you say, "what stopped you from continuing?"
                     Good question! The whole idea of coding is fixing glitches.
                     Trouble is, us newbies tend to unintentionally
@@ -174,7 +173,7 @@ <h3>Step 3. Keep Going</h3>
 
             <div class = demo>
                 <h4>Demo #20</h4>
-                <iframe src = /articles/extra/3_tips_for_game_development/5></iframe>
+                <iframe src = /src/blogs/extra/3_tips_for_game_development/5></iframe>
 <pre class = code>&lt;body>
     &lt;canvas id = canvas>
     &lt;script>
@@ -242,25 +241,25 @@ <h4>Demo #20</h4>
                 I was slowly getting a better understanding of how code works.</p>
 
                 <div style = 'display:flex;gap:15px;flex-wrap:wrap;'>
-                    <img class = tinyRatio style = 'max-width:220px' src = /articles/extra/3_tips_for_game_development/6.png>
-                    <img class = tinyRatio style = 'max-width:220px' src = /articles/extra/3_tips_for_game_development/7.png>
-                    <img class = tinyRatio style = 'max-width:220px' src = /articles/extra/3_tips_for_game_development/8.png>
-                    <img class = tinyRatio style = 'max-width:220px' src = /articles/extra/3_tips_for_game_development/9.png>
-                    <img class = tinyRatio style = 'max-width:220px' src = /articles/extra/3_tips_for_game_development/10.png>
-                    <img class = tinyRatio style = 'max-width:220px' src = /articles/extra/3_tips_for_game_development/11.png>
-                    <img class = tinyRatio style = 'max-width:220px' src = /articles/extra/3_tips_for_game_development/12.png>
-                    <img class = tinyRatio style = 'max-width:220px' src = /articles/extra/3_tips_for_game_development/13.png>
-                    <img class = tinyRatio style = 'max-width:220px' src = /articles/extra/3_tips_for_game_development/14.png>
-                    <img class = tinyRatio style = 'max-width:220px' src = /articles/extra/3_tips_for_game_development/15.png>
-                    <img class = tinyRatio style = 'max-width:220px' src = /articles/extra/3_tips_for_game_development/16.png>
-                    <img class = tinyRatio style = 'max-width:220px' src = /articles/extra/3_tips_for_game_development/17.png>
+                    <img class = tinyRatio style = 'max-width:220px' src = /src/blogs/extra/3_tips_for_game_development/6.png>
+                    <img class = tinyRatio style = 'max-width:220px' src = /src/blogs/extra/3_tips_for_game_development/7.png>
+                    <img class = tinyRatio style = 'max-width:220px' src = /src/blogs/extra/3_tips_for_game_development/8.png>
+                    <img class = tinyRatio style = 'max-width:220px' src = /src/blogs/extra/3_tips_for_game_development/9.png>
+                    <img class = tinyRatio style = 'max-width:220px' src = /src/blogs/extra/3_tips_for_game_development/10.png>
+                    <img class = tinyRatio style = 'max-width:220px' src = /src/blogs/extra/3_tips_for_game_development/11.png>
+                    <img class = tinyRatio style = 'max-width:220px' src = /src/blogs/extra/3_tips_for_game_development/12.png>
+                    <img class = tinyRatio style = 'max-width:220px' src = /src/blogs/extra/3_tips_for_game_development/13.png>
+                    <img class = tinyRatio style = 'max-width:220px' src = /src/blogs/extra/3_tips_for_game_development/14.png>
+                    <img class = tinyRatio style = 'max-width:220px' src = /src/blogs/extra/3_tips_for_game_development/15.png>
+                    <img class = tinyRatio style = 'max-width:220px' src = /src/blogs/extra/3_tips_for_game_development/16.png>
+                    <img class = tinyRatio style = 'max-width:220px' src = /src/blogs/extra/3_tips_for_game_development/17.png>
                 </div>
             </div>
 
             <div class = demo id = sub>
                 <p>The best project I made during this period was definitely the
                 simplified platform game. It was created just before
-                <a class = normal href = /content/the_mitigator target = _blank>The Mitigator</a>,
+                <a class = normal href = /src/content/the_mitigator target = _blank>The Mitigator</a>,
                 and was a real milestone for me. All the levels are "Procedurally Generated,"
                 which simply means that they're created using randomisation, so they're different
                 every time.</p>
@@ -272,9 +271,9 @@ <h3>First Platformer</h3>
                     You cannot play this game on a mobile device.</b></p>
 
                     <div class = big>
-                        <a href = /articles/extra/3_tips_for_game_development/18 target = _blank>
-                            <img class = img src = /articles/extra/3_tips_for_game_development/19.png>
-                            <div class = play><img src = /images/play.svg></svg></div>
+                        <a href = /src/blogs/extra/3_tips_for_game_development/18 target = _blank>
+                            <img class = img src = /src/blogs/extra/3_tips_for_game_development/19.png>
+                            <div class = play><img src = /src/images/play.svg></svg></div>
                         </a>
                     </div>
                 </div>
@@ -298,7 +297,7 @@ <h3>Conclusion</h3>
 
                 <p>That's pretty much everything! All the games from this point
                 have been published on the <a href = /games class = normal target = _blank>Games</a>
-                tab of this website. I hope this article gave you a bit of
+                tab of this website. I hope this blog gave you a bit of
                 insight into my journey through game development.
                 If you're new to coding and are interested in using pure JavaScript to
                 make your own games, please get in touch I'll try to help you as best I can.</p>
@@ -326,7 +325,7 @@ <h3>Conclusion</h3>
                     <input type = text name = name placeholder = 'Anonymous'>
                     <div class = cont>
                         <textarea type = text name = message placeholder = 'Enter a message' required></textarea>
-                        <button class = button id = info><img src = /images/info.svg></button>
+                        <button class = button id = info><img src = /src/images/info.svg></button>
                     </div>
                     <div class = h-captcha data-captcha = true id = captcha></div>
                     <button type = submit class = button onmousedown = pressPost()>Post</button>
@@ -339,9 +338,9 @@ <h3>Conclusion</h3>
 
         <button class = theme onclick = toggleTheme()>Change Theme</button>
         <span class = copyright>
-            © Copyright <span class = year></span> joachimford.uk
-            <a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></a>
-            <a href = mailto:hello@joachimford.uk><img src = /images/mail.svg></a>
+            &copy; <span class = year></span> Joachim Ford. All rights reserved.
+            <a href = https://github.com/Hope41 target = _blank><img src = /src/images/github.svg></img></a>
+            <a href = mailto:hello@joachimford.uk><img src = /src/images/mail.svg></img></a>
         </span>
     </body>
 </html>
\ No newline at end of file
diff --git a/articles/create_and_animate_enemies_using_shapes.html b/src/blogs/create_and_animate_enemies_using_shapes.html
similarity index 87%
rename from articles/create_and_animate_enemies_using_shapes.html
rename to src/blogs/create_and_animate_enemies_using_shapes.html
index 377c4d8..7d0125c 100644
--- a/articles/create_and_animate_enemies_using_shapes.html
+++ b/src/blogs/create_and_animate_enemies_using_shapes.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html lang = en-gb>
     <head>
         <meta charset = utf-8>
         <meta name = viewport content = 'width = device-width, initial-scale = 1'>
-        <meta name = keywords content = 'Joachim Ford, Create enemies JavaScript, Platformer enemies'>
-        <meta name = description content = 'How to procedurally generate chamber-like levels'>
+        <meta name = description content = 'Free online coding blogs and open source games'>
 
         <script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
-        <script src = /js/analytics.js></script>
-        <script src = /js/main.js></script>
-        <title>Create Enemies With Shapes | Joachim Ford</title>
-        <link rel = stylesheet href = /main.css>
-        <link rel = icon type = image/x-icon  href = /favs/favicon.ico>
+        <script src = /src/js/analytics.js></script>
+        <script src = /src/js/main.js></script>
+        <title>Create and Animate Enemies Using Shapes | Joachim Ford</title>
+        <link rel = stylesheet href = /src/main.css>
+        <link rel = icon type = image/x-icon  href = /src/favs/favicon.ico>
     </head>
 
     <body>
@@ -22,8 +21,8 @@
             </div>
             <div class = nav>
                 <a href = /games>Games</a>
-                <a href = /experiments>Experiments</a>
-                <a href = /articles>Articles</a>
+                <a href = /projects>Projects</a>
+                <a href = /blogs>Blogs</a>
                 <a href = /news>News</a>
             </div>
         </section>
@@ -31,34 +30,34 @@
         <section class = main>
             <span class = date>6.11.2022</span>
             <h1>Create and Animate Enemies Using Shapes</h1>
-            <div class = big><img class = img src = /articles/extra/create_and_animate_enemies_using_shapes/1.png></div>
+            <div class = big><img class = img src = /src/blogs/extra/create_and_animate_enemies_using_shapes/1.png></div>
 
             <div class = demo>
-                <p>This article runs through how the enemies of
-                <a class = normal href = /content/snakes_and_ladders.html target = _blank>Snakes And Ladders</a>
+                <p>This blog runs through how the enemies of
+                <a class = normal href = /src/content/snakes_and_ladders target = _blank>Snakes And Ladders</a>
                 are animated and rendered. Each simplified example has the relevant code underneath, so please to have a look
                 if you need help.</p>
 
                 <p>Please keep in mind that not all the enemies are showcased on this page -
                 you'll have to play the game to find that out!
-                The main purpose for this article is to help people understand the
+                The main purpose for this blog is to help people understand the
                 <i>logic</i> behind the creatures.</p>
             </div>
 
             <div class = demo>
                 <p>Every enemy in the game uses a similar walking pattern - one that you may recognise from
-                <a class = normal href = /content/anthrophobia_fear_of_crowds.html target = _blank>Anthrophobia</a>.
+                <a class = normal href = /src/content/anthrophobia_fear_of_crowds target = _blank>Anthrophobia</a>.
                 In case you haven't already seen it, this "walking pattern" is based on a circle with
                 a limit at its base.</p>
 
-                <iframe src = /content/extra/anthrophobia_fear_of_crowds/2.html></iframe>
+                <iframe src = /src/content/extra/anthrophobia_fear_of_crowds/2></iframe>
 
                 <p>It's quite hard to see, but even the first enemy uses this circular walking pattern.
                 Notice how the joints move. It's a small change,
                 but it's vital to achieve the illusion of moving forward.</p>
             </div>
 
-            <iframe src = /articles/extra/create_and_animate_enemies_using_shapes/1.html></iframe>
+            <iframe src = /src/blogs/extra/create_and_animate_enemies_using_shapes/1.html></iframe>
 
 <pre class = code>const FOOT_LIFT = .35
 const FOOT_SLIDE = .3
@@ -120,7 +119,7 @@ <h3>The Cubic Side Effect</h3>
                 <p>Take a look at the source code if you need to understand it better.</p>
             </div>
 
-            <iframe src = /articles/extra/create_and_animate_enemies_using_shapes/6.html></iframe>
+            <iframe src = /src/blogs/extra/create_and_animate_enemies_using_shapes/6.html></iframe>
 <pre class = code>time += .04
 const EYE_SIZE = .3 * (width + height) / 2
 const EYE = {
@@ -227,7 +226,7 @@ <h3>The Crab</h3>
                 visualise in your head.</p>
             </div>
 
-            <iframe src = /articles/extra/create_and_animate_enemies_using_shapes/7.html></iframe>
+            <iframe src = /src/blogs/extra/create_and_animate_enemies_using_shapes/7.html></iframe>
 
 <pre class = code>const offset = Math.sin(WALK * 2) * .1
 const fake_height = 1.2
@@ -382,7 +381,7 @@ <h3>The ...?</h3>
                     <input type = text name = name placeholder = 'Anonymous'>
                     <div class = cont>
                         <textarea type = text name = message placeholder = 'Enter a message' required></textarea>
-                        <button class = button id = info><img src = /images/info.svg></button>
+                        <button class = button id = info><img src = /src/images/info.svg></button>
                     </div>
                     <div class = h-captcha data-captcha = true id = captcha></div>
                     <button type = submit class = button onmousedown = pressPost()>Post</button>
@@ -395,9 +394,9 @@ <h3>The ...?</h3>
 
         <button class = theme onclick = toggleTheme()>Change Theme</button>
         <span class = copyright>
-            © Copyright <span class = year></span> joachimford.uk
-            <a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></a>
-            <a href = mailto:hello@joachimford.uk><img src = /images/mail.svg></a>
+            &copy; <span class = year></span> Joachim Ford. All rights reserved.
+            <a href = https://github.com/Hope41 target = _blank><img src = /src/images/github.svg></img></a>
+            <a href = mailto:hello@joachimford.uk><img src = /src/images/mail.svg></img></a>
         </span>
     </body>
 </html>
diff --git a/articles/extra/3_tips_for_game_development/1.png b/src/blogs/extra/3_tips_for_game_development/1.png
similarity index 100%
rename from articles/extra/3_tips_for_game_development/1.png
rename to src/blogs/extra/3_tips_for_game_development/1.png
diff --git a/articles/extra/3_tips_for_game_development/10.png b/src/blogs/extra/3_tips_for_game_development/10.png
similarity index 100%
rename from articles/extra/3_tips_for_game_development/10.png
rename to src/blogs/extra/3_tips_for_game_development/10.png
diff --git a/articles/extra/3_tips_for_game_development/11.png b/src/blogs/extra/3_tips_for_game_development/11.png
similarity index 100%
rename from articles/extra/3_tips_for_game_development/11.png
rename to src/blogs/extra/3_tips_for_game_development/11.png
diff --git a/articles/extra/3_tips_for_game_development/12.png b/src/blogs/extra/3_tips_for_game_development/12.png
similarity index 100%
rename from articles/extra/3_tips_for_game_development/12.png
rename to src/blogs/extra/3_tips_for_game_development/12.png
diff --git a/articles/extra/3_tips_for_game_development/13.png b/src/blogs/extra/3_tips_for_game_development/13.png
similarity index 100%
rename from articles/extra/3_tips_for_game_development/13.png
rename to src/blogs/extra/3_tips_for_game_development/13.png
diff --git a/articles/extra/3_tips_for_game_development/14.png b/src/blogs/extra/3_tips_for_game_development/14.png
similarity index 100%
rename from articles/extra/3_tips_for_game_development/14.png
rename to src/blogs/extra/3_tips_for_game_development/14.png
diff --git a/articles/extra/3_tips_for_game_development/15.png b/src/blogs/extra/3_tips_for_game_development/15.png
similarity index 100%
rename from articles/extra/3_tips_for_game_development/15.png
rename to src/blogs/extra/3_tips_for_game_development/15.png
diff --git a/articles/extra/3_tips_for_game_development/16.png b/src/blogs/extra/3_tips_for_game_development/16.png
similarity index 100%
rename from articles/extra/3_tips_for_game_development/16.png
rename to src/blogs/extra/3_tips_for_game_development/16.png
diff --git a/articles/extra/3_tips_for_game_development/17.png b/src/blogs/extra/3_tips_for_game_development/17.png
similarity index 100%
rename from articles/extra/3_tips_for_game_development/17.png
rename to src/blogs/extra/3_tips_for_game_development/17.png
diff --git a/articles/extra/3_tips_for_game_development/18.html b/src/blogs/extra/3_tips_for_game_development/18.html
similarity index 100%
rename from articles/extra/3_tips_for_game_development/18.html
rename to src/blogs/extra/3_tips_for_game_development/18.html
diff --git a/articles/extra/3_tips_for_game_development/19.png b/src/blogs/extra/3_tips_for_game_development/19.png
similarity index 100%
rename from articles/extra/3_tips_for_game_development/19.png
rename to src/blogs/extra/3_tips_for_game_development/19.png
diff --git a/articles/extra/3_tips_for_game_development/2.png b/src/blogs/extra/3_tips_for_game_development/2.png
similarity index 100%
rename from articles/extra/3_tips_for_game_development/2.png
rename to src/blogs/extra/3_tips_for_game_development/2.png
diff --git a/articles/extra/3_tips_for_game_development/3.html b/src/blogs/extra/3_tips_for_game_development/3.html
similarity index 100%
rename from articles/extra/3_tips_for_game_development/3.html
rename to src/blogs/extra/3_tips_for_game_development/3.html
diff --git a/articles/extra/3_tips_for_game_development/4.png b/src/blogs/extra/3_tips_for_game_development/4.png
similarity index 100%
rename from articles/extra/3_tips_for_game_development/4.png
rename to src/blogs/extra/3_tips_for_game_development/4.png
diff --git a/articles/extra/3_tips_for_game_development/5.html b/src/blogs/extra/3_tips_for_game_development/5.html
similarity index 100%
rename from articles/extra/3_tips_for_game_development/5.html
rename to src/blogs/extra/3_tips_for_game_development/5.html
diff --git a/articles/extra/3_tips_for_game_development/6.png b/src/blogs/extra/3_tips_for_game_development/6.png
similarity index 100%
rename from articles/extra/3_tips_for_game_development/6.png
rename to src/blogs/extra/3_tips_for_game_development/6.png
diff --git a/articles/extra/3_tips_for_game_development/7.png b/src/blogs/extra/3_tips_for_game_development/7.png
similarity index 100%
rename from articles/extra/3_tips_for_game_development/7.png
rename to src/blogs/extra/3_tips_for_game_development/7.png
diff --git a/articles/extra/3_tips_for_game_development/8.png b/src/blogs/extra/3_tips_for_game_development/8.png
similarity index 100%
rename from articles/extra/3_tips_for_game_development/8.png
rename to src/blogs/extra/3_tips_for_game_development/8.png
diff --git a/articles/extra/3_tips_for_game_development/9.png b/src/blogs/extra/3_tips_for_game_development/9.png
similarity index 100%
rename from articles/extra/3_tips_for_game_development/9.png
rename to src/blogs/extra/3_tips_for_game_development/9.png
diff --git a/articles/extra/create_and_animate_enemies_using_shapes/1.html b/src/blogs/extra/create_and_animate_enemies_using_shapes/1.html
similarity index 100%
rename from articles/extra/create_and_animate_enemies_using_shapes/1.html
rename to src/blogs/extra/create_and_animate_enemies_using_shapes/1.html
diff --git a/articles/extra/create_and_animate_enemies_using_shapes/1.png b/src/blogs/extra/create_and_animate_enemies_using_shapes/1.png
similarity index 100%
rename from articles/extra/create_and_animate_enemies_using_shapes/1.png
rename to src/blogs/extra/create_and_animate_enemies_using_shapes/1.png
diff --git a/articles/extra/create_and_animate_enemies_using_shapes/6.html b/src/blogs/extra/create_and_animate_enemies_using_shapes/6.html
similarity index 100%
rename from articles/extra/create_and_animate_enemies_using_shapes/6.html
rename to src/blogs/extra/create_and_animate_enemies_using_shapes/6.html
diff --git a/articles/extra/create_and_animate_enemies_using_shapes/7.html b/src/blogs/extra/create_and_animate_enemies_using_shapes/7.html
similarity index 100%
rename from articles/extra/create_and_animate_enemies_using_shapes/7.html
rename to src/blogs/extra/create_and_animate_enemies_using_shapes/7.html
diff --git a/articles/extra/making_games_the_bits_that_nobody_notices/1.png b/src/blogs/extra/making_games_the_bits_that_nobody_notices/1.png
similarity index 100%
rename from articles/extra/making_games_the_bits_that_nobody_notices/1.png
rename to src/blogs/extra/making_games_the_bits_that_nobody_notices/1.png
diff --git a/articles/extra/making_games_the_bits_that_nobody_notices/2.png b/src/blogs/extra/making_games_the_bits_that_nobody_notices/2.png
similarity index 100%
rename from articles/extra/making_games_the_bits_that_nobody_notices/2.png
rename to src/blogs/extra/making_games_the_bits_that_nobody_notices/2.png
diff --git a/articles/extra/making_games_the_bits_that_nobody_notices/3.html b/src/blogs/extra/making_games_the_bits_that_nobody_notices/3.html
similarity index 100%
rename from articles/extra/making_games_the_bits_that_nobody_notices/3.html
rename to src/blogs/extra/making_games_the_bits_that_nobody_notices/3.html
diff --git a/articles/extra/making_games_the_bits_that_nobody_notices/4.png b/src/blogs/extra/making_games_the_bits_that_nobody_notices/4.png
similarity index 100%
rename from articles/extra/making_games_the_bits_that_nobody_notices/4.png
rename to src/blogs/extra/making_games_the_bits_that_nobody_notices/4.png
diff --git a/articles/extra/making_games_the_bits_that_nobody_notices/5.png b/src/blogs/extra/making_games_the_bits_that_nobody_notices/5.png
similarity index 100%
rename from articles/extra/making_games_the_bits_that_nobody_notices/5.png
rename to src/blogs/extra/making_games_the_bits_that_nobody_notices/5.png
diff --git a/articles/extra/procedural_room_generation_snakes_and_ladders/1.png b/src/blogs/extra/procedural_room_generation_snakes_and_ladders/1.png
similarity index 100%
rename from articles/extra/procedural_room_generation_snakes_and_ladders/1.png
rename to src/blogs/extra/procedural_room_generation_snakes_and_ladders/1.png
diff --git a/articles/extra/procedural_room_generation_snakes_and_ladders/2.png b/src/blogs/extra/procedural_room_generation_snakes_and_ladders/2.png
similarity index 100%
rename from articles/extra/procedural_room_generation_snakes_and_ladders/2.png
rename to src/blogs/extra/procedural_room_generation_snakes_and_ladders/2.png
diff --git a/articles/extra/procedural_room_generation_snakes_and_ladders/3.png b/src/blogs/extra/procedural_room_generation_snakes_and_ladders/3.png
similarity index 100%
rename from articles/extra/procedural_room_generation_snakes_and_ladders/3.png
rename to src/blogs/extra/procedural_room_generation_snakes_and_ladders/3.png
diff --git a/articles/extra/procedural_room_generation_snakes_and_ladders/4.png b/src/blogs/extra/procedural_room_generation_snakes_and_ladders/4.png
similarity index 100%
rename from articles/extra/procedural_room_generation_snakes_and_ladders/4.png
rename to src/blogs/extra/procedural_room_generation_snakes_and_ladders/4.png
diff --git a/articles/extra/procedural_room_generation_snakes_and_ladders/5.png b/src/blogs/extra/procedural_room_generation_snakes_and_ladders/5.png
similarity index 100%
rename from articles/extra/procedural_room_generation_snakes_and_ladders/5.png
rename to src/blogs/extra/procedural_room_generation_snakes_and_ladders/5.png
diff --git a/articles/extra/procedural_room_generation_snakes_and_ladders/6.png b/src/blogs/extra/procedural_room_generation_snakes_and_ladders/6.png
similarity index 100%
rename from articles/extra/procedural_room_generation_snakes_and_ladders/6.png
rename to src/blogs/extra/procedural_room_generation_snakes_and_ladders/6.png
diff --git a/articles/extra/procedural_room_generation_snakes_and_ladders/7.png b/src/blogs/extra/procedural_room_generation_snakes_and_ladders/7.png
similarity index 100%
rename from articles/extra/procedural_room_generation_snakes_and_ladders/7.png
rename to src/blogs/extra/procedural_room_generation_snakes_and_ladders/7.png
diff --git a/articles/extra/splash_dash_tutorial/1.png b/src/blogs/extra/splash_dash_tutorial/1.png
similarity index 100%
rename from articles/extra/splash_dash_tutorial/1.png
rename to src/blogs/extra/splash_dash_tutorial/1.png
diff --git a/articles/extra/splash_dash_tutorial/10.png b/src/blogs/extra/splash_dash_tutorial/10.png
similarity index 100%
rename from articles/extra/splash_dash_tutorial/10.png
rename to src/blogs/extra/splash_dash_tutorial/10.png
diff --git a/articles/extra/splash_dash_tutorial/11.png b/src/blogs/extra/splash_dash_tutorial/11.png
similarity index 100%
rename from articles/extra/splash_dash_tutorial/11.png
rename to src/blogs/extra/splash_dash_tutorial/11.png
diff --git a/articles/extra/splash_dash_tutorial/12.png b/src/blogs/extra/splash_dash_tutorial/12.png
similarity index 100%
rename from articles/extra/splash_dash_tutorial/12.png
rename to src/blogs/extra/splash_dash_tutorial/12.png
diff --git a/articles/extra/splash_dash_tutorial/13.png b/src/blogs/extra/splash_dash_tutorial/13.png
similarity index 100%
rename from articles/extra/splash_dash_tutorial/13.png
rename to src/blogs/extra/splash_dash_tutorial/13.png
diff --git a/articles/extra/splash_dash_tutorial/14.png b/src/blogs/extra/splash_dash_tutorial/14.png
similarity index 100%
rename from articles/extra/splash_dash_tutorial/14.png
rename to src/blogs/extra/splash_dash_tutorial/14.png
diff --git a/articles/extra/splash_dash_tutorial/15.png b/src/blogs/extra/splash_dash_tutorial/15.png
similarity index 100%
rename from articles/extra/splash_dash_tutorial/15.png
rename to src/blogs/extra/splash_dash_tutorial/15.png
diff --git a/articles/extra/splash_dash_tutorial/16.png b/src/blogs/extra/splash_dash_tutorial/16.png
similarity index 100%
rename from articles/extra/splash_dash_tutorial/16.png
rename to src/blogs/extra/splash_dash_tutorial/16.png
diff --git a/articles/extra/splash_dash_tutorial/17.png b/src/blogs/extra/splash_dash_tutorial/17.png
similarity index 100%
rename from articles/extra/splash_dash_tutorial/17.png
rename to src/blogs/extra/splash_dash_tutorial/17.png
diff --git a/articles/extra/splash_dash_tutorial/18.png b/src/blogs/extra/splash_dash_tutorial/18.png
similarity index 100%
rename from articles/extra/splash_dash_tutorial/18.png
rename to src/blogs/extra/splash_dash_tutorial/18.png
diff --git a/articles/extra/splash_dash_tutorial/19.png b/src/blogs/extra/splash_dash_tutorial/19.png
similarity index 100%
rename from articles/extra/splash_dash_tutorial/19.png
rename to src/blogs/extra/splash_dash_tutorial/19.png
diff --git a/articles/extra/splash_dash_tutorial/2.html b/src/blogs/extra/splash_dash_tutorial/2.html
similarity index 100%
rename from articles/extra/splash_dash_tutorial/2.html
rename to src/blogs/extra/splash_dash_tutorial/2.html
diff --git a/articles/extra/splash_dash_tutorial/3.png b/src/blogs/extra/splash_dash_tutorial/3.png
similarity index 100%
rename from articles/extra/splash_dash_tutorial/3.png
rename to src/blogs/extra/splash_dash_tutorial/3.png
diff --git a/articles/extra/splash_dash_tutorial/4.png b/src/blogs/extra/splash_dash_tutorial/4.png
similarity index 100%
rename from articles/extra/splash_dash_tutorial/4.png
rename to src/blogs/extra/splash_dash_tutorial/4.png
diff --git a/articles/extra/splash_dash_tutorial/5.png b/src/blogs/extra/splash_dash_tutorial/5.png
similarity index 100%
rename from articles/extra/splash_dash_tutorial/5.png
rename to src/blogs/extra/splash_dash_tutorial/5.png
diff --git a/articles/extra/splash_dash_tutorial/6.png b/src/blogs/extra/splash_dash_tutorial/6.png
similarity index 100%
rename from articles/extra/splash_dash_tutorial/6.png
rename to src/blogs/extra/splash_dash_tutorial/6.png
diff --git a/articles/extra/splash_dash_tutorial/7.png b/src/blogs/extra/splash_dash_tutorial/7.png
similarity index 100%
rename from articles/extra/splash_dash_tutorial/7.png
rename to src/blogs/extra/splash_dash_tutorial/7.png
diff --git a/articles/extra/splash_dash_tutorial/8.png b/src/blogs/extra/splash_dash_tutorial/8.png
similarity index 100%
rename from articles/extra/splash_dash_tutorial/8.png
rename to src/blogs/extra/splash_dash_tutorial/8.png
diff --git a/articles/extra/splash_dash_tutorial/9.png b/src/blogs/extra/splash_dash_tutorial/9.png
similarity index 100%
rename from articles/extra/splash_dash_tutorial/9.png
rename to src/blogs/extra/splash_dash_tutorial/9.png
diff --git a/articles/extra/splash_dash_tutorial/basicWater.html b/src/blogs/extra/splash_dash_tutorial/basicWater.html
similarity index 100%
rename from articles/extra/splash_dash_tutorial/basicWater.html
rename to src/blogs/extra/splash_dash_tutorial/basicWater.html
diff --git a/articles/extra/splash_dash_tutorial/blocks.html b/src/blogs/extra/splash_dash_tutorial/blocks.html
similarity index 100%
rename from articles/extra/splash_dash_tutorial/blocks.html
rename to src/blogs/extra/splash_dash_tutorial/blocks.html
diff --git a/articles/extra/splash_dash_tutorial/character.html b/src/blogs/extra/splash_dash_tutorial/character.html
similarity index 100%
rename from articles/extra/splash_dash_tutorial/character.html
rename to src/blogs/extra/splash_dash_tutorial/character.html
diff --git a/articles/extra/splash_dash_tutorial/coins.html b/src/blogs/extra/splash_dash_tutorial/coins.html
similarity index 100%
rename from articles/extra/splash_dash_tutorial/coins.html
rename to src/blogs/extra/splash_dash_tutorial/coins.html
diff --git a/articles/extra/splash_dash_tutorial/collectCoins.html b/src/blogs/extra/splash_dash_tutorial/collectCoins.html
similarity index 100%
rename from articles/extra/splash_dash_tutorial/collectCoins.html
rename to src/blogs/extra/splash_dash_tutorial/collectCoins.html
diff --git a/articles/extra/splash_dash_tutorial/collision.html b/src/blogs/extra/splash_dash_tutorial/collision.html
similarity index 100%
rename from articles/extra/splash_dash_tutorial/collision.html
rename to src/blogs/extra/splash_dash_tutorial/collision.html
diff --git a/articles/extra/splash_dash_tutorial/color.html b/src/blogs/extra/splash_dash_tutorial/color.html
similarity index 100%
rename from articles/extra/splash_dash_tutorial/color.html
rename to src/blogs/extra/splash_dash_tutorial/color.html
diff --git a/articles/extra/splash_dash_tutorial/control.html b/src/blogs/extra/splash_dash_tutorial/control.html
similarity index 100%
rename from articles/extra/splash_dash_tutorial/control.html
rename to src/blogs/extra/splash_dash_tutorial/control.html
diff --git a/articles/extra/splash_dash_tutorial/finalDetails.html b/src/blogs/extra/splash_dash_tutorial/finalDetails.html
similarity index 100%
rename from articles/extra/splash_dash_tutorial/finalDetails.html
rename to src/blogs/extra/splash_dash_tutorial/finalDetails.html
diff --git a/articles/extra/splash_dash_tutorial/floatingCoins.html b/src/blogs/extra/splash_dash_tutorial/floatingCoins.html
similarity index 100%
rename from articles/extra/splash_dash_tutorial/floatingCoins.html
rename to src/blogs/extra/splash_dash_tutorial/floatingCoins.html
diff --git a/articles/extra/splash_dash_tutorial/gravity.html b/src/blogs/extra/splash_dash_tutorial/gravity.html
similarity index 100%
rename from articles/extra/splash_dash_tutorial/gravity.html
rename to src/blogs/extra/splash_dash_tutorial/gravity.html
diff --git a/articles/extra/splash_dash_tutorial/jump.html b/src/blogs/extra/splash_dash_tutorial/jump.html
similarity index 100%
rename from articles/extra/splash_dash_tutorial/jump.html
rename to src/blogs/extra/splash_dash_tutorial/jump.html
diff --git a/articles/extra/splash_dash_tutorial/newLevel.html b/src/blogs/extra/splash_dash_tutorial/newLevel.html
similarity index 100%
rename from articles/extra/splash_dash_tutorial/newLevel.html
rename to src/blogs/extra/splash_dash_tutorial/newLevel.html
diff --git a/articles/extra/splash_dash_tutorial/newLevelImproved.html b/src/blogs/extra/splash_dash_tutorial/newLevelImproved.html
similarity index 100%
rename from articles/extra/splash_dash_tutorial/newLevelImproved.html
rename to src/blogs/extra/splash_dash_tutorial/newLevelImproved.html
diff --git a/articles/extra/splash_dash_tutorial/springJump.html b/src/blogs/extra/splash_dash_tutorial/springJump.html
similarity index 100%
rename from articles/extra/splash_dash_tutorial/springJump.html
rename to src/blogs/extra/splash_dash_tutorial/springJump.html
diff --git a/articles/extra/splash_dash_tutorial/surface.html b/src/blogs/extra/splash_dash_tutorial/surface.html
similarity index 100%
rename from articles/extra/splash_dash_tutorial/surface.html
rename to src/blogs/extra/splash_dash_tutorial/surface.html
diff --git a/articles/extra/splash_dash_tutorial/water.html b/src/blogs/extra/splash_dash_tutorial/water.html
similarity index 100%
rename from articles/extra/splash_dash_tutorial/water.html
rename to src/blogs/extra/splash_dash_tutorial/water.html
diff --git a/articles/extra/splash_dash_tutorial/zoom/1.png b/src/blogs/extra/splash_dash_tutorial/zoom/1.png
similarity index 100%
rename from articles/extra/splash_dash_tutorial/zoom/1.png
rename to src/blogs/extra/splash_dash_tutorial/zoom/1.png
diff --git a/articles/extra/splash_dash_tutorial/zoom/2.png b/src/blogs/extra/splash_dash_tutorial/zoom/2.png
similarity index 100%
rename from articles/extra/splash_dash_tutorial/zoom/2.png
rename to src/blogs/extra/splash_dash_tutorial/zoom/2.png
diff --git a/articles/extra/splash_dash_tutorial/zoom/3.png b/src/blogs/extra/splash_dash_tutorial/zoom/3.png
similarity index 100%
rename from articles/extra/splash_dash_tutorial/zoom/3.png
rename to src/blogs/extra/splash_dash_tutorial/zoom/3.png
diff --git a/articles/extra/splash_dash_tutorial/zoom/4.png b/src/blogs/extra/splash_dash_tutorial/zoom/4.png
similarity index 100%
rename from articles/extra/splash_dash_tutorial/zoom/4.png
rename to src/blogs/extra/splash_dash_tutorial/zoom/4.png
diff --git a/articles/extra/using_inverse_kinematics_to_animate_your_character/1.png b/src/blogs/extra/using_inverse_kinematics_to_animate_your_character/1.png
similarity index 100%
rename from articles/extra/using_inverse_kinematics_to_animate_your_character/1.png
rename to src/blogs/extra/using_inverse_kinematics_to_animate_your_character/1.png
diff --git a/articles/extra/using_inverse_kinematics_to_animate_your_character/2.png b/src/blogs/extra/using_inverse_kinematics_to_animate_your_character/2.png
similarity index 100%
rename from articles/extra/using_inverse_kinematics_to_animate_your_character/2.png
rename to src/blogs/extra/using_inverse_kinematics_to_animate_your_character/2.png
diff --git a/articles/extra/using_inverse_kinematics_to_animate_your_character/3.html b/src/blogs/extra/using_inverse_kinematics_to_animate_your_character/3.html
similarity index 100%
rename from articles/extra/using_inverse_kinematics_to_animate_your_character/3.html
rename to src/blogs/extra/using_inverse_kinematics_to_animate_your_character/3.html
diff --git a/articles/extra/using_inverse_kinematics_to_animate_your_character/4.html b/src/blogs/extra/using_inverse_kinematics_to_animate_your_character/4.html
similarity index 100%
rename from articles/extra/using_inverse_kinematics_to_animate_your_character/4.html
rename to src/blogs/extra/using_inverse_kinematics_to_animate_your_character/4.html
diff --git a/articles/extra/using_inverse_kinematics_to_animate_your_character/5.html b/src/blogs/extra/using_inverse_kinematics_to_animate_your_character/5.html
similarity index 100%
rename from articles/extra/using_inverse_kinematics_to_animate_your_character/5.html
rename to src/blogs/extra/using_inverse_kinematics_to_animate_your_character/5.html
diff --git a/articles/making_games_the_bits_that_nobody_notices.html b/src/blogs/making_games_the_bits_that_nobody_notices.html
similarity index 80%
rename from articles/making_games_the_bits_that_nobody_notices.html
rename to src/blogs/making_games_the_bits_that_nobody_notices.html
index dd9074d..6ad9535 100644
--- a/articles/making_games_the_bits_that_nobody_notices.html
+++ b/src/blogs/making_games_the_bits_that_nobody_notices.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html lang = en-gb>
     <head>
         <meta charset = utf-8>
         <meta name = viewport content = 'width = device-width, initial-scale = 1'>
-        <meta name = keywords content = 'Joachim Ford, Create enemies JavaScript, Platformer enemies'>
-        <meta name = description content = 'Adding details to the game of Ios Mission'>
+        <meta name = description content = 'Free online coding blogs and open source games'>
 
         <script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
-        <script src = /js/analytics.js></script>
-        <script src = /js/main.js></script>
-        <title>Making games: Adding Details | Joachim Ford</title>
-        <link rel = stylesheet href = /main.css>
-        <link rel = icon type = image/x-icon  href = /favs/favicon.ico>
+        <script src = /src/js/analytics.js></script>
+        <script src = /src/js/main.js></script>
+        <title>Adding Pointless Details to Your Game | Joachim Ford</title>
+        <link rel = stylesheet href = /src/main.css>
+        <link rel = icon type = image/x-icon  href = /src/favs/favicon.ico>
 
         <style>
             .bg {
@@ -34,18 +33,18 @@
             </div>
             <div class = nav>
                 <a href = /games>Games</a>
-                <a href = /experiments>Experiments</a>
-                <a href = /articles>Articles</a>
+                <a href = /projects>Projects</a>
+                <a href = /blogs>Blogs</a>
                 <a href = /news>News</a>
             </div>
         </section>
 
         <section class = main>
-            <img class = bg src = /articles/extra/making_games_the_bits_that_nobody_notices/2.png>
+            <img class = bg src = /src/blogs/extra/making_games_the_bits_that_nobody_notices/2.png>
 
             <span class = date>29.12.2023</span>
             <h1>Making games: The Bits That Nobody Notices</h1>
-            <div class = big><img class = img src = /articles/extra/making_games_the_bits_that_nobody_notices/1.png></div>
+            <div class = big><img class = img src = /src/blogs/extra/making_games_the_bits_that_nobody_notices/1.png></div>
 
             <div class = demo>
                 <p>One of the most improtant parts of game development is having
@@ -59,8 +58,8 @@ <h1>Making games: The Bits That Nobody Notices</h1>
                 After all, even with today's technology, there are still limitations
                 to what a computer can handle.</p>
 
-                <p>This article talks about some of the (pointless?) details I
-                added to the game <a class = normal href = /content/ios_mission>Io's Mission</a>.
+                <p>This blog talks about some of the (pointless?) details I
+                added to the game <a class = normal href = /src/content/ios_mission>Io's Mission</a>.
                 I've only picked the best ones, so it's not too long.
                 The subjects that follow are listed in no particular order.
             </div>
@@ -76,7 +75,7 @@ <h2>DETAIL 01</h2>
                 Note that in its normal state, the vertical movement is unnoticable.
                 Unless you have very good eyes.</p>
             </div>
-            <iframe src = /articles/extra/making_games_the_bits_that_nobody_notices/3.html></iframe>
+            <iframe src = /src/blogs/extra/making_games_the_bits_that_nobody_notices/3.html></iframe>
             <div class = demo>
                 <h2>DETAIL 02</h2>
                 <p>Another detail I thought I'd mention is the scanlines. If you want
@@ -90,12 +89,14 @@ <h2>DETAIL 02</h2>
                 In the image below, I've exaggerated these weights 100x to help you see
                 them better.</p>
             </div>
-            <div class = big><img class = img src = /articles/extra/making_games_the_bits_that_nobody_notices/4.png></div>
+            <div class = big><img class = img src = /src/blogs/extra/making_games_the_bits_that_nobody_notices/4.png></div>
             <div class = demo>
                 <p>Pointless, if you ak me. However, we must also remember that - as my father
                 used to say - "it's all in the details." When you think about it,
                 you realise that these invisible weights on the scanlines are
-                crucial - crucial! - to the gameplay of Io's Mission.</p>
+                crucial - crucial! - to the gameplay. I mean think about it,
+                without these subtly changing scanlines, the visual experience
+                of the game would be flat and uninteresting.</p>
             </div>
             <div class = demo>
                 <h2>DETAIL 03</h2>
@@ -110,7 +111,7 @@ <h2>DETAIL 03</h2>
                 ths crocodile splashes towards you, or the legs are revealed for an
                 instant when he jumps, but aside from that these parts are practically invisible.</p>
             </div>
-            <div class = big><img class = img src = /articles/extra/making_games_the_bits_that_nobody_notices/5.png></div>
+            <div class = big><img class = img src = /src/blogs/extra/making_games_the_bits_that_nobody_notices/5.png></div>
             <div class = demo>
                 <p>Important note: for those who have exceptionally good eyes
                 you actually <i>will</i> be able to see the whole crocodile during the
@@ -120,7 +121,7 @@ <h2>DETAIL 03</h2>
 
             <div class = demo>
                 <h2>THE SMALLER DETAILS</h2>
-                <p>This article could be much longer, but thank goodness,
+                <p>This blog could be much longer, but thank goodness,
                 the rest has been conveniently bunched into a single paragraph.</p>
 
                 <p>Did you notice that Io breathed? Or that, when he transitioned,
@@ -136,8 +137,8 @@ <h2>THE SMALLER DETAILS</h2>
 
                 <p>I've officially spent far too much time on pointless details.
                 Does it really add anything to
-                <a class = normal href = /content/ios_mission>Io's Mission</a>?
-                That's up to you. But for now I'm tired of writing articles and
+                <a class = normal href = /src/content/ios_mission>Io's Mission</a>?
+                That's up to you. But for now I'm tired of writing blogs and
                 making games.</p>
 
                 <p>See you next time!</p>
@@ -164,7 +165,7 @@ <h2>THE SMALLER DETAILS</h2>
                     <input type = text name = name placeholder = 'Anonymous'>
                     <div class = cont>
                         <textarea type = text name = message placeholder = 'Enter a message' required></textarea>
-                        <button class = button id = info><img src = /images/info.svg></button>
+                        <button class = button id = info><img src = /src/images/info.svg></button>
                     </div>
                     <div class = h-captcha data-captcha = true id = captcha></div>
                     <button type = submit class = button onmousedown = pressPost()>Post</button>
@@ -177,9 +178,9 @@ <h2>THE SMALLER DETAILS</h2>
 
         <button class = theme onclick = toggleTheme()>Change Theme</button>
         <span class = copyright>
-            © Copyright <span class = year></span> joachimford.uk
-            <a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></a>
-            <a href = mailto:hello@joachimford.uk><img src = /images/mail.svg></a>
+            &copy; <span class = year></span> Joachim Ford. All rights reserved.
+            <a href = https://github.com/Hope41 target = _blank><img src = /src/images/github.svg></img></a>
+            <a href = mailto:hello@joachimford.uk><img src = /src/images/mail.svg></img></a>
         </span>
     </body>
 </html>
diff --git a/articles/procedural_room_generation_snakes_and_ladders.html b/src/blogs/procedural_room_generation_snakes_and_ladders.html
similarity index 83%
rename from articles/procedural_room_generation_snakes_and_ladders.html
rename to src/blogs/procedural_room_generation_snakes_and_ladders.html
index a7ed962..37d31c4 100644
--- a/articles/procedural_room_generation_snakes_and_ladders.html
+++ b/src/blogs/procedural_room_generation_snakes_and_ladders.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html lang = en-gb>
     <head>
         <meta charset = utf-8>
         <meta name = viewport content = 'width = device-width, initial-scale = 1'>
-        <meta name = keywords content = 'Joachim Ford, level generation'>
-        <meta name = description content = 'How to animate and display enemies using rectangles'>
+        <meta name = description content = 'Free online coding blogs and open source games'>
 
         <script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
-        <script src = /js/analytics.js></script>
-        <script src = /js/main.js></script>
-        <title>Procedural Room Generation | Joachim Ford</title>
-        <link rel = stylesheet href = /main.css>
-        <link rel = icon type = image/x-icon  href = /favs/favicon.ico>
+        <script src = /src/js/analytics.js></script>
+        <script src = /src/js/main.js></script>
+        <title>Procedurally Generate Rooms in JavaScript | Joachim Ford</title>
+        <link rel = stylesheet href = /src/main.css>
+        <link rel = icon type = image/x-icon  href = /src/favs/favicon.ico>
     </head>
 
     <body>
@@ -22,8 +21,8 @@
             </div>
             <div class = nav>
                 <a href = /games>Games</a>
-                <a href = /experiments>Experiments</a>
-                <a href = /articles>Articles</a>
+                <a href = /projects>Projects</a>
+                <a href = /blogs>Blogs</a>
                 <a href = /news>News</a>
             </div>
         </section>
@@ -31,13 +30,13 @@
         <section class = main>
             <span class = date>23.08.2022</span>
             <h1>Procedural Room Generation - Snakes and Ladders</h1>
-            <div class = big><img class = img src = /articles/extra/procedural_room_generation_snakes_and_ladders/1.png></div>
+            <div class = big><img class = img src = /src/blogs/extra/procedural_room_generation_snakes_and_ladders/1.png></div>
             <div class = demo>
                 <p>Ever since I started coding some years ago, I always liked the idea
                 of games whose levels were different every time. Yes, the advantage
                 of using formulas to create levels is it gives players a different
-                experience each time they play the game. This article runs through the generation of
-                <a class = normal href = /articles/3_tips_for_game_development#sub target = _blank>pretty much</a>
+                experience each time they play the game. This blog runs through the generation of
+                <a class = normal href = /src/blogs/3_tips_for_game_development#sub target = _blank>pretty much</a>
                 my first attempt on generating levels with code. Hope you enjoy!</p>
             </div>
 
@@ -82,7 +81,7 @@ <h3>Set up</h3>
                 <p>That's all you need to set up the map. Now we can start carving bits away!</p>
             </div>
 
-            <div class = big><img class = img src = /articles/extra/procedural_room_generation_snakes_and_ladders/2.png></div>
+            <div class = big><img class = img src = /src/blogs/extra/procedural_room_generation_snakes_and_ladders/2.png></div>
 
             <div class = demo>
                 <h3>Chambers</h3>
@@ -109,7 +108,7 @@ <h3>Chambers</h3>
     }
 }</pre></div>
 
-            <div class = big><img class = img src = /articles/extra/procedural_room_generation_snakes_and_ladders/3.png></div>
+            <div class = big><img class = img src = /src/blogs/extra/procedural_room_generation_snakes_and_ladders/3.png></div>
 
             <div class = demo>
                 <h3>Tunnels</h3>
@@ -131,7 +130,7 @@ <h3>Tunnels</h3>
                 Note how the passages seem to point towards the bottom right corner:</p>
             </div>
 
-            <div class = big><img class = img src = /articles/extra/procedural_room_generation_snakes_and_ladders/4.png></div>
+            <div class = big><img class = img src = /src/blogs/extra/procedural_room_generation_snakes_and_ladders/4.png></div>
 
             <div class = demo>
                 <p>You may notice a problem.
@@ -140,7 +139,7 @@ <h3>Tunnels</h3>
                 bottom edge, and that solves the problem.</p>
             </div>
 
-            <div class = big><img class = img src = /articles/extra/procedural_room_generation_snakes_and_ladders/5.png></div>
+            <div class = big><img class = img src = /src/blogs/extra/procedural_room_generation_snakes_and_ladders/5.png></div>
 
             <div class = demo>
                 <h3>Ladders</h3>
@@ -163,7 +162,7 @@ <h3>Ladders</h3>
                 able to get into rooms that he couldn't before.</p>
             </div>
 
-            <div class = big><img class = img src = /articles/extra/procedural_room_generation_snakes_and_ladders/6.png></div>
+            <div class = big><img class = img src = /src/blogs/extra/procedural_room_generation_snakes_and_ladders/6.png></div>
 
             <div class = demo>
                 <h3>Reverse generation</h3>
@@ -184,7 +183,7 @@ <h3>Reverse generation</h3>
                 map.</p>
             </div>
 
-            <div class = big><img class = img src = /articles/extra/procedural_room_generation_snakes_and_ladders/7.png></div>
+            <div class = big><img class = img src = /src/blogs/extra/procedural_room_generation_snakes_and_ladders/7.png></div>
 
             <div class = demo>
                 <h3>Side effects</h3>
@@ -234,11 +233,11 @@ <h3>Side effects</h3>
 </div>
 
                 <p>You can learn more about the enemies of
-                <a class = normal href = /content/snakes_and_ladders target = _blank>Snakes And Ladders</a>
-                in the <a class = normal href = /articles/create_and_animate_enemies_using_shapes target = _blank>next article</a>
+                <a class = normal href = /src/content/snakes_and_ladders target = _blank>Snakes And Ladders</a>
+                in the <a class = normal href = /src/blogs/create_and_animate_enemies_using_shapes target = _blank>next blog</a>
                 of this series.</p>
 
-                <p>That's it for this article, I hope it clarified things for you
+                <p>That's it for this blog, I hope it clarified things for you
                 and maybe it will come in handy for projects in the months to come!</p>
             </div>
 
@@ -263,7 +262,7 @@ <h3>Side effects</h3>
                     <input type = text name = name placeholder = 'Anonymous'>
                     <div class = cont>
                         <textarea type = text name = message placeholder = 'Enter a message' required></textarea>
-                        <button class = button id = info><img src = /images/info.svg></button>
+                        <button class = button id = info><img src = /src/images/info.svg></button>
                     </div>
                     <div class = h-captcha data-captcha = true id = captcha></div>
                     <button type = submit class = button onmousedown = pressPost()>Post</button>
@@ -276,9 +275,9 @@ <h3>Side effects</h3>
 
         <button class = theme onclick = toggleTheme()>Change Theme</button>
         <span class = copyright>
-            © Copyright <span class = year></span> joachimford.uk
-            <a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></a>
-            <a href = mailto:hello@joachimford.uk><img src = /images/mail.svg></a>
+            &copy; <span class = year></span> Joachim Ford. All rights reserved.
+            <a href = https://github.com/Hope41 target = _blank><img src = /src/images/github.svg></img></a>
+            <a href = mailto:hello@joachimford.uk><img src = /src/images/mail.svg></img></a>
         </span>
     </body>
 </html>
\ No newline at end of file
diff --git a/articles/splash_dash_tutorial.html b/src/blogs/splash_dash_tutorial.html
similarity index 89%
rename from articles/splash_dash_tutorial.html
rename to src/blogs/splash_dash_tutorial.html
index bff164f..ba66a4a 100644
--- a/articles/splash_dash_tutorial.html
+++ b/src/blogs/splash_dash_tutorial.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html lang = en-gb>
     <head>
         <meta charset = utf-8>
         <meta name = viewport content = 'width = device-width, initial-scale = 1'>
-        <meta name = keywords content = 'JavaScript code golfing, Code golfing games, Js1k'>
-        <meta name = description content = 'Make a platform game in 1 kilobyte of JavaScript'>
+        <meta name = description content = 'Free online coding blogs and open source games'>
 
         <script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
-        <script src = /js/analytics.js></script>
-        <script src = /js/main.js></script>
+        <script src = /src/js/analytics.js></script>
+        <script src = /src/js/main.js></script>
         <title>The Splash Dash Tutorial | Joachim Ford</title>
-        <link rel = stylesheet href = /main.css>
-        <link rel = icon type = image/x-icon  href = /favs/favicon.ico>
+        <link rel = stylesheet href = /src/main.css>
+        <link rel = icon type = image/x-icon  href = /src/favs/favicon.ico>
 
         <style>
             h4 {
@@ -25,7 +24,7 @@
     </head>
 
     <body>
-        <div id = back><img src = /images/back.svg></div>
+        <div id = back><img src = /src/images/back.svg></div>
         <section class = topnav>
             <div class = title>
                 <a class = brand href = '/'>Joachim Ford</a>
@@ -33,8 +32,8 @@
             </div>
             <div class = nav>
                 <a href = /games>Games</a>
-                <a href = /experiments>Experiments</a>
-                <a href = /articles>Articles</a>
+                <a href = /projects>Projects</a>
+                <a href = /blogs>Blogs</a>
                 <a href = /news>News</a>
             </div>
         </section>
@@ -43,21 +42,21 @@
             <span class = date>04.08.2024</span>
             <h1>The Splash Dash Tutorial</h1>
             <div class = big>
-                <a href = /news/splashDash target = _blank>
-                    <img class = img src = /articles/extra/splash_dash_tutorial/17.png>
-                    <div class = play><img src = /images/play.svg></div>
+                <a href = /src/news/splashDash target = _blank>
+                    <img class = img src = /src/blogs/extra/splash_dash_tutorial/17.png>
+                    <div class = play><img src = /src/images/play.svg></div>
                 </a>
             </div>
 
             <div class = demo>
                 <p>The game <b>Splash Dash</b> was my entry to a competition running from July to August 2024.
-                In this article, I'm going to try to explain how it was made, line by line.</p>
+                In this blog, I'm going to try to explain how it was made, line by line.</p>
                 <p>When I started writing this, I sort of forgot how difficult these
                 projects are to explain. We will go into very extreme detail - but no pressure!
                 Feel free to flick through it at your own pace.</p>
 
                 <div class = gap>
-                    <a class = button href = /news/splashDash target = _blank>Play Splash Dash</a>
+                    <a class = button href = /src/news/splashDash target = _blank>Play Splash Dash</a>
                 </div>
 
                 <pre class = code>&lt;canvas id=c>&lt;script>for(p='(e,d)Q&lt;17&!PeightO0,NNNWLr(KfoKJ=d:Ikey x,y=c./2o.fillRect(+.),4,.1e==>S(e=innerd=(i-1Styl"#+=-e)*u+HA(d5,e(d,eA)|	5)M[i-d)*u+W,(&&(=Q=>*Math.sin(+1]==e. Codel=n=>{JWwidthWidth6,HhOHO6,ogetContext`2d`,u=(W+H)5,r=,l,f)=>l,u*f,u*fC=d,F=e,g&s?f=-.18:ef.007,h?d-=.1:qd.1t,KLKs=N9,WA&!	&!)e%1&lt;fF,s=1,f=0	)|A||d&lt;0|d5>70C,	)f=NF)ePA)&a)>k[~~d*~~e]=1R=Nx=70;x--;)Jy=30;y--;)"+~(5x)-543A()?K,1):a()>&yPk[x*y]ff0",Kx4,y41p/50+x+R++.3));JK-W,NWK7L034",L-m*W/5e3,H/9r+f,.4rKd3,e0698",i=634;i-=2;o.lineTo(/9]+13))p?(]*>3(]02p*)-),~=~/9)&e>12&e&lt;14?f/4:*=.97*&lt;630-=]5):M.push(N0);KN13,70(R?++m>5e3?C:p9:T>4?t="#ff0":k=[T*=14,Tm=1],requestAnimationFrame(l)},f=g=h=q=s=u=T=m=p=Nk=[M=[]],t="#3897",S38|87?gI39|68?qI37|65?hINon down,1on upa(1+~~e,~~d,6d*e*9+T)+d5AaQ>Nl()';G=/[^!-HMR-~]/.exec(p);)with(p.split(G))p=join(shift());eval(p)&lt;/script></pre>
@@ -67,20 +66,20 @@ <h1>The Splash Dash Tutorial</h1>
                 <span class = description>
                     <div class = table><h4>Table Of Contents</h4></div>
                     <p></p>
-                    ∙ <a class = normal href = /articles/splash_dash_tutorial#intro>Introduction</a><br>
-                    ∙ <a class = normal href = /articles/splash_dash_tutorial#game>Coding the Game From Scratch</a><br>
-                    &emsp;∙ <a class = normal href = /articles/splash_dash_tutorial#setup>Step 1. Setting Up</a><br>
-                    &emsp;∙ <a class = normal href = /articles/splash_dash_tutorial#character>Step 2. The Character</a><br>
-                    &emsp;∙ <a class = normal href = /articles/splash_dash_tutorial#blocks>Step 3. Blocks and Gravity</a><br>
-                    &emsp;∙ <a class = normal href = /articles/splash_dash_tutorial#collision>Step 4. Tiny Collision</a><br>
-                    &emsp;∙ <a class = normal href = /articles/splash_dash_tutorial#jumping>Step 5. Jumping</a><br>
-                    &emsp;∙ <a class = normal href = /articles/splash_dash_tutorial#worlds>Step 6. Making Worlds</a><br>
-                    &emsp;&emsp;∙ <a class = normal href = /articles/splash_dash_tutorial#formula>Part 1. The Basic Formula</a><br>
-                    &emsp;&emsp;∙ <a class = normal href = /articles/splash_dash_tutorial#coins>Part 2. Adding Coins</a><br>
-                    &emsp;&emsp;∙ <a class = normal href = /articles/splash_dash_tutorial#water>Part 3. Simulating Water</a><br>
-                    &emsp;&emsp;∙ <a class = normal href = /articles/splash_dash_tutorial#levels>Part 4. Playable Levels</a><br>
-                    &emsp;&emsp;∙ <a class = normal href = /articles/splash_dash_tutorial#details>Part 5. Final Details</a><br>
-                    ∙ <a class = normal href = /articles/splash_dash_tutorial#code>Once Last Golf</a><br>
+                    ∙ <a class = normal href = /src/blogs/splash_dash_tutorial#intro>Introduction</a><br>
+                    ∙ <a class = normal href = /src/blogs/splash_dash_tutorial#game>Coding the Game From Scratch</a><br>
+                    &emsp;∙ <a class = normal href = /src/blogs/splash_dash_tutorial#setup>Step 1. Setting Up</a><br>
+                    &emsp;∙ <a class = normal href = /src/blogs/splash_dash_tutorial#character>Step 2. The Character</a><br>
+                    &emsp;∙ <a class = normal href = /src/blogs/splash_dash_tutorial#blocks>Step 3. Blocks and Gravity</a><br>
+                    &emsp;∙ <a class = normal href = /src/blogs/splash_dash_tutorial#collision>Step 4. Tiny Collision</a><br>
+                    &emsp;∙ <a class = normal href = /src/blogs/splash_dash_tutorial#jumping>Step 5. Jumping</a><br>
+                    &emsp;∙ <a class = normal href = /src/blogs/splash_dash_tutorial#worlds>Step 6. Making Worlds</a><br>
+                    &emsp;&emsp;∙ <a class = normal href = /src/blogs/splash_dash_tutorial#formula>Part 1. The Basic Formula</a><br>
+                    &emsp;&emsp;∙ <a class = normal href = /src/blogs/splash_dash_tutorial#coins>Part 2. Adding Coins</a><br>
+                    &emsp;&emsp;∙ <a class = normal href = /src/blogs/splash_dash_tutorial#water>Part 3. Simulating Water</a><br>
+                    &emsp;&emsp;∙ <a class = normal href = /src/blogs/splash_dash_tutorial#levels>Part 4. Playable Levels</a><br>
+                    &emsp;&emsp;∙ <a class = normal href = /src/blogs/splash_dash_tutorial#details>Part 5. Final Details</a><br>
+                    ∙ <a class = normal href = /src/blogs/splash_dash_tutorial#code>Once Last Golf</a><br>
                 </span>
             </div>
 
@@ -104,7 +103,7 @@ <h2 id = intro>Introduction</h2>
                 iPhone alone. Here's a zoom-out of how many games that would be.</p>
             </div>
 
-            <iframe src = /articles/extra/splash_dash_tutorial/2.html></iframe>
+            <iframe src = /src/blogs/extra/splash_dash_tutorial/2.html></iframe>
 
             <div class = demo>
                 <p>I can't imagine there are many people who would actually <i>want</i>
@@ -123,7 +122,7 @@ <h2 id = intro>Introduction</h2>
                 <h2 id = game>Coding the Game From Scratch</h2>
                 <p>Before and during the competition, I set myself the
                 challenge of making a decent platformer in the smallest possible
-                amount of bytes. The rest of this article will explain the entire
+                amount of bytes. The rest of this blog will explain the entire
                 development of <b>Splash Dash.</b></p>
 
                 <h3 id = setup>Step 1. Setting Up</h3>
@@ -145,7 +144,7 @@ <h3 id = setup>Step 1. Setting Up</h3>
                 canvas, instead of simply drawing a static image.</p>
 
                 <div class = hint>
-                    <img src = /images/bulb.svg>
+                    <img src = /src/images/bulb.svg>
                     <p>To visualise this, consider how a flipbook works. It's
                     made of a series of "frames," and by flipping the pages we can
                     get a decent animation. Similarly, instead of drawing a single
@@ -203,7 +202,7 @@ <h3 id = character>Step 2. The Character</h3>
                 simulation.</p>
 
 <div class = codeCont>
-<a href = /articles/extra/splash_dash_tutorial/character.html target = _blank>Run Code</a>
+<a href = /src/blogs/extra/splash_dash_tutorial/character.html target = _blank>Run Code</a>
 <pre class = code>
 #l=_=>{
 #W=c.width=innerWidth-16
@@ -248,7 +247,7 @@ <h3 id = character>Step 2. The Character</h3>
                 Take a look at the commented areas if you don't understand.</p>
 
 <div class = codeCont>
-<a href = /articles/extra/splash_dash_tutorial/character.html target = _blank>Run Code</a>
+<a href = /src/blogs/extra/splash_dash_tutorial/character.html target = _blank>Run Code</a>
 <pre class = code>// Make a function the draws rectangles
 r=(x,y,s)=>X.fillRect((x-d)*z+W/2,(y-e)*z+H/2,z*s,z*s)
 
@@ -258,7 +257,7 @@ <h3 id = character>Step 2. The Character</h3>
 r(d+.3,e+.4,.1) // Right foot</pre></div>
             </div>
 
-            <div class = big><img class = img src = /articles/extra/splash_dash_tutorial/5.png></div>
+            <div class = big><img class = img src = /src/blogs/extra/splash_dash_tutorial/5.png></div>
 
             <div class = demo>
                 <h3 id = blocks>Step 3. Blocks and Gravity</h3>
@@ -266,7 +265,7 @@ <h3 id = blocks>Step 3. Blocks and Gravity</h3>
                 it inhabits. Let's write a small patch of code to create some ground.</p>
 
 <div class = codeCont>
-<a href = /articles/extra/splash_dash_tutorial/blocks.html target = _blank>Run Code</a>
+<a href = /src/blogs/extra/splash_dash_tutorial/blocks.html target = _blank>Run Code</a>
 <pre class = code>#r=(x,y,s)=>X.fillRect((x-d)*z+W/2,(y-e)*z+H/2,z*s,z*s)
 
 // Set the fill colour to orange
@@ -283,7 +282,7 @@ <h3 id = blocks>Step 3. Blocks and Gravity</h3>
                 <p>This is what it should look like so far.</p>
             </div>
 
-            <div class = big><img class = img src = /articles/extra/splash_dash_tutorial/6.png></div>
+            <div class = big><img class = img src = /src/blogs/extra/splash_dash_tutorial/6.png></div>
 
             <div class = demo>
                 <p>Things are taking shape! At the moment, the main character is
@@ -291,7 +290,7 @@ <h3 id = blocks>Step 3. Blocks and Gravity</h3>
                 checks for arrow or WASD keyboard inputs, which allows for player movement.</p>
 
 <div class = codeCont>
-<a href = /articles/extra/splash_dash_tutorial/control.html target = _blank>Run Code</a>
+<a href = /src/blogs/extra/splash_dash_tutorial/control.html target = _blank>Run Code</a>
 <pre class = code>
 #l=_=>{
 #W=c.width=innerWidth-16
@@ -341,7 +340,7 @@ <h3 id = blocks>Step 3. Blocks and Gravity</h3>
                 for the addition of <b>gravity.</b> Here's the implementation of that.</p>
 
 <div class = codeCont>
-<a href = /articles/extra/splash_dash_tutorial/gravity.html target = _blank>Run Code</a>
+<a href = /src/blogs/extra/splash_dash_tutorial/gravity.html target = _blank>Run Code</a>
 <pre class = code>
 #l=_=>{
 #W=c.width=innerWidth-16
@@ -386,7 +385,7 @@ <h3 id = collision>Step 4. Tiny Collision</h3>
                 of perfectly flat ground. Let's visualise that.</p>
             </div>
 
-            <div class = big><img class = img src = /articles/extra/splash_dash_tutorial/3.png></div>
+            <div class = big><img class = img src = /src/blogs/extra/splash_dash_tutorial/3.png></div>
 
             <div class = demo>
                 <p>For the falling ball to have collision with the ground, we would simply
@@ -406,7 +405,7 @@ <h3 id = collision>Step 4. Tiny Collision</h3>
                 determining a valid amount by which the ball should be moved away.</p>
             </div>
 
-            <div class = big><img class = img src = /articles/extra/splash_dash_tutorial/4.png></div>
+            <div class = big><img class = img src = /src/blogs/extra/splash_dash_tutorial/4.png></div>
 
             <div class = demo>
                 <p>In the end, I decided to go with the simplest approach, although
@@ -429,7 +428,7 @@ <h3 id = collision>Step 4. Tiny Collision</h3>
                 his position before we move it.</p>
 
 <div class = codeCont>
-<a href = /articles/extra/splash_dash_tutorial/collision.html target = _blank>Run Code</a>
+<a href = /src/blogs/extra/splash_dash_tutorial/collision.html target = _blank>Run Code</a>
 <pre class = code>#W=c.width=innerWidth-16
 #H=c.height=innerHeight-16
 
@@ -461,7 +460,7 @@ <h3 id = collision>Step 4. Tiny Collision</h3>
 A=(x,y)=>a(x,y)>0
 #l()
 </pre></div>
-                <div class = big><img class = img src = /articles/extra/splash_dash_tutorial/8.png></div>
+                <div class = big><img class = img src = /src/blogs/extra/splash_dash_tutorial/8.png></div>
                 <p>If you run the code above you'll realise that the player now collides
                 with the ground. So what's changed? At the top of the update loop, we get the
                 <b>previous player position</b>. Further down, we detect collision by
@@ -482,7 +481,7 @@ <h3 id = collision>Step 4. Tiny Collision</h3>
                 <span class = snip>2</span>.</p>
             </div>
 
-            <div class = big><img class = img src = /articles/extra/splash_dash_tutorial/7.png></div>
+            <div class = big><img class = img src = /src/blogs/extra/splash_dash_tutorial/7.png></div>
 
             <div class = demo>
                 <p>To check if the player is colliding with the block, we simply
@@ -491,7 +490,7 @@ <h3 id = collision>Step 4. Tiny Collision</h3>
                 position matches the block's position. This is a very simple
                 way to check collision with blocks that are ordered in a grid.
                 In fact, a similar technique was used in the game
-                <a class = normal target = _blank href = /content/ios_mission>Io's Mission</a>.</p>
+                <a class = normal target = _blank href = /src/content/ios_mission>Io's Mission</a>.</p>
 
                 <p>Anyway, back to the code. Let's review the two functions again.</p>
 
@@ -551,7 +550,7 @@ <h3 id = collision>Step 4. Tiny Collision</h3>
                     just under the player is a solid block...</p>
 
                     <div class = hint>
-                        <img src = /images/bulb.svg>
+                        <img src = /src/images/bulb.svg>
                         <p>Remember the player is only half the size of a block,
                         so we use <span class = snip>.5</span> to access the block
                         below him.</p>
@@ -561,7 +560,7 @@ <h3 id = collision>Step 4. Tiny Collision</h3>
                     of the player is not <span class = snip>!</span> touching anything...</p>
 
                     <div class = hint>
-                        <img src = /images/bulb.svg>
+                        <img src = /src/images/bulb.svg>
                         <p>Remember JavaScript works from the top left, so
                         <span class = snip>d</span> and <span class = snip>e</span> refer
                         to the top left of the player.</p>
@@ -598,7 +597,7 @@ <h3 id = jumping>Step 5. Jumping</h3>
                 the player is on the ground, we can add this ability. Let's update our code!</p>
 
 <div class = codeCont>
-<a href = /articles/extra/splash_dash_tutorial/jump.html target = _blank>Run Code</a>
+<a href = /src/blogs/extra/splash_dash_tutorial/jump.html target = _blank>Run Code</a>
 <pre class = code>
 &lt;canvas id=c>&lt;/canvas>
 &lt;script>
@@ -665,7 +664,7 @@ <h3 id = jumping>Step 5. Jumping</h3>
                 since we already know the player's y velocity, <span class = snip>f</span>.</p>
 
 <div class = codeCont>
-<a href = /articles/extra/splash_dash_tutorial/springJump.html target = _blank>Run Code</a>
+<a href = /src/blogs/extra/splash_dash_tutorial/springJump.html target = _blank>Run Code</a>
 <pre class = code>
 #X.fillStyle='#034' // Body colour
 r(d,e+f,.4) // Body
@@ -714,14 +713,14 @@ <h4 id = formula>Part 1. The Basic Formula</h4>
                 gives us a nice looking surface.</p>
 
 <div class = codeCont>
-<a href = /articles/extra/splash_dash_tutorial/surface.html target = _blank>Run Code</a>
+<a href = /src/blogs/extra/splash_dash_tutorial/surface.html target = _blank>Run Code</a>
 <pre class = code>a=(x,y)=>{x=~~x+1,y=~~y;return (Math.sin(y*x*9)*6)+y-15}</pre></div>
 
                 <p>Further up un our update loop, we can also give these blocks
                 more natural colours.</p>
 
 <div class = codeCont>
-<a href = /articles/extra/splash_dash_tutorial/color.html target = _blank>Run Code</a>
+<a href = /src/blogs/extra/splash_dash_tutorial/color.html target = _blank>Run Code</a>
 <pre class = code>
 for(x=70;x--;){
     for(y=30;y--;){
@@ -731,7 +730,7 @@ <h4 id = formula>Part 1. The Basic Formula</h4>
 }
 </pre></div>
 
-                <div class = big><img class = img src = /articles/extra/splash_dash_tutorial/9.png></div>
+                <div class = big><img class = img src = /src/blogs/extra/splash_dash_tutorial/9.png></div>
 
                 <p>It's not looking too bad! I thought the generation formula was
                 completely sorted at this point, but I later realised it needed some tweaking.
@@ -745,7 +744,7 @@ <h4 id = coins>Part 2. Adding Coins</h4>
                 to decide whether a coin should be placed on a block or not.</p>
 
 <div class = codeCont>
-<a href = /articles/extra/splash_dash_tutorial/coins.html target = _blank>Run Code</a>
+<a href = /src/blogs/extra/splash_dash_tutorial/coins.html target = _blank>Run Code</a>
 <pre class = code>
 #for(x=70;x--;){
 #    for(y=30;y--;){
@@ -777,7 +776,7 @@ <h4 id = coins>Part 2. Adding Coins</h4>
                 we added <span class = snip>&y&lt;17</span>, which ensures that coins are never
                 created after the 16th row.</p>
 
-                <div class = big><img class = img src = /articles/extra/splash_dash_tutorial/10.png></div>
+                <div class = big><img class = img src = /src/blogs/extra/splash_dash_tutorial/10.png></div>
                 <p>Unlike a lot of features in this game, coins have to be stored.
                 That means, where all the blocks in the world are solely calculated
                 <b>based on their position</b>, the thing that decides if a coins
@@ -803,7 +802,7 @@ <h4 id = coins>Part 2. Adding Coins</h4>
                 collected coins aren't drawn.</p>
 
 <div class = codeCont>
-<a href = /articles/extra/splash_dash_tutorial/collectCoins.html target = _blank>Run Code</a>
+<a href = /src/blogs/extra/splash_dash_tutorial/collectCoins.html target = _blank>Run Code</a>
 <pre class = code>
 #A(d,e+.5)&!A(d,e)|A(d+.5,e+.5)&!A(d+.5,e)&&(e+.5)%1&lt;f&&(e=E,v=1,f=0) // Ground
 #A(d,e)|A(d+.5,e)|A(d,e+.5)|A(d+.5,e+.5)|d&lt;0|d+.5>70&&(d=D,A(d,e)|A(d+.5,e)&&(f=0,e=E)) // Wall and Ceiling
@@ -825,7 +824,7 @@ <h4 id = coins>Part 2. Adding Coins</h4>
                 y position...</p>
 
 <div class = codeCont>
-<a href = /articles/extra/splash_dash_tutorial/floatingCoins.html target = _blank>Run Code</a>
+<a href = /src/blogs/extra/splash_dash_tutorial/floatingCoins.html target = _blank>Run Code</a>
 <pre class = code>
 #for(x=70;x--;){
 #    for(y=30;y--;){
@@ -848,14 +847,14 @@ <h4 id = water>Part 3. Simulating Water</h4>
                 speed up or slow down accordingly to balance with its neighbour.</p>
             </div>
 
-            <div class = big><img class = img src = /articles/extra/splash_dash_tutorial/11.png></div>
+            <div class = big><img class = img src = /src/blogs/extra/splash_dash_tutorial/11.png></div>
 
             <div class = demo>
                 <p>Before we implement that, let's see what it looks like to add
                 some flat water to the world.</p>
 
 <div class = codeCont>
-<a href = /articles/extra/splash_dash_tutorial/basicWater.html target = _blank>Run Code</a>
+<a href = /src/blogs/extra/splash_dash_tutorial/basicWater.html target = _blank>Run Code</a>
 <pre class = code>
 #r(d,e+.4,.1)
 #r(d+.3,e+.4,.1)
@@ -867,7 +866,7 @@ <h4 id = water>Part 3. Simulating Water</h4>
 #requestAnimationFrame(l)
 </pre></div>
 
-                <div class = big><img class = img src = /articles/extra/splash_dash_tutorial/12.png></div>
+                <div class = big><img class = img src = /src/blogs/extra/splash_dash_tutorial/12.png></div>
 
                 <p>The bulk of the water looks okay, but the surface needs to be
                 more fluid. In the code above, we simply created a transparent blue
@@ -875,7 +874,7 @@ <h4 id = water>Part 3. Simulating Water</h4>
                 the method we described in the outset of this section.</p>
 
 <div class = codeCont>
-<a href = /articles/extra/splash_dash_tutorial/water.html target = _blank>Run Code</a>
+<a href = /src/blogs/extra/splash_dash_tutorial/water.html target = _blank>Run Code</a>
 <pre class = code>
 #r(d,e+.4,.1)
 #r(d+.3,e+.4,.1)
@@ -909,7 +908,7 @@ <h4 id = water>Part 3. Simulating Water</h4>
 // Create an array called J to store the water
 k=[J=[]]
 </pre></div>
-                <div class = big><img class = img src = /articles/extra/splash_dash_tutorial/13.png></div>
+                <div class = big><img class = img src = /src/blogs/extra/splash_dash_tutorial/13.png></div>
 
                 <p>It works, but what's the code doing? First, we create a new
                 array - <span class = snip>J</span> - to store all the points
@@ -976,7 +975,7 @@ <h4 id = water>Part 3. Simulating Water</h4>
                     them, it's easy to check if the player is in line with one of them.</p>
 
                     <div class = hint>
-                        <img src = /images/bulb.svg>
+                        <img src = /src/images/bulb.svg>
                         <p>The <span class = snip>i/9</span> is a quick way of getting
                         the relative position of the water segment. The width of the
                         whole world in our game is 70 blocks. The amount of water segments
@@ -1088,7 +1087,7 @@ <h4 id = levels>Part 4. Playable Levels</h4>
                 generate different worlds every time.</p>
 
 <div class = codeCont>
-<a href = /articles/extra/splash_dash_tutorial/newLevel.html target = _blank>Run Code</a>
+<a href = /src/blogs/extra/splash_dash_tutorial/newLevel.html target = _blank>Run Code</a>
 <pre class = code>
 // Increase the seed and clear the collected coins array
 !K?k=[Q+=d=e=1]:0
@@ -1124,18 +1123,18 @@ <h4 id = levels>Part 4. Playable Levels</h4>
                 <p>The program not changes worlds! Since our game needs a few levels,
                 I've taken a screenshot of the first three levels for us to analyse.
                 This is the first level, where the seed is zero.</p>
-                <div class = big><img class = img src = /articles/extra/splash_dash_tutorial/14.png></div>
+                <div class = big><img class = img src = /src/blogs/extra/splash_dash_tutorial/14.png></div>
 
                 <p>The seed is incremented by one to give us the next level. It
                 looks pretty good!</p>
-                <div class = big><img class = img src = /articles/extra/splash_dash_tutorial/15.png></div>
+                <div class = big><img class = img src = /src/blogs/extra/splash_dash_tutorial/15.png></div>
 
                 <p>Annoyingly, the last level - where the seed is two - has given
                 us some problems. As the screenshot shows, we have found our first
                 unreachable coin, which is completely trapped under the rocks.
                 Further along the level there's also a very deep hole that's
                 impossible to jump out of.</p>
-                <div class = big><img class = img src = /articles/extra/splash_dash_tutorial/16.png></div>
+                <div class = big><img class = img src = /src/blogs/extra/splash_dash_tutorial/16.png></div>
 
                 <p>As you can imagine, this was rather frustrating for me. I didn't
                 really want to remake my level generation formula, because I was
@@ -1158,7 +1157,7 @@ <h4 id = levels>Part 4. Playable Levels</h4>
                 <p>The formula works, let's implement that in code.</p>
 
 <div class = codeCont>
-<a href = /articles/extra/splash_dash_tutorial/newLevelImproved.html target = _blank>Run Code</a>
+<a href = /src/blogs/extra/splash_dash_tutorial/newLevelImproved.html target = _blank>Run Code</a>
 <pre class = code>
 #X.fill()
 
@@ -1190,7 +1189,7 @@ <h4 id = details>Part 5. Final Details</h4>
     
 
 <div class = codeCont>
-<a href = /articles/extra/splash_dash_tutorial/finalDetails.html target = _blank>Run Code</a>
+<a href = /src/blogs/extra/splash_dash_tutorial/finalDetails.html target = _blank>Run Code</a>
 <pre class = code>
 #l=_=>{
 #W=c.width=innerWidth-16
@@ -1272,7 +1271,7 @@ <h4 id = details>Part 5. Final Details</h4>
 #A=(x,y)=>a(x,y)>0
 #l()
 </pre></div>
-                <div class = big><img class = img src = /articles/extra/splash_dash_tutorial/17.png></div>
+                <div class = big><img class = img src = /src/blogs/extra/splash_dash_tutorial/17.png></div>
 
                 <p>The temperature bar implemented above has a timer that starts
                 at zero and counts up every frame. When this number is larger than
@@ -1280,7 +1279,7 @@ <h4 id = details>Part 5. Final Details</h4>
                 </p>
 
                 <div class = hint>
-                    <img src = /images/bulb.svg>
+                    <img src = /src/images/bulb.svg>
                     <p>We froze the player by writing the code <span class = snip>d=D</span>.
                     This works becuase <span class = snip>D</span> refers the <b>old
                     position of our player</b>. By setting his active position to
@@ -1301,7 +1300,7 @@ <h4 id = details>Part 5. Final Details</h4>
                 made it! However, you may be wondering why the code looks longer
                 than a thousand characters. That's because we haven't put it through
                 all the packing techniques that can get games as small as possible.</p>
-                <p>Let's see how small we can get it in the final section of this article.</p>
+                <p>Let's see how small we can get it in the final section of this blog.</p>
             </div>
 
             <div class = demo>
@@ -1317,7 +1316,7 @@ <h2 id = code>One Last Golf</h2>
                 JavaScript code in the box and it has given us something over
                 1000 characters smaller.</p>
 
-                <div class = big><img class = img src = /articles/extra/splash_dash_tutorial/18.png></div>
+                <div class = big><img class = img src = /src/blogs/extra/splash_dash_tutorial/18.png></div>
                 
                 <p>How did it do that?! Essentially, terser removes anything that's
                 pointless. This can include whitespace, new lines, and a few other
@@ -1325,7 +1324,7 @@ <h2 id = code>One Last Golf</h2>
                 easier for us to read.</p>
 
                 <div class = hint>
-                    <img src = /images/bulb.svg>
+                    <img src = /src/images/bulb.svg>
                     <p>Whitespace is the space between our text or code that makes
                     it readable. Computers don't need any of this "whitespace" to
                     run a program, because they don't care about aesthetics.
@@ -1338,7 +1337,7 @@ <h2 id = code>One Last Golf</h2>
                 Terser Online also includes a feature called "Regpack," which was
                 made by Siorki. Let's see how small we can go!</p>
 
-                <div class = big><img class = img src = /articles/extra/splash_dash_tutorial/19.png></div>
+                <div class = big><img class = img src = /src/blogs/extra/splash_dash_tutorial/19.png></div>
 
                 <p>From that lengthly code we had at first, we've been able to 
                 save more than 1400 characters. At the moment we're just
@@ -1353,7 +1352,7 @@ <h2 id = code>One Last Golf</h2>
                 part of code golfing is always the end, where even moving a letter
                 from one part of your code to another can save bytes.</p>
 
-                <p>That was a very long article, but I hope it helped you understand
+                <p>That was a very long blog, but I hope it helped you understand
                 how games like this are made. If there's any part you
                 did't understand or need help with, please tell me about it in the comments!</p>
             </div>
@@ -1379,7 +1378,7 @@ <h2 id = code>One Last Golf</h2>
                     <input type = text name = name placeholder = 'Anonymous'>
                     <div class = cont>
                         <textarea type = text name = message placeholder = 'Enter a message' required></textarea>
-                        <button class = button id = info><img src = /images/info.svg></button>
+                        <button class = button id = info><img src = /src/images/info.svg></button>
                     </div>
                     <div class = h-captcha data-captcha = true id = captcha></div>
                     <button type = submit class = button onmousedown = pressPost()>Post</button>
@@ -1392,9 +1391,9 @@ <h2 id = code>One Last Golf</h2>
 
         <button class = theme onclick = toggleTheme()>Change Theme</button>
         <span class = copyright>
-            © Copyright <span class = year></span> joachimford.uk
-            <a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></a>
-            <a href = mailto:hello@joachimford.uk><img src = /images/mail.svg></a>
+            &copy; <span class = year></span> Joachim Ford. All rights reserved.
+            <a href = https://github.com/Hope41 target = _blank><img src = /src/images/github.svg></img></a>
+            <a href = mailto:hello@joachimford.uk><img src = /src/images/mail.svg></img></a>
         </span>
     </body>
 </html>
diff --git a/articles/using_inverse_kinematics_to_animate_your_character.html b/src/blogs/using_inverse_kinematics_to_animate_your_character.html
similarity index 87%
rename from articles/using_inverse_kinematics_to_animate_your_character.html
rename to src/blogs/using_inverse_kinematics_to_animate_your_character.html
index e5b7d44..9f40ff5 100644
--- a/articles/using_inverse_kinematics_to_animate_your_character.html
+++ b/src/blogs/using_inverse_kinematics_to_animate_your_character.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html lang = en-gb>
     <head>
         <meta charset = utf-8>
         <meta name = viewport content = 'width = device-width, initial-scale = 1'>
-        <meta name = keywords content = 'Joachim Ford, Create enemies JavaScript, Platformer enemies'>
-        <meta name = description content = 'How to implement smooth character animations'>
+        <meta name = description content = 'Free online coding blogs and open source games'>
 
         <script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
-        <script src = /js/analytics.js></script>
-        <script src = /js/main.js></script>
-        <title>Character Inverse Kinematics | Joachim Ford</title>
-        <link rel = stylesheet href = /main.css>
-        <link rel = icon type = image/x-icon  href = /favs/favicon.ico>
+        <script src = /src/js/analytics.js></script>
+        <script src = /src/js/main.js></script>
+        <title>Animating Game Characters in JavaScript | Joachim Ford</title>
+        <link rel = stylesheet href = /src/main.css>
+        <link rel = icon type = image/x-icon  href = /src/favs/favicon.ico>
     </head>
 
     <body>
@@ -22,8 +21,8 @@
             </div>
             <div class = nav>
                 <a href = /games>Games</a>
-                <a href = /experiments>Experiments</a>
-                <a href = /articles>Articles</a>
+                <a href = /projects>Projects</a>
+                <a href = /blogs>Blogs</a>
                 <a href = /news>News</a>
             </div>
         </section>
@@ -31,26 +30,26 @@
         <section class = main>
             <span class = date>25.12.2023</span>
             <h1>Using Inverse Kinematics to Animate Your Character</h1>
-            <div class = big><img class = img src = /articles/extra/using_inverse_kinematics_to_animate_your_character/1.png></div>
+            <div class = big><img class = img src = /src/blogs/extra/using_inverse_kinematics_to_animate_your_character/1.png></div>
 
             <div class = demo>
                 <span class = description>
                     <div class = table><h4>Table Of Contents</h4></div>
                     <p></p>
-                    ∙ <a class = normal href = /articles/using_inverse_kinematics_to_animate_your_character#intro>Introduction</a><br>
-                    ∙ <a class = normal href = /articles/using_inverse_kinematics_to_animate_your_character#movement>The Transitioning Extravaganza</a><br>
-                    ∙ <a class = normal href = /articles/using_inverse_kinematics_to_animate_your_character#code>Getting to the Code</a><br>
-                    &emsp;∙ <a class = normal href = /articles/using_inverse_kinematics_to_animate_your_character#step1>Step 1</a><br>
-                    &emsp;∙ <a class = normal href = /articles/using_inverse_kinematics_to_animate_your_character#step2>Step 2</a><br>
-                    &emsp;∙ <a class = normal href = /articles/using_inverse_kinematics_to_animate_your_character#step3>Step 3</a><br>
-                    ∙ <a class = normal href = /articles/using_inverse_kinematics_to_animate_your_character#conclusion>Conclusion</a>
+                    ∙ <a class = normal href = /src/blogs/using_inverse_kinematics_to_animate_your_character#intro>Introduction</a><br>
+                    ∙ <a class = normal href = /src/blogs/using_inverse_kinematics_to_animate_your_character#movement>The Transitioning Extravaganza &bull; The Rough Concept</a><br>
+                    ∙ <a class = normal href = /src/blogs/using_inverse_kinematics_to_animate_your_character#code>Getting to the Code &bull; Animating the Character</a><br>
+                    &emsp;∙ <a class = normal href = /src/blogs/using_inverse_kinematics_to_animate_your_character#step1>Step 1</a><br>
+                    &emsp;∙ <a class = normal href = /src/blogs/using_inverse_kinematics_to_animate_your_character#step2>Step 2</a><br>
+                    &emsp;∙ <a class = normal href = /src/blogs/using_inverse_kinematics_to_animate_your_character#step3>Step 3</a><br>
+                    ∙ <a class = normal href = /src/blogs/using_inverse_kinematics_to_animate_your_character#conclusion>Conclusion</a>
                 </span>
             </div>
             <div class = demo id = intro>
-                <h3>Introduction</h3>
+                <h3>Introduction &bull; The Character Himself</h3>
 
                 <p>The development of
-                <a class = normal href = /content/ios_mission target = _blank>Io's Mission</a>
+                <a class = normal href = /src/content/ios_mission target = _blank>Io's Mission</a>
                 ran me into a lot of challenges. I was unsure - even when I'd
                 been making it for almost a year - whether I'd really be able to
                 pull it off.
@@ -65,10 +64,10 @@ <h3>Introduction</h3>
                 growth over time.</p>
             </div>
             <br>
-            <div class = big><img class = img src = /articles/extra/using_inverse_kinematics_to_animate_your_character/2.png></div>
+            <div class = big><img class = img src = /src/blogs/extra/using_inverse_kinematics_to_animate_your_character/2.png></div>
 
             <div class = demo id = movement>
-                <h3>The Transitioning Extravaganza</h3>
+                <h3>The Transitioning Extravaganza &bull; The Rough Concept</h3>
                 <p>Aside from everything I've already mentioned, I view the most
                 interesting - and challenging, if you haven't done it before -
                 part of Io's functionings to be his
@@ -83,7 +82,7 @@ <h3>The Transitioning Extravaganza</h3>
                 <p>Look closely at the example below to understand it better.</p>
             </div>
             <br>
-            <iframe src = /articles/extra/using_inverse_kinematics_to_animate_your_character/3.html></iframe>
+            <iframe src = /src/blogs/extra/using_inverse_kinematics_to_animate_your_character/3.html></iframe>
             <br>
             <div class = demo>
                 <p>In the first part of the example, Io "jolts" to the next position.
@@ -95,7 +94,7 @@ <h3>The Transitioning Extravaganza</h3>
                 </div>
 
             <div class = demo>
-                <h3 id = code>Getting to the Code</h3>
+                <h3 id = code>Getting to the Code &bull; Animating the Character</h3>
 
                 <p>So far we've only discussed this "smooth transitioning" in concept.
                 Now we're going to go slightly further by looking at what we
@@ -243,7 +242,7 @@ <h4 id = step3>STEP 3: Coding The Transitioning Extravaganza</h4>
                 a look at the comparison again.</p>
             </div>
 
-            <iframe src = /articles/extra/using_inverse_kinematics_to_animate_your_character/4.html></iframe>
+            <iframe src = /src/blogs/extra/using_inverse_kinematics_to_animate_your_character/4.html></iframe>
 
             <div class = demo>
                 <p>So, how do we make it smooth? The first stage is turn our <span class = snip>hero</span>
@@ -405,7 +404,7 @@ <h4 id = step3>STEP 3: Coding The Transitioning Extravaganza</h4>
                 in a "bezier" fashion. Take a look at the difference to see what I mean.</p>
             </div>
 
-            <iframe src = /articles/extra/using_inverse_kinematics_to_animate_your_character/5.html></iframe>
+            <iframe src = /src/blogs/extra/using_inverse_kinematics_to_animate_your_character/5.html></iframe>
 
             <div class = demo>
                 <p>It's a very, very small difference. It's all about the "feel" you get from it.
@@ -419,8 +418,8 @@ <h4 id = step3>STEP 3: Coding The Transitioning Extravaganza</h4>
 <pre class = code>hero[arr[i]] = oldPart + (dist * (.5 + Math.cos(transition * Math.PI + Math.PI) * .5))</pre>
 
                 <p>To discover more pointless details from
-                <a class = normal href = /content/ios_mission target = _blank>Io's Mission</a>,
-                check out my <a class = normal href = making_games_the_bits_that_nobody_notices>next article</a>.</p>
+                <a class = normal href = /src/content/ios_mission target = _blank>Io's Mission</a>,
+                check out my <a class = normal href = /src/blogs/making_games_the_bits_that_nobody_notices>next blog</a>.</p>
             </div>
 
             <div class = demo id = conclusion>
@@ -649,7 +648,7 @@ <h3>Conclusion</h3>
                     <input type = text name = name placeholder = 'Anonymous'>
                     <div class = cont>
                         <textarea type = text name = message placeholder = 'Enter a message' required></textarea>
-                        <button class = button id = info><img src = /images/info.svg></button>
+                        <button class = button id = info><img src = /src/images/info.svg></button>
                     </div>
                     <div class = h-captcha data-captcha = true id = captcha></div>
                     <button type = submit class = button onmousedown = pressPost()>Post</button>
@@ -662,9 +661,9 @@ <h3>Conclusion</h3>
 
         <button class = theme onclick = toggleTheme()>Change Theme</button>
         <span class = copyright>
-            © Copyright <span class = year></span> joachimford.uk
-            <a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></a>
-            <a href = mailto:hello@joachimford.uk><img src = /images/mail.svg></a>
+            &copy; <span class = year></span> Joachim Ford. All rights reserved.
+            <a href = https://github.com/Hope41 target = _blank><img src = /src/images/github.svg></img></a>
+            <a href = mailto:hello@joachimford.uk><img src = /src/images/mail.svg></img></a>
         </span>
     </body>
 </html>
\ No newline at end of file
diff --git a/content/anthrophobia_fear_of_crowds.html b/src/content/anthrophobia_fear_of_crowds.html
similarity index 77%
rename from content/anthrophobia_fear_of_crowds.html
rename to src/content/anthrophobia_fear_of_crowds.html
index 2f35a0b..ce8ff8a 100644
--- a/content/anthrophobia_fear_of_crowds.html
+++ b/src/content/anthrophobia_fear_of_crowds.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html lang = en-gb>
     <head>
         <meta charset = utf-8>
         <meta name = viewport content = 'width = device-width, initial-scale = 1'>
-        <meta name = keywords content = 'Joachim Ford, Crowd Simulation, JavaScript Demo'>
+        <meta name = description content = 'Free online coding blogs and open source games'>
 
         <script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
-        <script src = /js/analytics.js></script>
-        <script src = /js/main.js></script>
-        <title>Anthrophobia | Joachim Ford</title>
-        <link rel = stylesheet href = /main.css>
-        <link rel = icon type = image/x-icon  href = /favs/favicon.ico>
+        <script src = /src/js/analytics.js></script>
+        <script src = /src/js/main.js></script>
+        <title>Procedural Crowd Simulation | Joachim Ford</title>
+        <link rel = stylesheet href = /src/main.css>
+        <link rel = icon type = image/x-icon  href = /src/favs/favicon.ico>
     </head>
 
     <body>
@@ -21,27 +21,27 @@
             </div>
             <div class = nav>
                 <a href = /games>Games</a>
-                <a href = /experiments>Experiments</a>
-                <a href = /articles>Articles</a>
+                <a href = /projects>Projects</a>
+                <a href = /blogs>Blogs</a>
                 <a href = /news>News</a>
             </div>
         </section>
 
         <section class = main>
             <span class = date>15.01.2022</span>
-            <h1>Anthrophobia</h1>
+            <h1>Procedural Crowd Simulation</h1>
 
             <div class = big>
                 <a href = /anthrophobia target = _blank>
-                    <img class = img src = /images/anthrophobia_fear_of_crowds_big.png>
-                    <div class = play><img src = /images/play.svg></div>
+                    <img class = img src = /src/images/anthrophobia_fear_of_crowds_big.png>
+                    <div class = play><img src = /src/images/play.svg></div>
                 </a>
             </div>
 
             <div class = demo>
                 <p><b>It all began when I made a <a class = normal href = https://www.dwitter.net/d/24669 target = _blank>dweet</a>
                 on the last day of 2021. It had potential, and it turned out that both this and my game
-                <a class = normal href = /content/snakes_and_ladders target = _blank>
+                <a class = normal href = /src/content/snakes_and_ladders target = _blank>
                 Snakes And Ladders</a> were inspired from it.</b></p>
                 <p><a class = button href = https://github.com/Hope41/anthrophobia target = _blank>Check Out the Source Code</a></p>
             </div>
@@ -56,10 +56,10 @@ <h1>Anthrophobia</h1>
 
                 <p>I think the most notable part of this experiment is the way some of
                 these creatures walk. This function is based on a circular movement
-                which is limited at the bottom to create a simple walking motion. Quite a handy
+                that is restricted underneath to create a simple walking motion. Quite a handy
                 trick for when you need it.</p>
             </div>
-            <iframe src = extra/anthrophobia_fear_of_crowds/1.html></iframe>
+            <iframe src = /src/content/extra/anthrophobia_fear_of_crowds/1.html></iframe>
 
             <div class = demo>
 <pre class = code>#const yDrop = cvs.height / 5
@@ -78,12 +78,10 @@ <h1>Anthrophobia</h1>
 
                 <p>Of course, the manner of this walk can be changed by stretching its
                 movement or by giving it more characteristic bops and drags. The example
-                below really shows how loose you can be with the whole thing. For me,
-                this walk is much better. Probably not so good for the heels,
-                but more realistic to look at, that is.</p>
+                below really shows how loose you can be with the whole thing.</p>
             </div>
 
-            <iframe src = extra/anthrophobia_fear_of_crowds/2.html></iframe>
+            <iframe src = /src/content/extra/anthrophobia_fear_of_crowds/2.html></iframe>
 
             <div class = demo>
 <pre class = code>#for (let i = 2; i --;) {
@@ -100,11 +98,11 @@ <h1>Anthrophobia</h1>
                 <p>In the above example I tried to make the walk a bit comical,
                 so you'd probably want to tweak it based on
                 what your using it for, as human and animal walks are usually
-                a bit less extreme. For a larger implementation, see
-                <a class = normal href = /articles/create_and_animate_enemies_using_shapes>
+                less extreme. For a larger implementation, see
+                <a class = normal href = /src/blogs/create_and_animate_enemies_using_shapes>
                 this article</a>.</p>
 
-                <p>Anyway, I hope you found this page as helpful as I found it fun. Please
+                <p>I hope you found this page as helpful as I found it fun. Please
                 <a class = normal href = mailto:contactme@joachimford.uk>contact me</a>
                 if you have any more ideas for experiments!</p>
             </div>
@@ -129,7 +127,7 @@ <h1>Anthrophobia</h1>
                     <input type = text name = name placeholder = 'Anonymous'>
                     <div class = cont>
                         <textarea type = text name = message placeholder = 'Enter a message' required></textarea>
-                        <button class = button id = info><img src = /images/info.svg></button>
+                        <button class = button id = info><img src = /src/images/info.svg></button>
                     </div>
                     <div class = h-captcha data-captcha = true id = captcha></div>
                     <button type = submit class = button onmousedown = pressPost()>Post</button>
@@ -142,9 +140,9 @@ <h1>Anthrophobia</h1>
 
         <button class = theme onclick = toggleTheme()>Change Theme</button>
         <span class = copyright>
-            © Copyright <span class = year></span> joachimford.uk
-            <a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></a>
-            <a href = mailto:hello@joachimford.uk><img src = /images/mail.svg></a>
+            &copy; <span class = year></span> Joachim Ford. All rights reserved.
+            <a href = https://github.com/Hope41 target = _blank><img src = /src/images/github.svg></a>
+            <a href = mailto:hello@joachimford.uk><img src = /src/images/mail.svg></a>
         </span>
     </body>
 </html>
\ No newline at end of file
diff --git a/content/canvas_craft.html b/src/content/canvas_craft.html
similarity index 82%
rename from content/canvas_craft.html
rename to src/content/canvas_craft.html
index 851fc65..222be01 100644
--- a/content/canvas_craft.html
+++ b/src/content/canvas_craft.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html lang = en-gb>
     <head>
         <meta charset = utf-8>
         <meta name = viewport content = 'width = device-width, initial-scale = 1'>
-        <meta name = keywords content = 'Joachim Ford, Crowd Simulation, JavaScript Demo'>
+        <meta name = description content = 'Free online coding blogs and open source games'>
 
         <script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
-        <script src = /js/analytics.js></script>
-        <script src = /js/main.js></script>
-        <title>Canvas Craft | Joachim Ford</title>
-        <link rel = stylesheet href = /main.css>
-        <link rel = icon type = image/x-icon  href = /favs/favicon.ico>
+        <script src = /src/js/analytics.js></script>
+        <script src = /src/js/main.js></script>
+        <title>CanvasCraft &bull; Procedurally Build Game Worlds | Joachim Ford</title>
+        <link rel = stylesheet href = /src/main.css>
+        <link rel = icon type = image/x-icon  href = /src/favs/favicon.ico>
     </head>
 
     <body>
@@ -21,19 +21,19 @@
             </div>
             <div class = nav>
                 <a href = /games>Games</a>
-                <a href = /experiments>Experiments</a>
-                <a href = /articles>Articles</a>
+                <a href = /projects>Projects</a>
+                <a href = /blogs>Blogs</a>
                 <a href = /news>News</a>
             </div>
         </section>
 
         <section class = main>
             <span class = date>22.05.2024</span>
-            <h1>CanvasCraft</h1>
+            <h1>CanvasCraft &bull; Procedurally Build Game Worlds</h1>
 
             <div class = big>
                 <a href = https://canvas-craft.github.io target = _blank>
-                    <img class = img src = /images/canvas_craft_big.png>
+                    <img class = img src = /src/images/canvas_craft_bio.png>
                 </a>
             </div>
 
@@ -78,7 +78,7 @@ <h1>Try it today at <a class = normal href = https://canvas-craft.github.io targ
                     <input type = text name = name placeholder = 'Anonymous'>
                     <div class = cont>
                         <textarea type = text name = message placeholder = 'Enter a message' required></textarea>
-                        <button class = button id = info><img src = /images/info.svg></button>
+                        <button class = button id = info><img src = /src/images/info.svg></button>
                     </div>
                     <div class = h-captcha data-captcha = true id = captcha></div>
                     <button type = submit class = button onmousedown = pressPost()>Post</button>
@@ -91,9 +91,9 @@ <h1>Try it today at <a class = normal href = https://canvas-craft.github.io targ
 
         <button class = theme onclick = toggleTheme()>Change Theme</button>
         <span class = copyright>
-            © Copyright <span class = year></span> joachimford.uk
-            <a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></a>
-            <a href = mailto:hello@joachimford.uk><img src = /images/mail.svg></a>
+            &copy; <span class = year></span> Joachim Ford. All rights reserved.
+            <a href = https://github.com/Hope41 target = _blank><img src = /src/images/github.svg></a>
+            <a href = mailto:hello@joachimford.uk><img src = /src/images/mail.svg></a>
         </span>
     </body>
 </html>
\ No newline at end of file
diff --git a/content/extra/anthrophobia_fear_of_crowds/1.html b/src/content/extra/anthrophobia_fear_of_crowds/1.html
similarity index 88%
rename from content/extra/anthrophobia_fear_of_crowds/1.html
rename to src/content/extra/anthrophobia_fear_of_crowds/1.html
index a823752..eca287b 100644
--- a/content/extra/anthrophobia_fear_of_crowds/1.html
+++ b/src/content/extra/anthrophobia_fear_of_crowds/1.html
@@ -1,6 +1,10 @@
 <!DOCTYPE html>
-<html>
+<html lang = en-gb>
     <head>
+        <meta charset = utf-8>
+        <meta name = viewport content = 'width = device-width, initial-scale = 1'>
+        <meta name = description content = 'Free online coding blogs and open source games'>
+        <title>Basic Walking Simulation</title>
         <style>
             body {
                 background: #fff;
@@ -19,7 +23,10 @@
             function update() {
                 ctx.fillStyle = 'rgb(150,230,255)'
                 ctx.fillRect(0, 0, cvs.width, cvs.height)
-                time += .08
+                dt = (performance.now() - perf) / 16
+                perf = performance.now()
+                if (dt > 1) dt = 1
+                time += dt * .08
 
                 for (let i = 0; i < 3; i ++) {
                     const xPos = Math.sin(i * i * 4) * cvs.width
@@ -103,6 +110,9 @@
             const laceW = 6
             const laceH = 15
 
+            let dt = 0
+            let perf = 0
+
             document.body.appendChild(cvs)
             addEventListener('resize', resize)
             resize()
diff --git a/content/extra/anthrophobia_fear_of_crowds/2.html b/src/content/extra/anthrophobia_fear_of_crowds/2.html
similarity index 90%
rename from content/extra/anthrophobia_fear_of_crowds/2.html
rename to src/content/extra/anthrophobia_fear_of_crowds/2.html
index 130e4bf..6d30f64 100644
--- a/content/extra/anthrophobia_fear_of_crowds/2.html
+++ b/src/content/extra/anthrophobia_fear_of_crowds/2.html
@@ -1,6 +1,10 @@
 <!DOCTYPE html>
-<html>
+<html lang = en-gb>
     <head>
+        <meta charset = utf-8>
+        <meta name = viewport content = 'width = device-width, initial-scale = 1'>
+        <meta name = description content = 'Free online coding blogs and open source games'>
+        <title>Advanced Walking Simulation</title>
         <style>
             body {
                 background: #fff;
@@ -29,8 +33,11 @@
             function update() {
                 ctx.fillStyle = 'rgb(240,200,255)'
                 ctx.fillRect(0, 0, cvs.width, cvs.height)
+                dt = (performance.now() - perf) / 16
+                perf = performance.now()
+                if (dt > 1) dt = 1
+                time += dt * .09
 
-                time += .08
                 if (Math.sin(time * 2 - 1.6) > .8) {
                     camX = (Math.random() - .5) * scale * 4
                     camY = (Math.random() - .5) * scale * 9
@@ -128,6 +135,8 @@
             let camY = 0
 
             let scale = 0
+            let dt = 0
+            let perf = 0
 
             document.body.appendChild(cvs)
             addEventListener('resize', resize)
diff --git a/content/extra/canvas_craft/1.png b/src/content/extra/canvas_craft/1.png
similarity index 100%
rename from content/extra/canvas_craft/1.png
rename to src/content/extra/canvas_craft/1.png
diff --git a/content/extra/canvas_craft/2.png b/src/content/extra/canvas_craft/2.png
similarity index 100%
rename from content/extra/canvas_craft/2.png
rename to src/content/extra/canvas_craft/2.png
diff --git a/content/extra/canvas_craft/3.png b/src/content/extra/canvas_craft/3.png
similarity index 100%
rename from content/extra/canvas_craft/3.png
rename to src/content/extra/canvas_craft/3.png
diff --git a/content/extra/ray_casting_blocks/1.html b/src/content/extra/ray_casting_blocks/1.html
similarity index 87%
rename from content/extra/ray_casting_blocks/1.html
rename to src/content/extra/ray_casting_blocks/1.html
index 86deeca..98adfbd 100644
--- a/content/extra/ray_casting_blocks/1.html
+++ b/src/content/extra/ray_casting_blocks/1.html
@@ -1,5 +1,10 @@
 <!DOCTYPE html>
+<html lang = en-gb>
     <head>
+        <meta charset = utf-8>
+        <meta name = viewport content = 'width = device-width, initial-scale = 1'>
+        <meta name = description content = 'Free online coding blogs and open source games'>
+        <title>Basic Ray Casting Example</title>
         <style>
             body {
                 background: #ddd;
@@ -41,10 +46,11 @@
 
             function update() {
                 ctx.clearRect(0, 0, cvs.width, cvs.height)
+                dt = (performance.now() - perf)
+                perf = performance.now()
+                if (dt > 1) dt = 1
+                cA += .01 * dt
 
-                cA += .01
-
-                
                 ctx.strokeStyle = '#000'
                 ctx.lineWidth = 2
                 for (let i = 0; i < rayAmt; i ++) {
@@ -108,6 +114,8 @@
             let cX = map.w / 2
             let cY = map.h / 2
             let cA = 0
+            let dt = 0
+            let perf = 0
 
             addEventListener('resize', resize)
             resize()
diff --git a/content/extra/ray_casting_blocks/2.html b/src/content/extra/ray_casting_blocks/2.html
similarity index 84%
rename from content/extra/ray_casting_blocks/2.html
rename to src/content/extra/ray_casting_blocks/2.html
index 1af0e53..506c829 100644
--- a/content/extra/ray_casting_blocks/2.html
+++ b/src/content/extra/ray_casting_blocks/2.html
@@ -1,5 +1,10 @@
 <!DOCTYPE html>
+<html lang = en-gb>
     <head>
+        <meta charset = utf-8>
+        <meta name = viewport content = 'width = device-width, initial-scale = 1'>
+        <meta name = description content = 'Free online coding blogs and open source games'>
+        <title>Basic Ray Casting Example</title>
         <style>
             body {
                 background: #ddd;
@@ -41,8 +46,10 @@
 
             function update() {
                 ctx.clearRect(0, 0, cvs.width, cvs.height)
-
-                cA += .01
+                dt = (performance.now() - perf) / 16
+                perf = performance.now()
+                if (dt > 1) dt = 1
+                cA += .01 * dt
 
                 for (let i = 0; i < rayAmt; i ++) {
                     let length = 0
@@ -85,6 +92,8 @@
             let cX = map.w / 2
             let cY = map.h / 2
             let cA = 0
+            let dt = 0
+            let perf = 0
 
             addEventListener('resize', resize)
             resize()
diff --git a/content/extra/ray_casting_blocks/3.html b/src/content/extra/ray_casting_blocks/3.html
similarity index 84%
rename from content/extra/ray_casting_blocks/3.html
rename to src/content/extra/ray_casting_blocks/3.html
index f3d2dd3..6d7e645 100644
--- a/content/extra/ray_casting_blocks/3.html
+++ b/src/content/extra/ray_casting_blocks/3.html
@@ -1,5 +1,10 @@
 <!DOCTYPE html>
+<html lang = en-gb>
     <head>
+        <meta charset = utf-8>
+        <meta name = viewport content = 'width = device-width, initial-scale = 1'>
+        <meta name = description content = 'Free online coding blogs and open source games'>
+        <title>Basic Ray Casting Example</title>
         <style>
             body {
                 background: #000;
@@ -41,9 +46,11 @@
             function update() {
                 ctx.fillStyle = '#000'
                 ctx.fillRect(0, 0, cvs.width, cvs.height)
-
-                time += .1
-                cX += speed
+                dt = (performance.now() - perf) / 16
+                perf = performance.now()
+                if (dt > 1) dt = 1
+                time += .1 * dt
+                cX += speed * dt
 
                 for (let i = 0; i < rayAmt; i ++) {
                     let length = 0
@@ -91,6 +98,8 @@
             let cX = 0
             let cY = .5
             let cA = 5.4
+            let dt = 0
+            let perf = 0
 
             const walk = 1.5
             const speed = .07
diff --git a/content/extra/ray_casting_blocks/4.html b/src/content/extra/ray_casting_blocks/4.html
similarity index 100%
rename from content/extra/ray_casting_blocks/4.html
rename to src/content/extra/ray_casting_blocks/4.html
diff --git a/content/infinite_zoom.html b/src/content/infinite_zoom.html
similarity index 83%
rename from content/infinite_zoom.html
rename to src/content/infinite_zoom.html
index 68262a8..fe8d99f 100644
--- a/content/infinite_zoom.html
+++ b/src/content/infinite_zoom.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html lang = en-gb>
     <head>
         <meta charset = utf-8>
         <meta name = viewport content = 'width = device-width, initial-scale = 1'>
-        <meta name = keywords content = 'Joachim Ford, Infinite zoom, JavaScript infinite zoom'>
+        <meta name = description content = 'Free online coding blogs and open source games'>
 
         <script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
-        <script src = /js/analytics.js></script>
-        <script src = /js/main.js></script>
-        <title>Infinite Zoom | Joachim Ford</title>
-        <link rel = stylesheet href = /main.css>
-        <link rel = icon type = image/x-icon  href = /favs/favicon.ico>
+        <script src = /src/js/analytics.js></script>
+        <script src = /src/js/main.js></script>
+        <title>JavaScript Infinite Zoom | Joachim Ford</title>
+        <link rel = stylesheet href = /src/main.css>
+        <link rel = icon type = image/x-icon  href = /src/favs/favicon.ico>
     </head>
 
     <body>
@@ -21,18 +21,19 @@
             </div>
             <div class = nav>
                 <a href = /games>Games</a>
-                <a href = /experiments>Experiments</a>
-                <a href = /articles>Articles</a>
+                <a href = /projects>Projects</a>
+                <a href = /blogs>Blogs</a>
                 <a href = /news>News</a>
             </div>
         </section>
+
         <section class = main>
             <span class = date>29.03.2022</span>
             <h1>Infinite Zoom</h1>
             <div class = big>
                 <a href = /infinite-zoom target = _blank>
-                    <img class = img src = /images/infinite_zoom_big.png>
-                    <div class = play><img src = /images/play.svg></div>
+                    <img class = img src = /src/images/infinite_zoom_big.png>
+                    <div class = play><img src = /src/images/play.svg></div>
                 </a>
             </div>
 
@@ -47,8 +48,8 @@ <h1>Infinite Zoom</h1>
             <div class = demo>
                 <p>The main inspiration for this project came from
                 <a class = normal href = https://frankforce.com/screensavers/pixel-words target = _blank>Pixel Words</a>
-                by <a class = normal href = https://frankforce.com target = _blank>Frank Force</a>, and I wanted to see
-                if I could make something like it, as infinite zooms have always interested me.</p>
+                by Frank Force, and I wanted to see if I could make something like it,
+                as infinite zooms have always interested me.</p>
 
                 <p>This is how it works:</p>
 
@@ -99,7 +100,7 @@ <h1>Infinite Zoom</h1>
                     <input type = text name = name placeholder = 'Anonymous'>
                     <div class = cont>
                         <textarea type = text name = message placeholder = 'Enter a message' required></textarea>
-                        <button class = button id = info><img src = /images/info.svg></button>
+                        <button class = button id = info><img src = /src/images/info.svg></button>
                     </div>
                     <div class = h-captcha data-captcha = true id = captcha></div>
                     <button type = submit class = button onmousedown = pressPost()>Post</button>
@@ -112,9 +113,9 @@ <h1>Infinite Zoom</h1>
 
         <button class = theme onclick = toggleTheme()>Change Theme</button>
         <span class = copyright>
-            © Copyright <span class = year></span> joachimford.uk
-            <a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></a>
-            <a href = mailto:hello@joachimford.uk><img src = /images/mail.svg></a>
+            &copy; <span class = year></span> Joachim Ford. All rights reserved.
+            <a href = https://github.com/Hope41 target = _blank><img src = /src/images/github.svg></a>
+            <a href = mailto:hello@joachimford.uk><img src = /src/images/mail.svg></a>
         </span>
     </body>
 </html>
\ No newline at end of file
diff --git a/content/ios_mission.html b/src/content/ios_mission.html
similarity index 71%
rename from content/ios_mission.html
rename to src/content/ios_mission.html
index 773cb70..bae1fb0 100644
--- a/content/ios_mission.html
+++ b/src/content/ios_mission.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html lang = en-gb>
     <head>
         <meta charset = utf-8>
         <meta name = viewport content = 'width = device-width, initial-scale = 1'>
-        <meta name = keywords content = 'Joachim Ford, Ios Mission, JavaScript platformer'>
+        <meta name = description content = 'Free online coding blogs and open source games'>
 
         <script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
-        <script src = /js/analytics.js></script>
-        <script src = /js/main.js></script>
-        <title>Io's Mission | Joachim Ford</title>
-        <link rel = stylesheet href = /main.css>
-        <link rel = icon type = image/x-icon  href = /favs/favicon.ico>
+        <script src = /src/js/analytics.js></script>
+        <script src = /src/js/main.js></script>
+        <title>Io's Mission &bull; Indie Platform Adventure Game | Joachim Ford</title>
+        <link rel = stylesheet href = /src/main.css>
+        <link rel = icon type = image/x-icon  href = /src/favs/favicon.ico>
 
         <style>
             #a {
@@ -43,31 +43,36 @@
             </div>
             <div class = nav>
                 <a href = /games>Games</a>
-                <a href = /experiments>Experiments</a>
-                <a href = /articles>Articles</a>
+                <a href = /projects>Projects</a>
+                <a href = /blogs>Blogs</a>
                 <a href = /news>News</a>
             </div>
         </section>
 
         <section class = main>
             <span class = date>16.12.2023</span>
-            <h1>Io's Mission</h1>
+            <h1>Io's Mission &bull; An Indie Platform Adventure Game</h1>
 
             <div class = big>
                 <a href = /ios-mission target = _blank>
-                    <img class = img src = /images/ios_mission_big.png>
-                    <div class = play><img src = /images/play.svg></div>
+                    <img class = img src = /src/images/ios_mission_big.png>
+                    <div class = play><img src = /src/images/play.svg></div>
                 </a>
             </div>
 
             <div class = demo>
-                <b>Help Io climb the tower before his friends are thrown into the dungeons!
-                Io's Mission is a fully-featured platform adventure
-                where Io saves his friends from The Great Ominous.
-                <p></p>
-                The runtime for this game is about half an hour, but it saves your
-                progress in case you need a break. All controls are explained in
-                the first few levels of the game.</b>
+                <b>
+                    <p>
+                        Help Io climb the tower before his friends are thrown into the dungeons!
+                        Io's Mission is a fully-featured platform adventure
+                        where Io saves his friends from The Great Ominous.
+                    </p>
+                    <p>
+                        The runtime for this game is about half an hour, but it saves your
+                        progress in case you need a break. All controls are explained in
+                        the first few levels of the game.
+                    </p>
+                </b>
             </div>
             <div class = gap>
                 <a href = 'https://www.youtube.com/watch?v=MUapUWdwDU8' target = _blank class = button id = a><b>Watch the Trailer</b></a>
@@ -78,9 +83,9 @@ <h1>Io's Mission</h1>
                 <p>Well, I'm glad that's over! I've spent almost a year and a half on this game, and it only takes
                 half an hour to play. Never mind, I'm sure it was worth it in some way or another.</p>
 
-                <p>The entire source code for this game is huge. 
-                The source code for <a class = normal href = /content/the_mitigator.html target = _blank>The Mitigator</a> was just over 100kb,
-                <a class = normal href = /content/snakes_and_ladders.html target = _blank>Snakes And Ladders</a> was about 200kb,
+                <p>The entire source code for this game is huge.
+                The source code for <a class = normal href = /src/content/the_mitigator.html target = _blank>The Mitigator</a> was just over 100kb,
+                <a class = normal href = /src/content/snakes_and_ladders.html target = _blank>Snakes And Ladders</a> was about 200kb,
                 but Io's Mission adds up to almost 1000kb.
                 Of course, a lot of this figure is taken up by the sound files, but there's still a lot of hand-written code
                 in there - about half of it.
@@ -104,12 +109,12 @@ <h3>Things I Learned</h3>
             </div>
             <div class = demo>
                 <p>You can read more about how I made <b>Io's Mission</b>
-                in the articles below. You can also take a
+                in the blogs below. You can also take a
                 look at the source code if you're interested!</p>
 
                 <div class = subDemo>
-                    <span>∙ <a class = normal href = /articles/using_inverse_kinematics_to_animate_your_character>Using Inverse Kinematics to Animate Your Character</a><br>
-                    ∙ <a class = normal href = /articles/making_games_the_bits_that_nobody_notices>Making Games: The Bits That Nobody Notices</a></span>
+                    <span>∙ <a class = normal href = /src/blogs/using_inverse_kinematics_to_animate_your_character>Using Inverse Kinematics to Animate Your Character</a><br>
+                    ∙ <a class = normal href = /src/blogs/making_games_the_bits_that_nobody_notices>Making Games: The Bits That Nobody Notices</a></span>
                 </div>
 
                 <div class = gap>
@@ -138,7 +143,7 @@ <h3>Things I Learned</h3>
                     <input type = text name = name placeholder = 'Anonymous'>
                     <div class = cont>
                         <textarea type = text name = message placeholder = 'Enter a message' required></textarea>
-                        <button class = button id = info><img src = /images/info.svg></button>
+                        <button class = button id = info><img src = /src/images/info.svg></button>
                     </div>
                     <div class = h-captcha data-captcha = true id = captcha></div>
                     <button type = submit class = button onmousedown = pressPost()>Post</button>
@@ -151,9 +156,9 @@ <h3>Things I Learned</h3>
 
         <button class = theme onclick = toggleTheme()>Change Theme</button>
         <span class = copyright>
-            © Copyright <span class = year></span> joachimford.uk
-            <a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></a>
-            <a href = mailto:hello@joachimford.uk><img src = /images/mail.svg></a>
+            &copy; <span class = year></span> Joachim Ford. All rights reserved.
+            <a href = https://github.com/Hope41 target = _blank><img src = /src/images/github.svg></a>
+            <a href = mailto:hello@joachimford.uk><img src = /src/images/mail.svg></a>
         </span>
     </body>
 </html>
\ No newline at end of file
diff --git a/content/ray_casting_blocks.html b/src/content/ray_casting_blocks.html
similarity index 87%
rename from content/ray_casting_blocks.html
rename to src/content/ray_casting_blocks.html
index 92ca614..6b6bc4b 100644
--- a/content/ray_casting_blocks.html
+++ b/src/content/ray_casting_blocks.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html lang = en-gb>
     <head>
         <meta charset = utf-8>
         <meta name = viewport content = 'width = device-width, initial-scale = 1'>
-        <meta name = keywords content = 'Joachim Ford, JavaScript ray caster, JavaScript 3d'>
+        <meta name = description content = 'Free online coding blogs and open source games'>
 
         <script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
-        <script src = /js/analytics.js></script>
-        <script src = /js/main.js></script>
-        <title>Ray Casting Blocks | Joachim Ford</title>
-        <link rel = stylesheet href = /main.css>
-        <link rel = icon type = image/x-icon  href = /favs/favicon.ico>
+        <script src = /src/js/analytics.js></script>
+        <script src = /src/js/main.js></script>
+        <title>Ray Casting with JavaScript | Joachim Ford</title>
+        <link rel = stylesheet href = /src/main.css>
+        <link rel = icon type = image/x-icon  href = /src/favs/favicon.ico>
     </head>
 
     <body>
@@ -21,19 +21,19 @@
             </div>
             <div class = nav>
                 <a href = /games>Games</a>
-                <a href = /experiments>Experiments</a>
-                <a href = /articles>Articles</a>
+                <a href = /projects>Projects</a>
+                <a href = /blogs>Blogs</a>
                 <a href = /news>News</a>
             </div>
         </section>
 
         <section class = main>
             <span class = date>27.03.2022</span>
-            <h1>Ray Casting Blocks</h1>
+            <h1>Ray Casting a World in JavaScript</h1>
             <div class = big>
                 <a href = /ray-casting-blocks target = _blank>
-                    <img class = img src = /images/ray_casting_blocks_big.png>
-                    <div class = play><img src = /images/play.svg></div>
+                    <img class = img src = /src/images/ray_casting_blocks_big.png>
+                    <div class = play><img src = /src/images/play.svg></div>
                 </a>
             </div>
             <div class = demo>
@@ -56,13 +56,13 @@ <h1>Ray Casting Blocks</h1>
             </div>
 
             <div class = demo>
-                <h3>~ STEP 1 ~</h3>
+                <h3>STEP 1 &bull; Making the Rays</h3>
 
                 <p>Create a bunch of rays (or "lines" if you prefer), but make sure
                 each ray stops when it hits an obstacle, and that it has a maximum length</p>
             </div>
 
-            <iframe src = extra/ray_casting_blocks/1.html></iframe>
+            <iframe src = /src/content/extra/ray_casting_blocks/1.html></iframe>
             <div class = code>// go through amount of iterations
 for (let j = 0; j < rayItr; j ++) {
     length = j * rayJmp
@@ -76,7 +76,7 @@ <h3>~ STEP 1 ~</h3>
         break
 }</div>
             <div class = demo>
-                <h3>~ STEP 2 ~</h3>
+                <h3>STEP 2 &bull; Interpreting Ray Location and Length</h3>
 
                 <p>On your real screen, draw a rectangle for each ray you have. Its
                 position is based on the ray you're dealing with.
@@ -87,7 +87,7 @@ <h3>~ STEP 2 ~</h3>
 
                 <p>This is what it looks like. Not the most amazing graphics, I admit.</p>
             </div>
-            <iframe src = extra/ray_casting_blocks/2.html></iframe>
+            <iframe src = /src/content/extra/ray_casting_blocks/2.html></iframe>
             <div class = code>const w = cvs.width / rayAmt
 const h = 10 / length * scale
 const s = 100 / length
@@ -95,7 +95,7 @@ <h3>~ STEP 2 ~</h3>
 ctx.fillStyle = 'rgb('+s+','+s+','+s+')'
 ctx.fillRect(i * w, cvs.height / 2 - h / 2, w, h)</div>
             <div class = demo>
-                <h3>~ STEP 3 ~</h3>
+                <h3>STEP 3 &bull; Final Enhancements</h3>
 
                 <p>Well, no matter what you think of it, you have already created a ray
                 casted scene. That wasn't so hard was it?</p>
@@ -109,7 +109,7 @@ <h3>~ STEP 3 ~</h3>
                 you get a better picture of what's happening.</p>
             </div>
 
-            <iframe src = extra/ray_casting_blocks/3.html></iframe>
+            <iframe src = /src/content/extra/ray_casting_blocks/3.html></iframe>
 
             <div class = demo>
                 <p>This is the source code for the demo above. It's surprisingly short, actually.</p>
@@ -228,7 +228,7 @@ <h3>"It's surprisingly short, actually"</h3>
                 You can try getting it even smaller if you like!</p>
             </div>
 
-            <iframe src = extra/ray_casting_blocks/4.html></iframe>
+            <iframe src = /src/content/extra/ray_casting_blocks/4.html></iframe>
 
             <div class = demo>
 <pre class = code>&lt;canvas id=c>&lt;body onload="u=_=>{W=c.width=innerWidth,H=c.height=innerHeight;for(r=i=99;i--;c.getContext`2d`.fillRect(i*W/r,H/2-h/2,h/40,h))for(j=0;++j&lt;r;~Math.tan(~(_/r+Math.cos(A=i/r-.5,h=9/j*(W+H)/2)*.1*j)*~(-1.5+Math.sin(A)*.1*j))?0:j=r);requestAnimationFrame(u)},u()">&lt;/body></pre>
@@ -260,7 +260,7 @@ <h3>"It's surprisingly short, actually"</h3>
                     <input type = text name = name placeholder = 'Anonymous'>
                     <div class = cont>
                         <textarea type = text name = message placeholder = 'Enter a message' required></textarea>
-                        <button class = button id = info><img src = /images/info.svg></button>
+                        <button class = button id = info><img src = /src/images/info.svg></button>
                     </div>
                     <div class = h-captcha data-captcha = true id = captcha></div>
                     <button type = submit class = button onmousedown = pressPost()>Post</button>
@@ -273,9 +273,9 @@ <h3>"It's surprisingly short, actually"</h3>
 
         <button class = theme onclick = toggleTheme()>Change Theme</button>
         <span class = copyright>
-            © Copyright <span class = year></span> joachimford.uk
-            <a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></a>
-            <a href = mailto:hello@joachimford.uk><img src = /images/mail.svg></a>
+            &copy; <span class = year></span> Joachim Ford. All rights reserved.
+            <a href = https://github.com/Hope41 target = _blank><img src = /src/images/github.svg></img></a>
+            <a href = mailto:hello@joachimford.uk><img src = /src/images/mail.svg></img></a>
         </span>
     </body>
 </html>
\ No newline at end of file
diff --git a/content/snakes_and_ladders.html b/src/content/snakes_and_ladders.html
similarity index 75%
rename from content/snakes_and_ladders.html
rename to src/content/snakes_and_ladders.html
index 83750d9..968f60b 100644
--- a/content/snakes_and_ladders.html
+++ b/src/content/snakes_and_ladders.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html lang = en-gb>
     <head>
         <meta charset = utf-8>
         <meta name = viewport content = 'width = device-width, initial-scale = 1'>
-        <meta name = keywords content = 'Joachim Ford, platform game, JavaScript platformer'>
+        <meta name = description content = 'Free online coding blogs and open source games'>
 
         <script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
-        <script src = /js/analytics.js></script>
-        <script src = /js/main.js></script>
-        <title>Snakes And Ladders | Joachim Ford</title>
-        <link rel = stylesheet href = /main.css>
-        <link rel = icon type = image/x-icon  href = /favs/favicon.ico>
+        <script src = /src/js/analytics.js></script>
+        <script src = /src/js/main.js></script>
+        <title>Snakes and Ladders &bull; Defeat the X-Ray Orb! | Joachim Ford</title>
+        <link rel = stylesheet href = /src/main.css>
+        <link rel = icon type = image/x-icon  href = /src/favs/favicon.ico>
     </head>
 
     <body>
@@ -21,20 +21,20 @@
             </div>
             <div class = nav>
                 <a href = /games>Games</a>
-                <a href = /experiments>Experiments</a>
-                <a href = /articles>Articles</a>
+                <a href = /projects>Projects</a>
+                <a href = /blogs>Blogs</a>
                 <a href = /news>News</a>
             </div>
         </section>
 
         <section class = main>
             <span class = date>19.08.2022</span>
-            <h1>Snakes And Ladders</h1>
+            <h1>Snakes And Ladders &bull; Defeat the X-Ray Orb!</h1>
 
             <div class = big>
                 <a href = /snakes-and-ladders target = _blank>
-                    <img class = img src = /images/snakes_and_ladders_big.png>
-                    <div class = play><img src = /images/play.svg></div>
+                    <img class = img src = /src/images/snakes_and_ladders_big.png>
+                    <div class = play><img src = /src/images/play.svg></div>
                 </a>
             </div>
 
@@ -47,12 +47,12 @@ <h1>Snakes And Ladders</h1>
             </div>
             <div class = demo>
                 <p>This six-month project was a huge learning curve for me! I've written a
-                couple of articles for it, but let me know if you'd like me to
+                couple of blogs for it, but let me know if you'd like me to
                 do a write-up for another part.</p>
 
                 <div class = subDemo>
-                    <span>∙ <a class = normal href = /articles/procedural_room_generation_snakes_and_ladders>Procedural Room Generation - Snakes and Ladders</a><br>
-                    ∙ <a class = normal href = /articles/create_and_animate_enemies_using_shapes>Create and Animate Enemies Using Shapes</a></span>
+                    <span>∙ <a class = normal href = /src/blogs/procedural_room_generation_snakes_and_ladders>Procedural Room Generation - Snakes and Ladders</a><br>
+                    ∙ <a class = normal href = /src/blogs/create_and_animate_enemies_using_shapes>Create and Animate Enemies Using Shapes</a></span>
                 </div>
 
                 <div class = gap>
@@ -82,7 +82,7 @@ <h1>Snakes And Ladders</h1>
                     <input type = text name = name placeholder = 'Anonymous'>
                     <div class = cont>
                         <textarea type = text name = message placeholder = 'Enter a message' required></textarea>
-                        <button class = button id = info><img src = /images/info.svg></button>
+                        <button class = button id = info><img src = /src/images/info.svg></button>
                     </div>
                     <div class = h-captcha data-captcha = true id = captcha></div>
                     <button type = submit class = button onmousedown = pressPost()>Post</button>
@@ -100,7 +100,7 @@ <h3>Anonymous</h3>
 
                     <div class = 'subDemo user'>
                         <span class = user>
-                            <div class = userCanvas><img src = /images/me.png></div>
+                            <div class = userCanvas><img src = /src/images/me.png></div>
                             <h3>Hope41</h3>
                             <div class = userDate>12.06.2024</div>
                         </span>
@@ -112,9 +112,9 @@ <h3>Hope41</h3>
 
         <button class = theme onclick = toggleTheme()>Change Theme</button>
         <span class = copyright>
-            © Copyright <span class = year></span> joachimford.uk
-            <a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></a>
-            <a href = mailto:hello@joachimford.uk><img src = /images/mail.svg></a>
+            &copy; <span class = year></span> Joachim Ford. All rights reserved.
+            <a href = https://github.com/Hope41 target = _blank><img src = /src/images/github.svg></img></a>
+            <a href = mailto:hello@joachimford.uk><img src = /src/images/mail.svg></img></a>
         </span>
     </body>
 </html>
diff --git a/content/squirtcopter.html b/src/content/squirtcopter.html
similarity index 83%
rename from content/squirtcopter.html
rename to src/content/squirtcopter.html
index 0f55f6e..e85bca2 100644
--- a/content/squirtcopter.html
+++ b/src/content/squirtcopter.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html lang = en-gb>
     <head>
         <meta charset = utf-8>
         <meta name = viewport content = 'width = device-width, initial-scale = 1'>
-        <meta name = keywords content = 'Joachim Ford, Squirtcopter, Gamedev.js Jam'>
+        <meta name = description content = 'Free online coding blogs and open source games'>
 
         <script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
-        <script src = /js/analytics.js></script>
-        <script src = /js/main.js></script>
-        <title>Squirtcopter | Joachim Ford</title>
-        <link rel = stylesheet href = /main.css>
-        <link rel = icon type = image/x-icon  href = /favs/favicon.ico>
+        <script src = /src/js/analytics.js></script>
+        <script src = /src/js/main.js></script>
+        <title>Squirtcopter &bull; Squirt Your Way To Victory! | Joachim Ford</title>
+        <link rel = stylesheet href = /src/main.css>
+        <link rel = icon type = image/x-icon  href = /src/favs/favicon.ico>
 
         <style>
             #a {
@@ -43,20 +43,20 @@
             </div>
             <div class = nav>
                 <a href = /games>Games</a>
-                <a href = /experiments>Experiments</a>
-                <a href = /articles>Articles</a>
+                <a href = /projects>Projects</a>
+                <a href = /blogs>Blogs</a>
                 <a href = /news>News</a>
             </div>
         </section>
 
         <section class = main>
             <span class = date>28.04.2024</span>
-            <h1>Squirtcopter</h1>
+            <h1>Squirtcopter &bull; Squirt Your Way To Victory!</h1>
 
             <div class = big>
                 <a href = /squirtcopter target = _blank>
-                    <img class = img src = /images/squirtcopter_big.png>
-                    <div class = play><img src = /images/play.svg></div>
+                    <img class = img src = /src/images/squirtcopter_big.png>
+                    <div class = play><img src = /src/images/play.svg></div>
                 </a>
             </div>
 
@@ -95,7 +95,7 @@ <h1>Squirtcopter</h1>
                 </div>
             </div>
 
-            <div class = demo>luv SquirtCopter!
+            <div class = demo>
                 <span id = commentContainer><form id = form action = https://api.web3forms.com/submit method = POST>
                     Leave a comment
                     <input type = hidden name = access_key value = 'bec85640-a8df-41e3-9112-826db534219c'>
@@ -104,7 +104,7 @@ <h1>Squirtcopter</h1>
                     <input type = text name = name placeholder = 'Anonymous'>
                     <div class = cont>
                         <textarea type = text name = message placeholder = 'Enter a message' required></textarea>
-                        <button class = button id = info><img src = /images/info.svg></button>
+                        <button class = button id = info><img src = /src/images/info.svg></button>
                     </div>
                     <div class = h-captcha data-captcha = true id = captcha></div>
                     <button type = submit class = button onmousedown = pressPost()>Post</button>
@@ -123,7 +123,7 @@ <h3>NetherPortals</h3>
 
                     <div class = 'subDemo user'>
                         <span class = user>
-                            <div class = userCanvas><img src = /images/me.png></div>
+                            <div class = userCanvas><img src = /src/images/me.png></div>
                             <h3>Hope41</h3>
                             <div class = userDate>12.09.2024</div>
                         </span>
@@ -135,9 +135,9 @@ <h3>Hope41</h3>
 
         <button class = theme onclick = toggleTheme()>Change Theme</button>
         <span class = copyright>
-            © Copyright <span class = year></span> joachimford.uk
-            <a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></a>
-            <a href = mailto:hello@joachimford.uk><img src = /images/mail.svg></a>
+            &copy; <span class = year></span> Joachim Ford. All rights reserved.
+            <a href = https://github.com/Hope41 target = _blank><img src = /src/images/github.svg></img></a>
+            <a href = mailto:hello@joachimford.uk><img src = /src/images/mail.svg></img></a>
         </span>
     </body>
 </html>
\ No newline at end of file
diff --git a/content/the_mitigator.html b/src/content/the_mitigator.html
similarity index 78%
rename from content/the_mitigator.html
rename to src/content/the_mitigator.html
index 6c69bca..d9de404 100644
--- a/content/the_mitigator.html
+++ b/src/content/the_mitigator.html
@@ -1,15 +1,16 @@
 <!DOCTYPE html>
+<html lang = en-gb>
     <head>
         <meta charset = utf-8>
         <meta name = viewport content = 'width = device-width, initial-scale = 1'>
-        <meta name = keywords content = 'Joachim Ford, online game, platform game, JavaScript platformer'>
+        <meta name = description content = 'Free online coding blogs and open source games'>
 
         <script async src = 'https://www.googletagmanager.com/gtag/js?id=G-2MDQ9F697V'></script>
-        <script src = /js/analytics.js></script>
-        <script src = /js/main.js></script>
-        <title>The Mitigator | Joachim Ford</title>
-        <link rel = stylesheet href = /main.css>
-        <link rel = icon type = image/x-icon  href = /favs/favicon.ico>
+        <script src = /src/js/analytics.js></script>
+        <script src = /src/js/main.js></script>
+        <title>The Mitigator &bull; Climate Change Indie Game | Joachim Ford</title>
+        <link rel = stylesheet href = /src/main.css>
+        <link rel = icon type = image/x-icon  href = /src/favs/favicon.ico>
     </head>
 
     <body>
@@ -20,20 +21,20 @@
             </div>
             <div class = nav>
                 <a href = /games>Games</a>
-                <a href = /experiments>Experiments</a>
-                <a href = /articles>Articles</a>
+                <a href = /projects>Projects</a>
+                <a href = /blogs>Blogs</a>
                 <a href = /news>News</a>
             </div>
         </section>
 
         <section class = main>
             <span class = date>06.03.2022</span>
-            <h1>The Mitigator</h1>
+            <h1>The Mitigator &bull; Combatting Climate Change</h1>
 
             <div class = big>
                 <a href = /the-mitigator target = _blank>
-                    <img class = img src = /images/the_mitigator_big.png>
-                    <div class = play><img src = /images/play.svg></div>
+                    <img class = img src = /src/images/the_mitigator_big.png>
+                    <div class = play><img src = /src/images/play.svg></div>
                 </a>
             </div>
             <div class = demo>
@@ -76,7 +77,7 @@ <h1>The Mitigator</h1>
                     <input type = text name = name placeholder = 'Anonymous'>
                     <div class = cont>
                         <textarea type = text name = message placeholder = 'Enter a message' required></textarea>
-                        <button class = button id = info><img src = /images/info.svg></button>
+                        <button class = button id = info><img src = /src/images/info.svg></button>
                     </div>
                     <div class = h-captcha data-captcha = true id = captcha></div>
                     <button type = submit class = button onmousedown = pressPost()>Post</button>
@@ -89,9 +90,9 @@ <h1>The Mitigator</h1>
 
         <button class = theme onclick = toggleTheme()>Change Theme</button>
         <span class = copyright>
-            © Copyright <span class = year></span> joachimford.uk
-            <a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></a>
-            <a href = mailto:hello@joachimford.uk><img src = /images/mail.svg></a>
+            &copy; <span class = year></span> Joachim Ford. All rights reserved.
+            <a href = https://github.com/Hope41 target = _blank><img src = /src/images/github.svg></img></a>
+            <a href = mailto:hello@joachimford.uk><img src = /src/images/mail.svg></img></a>
         </span>
     </body>
 </html>
\ No newline at end of file
diff --git a/favs/favicon.ico b/src/favs/favicon.ico
similarity index 100%
rename from favs/favicon.ico
rename to src/favs/favicon.ico
diff --git a/favs/template.ico b/src/favs/template.ico
similarity index 100%
rename from favs/template.ico
rename to src/favs/template.ico
diff --git a/fonts/ChakraPetch-Medium.ttf b/src/fonts/ChakraPetch-Medium.ttf
similarity index 100%
rename from fonts/ChakraPetch-Medium.ttf
rename to src/fonts/ChakraPetch-Medium.ttf
diff --git a/fonts/ChakraPetch-Regular.ttf b/src/fonts/ChakraPetch-Regular.ttf
similarity index 100%
rename from fonts/ChakraPetch-Regular.ttf
rename to src/fonts/ChakraPetch-Regular.ttf
diff --git a/src/fonts/Fredoka-VariableFont_wght.ttf b/src/fonts/Fredoka-VariableFont_wght.ttf
new file mode 100644
index 0000000..cf4a46f
Binary files /dev/null and b/src/fonts/Fredoka-VariableFont_wght.ttf differ
diff --git a/fonts/code.ttf b/src/fonts/ProFontWindows.ttf
similarity index 100%
rename from fonts/code.ttf
rename to src/fonts/ProFontWindows.ttf
diff --git a/src/fonts/Quicksand-VariableFont_wght.ttf b/src/fonts/Quicksand-VariableFont_wght.ttf
new file mode 100644
index 0000000..bd332b6
Binary files /dev/null and b/src/fonts/Quicksand-VariableFont_wght.ttf differ
diff --git a/fonts/burger.otf b/src/fonts/burger.otf
similarity index 100%
rename from fonts/burger.otf
rename to src/fonts/burger.otf
diff --git a/fonts/joystixMonospace.woff2 b/src/fonts/joystixMonospace.woff2
similarity index 100%
rename from fonts/joystixMonospace.woff2
rename to src/fonts/joystixMonospace.woff2
diff --git a/fonts/super.otf b/src/fonts/super.otf
similarity index 100%
rename from fonts/super.otf
rename to src/fonts/super.otf
diff --git a/images/anthrophobia_fear_of_crowds.png b/src/images/anthrophobia_fear_of_crowds.png
similarity index 100%
rename from images/anthrophobia_fear_of_crowds.png
rename to src/images/anthrophobia_fear_of_crowds.png
diff --git a/images/anthrophobia_fear_of_crowds_big.png b/src/images/anthrophobia_fear_of_crowds_big.png
similarity index 100%
rename from images/anthrophobia_fear_of_crowds_big.png
rename to src/images/anthrophobia_fear_of_crowds_big.png
diff --git a/images/back.svg b/src/images/back.svg
similarity index 100%
rename from images/back.svg
rename to src/images/back.svg
diff --git a/images/bg2.png b/src/images/bg2.png
similarity index 100%
rename from images/bg2.png
rename to src/images/bg2.png
diff --git a/images/bulb.svg b/src/images/bulb.svg
similarity index 100%
rename from images/bulb.svg
rename to src/images/bulb.svg
diff --git a/src/images/canvas_craft.png b/src/images/canvas_craft.png
new file mode 100644
index 0000000..ac86b6d
Binary files /dev/null and b/src/images/canvas_craft.png differ
diff --git a/src/images/canvas_craft_big.png b/src/images/canvas_craft_big.png
new file mode 100644
index 0000000..da33366
Binary files /dev/null and b/src/images/canvas_craft_big.png differ
diff --git a/images/canvas_craft_bio.png b/src/images/canvas_craft_bio.png
similarity index 100%
rename from images/canvas_craft_bio.png
rename to src/images/canvas_craft_bio.png
diff --git a/images/dwitter.svg b/src/images/dwitter.svg
similarity index 100%
rename from images/dwitter.svg
rename to src/images/dwitter.svg
diff --git a/images/github.svg b/src/images/github.svg
similarity index 100%
rename from images/github.svg
rename to src/images/github.svg
diff --git a/images/infinite_zoom.png b/src/images/infinite_zoom.png
similarity index 100%
rename from images/infinite_zoom.png
rename to src/images/infinite_zoom.png
diff --git a/images/infinite_zoom_big.png b/src/images/infinite_zoom_big.png
similarity index 100%
rename from images/infinite_zoom_big.png
rename to src/images/infinite_zoom_big.png
diff --git a/images/info.svg b/src/images/info.svg
similarity index 100%
rename from images/info.svg
rename to src/images/info.svg
diff --git a/images/ios_mission.png b/src/images/ios_mission.png
similarity index 100%
rename from images/ios_mission.png
rename to src/images/ios_mission.png
diff --git a/images/ios_mission_big.png b/src/images/ios_mission_big.png
similarity index 100%
rename from images/ios_mission_big.png
rename to src/images/ios_mission_big.png
diff --git a/images/itch.svg b/src/images/itch.svg
similarity index 100%
rename from images/itch.svg
rename to src/images/itch.svg
diff --git a/images/mail.svg b/src/images/mail.svg
similarity index 100%
rename from images/mail.svg
rename to src/images/mail.svg
diff --git a/images/me.png b/src/images/me.png
similarity index 100%
rename from images/me.png
rename to src/images/me.png
diff --git a/images/play.svg b/src/images/play.svg
similarity index 100%
rename from images/play.svg
rename to src/images/play.svg
diff --git a/images/ray_casting_blocks.png b/src/images/ray_casting_blocks.png
similarity index 100%
rename from images/ray_casting_blocks.png
rename to src/images/ray_casting_blocks.png
diff --git a/images/ray_casting_blocks_big.png b/src/images/ray_casting_blocks_big.png
similarity index 100%
rename from images/ray_casting_blocks_big.png
rename to src/images/ray_casting_blocks_big.png
diff --git a/images/snakes_and_ladders.png b/src/images/snakes_and_ladders.png
similarity index 100%
rename from images/snakes_and_ladders.png
rename to src/images/snakes_and_ladders.png
diff --git a/images/snakes_and_ladders_big.png b/src/images/snakes_and_ladders_big.png
similarity index 100%
rename from images/snakes_and_ladders_big.png
rename to src/images/snakes_and_ladders_big.png
diff --git a/images/squirtcopter.png b/src/images/squirtcopter.png
similarity index 100%
rename from images/squirtcopter.png
rename to src/images/squirtcopter.png
diff --git a/images/squirtcopter_big.png b/src/images/squirtcopter_big.png
similarity index 100%
rename from images/squirtcopter_big.png
rename to src/images/squirtcopter_big.png
diff --git a/images/the_mitigator.png b/src/images/the_mitigator.png
similarity index 100%
rename from images/the_mitigator.png
rename to src/images/the_mitigator.png
diff --git a/images/the_mitigator_big.png b/src/images/the_mitigator_big.png
similarity index 100%
rename from images/the_mitigator_big.png
rename to src/images/the_mitigator_big.png
diff --git a/images/x.svg b/src/images/x.svg
similarity index 100%
rename from images/x.svg
rename to src/images/x.svg
diff --git a/images/youtube.svg b/src/images/youtube.svg
similarity index 100%
rename from images/youtube.svg
rename to src/images/youtube.svg
diff --git a/js/analytics.js b/src/js/analytics.js
similarity index 100%
rename from js/analytics.js
rename to src/js/analytics.js
diff --git a/js/main.js b/src/js/main.js
similarity index 100%
rename from js/main.js
rename to src/js/main.js
diff --git a/main.css b/src/main.css
similarity index 93%
rename from main.css
rename to src/main.css
index 6bce093..fdcaba6 100644
--- a/main.css
+++ b/src/main.css
@@ -1,34 +1,34 @@
 /* --- fonts --- */
 @font-face {
     font-family: burger;
-    src: url(/fonts/burger.otf)
+    src: url(/src/fonts/burger.otf)
 }
 @font-face {
     font-family: font;
-    src: url(/fonts/ChakraPetch-Regular.ttf)
+    src: url(/src/fonts/Fredoka-VariableFont_wght.ttf)
 }
 @font-face {
     font-family: boldFont;
-    src: url(/fonts/ChakraPetch-Medium.ttf)
+    font-weight: bold;
+    src: url(/src/fonts/Quicksand-VariableFont_wght.ttf)
 }
 @font-face {
     font-family: code;
-    src: url(/fonts/code.ttf)
+    src: url(/src/fonts/ProFontWindows.ttf)
 }
 @font-face {
     font-family: super;
-    src: url(/fonts/super.otf)
+    src: url(/src/fonts/super.otf)
 }
-
 @font-face {
     font-family: pixelMonospace;
-    src: url(/fonts/joystixMonospace.woff2)
+    src: url(/src/fonts/joystixMonospace.woff2)
 }
 
 :root {
-    --bg: #111;
-    --topnavbg: #222;
-    --topnavbutton: #333;
+    --bg: #000;
+    --topnavbg: #111;
+    --topnavbutton: #222;
     --topnavbuttonhover: #465;
     --topnavwhitehover: #444;
     --buttonnorm: #2da;
@@ -64,13 +64,15 @@
     --string: #0f8;
     --comment: #6a8;
     --gray: saturate(10%) brightness(85%);
+
+    --navHeight: 45px
 }
 
 body.light {
     --bg: #fff;
-    --topnavbg: #ccc;
-    --topnavbutton: #aaa;
-    --topnavbuttonhover: #697;
+    --topnavbg: #ddd;
+    --topnavbutton: #ccc;
+    --topnavbuttonhover: #8b9;
     --topnavwhitehover: #bbb;
     --buttonnorm: #063;
     --buttonhover: #285;
@@ -104,7 +106,10 @@ body.light {
     filter: var(--gray);
 }
 
-html {scroll-behavior: smooth}
+html {
+    scroll-behavior: smooth;
+    overflow-x: hidden;
+}
 
 body {
     color: var(--text);
@@ -113,7 +118,9 @@ body {
     margin: 0;
     font-size: var(--fontsize);
     padding-bottom: 60px;
-    width: 100%
+    width: 100%;
+    overflow-x: hidden;
+    position: relative;
 }
 
 a {text-decoration: none}
@@ -183,7 +190,9 @@ input, textarea {
     background-color: var(--topnavbg);
     position: fixed;
     display: flex;
+    gap: 0;
     width: 100%;
+    height: var(--navHeight);
     left: 0;
     top: 0;
     z-index: 1;
@@ -208,7 +217,6 @@ input, textarea {
 .topnav .title .brand {
     padding-left: 30px;
     font-size: 35px;
-    height: 100%;
     color: var(--text);
 }
 
@@ -219,7 +227,7 @@ input, textarea {
     border: 1.5px solid var(--topnavbuttonhover);
     background-color: var(--bg);
     border-radius: var(--borderRadius);
-    padding: 6px;
+    padding: 5px;
     margin-left: 20px;
 }
 
@@ -235,7 +243,7 @@ input, textarea {
     padding: 0 16px;
     display: flex;
     align-items: center;
-    height: 60px;
+    height: 100%;
     text-align: center;
 }
 
@@ -676,8 +684,17 @@ iframe {
         width: 90%
     }
 
-    .topnav .title a {
-        font-size: 30px;
+    .topnav .title {
+        padding: 0 0;
+    }
+
+    .topnav .title .brand {
+        font-size: 25px;
+        color: var(--text);
+    }
+
+    .topnav .title .about {
+        font-size: 15px;
         color: var(--text);
     }
 
@@ -703,10 +720,6 @@ iframe {
     .topnav .nav {flex-direction: column}
     .topnav .nav a {padding: 0}
 
-    #pop {
-        width: 90%
-    }
-
     .main {
         padding-left: 10px;
         padding-right: 10px;
diff --git a/news/blue_hue.png b/src/news/blue_hue.png
similarity index 100%
rename from news/blue_hue.png
rename to src/news/blue_hue.png
diff --git a/news/leapLava.html b/src/news/leapLava.html
similarity index 96%
rename from news/leapLava.html
rename to src/news/leapLava.html
index b0d0a8d..24e03dc 100644
--- a/news/leapLava.html
+++ b/src/news/leapLava.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang = en-gb>
     <head>
         <meta charset = utf-8>
         <meta name = viewport content = 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no'>
@@ -20,7 +20,7 @@
                 -webkit-user-select: none
             }
         </style>
-        <link rel = icon type = image/x-icon  href = /favs/favicon.ico>
+        <link rel = icon type = image/x-icon href = /src/favs/favicon.ico>
     </head>
     <body>
         <canvas id = a></canvas>
diff --git a/news/leap_lava.png b/src/news/leap_lava.png
similarity index 100%
rename from news/leap_lava.png
rename to src/news/leap_lava.png
diff --git a/news/splashDash.html b/src/news/splashDash.html
similarity index 97%
rename from news/splashDash.html
rename to src/news/splashDash.html
index 59fc269..3cf53a0 100644
--- a/news/splashDash.html
+++ b/src/news/splashDash.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang = en-gb>
     <head>
         <meta charset = utf-8>
         <meta name = viewport content = 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no'>
@@ -21,7 +21,7 @@
             }
         </style>
 
-        <link rel = icon type = image/x-icon  href = /favs/favicon.ico>
+        <link rel = icon type = image/x-icon  href = /src/favs/favicon.ico>
     </head>
     <body>
         <canvas id=c>
diff --git a/news/splash_dash.png b/src/news/splash_dash.png
similarity index 100%
rename from news/splash_dash.png
rename to src/news/splash_dash.png
diff --git a/news/squirtcopter.png b/src/news/squirtcopter.png
similarity index 100%
rename from news/squirtcopter.png
rename to src/news/squirtcopter.png
