nnwhen/nohlelo.co.za
SHA256
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

procedural shuffle update

Browse source
This commit is contained in:
nnwhen 2025-03-18 23:24:00 +02:00
parent f92410f38a
commit b55bc7c11e
6 changed files with 65 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
subsystem/about.html
View file

@ -2,7 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<link rel="stylesheet" href="substyle.css" /> <link rel="stylesheet" href="substyle.css" />
<script src="subres/shuffle.js"></script>
<link rel="stylesheet" href="subres/sub-aboutstyle.css" /> <link rel="stylesheet" href="subres/sub-aboutstyle.css" />
<script src="subres/profileShuffle.js"></script>
<title>The System</title> <title>The System</title>
<meta name="distribution" content="global" /> <meta name="distribution" content="global" />
@ -41,7 +43,7 @@
/> />
</head> </head>
<body> <body>
<div class="bnav"></div> <div id="bnav"></div>
<nav id="headnav"> <nav id="headnav">
<a href="index.html">Home</a> <a href="index.html">Home</a>
<a href="#" aria-hidden="true" tabindex="-1" id="here">Who We Are</a> <a href="#" aria-hidden="true" tabindex="-1" id="here">Who We Are</a>
@ -50,7 +52,7 @@
<a href="../index.html">Return</a> <a href="../index.html">Return</a>
</nav> </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://tiktok.com/@ukuthintana" target="_blank">TikTok</a>
<a href="https://youtube.com/@ukuthintana" target="_blank">Youtube</a> <a href="https://youtube.com/@ukuthintana" target="_blank">Youtube</a>
<a href="https://twitter.com/ukuthintana" target="_blank">Twitter</a> <a href="https://twitter.com/ukuthintana" target="_blank">Twitter</a>
@ -59,8 +61,8 @@
</nav> </nav>
<main id="about"> <main id="about">
<section class="profile" style="transform: rotate(1deg)"> <section class="profile">
<hgroup style="transform: rotate(-1deg)"> <hgroup>
<picture> <picture>
<source srcset="subres/ppl-raea.jxl" type="image/jxl" /> <source srcset="subres/ppl-raea.jxl" type="image/jxl" />
<source srcset="subres/ppl-raea.avif" type="image/avif" /> <source srcset="subres/ppl-raea.avif" type="image/avif" />
@ -73,7 +75,7 @@
<a href="https://nnwhen.com" target="_blank">Website</a> <a href="https://nnwhen.com" target="_blank">Website</a>
</h3> </h3>
</hgroup> </hgroup>
<div style="transform: rotate(-1deg)"> <div>
<p> <p>
I am a <em>Digital Entity</em>, which involves: creating digital I am a <em>Digital Entity</em>, which involves: creating digital
spaces - like this website - and creating other forms of spaces - like this website - and creating other forms of
@ -91,8 +93,8 @@
</div> </div>
</section> </section>
<section class="profile" style="transform: rotate(-0.4deg)"> <section class="profile">
<hgroup style="transform: rotate(0.4deg)"> <hgroup>
<picture> <picture>
<source <source
srcset="subres/ppl-elliot-jaudz-oliver.jxl" srcset="subres/ppl-elliot-jaudz-oliver.jxl"
@ -116,7 +118,7 @@
> >
</h3> </h3>
</hgroup> </hgroup>
<div style="transform: rotate(0.4deg)"> <div>
<p> <p>
<i>Elliot</i> is a multidisciplinary artist living and working in <i>Elliot</i> is a multidisciplinary artist living and working in
Joburg, South Africa. Originally from Zimbabwe, he studied for a Joburg, South Africa. Originally from Zimbabwe, he studied for a
@ -150,8 +152,8 @@
</div> </div>
</section> </section>
<section class="profile" style="transform: rotate(-1.2deg)"> <section class="profile">
<hgroup style="transform: rotate(1.2deg)"> <hgroup>
<picture> <picture>
<source <source
srcset="subres/ppl-theblazingneptune.jxl" srcset="subres/ppl-theblazingneptune.jxl"
@ -175,7 +177,7 @@
> >
</h3> </h3>
</hgroup> </hgroup>
<div style="transform: rotate(1.2deg)"> <div>
<p> <p>
I'm an ambitious lil man. I chase competitive stimulation in the I'm an ambitious lil man. I chase competitive stimulation in the
form of virtual activities. Climbing the ranks to prove myself form of virtual activities. Climbing the ranks to prove myself
@ -194,8 +196,8 @@
</div> </div>
</section> </section>
<section class="profile" style="transform: rotate(-2deg)"> <section class="profile">
<hgroup style="transform: rotate(2deg)"> <hgroup>
<picture> <picture>
<source srcset="subres/ppl-na.jxl" type="image/jxl" /> <source srcset="subres/ppl-na.jxl" type="image/jxl" />
<source srcset="subres/ppl-na.avif" type="image/avif" /> <source srcset="subres/ppl-na.avif" type="image/avif" />
@ -208,7 +210,7 @@
<a href="https://umabhengwane.com" target="_blank">Website</a> <a href="https://umabhengwane.com" target="_blank">Website</a>
</h3> </h3>
</hgroup> </hgroup>
<div style="transform: rotate(2deg)"> <div>
<p>My name is Cullen Mackenzie.</p> <p>My name is Cullen Mackenzie.</p>
<p> <p>
I am the youngest of a big family and I grew up listening to stories I am the youngest of a big family and I grew up listening to stories

5
subsystem/index.html
View file

@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<link rel="stylesheet" href="substyle.css" /> <link rel="stylesheet" href="substyle.css" />
<script src="subres/shuffle.js"></script>
<link rel="stylesheet" href="subres/sub-indexstyle.css" /> <link rel="stylesheet" href="subres/sub-indexstyle.css" />
<title>The System</title> <title>The System</title>
@ -50,7 +51,7 @@
/> />
</head> </head>
<body> <body>
<div class="bnav"></div> <div id="bnav"></div>
<nav id="headnav"> <nav id="headnav">
<a href="#" aria-hidden="true" tabindex="-1" id="here">Home</a> <a href="#" aria-hidden="true" tabindex="-1" id="here">Home</a>
<a href="about.html">Who We Are</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) <a href="mailto:hr@nohlelo.co.za">Contact us here</a> (hr@nohlelo.co.za)
</article> </article>
</main> </main>
<nav id="socials" style="transform: rotate(-1deg)"> <nav id="socials">
<a href="https://tiktok.com/@ukuthintana" target="_blank">TikTok</a> <a href="https://tiktok.com/@ukuthintana" target="_blank">TikTok</a>
<a href="https://youtube.com/@ukuthintana" target="_blank">Youtube</a> <a href="https://youtube.com/@ukuthintana" target="_blank">Youtube</a>
<a href="https://twitter.com/ukuthintana" target="_blank">Twitter</a> <a href="https://twitter.com/ukuthintana" target="_blank">Twitter</a>

5
subsystem/more.html
View file

@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<link rel="stylesheet" href="substyle.css" /> <link rel="stylesheet" href="substyle.css" />
<script src="subres/shuffle.js"></script>
<link rel="stylesheet" href="subres/sub-indexstyle.css" /> <link rel="stylesheet" href="subres/sub-indexstyle.css" />
<title>The System</title> <title>The System</title>
@ -50,7 +51,7 @@
/> />
</head> </head>
<body> <body>
<div class="bnav"></div> <div id="bnav"></div>
<nav id="headnav"> <nav id="headnav">
<a href="index.html">Home</a> <a href="index.html">Home</a>
<a href="about.html">Who We Are</a> <a href="about.html">Who We Are</a>
@ -59,7 +60,7 @@
<a href="../index.html">Return</a> <a href="../index.html">Return</a>
</nav> </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://tiktok.com/@ukuthintana" target="_blank">TikTok</a>
<a href="https://youtube.com/@ukuthintana" target="_blank">Youtube</a> <a href="https://youtube.com/@ukuthintana" target="_blank">Youtube</a>
<a href="https://twitter.com/ukuthintana" target="_blank">Twitter</a> <a href="https://twitter.com/ukuthintana" target="_blank">Twitter</a>

22
subsystem/subres/profileShuffle.js Normal file
View file

@ -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();
});

20
subsystem/subres/shuffle.js Normal file
View file

@ -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();
});

2
subsystem/substyle.css
View file

@ -51,7 +51,7 @@ nav a:hover {
background-color: var(--l-red); background-color: var(--l-red);
color: var(--black); color: var(--black);
} }
.bnav { #bnav {
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 40px; left: 40px;