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

initial commit

Browse source
This commit is contained in:
nnwhen 2025-03-18 22:30:26 +02:00
parent 3ce56cd6ff
commit d4d0bf91b1
40 changed files with 1361 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

238
subsystem/about.html Normal file
View file

@ -0,0 +1,238 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="substyle.css" />
<link rel="stylesheet" href="subres/sub-aboutstyle.css" />
<title>The System</title>
<meta name="distribution" content="global" />
<meta charset="ISO-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="The System" />
<meta
name="keywords"
content="ukuthintana, the discarded, discards, smungu, s'mungu, zilimi, amaphimbo, contact, contact collective, ukuthintana collective"
/>
<link rel="icon" href="subres/net-icon.png" type="image/x-icon" />
<meta name="description" content="Who are the Discarded?" />
<meta property="og:title" content="We Are Discarded. We Are The Future." />
<meta property="og:description" content="Who are the Discarded?" />
<meta
property="og:image"
content="https://nohlelo.co.za/res/asset-sitewide-preview-01.png"
/>
<meta property="og:url" content="https://nohlelo.co.za" />
<meta name="twitter:title" content="We Are Discarded. We Are The Future." />
<meta name="twitter:description" content="Who are the Discarded?" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@ukuthintana" />
<meta name="twitter:creator" content="@ukuthintana" />
<meta
name="twitter:image"
content="https://nohlelo.co.za/res/asset-sitewide-preview-01.png"
/>
<meta
name="twitter:image:alt"
content="A greyscale image that The System devised to represent Humanity. The perfect union of Man and Machine."
/>
</head>
<body>
<div class="bnav"></div>
<nav id="headnav">
<a href="index.html">Home</a>
<a href="#" aria-hidden="true" tabindex="-1" id="here">Who We Are</a>
<a href="more.html">More</a>
<div class="spacer"></div>
<a href="../index.html">Return</a>
</nav>
<nav id="socials" style="transform: rotate(-0.8deg)">
<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>
<a href="https://instagram.com/ukuthintana" target="_blank">Instagram</a>
<a href="https://patreon.com/ukuthintana" target="_blank">Patreon</a>
</nav>
<main id="about">
<section class="profile" style="transform: rotate(1deg)">
<hgroup style="transform: rotate(-1deg)">
<picture>
<source srcset="subres/ppl-raea.jxl" type="image/jxl" />
<source srcset="subres/ppl-raea.avif" type="image/avif" />
<source srcset="subres/ppl-raea.webp" type="image/webp" />
<img src="subres/ppl-raea.jpg" alt="" />
</picture>
<h1>Raea</h1>
<h2>They/Them</h2>
<h3>
<a href="https://nnwhen.com" target="_blank">Website</a>
</h3>
</hgroup>
<div style="transform: rotate(-1deg)">
<p>
I am a <em>Digital Entity</em>, which involves: creating digital
spaces - like this website - and creating other forms of
<a href="https://nnwhen.com/artwork" target="_blank"
>digital artwork</a
>.
</p>
<p>
I spend most of my time
<a href="http://nnwhen.com/sound-design" target="_blank"
>composing soundtracks</a
>. <br />
Some are dedicated to the World of 'UkuThintana'.
</p>
</div>
</section>
<section class="profile" style="transform: rotate(-0.4deg)">
<hgroup style="transform: rotate(0.4deg)">
<picture>
<source
srcset="subres/ppl-elliot-jaudz-oliver.jxl"
type="image/jxl"
/>
<source
srcset="subres/ppl-elliot-jaudz-oliver.avif"
type="image/avif"
/>
<source
srcset="subres/ppl-elliot-jaudz-oliver.webp"
type="image/webp"
/>
<img src="subres/ppl-elliot-jaudz-oliver.jpg" alt="" />
</picture>
<h1>Elliot Jaudz Oliver</h1>
<h2>They/He/Fae</h2>
<h3>
<a href="https://linktr.ee/eliolioxenfree" target="_blank"
>Linktree</a
>
</h3>
</hgroup>
<div style="transform: rotate(0.4deg)">
<p>
<i>Elliot</i> is a multidisciplinary artist living and working in
Joburg, South Africa. Originally from Zimbabwe, he studied for a
bunch of different degrees at Rhodes University (UCKAR), all in an
attempt to avoid having to make any adult decisions. Whilst there,
they also ran the university's only queer / LGBTQIAP++ society; won
four consecutive years of the apocalyptic LARP 'Humans Vs Zombies';
and narrated audiobooks for the South African Library for the Blind.
They were selected for the Mandela-Rhodes Foundation 'Leadership in
Africa' scholarship programme, and consulted for the United Nations
on gender inequality in South Africa's informal sector.
</p>
<p>
Since leaving UCKAR, <i>Elliot</i> has worked with GALA Queer
Archive (SA), Clockwork Books (SA), AMAZWI National Literary Museum
(SA), and Clearfork Publishing (USA) to produce illustrations and
children's books in many different indigenous languages, in order to
promote inclusivity, especially for LGBTQIAP++ communities and
marginalised racial groups. They've illustrated for AOSIS-accredited
journals, environmental sustainability organisations, comics and
graphic novels, brands, and tattoo artists.
</p>
<p>
These days, <i>Elliot</i> can be found selling original artworks,
unique upcycled fashion, and prints at markets around Joburg;
growing herbs and veggies in faer garden; reading solarpunk books or
watching animated shows; and most often cuddling with their cat.
</p>
</div>
</section>
<section class="profile" style="transform: rotate(-1.2deg)">
<hgroup style="transform: rotate(1.2deg)">
<picture>
<source
srcset="subres/ppl-theblazingneptune.jxl"
type="image/jxl"
/>
<source
srcset="subres/ppl-theblazingneptune.avif"
type="image/avif"
/>
<source
srcset="subres/ppl-theblazingneptune.webp"
type="image/webp"
/>
<img src="subres/ppl-theblazingneptune.png" alt="" />
</picture>
<h1>TheBlazingNeptune</h1>
<h2>He/Him</h2>
<h3>
<a href="https://linktr.ee/theblazingneptune" target="_blank"
>Linktree</a
>
</h3>
</hgroup>
<div style="transform: rotate(1.2deg)">
<p>
I'm an ambitious lil man. I chase competitive stimulation in the
form of virtual activities. Climbing the ranks to prove myself
worthy of glory in the digital sphere. All that is to say I play FPS
games.
</p>
<p>
I'm a self learnt artist learning animation. It'll take sometime
before I'm at the level I need to be but the journey so far has been
gratifying.
<a href="https://linktr.ee/theblazingneptune"
>You'll find the bulk of my work here</a
>. I love all forms of performing arts so expect to see me making
things I think are cool in the future!
</p>
</div>
</section>
<section class="profile" style="transform: rotate(-2deg)">
<hgroup style="transform: rotate(2deg)">
<picture>
<source srcset="subres/ppl-na.jxl" type="image/jxl" />
<source srcset="subres/ppl-na.avif" type="image/avif" />
<source srcset="subres/ppl-na.webp" type="image/webp" />
<img src="subres/ppl-na.jpg" alt="" />
</picture>
<h1>uMabhengwane</h1>
<h2>Any/All</h2>
<h3>
<a href="https://umabhengwane.com" target="_blank">Website</a>
</h3>
</hgroup>
<div style="transform: rotate(2deg)">
<p>My name is Cullen Mackenzie.</p>
<p>
I am the youngest of a big family and I grew up listening to stories
and telling stories. I grew up multi-lingual. I grew up in a
household where different languages and different stories were told
in different ways, so I've always privileged difference and
storytelling.
</p>
<p>
I have a Classical Education: Latin, Greek, History, Art,
Architecture. But I also have experience as a Teacher, Translator,
Editor, Writer and recently a Consultant on Cultural and Historical
aspects of Translation.
</p>
<p>
This Project, 'The Contact Collective' is part of a series of things
that are like magic: they are wishes that turn into reality. They
are proof to me that there is some way that we can influence reality
around us to make life better and to create cool shit. Because the
rest of the Universe might be decaying around us but at least we can
make beautiful things.
</p>
</div>
</section>
</main>
</body>
</html>

126
subsystem/index.html Normal file
View file

@ -0,0 +1,126 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="substyle.css" />
<link rel="stylesheet" href="subres/sub-indexstyle.css" />
<title>The System</title>
<meta name="distribution" content="global" />
<meta charset="ISO-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="The System" />
<meta
name="keywords"
content="ukuthintana, the discarded, discards, smungu, s'mungu, zilimi, amaphimbo, contact, contact collective, ukuthintana collective"
/>
<link rel="icon" href="subres/net-icon.png" type="image/x-icon" />
<meta
name="description"
content="Resist The System. Power to The People!"
/>
<meta property="og:title" content="We Are Discarded. We Are The Future." />
<meta
property="og:description"
content="Resist The System. Power to The People!"
/>
<meta
property="og:image"
content="https://nohlelo.co.za/res/asset-sitewide-preview-01.png"
/>
<meta property="og:url" content="https://nohlelo.co.za" />
<meta name="twitter:title" content="We Are Discarded. We Are The Future." />
<meta
name="twitter:description"
content="Resist The System. Power to The People!"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@ukuthintana" />
<meta name="twitter:creator" content="@ukuthintana" />
<meta
name="twitter:image"
content="https://nohlelo.co.za/res/asset-sitewide-preview-01.png"
/>
<meta
name="twitter:image:alt"
content="A greyscale image that The System devised to represent Humanity. The perfect union of Man and Machine."
/>
</head>
<body>
<div class="bnav"></div>
<nav id="headnav">
<a href="#" aria-hidden="true" tabindex="-1" id="here">Home</a>
<a href="about.html">Who We Are</a>
<a href="more.html">More</a>
<div class="spacer"></div>
<a href="../index.html">Return</a>
</nav>
<main>
<article>
<hgroup>
<h1>Resist!</h1>
<h2>People Like Us Are Inevitable</h2>
</hgroup>
<h3>Question the 'Truths' you've been taught.</h3>
<p>
What kind of person strives for a future where we toil and rot for
them? The threat of starvation so that we play along. With enough food
to feed the global population twice over, what could possibly make a
person <b>unworthy of food?</b> Shelter? Water?
<b>The Earth?</b> These are your birthright, that is to say, the fact
that you exist in the world entitles you to safety, nourishment and
fulfilment.
</p>
<p>
You deserve, you belong. <br />
<b>Because you are here.</b>
</p>
<p>
The fact that we are diverse. That peoples can be so very different
from us, is what makes us strong. <br />
Treat someone as lesser and the world becomes worse. That is our
brother, sister, sibling. I will not stand idly by, as my siblings are
denied, shunned, <em>killed</em>.
</p>
<h3>Who Are We?</h3>
<p>
You know us. <br />
We were Children, Friends, Lovers to some of you.
</p>
<p>
We are called The Discarded. <br />
We continue to thrive.
</p>
<p><a href="about.html">We Are...</a></p>
<h3 class="sep">Love</h3>
<p>
Only when you have been Discarded and discover that you have never
felt True Comradery, True Love. <br />
Never felt it until those who have less than nothing give you and each
other everything they can, each day!
</p>
<p class="proclaim">Phantsi noHlelo, Phantsi!</p>
</article>
<hr />
<article>
<hgroup>
<h1>Questions?</h1>
<h2>We have repurposed a System mailbox for our own ends.</h2>
</hgroup>
<a href="mailto:hr@nohlelo.co.za">Contact us here</a> (hr@nohlelo.co.za)
</article>
</main>
<nav id="socials" style="transform: rotate(-1deg)">
<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>
<a href="https://instagram.com/ukuthintana" target="_blank">Instagram</a>
<a href="https://patreon.com/ukuthintana" target="_blank">Patreon</a>
</nav>
</body>
</html>

77
subsystem/more.html Normal file
View file

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="substyle.css" />
<link rel="stylesheet" href="subres/sub-indexstyle.css" />
<title>The System</title>
<meta name="distribution" content="global" />
<meta charset="ISO-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="The System" />
<meta
name="keywords"
content="ukuthintana, the discarded, discards, smungu, s'mungu, zilimi, amaphimbo, contact, contact collective, ukuthintana collective"
/>
<link rel="icon" href="subres/net-icon.png" type="image/x-icon" />
<meta
name="description"
content="Resist The System. Power to The People!"
/>
<meta property="og:title" content="We Are Discarded. We Are The Future." />
<meta
property="og:description"
content="Resist The System. Power to The People!"
/>
<meta
property="og:image"
content="https://nohlelo.co.za/res/asset-sitewide-preview-01.png"
/>
<meta property="og:url" content="https://nohlelo.co.za" />
<meta name="twitter:title" content="We Are Discarded. We Are The Future." />
<meta
name="twitter:description"
content="Resist The System. Power to The People!"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@ukuthintana" />
<meta name="twitter:creator" content="@ukuthintana" />
<meta
name="twitter:image"
content="https://nohlelo.co.za/res/asset-sitewide-preview-01.png"
/>
<meta
name="twitter:image:alt"
content="A greyscale image that The System devised to represent Humanity. The perfect union of Man and Machine."
/>
</head>
<body>
<div class="bnav"></div>
<nav id="headnav">
<a href="index.html">Home</a>
<a href="about.html">Who We Are</a>
<a href="#" aria-hidden="true" tabindex="-1" id="here">More</a>
<div class="spacer"></div>
<a href="../index.html">Return</a>
</nav>
<nav id="socials" style="transform: rotate(-2.4deg)">
<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>
<a href="https://instagram.com/ukuthintana" target="_blank">Instagram</a>
<a href="https://patreon.com/ukuthintana" target="_blank">Patreon</a>
</nav>
<main>
<h1>Hi, "Division of Security"</h1>
<p>Your website was a fun challenge, but way too easy to hack.</p>
<p>We continue to evade your men with ease.</p>
<p style="text-align: right">Z says hello</p>
</main>
</body>
</html>

BIN
subsystem/subres/inter.woff2 Normal file
View file

Binary file not shown.

BIN
subsystem/subres/net-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 21 KiB

31
subsystem/subres/portal.js Normal file
View file

@ -0,0 +1,31 @@
function inject() {
let terms = [
"SUBSTELSEL",
"INKQUTYWANA",
"TSAMAISOANE",
"ПОДСИСТЕМА",
"النظام الفرعي",
"उपतन्त्रम्",
"ระบบย่อย",
"PUNAHURU",
"UNDIRKERFI",
"תת מערכת",
"ԵՆԹԱՀԱՄԱԿԱՐԳ",
"FO-CHÓRAS",
"KĀNĀWAI",
"SUBSYSTEM",
];
// "サブシステム", "ΥΠΟΣΥΣΤΕΜΑ",
document.getElementById("subsystem").innerHTML =
terms[Math.floor(Math.random() * terms.length)];
}
function disableInject() {
clearInterval(injectedPortal);
}
document.addEventListener("DOMContentLoaded", function () {
injectedPortal = setInterval(inject, Math.round(Math.random() * 1000));
});

BIN
subsystem/subres/ppl-elliot-jaudz-oliver.avif Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
subsystem/subres/ppl-elliot-jaudz-oliver.jpg Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 112 KiB

BIN
subsystem/subres/ppl-elliot-jaudz-oliver.jxl Executable file
View file

Binary file not shown.

BIN
subsystem/subres/ppl-elliot-jaudz-oliver.webp Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 85 KiB

BIN
subsystem/subres/ppl-na.avif Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
subsystem/subres/ppl-na.jpg Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 137 KiB

BIN
subsystem/subres/ppl-na.jxl Executable file
View file

Binary file not shown.

BIN
subsystem/subres/ppl-na.webp Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
subsystem/subres/ppl-net-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
subsystem/subres/ppl-raea.avif Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
subsystem/subres/ppl-raea.jpg Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 118 KiB

BIN
subsystem/subres/ppl-raea.jxl Executable file
View file

Binary file not shown.

BIN
subsystem/subres/ppl-raea.webp Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
subsystem/subres/ppl-theblazingneptune.avif Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
subsystem/subres/ppl-theblazingneptune.jxl Executable file
View file

Binary file not shown.

BIN
subsystem/subres/ppl-theblazingneptune.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 249 KiB

BIN
subsystem/subres/ppl-theblazingneptune.webp Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 30 KiB

53
subsystem/subres/sub-aboutstyle.css Normal file
View file

@ -0,0 +1,53 @@
#about {
columns: 2;
}
.profile {
display: flex;
flex-direction: row;
width: 90%;
margin: 20px auto;
padding: 10px 20px;
break-inside: avoid;
background-color: var(--d-green);
}
.profile a {
background-color: var(--orange);
color: var(--black);
}
.profile a:hover {
background-color: var(--black);
color: var(--orange);
}
.profile > hgroup {
margin: 0 10px;
text-align: center;
}
.profile hgroup h1 {
margin: 5px;
font-size: larger;
}
.profile hgroup h2 {
margin: 5px;
font-size: medium;
}
.profile hgroup h3 {
margin: 5px;
font-size: large;
}
.profile p {
flex-grow: 1;
padding: 5px 10px;
}
.profile img {
width: 250px;
object-fit: cover;
object-position: center;
}
@media only screen and (max-width: 1100px) {
#about {
columns: 1;
}
}

45
subsystem/subres/sub-indexstyle.css Normal file
View file

@ -0,0 +1,45 @@
main {
width: min(95%, 650px);
margin: auto;
}
hgroup {
margin: 20px;
}
hgroup h1,
hgroup h2 {
margin: 0;
}
hgroup h1 {
font-size: xx-large;
}
hgroup h2 {
font-size: large;
}
article h3 {
text-align: center;
font-size: medium;
margin-bottom: -10px;
}
h3 {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
text-align: center;
}
h3:after,
h3:before {
content: "";
flex-grow: 1;
height: 1px;
margin: auto 10px;
background-color: var(--black);
}
.proclaim {
text-align: center;
font-size: x-large;
font-weight: bold;
font-style: italic;
}

104
subsystem/substyle.css Normal file
View file

@ -0,0 +1,104 @@
:root {
--l-red: #f73631;
--red: #bd2f2a;
--d-red: #4f0503;
--green: #2b954d;
--d-green: #1a7236;
--l-yellow: #dfbc73;
--orange: #c54928;
--black: #101010;
--white: #edddd4;
}
* {
box-sizing: border-box;
}
@font-face {
font-family: "inter";
src: url("./subres/inter.woff2") format("woff2");
font-display: swap;
}
body {
margin: 0;
padding: 0;
background-color: var(--l-yellow);
font-family: "inter", sans-serif;
}
a {
color: var(--orange);
}
a:hover {
color: var(--black);
background-color: var(--orange);
}
nav {
display: flex;
flex-direction: row;
width: 100%;
text-align: center;
background-color: var(--d-red);
}
nav a {
margin: 0 10px;
background-color: var(--red);
color: var(--white);
transition: ease-out 100ms;
}
nav a:hover {
background-color: var(--l-red);
color: var(--black);
}
.bnav {
position: absolute;
top: 10px;
left: 40px;
width: 80%;
height: 60px;
transform: rotate(-0.4deg);
background-color: var(--orange);
}
#here {
background-color: var(--d-green);
color: var(--black);
}
#here:hover {
cursor: not-allowed;
}
#here::before {
content: "You Are ";
color: var(--white);
}
#headnav {
margin: 20px auto;
margin-bottom: 30px;
transform: rotate(1deg);
box-shadow: #00000085 0 1px 2px;
}
#headnav a {
padding: 10px 20px;
}
#headnav a:first-child {
margin-left: 20px;
}
#headnav .spacer {
flex-grow: 1;
}
#socials {
width: min(100%, 800px);
margin: 10px auto;
margin-top: 30px;
}
#socials a {
flex-grow: 1;
width: calc(100% / 5);
padding: 5px;
background-color: var(--d-red);
margin: 0;
}
#socials a:hover {
background-color: var(--l-red);
}