Added a new article

about.html

@@ -27,6 +27,7 @@
                 min-width: 80px;
                 height: auto;
                 border: 7px solid var(--topnavbuttonhover);
+                box-shadow: var(--shadow);
             }
         </style>
     </head>
@@ -47,6 +48,7 @@
 
         <section class = main>
             <img class = me src = images/me.png>
+
             <div class = demo>
                 <span>
                     Hi there! I'm Joachim Ford, a solo developer
@@ -56,6 +58,39 @@
                     or get in touch at
                     <a class = normal href = mailto:[email protected] target = _blank>[email protected]</a>.
                 </span>
+
+                <div class = opts>
+                    <a href = mailto:[email protected] target = _blank>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
+                            <path d="M1 0 0 1 0 2 4 4 8 2 8 1 7 0ZM0 3 4 5 8 3 8 7 7 8 1 8 0 7Z"/>
+                        </svg>
+                    </a>
+                    <a href = https://github.com/Hope41 target = _blank>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+                            <path d="M 3 3 L 3 9 L 5 11 L 6 11 L 6 16 L 2 16 L 0 14 L 0 2 L 2 0 L 14 0 L 16 2 L 16 14 L 14 16 L 10 16 L 10 11 L 11 11 L 13 9 L 13 3 L 11 5 L 5 5 Z"/>
+                        </svg>
+                    </a>
+                    <a href = https://youtube.com/@joachimford target = _blank>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+                            <path d="M 2 0 L 0 2 L 0 14 L 2 16 L 14 16 L 16 14 L 16 2 L 14 0 Z M 6 5 L 11 8 L 6 11 Z"/>
+                        </svg>
+                    </a>
+                    <a href = https://x.com/joachimford target = _blank>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+                            <path d="M 2 0 L 0 2 L 0 14 L 2 16 L 14 16 L 16 14 L 16 2 L 14 0 Z M 2 5 L 5 2 L 9 6 L 13 2 L 14 3 L 10 7 L 14 11 L 11 14 L 7 10 L 3 14 L 2 13 L 6 9 Z M 11 12 L 12 11 L 5 4 L 4 5 Z"/>
+                        </svg>
+                    </a>
+                    <a href = https://joachimford.itch.io target = _blank>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -1 18 19">
+                            <path d="M 2 -1 L 0 1 L 0 4 L 2 4 L 4 3 L 6 3 L 8 4 L 10 4 L 12 3 L 14 3 L 16 4 L 18 4 L 18 1 L 16 -1 Z M 0 6 L 0 16 L 2 18 L 16 18 L 18 16 L 18 6 L 16 6 L 14 5 L 12 5 L 10 6 L 8 6 L 6 5 L 4 5 L 2 6 Z Z M 8 13 L 7 14 L 5 15 L 3 15 L 3 13 L 4 11 L 5 8 L 13 8 L 14 11 L 15 13 L 15 15 L 13 15 L 11 14 L 10 13 Z M 8 12 L 8 11 L 7 11 L 9 9 L 11 11 L 10 11 L 10 12 Z"/>
+                        </svg>
+                    </a>
+                    <a href = https://dwitter.net/u/Joachim target = _blank>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+                            <path d="M 2 0 L 0 2 L 0 14 L 2 16 L 14 16 L 16 14 L 16 2 L 14 0 Z M 3 4 L 5 4 L 5 12 L 3 12 Z M 7 4 L 9 4 L 9 12 L 7 12 Z M 11 4 L 13 4 L 13 12 L 11 12 Z"/>
+                        </svg>
+                    </a>
+                </div>
             </div>
 
             <div class = demo>
@@ -77,8 +112,8 @@ <h3>Things I've worked on...</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 = /svg/github.svg></img></a>
-            <a href = mailto:[email protected]><img src = /svg/mail.svg></img></a>
+            <a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></img></a>
+            <a href = mailto:[email protected]><img src = /images/mail.svg></img></a>
         </span>
     </body>
 </html>

articles.html

@@ -38,6 +38,16 @@ <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>
+                <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
+                    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>
                 <h3>Making games: The Bits That Nobody Notices</h3>
@@ -74,8 +84,8 @@ <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 = /svg/github.svg></img></a>
-            <a href = mailto:[email protected]><img src = /svg/mail.svg></img></a>
+            <a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></img></a>
+            <a href = mailto:[email protected]><img src = /images/mail.svg></img></a>
         </span>
     </body>
 </html>

articles/3_tips_for_game_development.html

@@ -81,7 +81,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 = /svg/bulb.svg><div>
+                <div class = hint><img 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
@@ -120,7 +120,7 @@ <h3>Coin Game</h3>
                     <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 = /svg/play.svg></svg></div>
+                            <div class = play><img src = /images/play.svg></svg></div>
                         </a>
                     </div>
                 </div>
@@ -145,7 +145,7 @@ <h3>Coin Game</h3>
                 As usual, I gave up quite quickly.</p>
 
                 <div class = hint>
-                    <img src = /svg/bulb.svg>
+                    <img 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
@@ -274,7 +274,7 @@ <h3>First Platformer</h3>
                     <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 = /svg/play.svg></svg></div>
+                            <div class = play><img src = /images/play.svg></svg></div>
                         </a>
                     </div>
                 </div>
@@ -305,14 +305,29 @@ <h3>Conclusion</h3>
                 <p>The legacy continues!</p>
             </div>
 
+            <div id = pop>
+                <div id = popMain>
+                    <p>All comments are reviewed before being posted. No contact details
+                    or other personal information will be shared.</p>
+                    <p>If there's anything else you don't want published, please say
+                    so in the comment.</p>
+                    <p>Thanks for your feedback!</p>
+
+                    <button id = okay>Okay</button>
+                </div>
+            </div>
+
             <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'>
                     <input type = hidden name = subject value = 'Someone posted a comment!'>
                     <input type = hidden name = address value = 3_tips_for_game_development>
-                    <input type = text name = name placeholder = 'Anonymous' required>
-                    <textarea type = text name = message placeholder = 'Enter a message' required></textarea>
+                    <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>
+                    </div>
                     <div class = h-captcha data-captcha = true id = captcha></div>
                     <button type = submit class = button onmousedown = pressPost()>Post</button>
                 </form>
@@ -325,8 +340,8 @@ <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 = /svg/github.svg></img></a>
-            <a href = mailto:[email protected]><img src = /svg/mail.svg></img></a>
+            <a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></a>
+            <a href = mailto:[email protected]><img src = /images/mail.svg></a>
         </span>
     </body>
-</html>
+</html>

articles/create_and_animate_enemies_using_shapes.html

@@ -110,12 +110,12 @@ <h3>The Cubic Side Effect</h3>
                 Overall, this enemy has to go through four main procedures to give
                 you the final result.</p>
 
-                <div class = subDemo>
-                    <p>∙ Rotate in the direction it's moving <b>(easy)</b></p>
-                    <p>∙ Close and open its eyes before and after rolling <b>(not so easy)</b></p>
-                    <p>∙ Bump up and down so that it looks like its rolling along the ground <b>(rather tricky)</b></p>
-                    <p>∙ Make sure it only stops rolling when resting on an edge <b>(tricky)</b></p>
-                </div>
+                <div class = subDemo><span>
+                    ∙ Rotate in the direction it's moving <b>(easy)</b><br>
+                    ∙ Close and open its eyes before and after rolling <b>(not so easy)</b><br>
+                    ∙ Bump up and down so that it looks like its rolling along the ground <b>(rather tricky)</b><br>
+                    ∙ Make sure it only stops rolling when resting on an edge <b>(tricky)</b><br>
+                </span></div>
 
                 <p>Take a look at the source code if you need to understand it better.</p>
             </div>
@@ -361,14 +361,29 @@ <h3>The ...?</h3>
                 if you have any more questions!</p>
             </div>
 
+            <div id = pop>
+                <div id = popMain>
+                    <p>All comments are reviewed before being posted. No contact details
+                    or other personal information will be shared.</p>
+                    <p>If there's anything else you don't want published, please say
+                    so in the comment.</p>
+                    <p>Thanks for your feedback!</p>
+
+                    <button id = okay>Okay</button>
+                </div>
+            </div>
+
             <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'>
                     <input type = hidden name = subject value = 'Someone posted a comment!'>
-                    <input type = hidden name = address value = create_and_animate_enemies_using_shapes>
-                    <input type = text name = name placeholder = 'Anonymous' required>
-                    <textarea type = text name = message placeholder = 'Enter a message' required></textarea>
+                    <input type = hidden name = address value = 3_tips_for_game_development>
+                    <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>
+                    </div>
                     <div class = h-captcha data-captcha = true id = captcha></div>
                     <button type = submit class = button onmousedown = pressPost()>Post</button>
                 </form>
@@ -381,8 +396,8 @@ <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 = /svg/github.svg></img></a>
-            <a href = mailto:[email protected]><img src = /svg/mail.svg></img></a>
+            <a href = https://github.com/Hope41 target = _blank><img src = /images/github.svg></a>
+            <a href = mailto:[email protected]><img src = /images/mail.svg></a>
         </span>
     </body>
 </html>

articles/extra/3_tips_for_game_development/18.html

@@ -2,6 +2,7 @@
     <head>
         <meta charset = utf-8>
         <title>Platform Game | Joachim Ford</title>
+        <link rel = icon type = image/x-icon  href = /favs/favicon.ico>
     </head>
     <body>
         <canvas id = c></canvas>

articles/extra/splash_dash_tutorial/2.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset = utf-8>
+        <meta name = viewport content = 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'>
+
+        <style>
+            body {
+                margin: 0;
+                background-color: #000;
+                overflow: hidden;
+            }
+
+            canvas {
+                width: 100%;
+                height: 100%;
+            }
+        </style>
+    </head>
+    <body>
+        <canvas id = cvs></canvas>
+        <script>
+            function resize() {
+                cvs.width = innerWidth * devicePixelRatio
+                cvs.height = innerHeight * devicePixelRatio
+            }
+
+            function update() {
+                let dt = (performance.now() - old) / 16
+                old = performance.now()
+                if (dt > 1) dt = 1
+                ctx.clearRect(0, 0, cvs.width, cvs.height)
+
+                const SPEED = .006
+                const JOLT = .0008
+                zoom_ *= Math.pow(1 - SPEED, dt)
+                zoom_ += (SPEED - JOLT) * dt
+                let zoom = zoom_
+
+                if (zoom_ <= 1) {
+                    zoom = 1
+                    time += dt
+
+                    if (time > 150) {
+                        time = 0
+                        zoom_ = base
+                    }
+                }
+
+                let imgToCvs = img.width / cvs.width
+                const imgToImg = img.height / img.width
+                const cvsToCvs = cvs.width / cvs.height
+                if (imgToCvs < img.height / cvs.height)
+                    imgToCvs = img.height / cvs.height
+
+                let w = img.width / imgToCvs * zoom
+                let h = img.height / imgToCvs * zoom
+                let w3 = w / 2
+                let h3 = h / 2
+                let w2 = w / 10
+                let h2 = h / 10
+                let w1 = w / 20
+                let h1 = h / 20
+
+                ctx.drawImage(img, cvs.width / 2 - w / 2, cvs.height / 2 - h / 2, w, h)
+                ctx.globalAlpha = zoom / base * 20
+                ctx.drawImage(img3, cvs.width / 2 - w3 / 2, cvs.height / 2 - h3 / 2, w3, h3)
+                ctx.globalAlpha = zoom / base * 10
+                ctx.drawImage(img2, cvs.width / 2 - w2 / 2, cvs.height / 2 - h2 / 2, w2, h2)
+                ctx.globalAlpha = zoom / base * 2
+                ctx.drawImage(img1, cvs.width / 2 - w1 / 2, cvs.height / 2 - h1 / 2, w1, h1)
+                ctx.globalAlpha = 1
+
+                requestAnimationFrame(update)
+            }
+
+            let old = 0
+            const base = 150
+            let zoom_ = base
+            let time = 0
+
+            const ctx = cvs.getContext('2d')
+            const img1 = new Image()
+            const img2 = new Image()
+            const img3 = new Image()
+            const img = new Image()
+
+            img.src = 'zoom/4.png'
+            img3.src = 'zoom/3.png'
+            img2.src = 'zoom/2.png'
+            img1.src = 'zoom/1.png'
+
+            onresize = () => resize()
+            resize()
+            update()
+        </script>
+    </body>
+</html>