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">
<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

5
subsystem/index.html
View file

@ -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>

5
subsystem/more.html
View file

@ -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>

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);
color: var(--black);
}
.bnav {
#bnav {
position: absolute;
top: 10px;
left: 40px;