From 2adf0723372267542eba794e06c99bb93bd61db2 Mon Sep 17 00:00:00 2001
From: Guus Waals <_@guusw.nl>
Date: Mon, 3 Nov 2025 17:24:25 +0800
Subject: [PATCH] Add work page and move social icons

---
 templates/footer.html    | 22 ++++++++++++++
 templates/header.html    | 24 +++++----------
 templates/index.html     |  1 +
 templates/page_work.html | 64 ++++++++++++++++++++++++++++++++++++++++
 4 files changed, 95 insertions(+), 16 deletions(-)
 create mode 100644 templates/page_work.html

diff --git a/templates/footer.html b/templates/footer.html
index b80f4a9..6b3202c 100644
--- a/templates/footer.html
+++ b/templates/footer.html
@@ -1,4 +1,26 @@
     <footer style="margin-top: 50px; padding-top: 20px; border-top: 1px solid #ddd; color: #666; text-align: center;">
+      <div class="social-links">
+        <a href="https://bsky.app/profile/guusww.bsky.social" class="social-link" target="_blank" aria-label="Follow on Bluesky">
+            <svg viewBox="0 0 568 501" width="24" height="24" aria-hidden="true">
+                <path d="M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.291 0 57.946 0-28.906 76.135-1.612 123.121 33.664Z"/>
+            </svg>
+        </a>
+        <a href="https://x.com/WaalsGuus" class="social-link" target="_blank" aria-label="Follow on Twitter">
+            <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
+                <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+            </svg>
+        </a>
+        <a href="https://www.linkedin.com/in/guus-waals-4a7640110/" class="social-link" target="_blank" aria-label="Connect on LinkedIn">
+            <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
+                <path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"/>
+            </svg>
+        </a>
+        <a href="https://github.com/guusw" class="social-link" target="_blank" aria-label="Follow on GitHub">
+            <svg viewBox="0 0 16 16" width="24" height="24" aria-hidden="true">
+                <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+            </svg>
+        </a>
+      </div>
       <p>
       Guus Waals - updated on $<updated/> </br>
       <a href="https://git.bakje.coffee/guus/blog">$<version/></a>
diff --git a/templates/header.html b/templates/header.html
index 81ee67a..a780eb0 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -18,7 +18,7 @@
             padding-bottom: 10px;
             margin-bottom: 30px;
         }
-        nav span {
+        nav #title {
             font-size: 1.2em;
             font-weight: bold;
             margin-right: 20px;
@@ -75,35 +75,27 @@
             padding: 0;
         }
         .social-link {
-            float: right;
             display: inline-block;
             width: 24px;
             height: 24px;
             vertical-align: middle;
-            margin-left: 0px;
+            margin: 0 8px;
         }
         .social-link svg {
-            fill: #333;
+            fill: #666;
             transition: fill 0.2s;
         }
         .social-link:hover svg {
             fill: #0066cc;
         }
+        footer .social-links {
+            margin-bottom: 10px;
+        }
     </style>
 </head>
 <body>
     <nav>
-      <span>Guus' things</span>
-        <a href="/">Home</a>
+        <a href="/" id="title">Guus' things</a>
         <a href="/all">All Posts</a>
-        <a href="https://bsky.app/profile/guusww.bsky.social" class="social-link" target="_blank" aria-label="Follow on Bluesky">
-            <svg viewBox="0 0 568 501" width="24" height="24" aria-hidden="true">
-                <path d="M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.291 0 57.946 0-28.906 76.135-1.612 123.121 33.664Z"/>
-            </svg>
-        </a>
-        <a href="https://github.com/guusw" class="social-link" target="_blank" aria-label="View source on GitHub">
-            <svg viewBox="0 0 16 16" width="24" height="24" aria-hidden="true">
-                <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
-            </svg>
-        </a>
+        <a href="/work">Work</a>
     </nav>
diff --git a/templates/index.html b/templates/index.html
index 8cf440f..89230ff 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,4 +1,5 @@
 $<include src="header.html"/>
+<p> Hey, welcome to my page :)<br/>Here I plan to posts frequent updates related to the game I'm working on. If you're looking to work together check out <a href="/work">this page</a>
     <h1>Recent Posts</h1>
     $<post-list limit="10"/>
 $<include src="footer.html"/>
diff --git a/templates/page_work.html b/templates/page_work.html
new file mode 100644
index 0000000..aff9c88
--- /dev/null
+++ b/templates/page_work.html
@@ -0,0 +1,64 @@
+$<include src="header.html"/>
+  <script>document.title = "Guus - Let's work together!";</script>
+  <h1>Work</h1>
+  <p>For more than 10 years I have worked on games, game engines and everything else around the development process.</p>
+
+  <h2>Games</h2>
+  <p>Since I started my game dev career I have worked a lot with both Unity and Unreal.</p>
+  <p>For Unity I have worked on 2 released commercial games, one being a live-service mobile arcade game, the other a console+PC racing game.</p>
+  <p>For Unreal I have worked on 3 released commercial games, all of them being console+PC racing titles.</p>
+
+  <h2>Game Engines</h2>
+    <p>
+    I have worked on the Stride Game Engine (formerly Xenko) - a C# game engine - for a year.
+    </p>
+    <p>
+    During my game development with Unreal Engine, I have written plenty of developer tools, UIs and other extensions to the engine, have gotten familiar with its build system and with debugging various console issues.
+    </p>
+    <p> I have worked on the Formabble game engine, which takes a collaborative editing and user generated content approach to game engines. As part of a 2-person developer team I worked on a lot of the engine, graphics and scripting systems.
+    </p>
+
+  <h2>Others</h2>
+  <p>
+  I have worked with various CI Systems (Jenkins/GitHub actions) and build systems such as Unity's, Unreal's, CMake and .NET.
+  </p>
+  <p>
+  I have worked with various Platforms and SDKs, some of which are:
+  </p>
+  <ul>
+    <li>Android (Google Play, IAPs)</li>
+    <li>iOS (GameCenter)</li>
+    <li>PS5 (Unreal)</li>
+    <li>PS4 (Unity/Unreal)</li>
+    <li>Xbox One (Unity/Unreal)</li>
+    <li>Nintendo Switch (Unity/Unreal)</li>
+    <li>Wii U (low level, game from scratch)</li>
+  </ul>
+  <p>
+  For my personal projects I work a lot with Linux systems, either as a desktop system or for projects requiring a server backend. I run my own website, email and git servers and am comfortable setting up systems on Linux-based servers.
+  </p>
+
+  <h2>Contact</h2>
+  <p>
+  If you have any project that could use my skills, I'd be happy to talk to you.
+  <br/>Feel free to contact me at: <span id="email-hidden" style="background: #000; color: #fff; cursor: pointer; padding: 2px 8px; user-select: none;">click here</span>
+  <script>
+    var revealed = false;
+    var span = document.getElementById('email-hidden');
+    span.addEventListener('click', function() {
+      if (!revealed) {
+        var decoded = "t@qvtvgny.yrzbafunex.qri".replace(/[a-zA-Z]/g, function(c) {
+          return String.fromCharCode((c <= 'Z' ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26);
+        });
+        var link = document.createElement('a');
+        link.href = 'mailto:' + decoded;
+        link.textContent = decoded;
+        link.style.cssText = 'cursor: pointer; user-select: text;';
+        span.parentNode.replaceChild(link, span);
+        revealed = true;
+      }
+    });
+  </script>
+  </p>
+
+$<include src="footer.html"/>