From b55bc7c11efc2048dea935bce35ac377f3de31fb25a19c0a0b3d2e4fbde15efe Mon Sep 17 00:00:00 2001
From: nnwhen <nnwhen@nnwhen.com>
Date: Tue, 18 Mar 2025 23:24:00 +0200
Subject: [PATCH] procedural shuffle update

---
 subsystem/about.html               | 30 ++++++++++++++++--------------
 subsystem/index.html               |  5 +++--
 subsystem/more.html                |  5 +++--
 subsystem/subres/profileShuffle.js | 22 ++++++++++++++++++++++
 subsystem/subres/shuffle.js        | 20 ++++++++++++++++++++
 subsystem/substyle.css             |  2 +-
 6 files changed, 65 insertions(+), 19 deletions(-)
 create mode 100644 subsystem/subres/profileShuffle.js
 create mode 100644 subsystem/subres/shuffle.js
diff --git a/subsystem/about.html b/subsystem/about.html
index 95438b3..8a9f360 100644
--- a/subsystem/about.html
+++ b/subsystem/about.html
@@ -2,7 +2,9 @@
 <html lang="en">
   <head>
     <link rel="stylesheet" href="substyle.css" />
+    <script src="subres/shuffle.js"></script>
     <link rel="stylesheet" href="subres/sub-aboutstyle.css" />
+    <script src="subres/profileShuffle.js"></script>
     <title>The System</title>
 
     <meta name="distribution" content="global" />
@@ -41,7 +43,7 @@
     />
   </head>
   <body>
-    <div class="bnav"></div>
+    <div id="bnav"></div>
     <nav id="headnav">
       <a href="index.html">Home</a>
       <a href="#" aria-hidden="true" tabindex="-1" id="here">Who We Are</a>
@@ -50,7 +52,7 @@
       <a href="../index.html">Return</a>
     </nav>
 
-    <nav id="socials" style="transform: rotate(-0.8deg)">
+    <nav id="socials">
       <a href="https://tiktok.com/@ukuthintana" target="_blank">TikTok</a>
       <a href="https://youtube.com/@ukuthintana" target="_blank">Youtube</a>
       <a href="https://twitter.com/ukuthintana" target="_blank">Twitter</a>
@@ -59,8 +61,8 @@
     </nav>
 
     <main id="about">
-      <section class="profile" style="transform: rotate(1deg)">
-        <hgroup style="transform: rotate(-1deg)">
+      <section class="profile">
+        <hgroup>
           <picture>
             <source srcset="subres/ppl-raea.jxl" type="image/jxl" />
             <source srcset="subres/ppl-raea.avif" type="image/avif" />
@@ -73,7 +75,7 @@
             <a href="https://nnwhen.com" target="_blank">Website</a>
           </h3>
         </hgroup>
-        <div style="transform: rotate(-1deg)">
+        <div>
           <p>
             I am a <em>Digital Entity</em>, which involves: creating digital
             spaces - like this website - and creating other forms of
@@ -91,8 +93,8 @@
         </div>
       </section>
 
-      <section class="profile" style="transform: rotate(-0.4deg)">
-        <hgroup style="transform: rotate(0.4deg)">
+      <section class="profile">
+        <hgroup>
           <picture>
             <source
               srcset="subres/ppl-elliot-jaudz-oliver.jxl"
@@ -116,7 +118,7 @@
             >
           </h3>
         </hgroup>
-        <div style="transform: rotate(0.4deg)">
+        <div>
           <p>
             <i>Elliot</i> is a multidisciplinary artist living and working in
             Joburg, South Africa. Originally from Zimbabwe, he studied for a
@@ -150,8 +152,8 @@
         </div>
       </section>
 
-      <section class="profile" style="transform: rotate(-1.2deg)">
-        <hgroup style="transform: rotate(1.2deg)">
+      <section class="profile">
+        <hgroup>
           <picture>
             <source
               srcset="subres/ppl-theblazingneptune.jxl"
@@ -175,7 +177,7 @@
             >
           </h3>
         </hgroup>
-        <div style="transform: rotate(1.2deg)">
+        <div>
           <p>
             I'm an ambitious lil man. I chase competitive stimulation in the
             form of virtual activities. Climbing the ranks to prove myself
@@ -194,8 +196,8 @@
         </div>
       </section>
 
-      <section class="profile" style="transform: rotate(-2deg)">
-        <hgroup style="transform: rotate(2deg)">
+      <section class="profile">
+        <hgroup>
           <picture>
             <source srcset="subres/ppl-na.jxl" type="image/jxl" />
             <source srcset="subres/ppl-na.avif" type="image/avif" />
@@ -208,7 +210,7 @@
             <a href="https://umabhengwane.com" target="_blank">Website</a>
           </h3>
         </hgroup>
-        <div style="transform: rotate(2deg)">
+        <div>
           <p>My name is Cullen Mackenzie.</p>
           <p>
             I am the youngest of a big family and I grew up listening to stories
diff --git a/subsystem/index.html b/subsystem/index.html
index 3c785ae..8acb34f 100644
--- a/subsystem/index.html
+++ b/subsystem/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <link rel="stylesheet" href="substyle.css" />
+    <script src="subres/shuffle.js"></script>
     <link rel="stylesheet" href="subres/sub-indexstyle.css" />
     <title>The System</title>
 
@@ -50,7 +51,7 @@
     />
   </head>
   <body>
-    <div class="bnav"></div>
+    <div id="bnav"></div>
     <nav id="headnav">
       <a href="#" aria-hidden="true" tabindex="-1" id="here">Home</a>
       <a href="about.html">Who We Are</a>
@@ -115,7 +116,7 @@
         <a href="mailto:hr@nohlelo.co.za">Contact us here</a> (hr@nohlelo.co.za)
       </article>
     </main>
-    <nav id="socials" style="transform: rotate(-1deg)">
+    <nav id="socials">
       <a href="https://tiktok.com/@ukuthintana" target="_blank">TikTok</a>
       <a href="https://youtube.com/@ukuthintana" target="_blank">Youtube</a>
       <a href="https://twitter.com/ukuthintana" target="_blank">Twitter</a>
diff --git a/subsystem/more.html b/subsystem/more.html
index 99de0ae..960928f 100644
--- a/subsystem/more.html
+++ b/subsystem/more.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <link rel="stylesheet" href="substyle.css" />
+    <script src="subres/shuffle.js"></script>
     <link rel="stylesheet" href="subres/sub-indexstyle.css" />
     <title>The System</title>
 
@@ -50,7 +51,7 @@
     />
   </head>
   <body>
-    <div class="bnav"></div>
+    <div id="bnav"></div>
     <nav id="headnav">
       <a href="index.html">Home</a>
       <a href="about.html">Who We Are</a>
@@ -59,7 +60,7 @@
       <a href="../index.html">Return</a>
     </nav>
 
-    <nav id="socials" style="transform: rotate(-2.4deg)">
+    <nav id="socials">
       <a href="https://tiktok.com/@ukuthintana" target="_blank">TikTok</a>
       <a href="https://youtube.com/@ukuthintana" target="_blank">Youtube</a>
       <a href="https://twitter.com/ukuthintana" target="_blank">Twitter</a>
diff --git a/subsystem/subres/profileShuffle.js b/subsystem/subres/profileShuffle.js
new file mode 100644
index 0000000..8b1fea4
--- /dev/null
+++ b/subsystem/subres/profileShuffle.js
@@ -0,0 +1,22 @@
+function profileShuffle() {
+  let shuffle = document.getElementsByClassName("profile");
+
+  for (let i = 0; i < shuffle.length; i++) {
+    let rnd = Math.round((Math.random() * (1.5 + 1.5) - 1.5) * 100) / 100;
+
+    // Shuffle profile cards
+    shuffle[i].style.transform = "rotate(" + rnd + "deg)";
+
+    //Headings and Image
+    shuffle[i].getElementsByTagName("hgroup")[0].style.transform =
+      "rotate(" + rnd * -1 + "deg)";
+
+    // Bio Text
+    shuffle[i].getElementsByTagName("div")[0].style.transform =
+      "rotate(" + rnd * -1 + "deg)";
+  }
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+  profileShuffle();
+});
diff --git a/subsystem/subres/shuffle.js b/subsystem/subres/shuffle.js
new file mode 100644
index 0000000..720abba
--- /dev/null
+++ b/subsystem/subres/shuffle.js
@@ -0,0 +1,20 @@
+function socialShuffle() {
+  // Shuffle nav bar
+  let shuffle = document.getElementById("headnav");
+  let rnd = Math.round((Math.random() * (1.5 + 1.5) - 1.5) * 100) / 100;
+  shuffle.style.transform = "rotate(" + rnd + "deg)";
+
+  // Shuffle bar behind nav
+  shuffle = document.getElementById("bnav");
+  rnd = Math.round((Math.random() * (1.5 + 1.5) - 1.5) * 100) / 100;
+  shuffle.style.transform = "rotate(" + rnd + "deg)";
+
+  // Shuffle social bar
+  shuffle = document.getElementById("socials");
+  rnd = Math.round((Math.random() * (1.5 + 1.5) - 1.5) * 100) / 100;
+  shuffle.style.transform = "rotate(" + rnd + "deg)";
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+  socialShuffle();
+});
diff --git a/subsystem/substyle.css b/subsystem/substyle.css
index 90f44b5..9d7921d 100644
--- a/subsystem/substyle.css
+++ b/subsystem/substyle.css
@@ -51,7 +51,7 @@ nav a:hover {
   background-color: var(--l-red);
   color: var(--black);
 }
-.bnav {
+#bnav {
   position: absolute;
   top: 10px;
   left: 40px;
