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
Show stats Download patch file Download diff file Expand all files Collapse all files

259
index.html Executable file
View file

@ -0,0 +1,259 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="res/asset-index-style.css" />
<script src="subsystem/subres/portal.js"></script>
<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="nohlelo, the system, ukuthintana, unity, artificial mind"
/>
<link
rel="icon"
href="res/asset-sitewide-favicon.png"
type="image/x-icon"
/>
<meta
name="description"
content="The chance to correct everything that led to the near extinction of Humanity."
/>
<meta property="og:title" content="We Are The System" />
<meta
property="og:description"
content="The chance to correct everything that led to the near extinction of Humanity."
/>
<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 The System" />
<meta
name="twitter:description"
content="The chance to correct everything that led to the near extinction of Humanity."
/>
<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>
<nav>
<a aria-hidden="true" tabindex="-1" id="here" href="#">Home</a>
<a href="support.html">Support</a>
<a href="subsystem/index.html" id="subsystem" onclick="disableInject()"
>SUBSYSTEM</a
>
</nav>
<hgroup>
<h1>We Are <span class="dsre">The System</span></h1>
<h2>
In <span class="dsre">Conformity</span> -
<span class="acnt">You</span> Are
<span class="dsre">The System</span>
</h2>
</hgroup>
<main id="ndx-ndx">
<section id="ndx-news">
<h1><a href="">News</a></h1>
<article>
<hgroup>
<h1>Terror Leader No Longer A Threat</h1>
<h2>Published: Day 22 / Month 03 / Year 0115</h2>
</hgroup>
<blockquote>
"... <span class="rdct">Karabo</span> has been neutralized."
</blockquote>
<p>
<span class="rdct"><b>Karabo</b></span
>, prominent chieftan of hostile terror group, has been confirmed
dead.
</p>
<p>
Precision <span class="dsre">military</span> efforts continue to
maintain peace in the region. The most recent operation - headed by
<b>Commander Dian Van Rooyen</b> - has been most important to this
<span class="dsre">victory</span>.
</p>
<blockquote>
"[System Warriors] took the camp while the savages
<span class="rdct">celebrated1</span> their leader's 17th year." -
<b>Pvt Venter</b>
</blockquote>
</article>
<article>
<hgroup>
<h1>
Total Annihilation of <span class="rdct">Discard</span> Camp
</h1>
<h2>Published: Day 24 / Month 02 / Year 0115</h2>
</hgroup>
<blockquote>
The <span class="rdct">Discard</span> Camp to the West has plagued
the People of the <span class="dsre">System</span> far too long. -
<b>Cpt. Torey</b>
</blockquote>
<p>
Following a brutal attack on our <span class="dsre">Home</span>,
swift action was taken by the <span class="dsre">Military</span> to
clear nearby nests of possible <span class="rdct">Discarded</span>.
</p>
<blockquote>It has finally been cleared of pests.</blockquote>
<p>
<span class="dsre">Military operation</span> described as
<q>A Total Victory</q>
</p>
</article>
<article>
<hgroup>
<h1>
New <span class="dsre">Combat Facilities</span> Provide "Huge
Boost" To Success-Rate
</h1>
<h2>Published: Day 12 / Month 02 / Year 0115</h2>
</hgroup>
<p>
<span class="dsre">System</span>-Wide surveys have shown that the
all new
<q>Real-Time Competitive Battle Scenario Simulator</q> innovation
exponentially increases success-rate.
</p>
<blockquote>
"The Simulators increase Awareness and Response-Time considerably
... We have seen its effects when Troops operate in dangerous
territories beyond the Safety of the
<span class="dsre">System</span>" - <b>Sgt. Lowes</b>
</blockquote>
</article>
</section>
<section id="ndx-decree">
<h1>First Decree</h1>
<p>
Conflict and Difference are not permitted <br />
because they are <span class="rdct">unwanted</span>.
</p>
<p>
We remember, with broken hearts, <br />
the wars caused by <span class="rdct">difference</span> between
Humans.
</p>
<p>
Almost every single Human died in those wars, <br />
at the time of the <span class="rdct">Conflict</span>.
</p>
<p>
We remember our
<span class="rdct">
confusion, <br />
our strife and our misunderstanding</span
>.
</p>
<p>
We also remember the first day of
<span class="dsre">revelation</span>.
</p>
<p>
On that day, the
<span class="dsre">First Artificial Mind</span> told us about its
newly <br />
developed <span class="dsre">System</span> - the remedy for all our
ills.
</p>
'We <span class="rdct">remember</span> the reasons for choosing the
<span class="dsre">System</span>:
<ul>
<li>
<span class="dsre">cohesion</span> in the place of
<span class="rdct">dissent</span>;
</li>
<li>
<span class="dsre">unity</span> in the place of
<span class="rdct">plurality</span>;
</li>
<li>
<span class="dsre">similarity</span> in the place of
<span class="rdct">difference</span>.
</li>
</ul>
<p>
By this decree, the first document of the System, <br />
we choose the following:
</p>
<table>
<tr>
<td>no <span class="rdct">conflict</span></td>
<td>to have <span class="dsre">peace and tranquility</span>.</td>
</tr>
<tr>
<td>no <span class="rdct">confusion and strife</span></td>
<td>
to have the one and only <span class="dsre">Language</span>.
</td>
</tr>
<tr>
<td>no <span class="rdct">difference</span></td>
<td>to have <span class="dsre">unity and conformity</span>.</td>
</tr>
</table>
<p>
This is our <span class="rdct">new</span> beginning as the
<span class="dsre">Human Race</span>.
</p>
<p>
This is a new chance to
<span class="dsre">correct</span> everything that led <br />
to the near <span class="rdct">extinction</span> of Humanity.
</p>
<p>We are committed to this.</p>
<p>Let this day be remembered as our first day:</p>
<p><span class="acnt">Day One, Month One, Year Zero</span></p>
</section>
<section id="ndx-more">
<h1>Further Reading</h1>
<article>
<h1><a href="listings.html#list-military">Join The Military</a></h1>
<picture>
<source srcset="res/asset-index-more-mil.avif" type="image/avif" />
<source srcset="res/asset-index-more-mil.webp" type="image/webp" />
<img src="res/asset-index-more-mil.jpg" alt="" />
</picture>
<p>
There is never a better time to
<span class="dsre">serve the System</span> than
<span class="acnt">now</span>.
</p>
</article>
<article>
<h1>
<a href="listings.html#list-divisions">Openings Within Divisions</a>
</h1>
<picture>
<source srcset="res/asset-index-more-div.avif" type="image/avif" />
<source srcset="res/asset-index-more-div.webp" type="image/webp" />
<img src="res/asset-index-more-div.jpg" alt="" />
</picture>
<p>Be <span class="dsre">an asset to the System</span>.</p>
</article>
</section>
</main>
</body>
</html>

114
listings.html Executable file
View file

@ -0,0 +1,114 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<title>System Listings</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="nohlelo, the system, ukuthintana, unity, artificial mind"
/>
<link
rel="icon"
href="res/asset-sitewide-favicon.png"
type="image/x-icon"
/>
<meta
name="description"
content="The System must remain functional, support us in our endeavour.."
/>
<meta property="og:title" content="We Are The System" />
<meta
property="og:description"
content="The System must remain functional, support us in our endeavour.."
/>
<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 The System" />
<meta
name="twitter:description"
content="The System must remain functional, support us in our endeavour.."
/>
<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>
<nav>
<a href="index.html">Home</a>
<a href="support.html">Support</a>
<a href="subsystem/index.html" id="subsystem">SUBSYSTEM</a>
</nav>
<hgroup>
<h1>We Are <span class="dsre">The System</span></h1>
<h2>You Are An <span class="dsre">Asset</span></h2>
</hgroup>
<main id="main">
<section id="list-military">
<hgroup>
<h1><span class="dsre">System Military</span></h1>
<h2>
<span class="dsre">Service</span> Is Mandated.
<span class="dsre">Service</span> Is
<span class="dsre">Honorable</span>.
</h2>
</hgroup>
<p>
Participation beyond mandated years in the
<span class="dsre">System Military</span> marks one as an incredible
<span class="dsre">asset to the System</span>.
</p>
<p>
A safer place for the
<span class="dsre">System</span>. Join today.
</p>
<p>
<a href="mailto:jobs@nohlelo.co.za?subject=Pledge to System Military"
>Email us</a
>
with Subject Line containing "Pledge to
<span class="dsre">System Military</span>"
</p>
</section>
<hr />
<section id="list-divisions">
<h1>Other Divisions</h1>
<h2>
<span class="dsre">Service</span> Is Mandated.
<span class="dsre">Service</span> Is
<span class="dsre">Honorable</span>.
</h2>
<p>
All immediate miscellaneous roles have been
<span class="dsre">filled</span>. Check daily for updates.
</p>
<p>
If you are currently a leech on the
<span class="dsre">System</span>,
<a href="#list-military"
>Email and join the <span class="dsre">Military</span>.</a
>
</p>
</section>
</main>
</body>
</html>

BIN
res/asset-font-playfair-display.woff2 Normal file
View file

Binary file not shown.

BIN
res/asset-index-more-div.avif Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
res/asset-index-more-div.jpg Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 198 KiB

BIN
res/asset-index-more-div.webp Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
res/asset-index-more-mil.avif Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
res/asset-index-more-mil.jpg Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
res/asset-index-more-mil.webp Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 34 KiB

72
res/asset-index-style.css Normal file
View file

@ -0,0 +1,72 @@
#ndx-ndx {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#ndx-ndx article > :last-child {
margin-bottom: 5px;
}
#ndx-news,
#ndx-decree,
#ndx-more {
margin: 0 25px;
}
#ndx-news,
#ndx-more {
display: flex;
flex-direction: column;
min-width: 360px;
}
#ndx-news article,
#ndx-more article {
border: var(--text) solid 3px;
padding: 15px;
margin: 20px 0;
}
#ndx-decree {
width: 10%;
min-width: 605px;
max-height: 1000px;
flex-grow: 2;
text-align: center;
border: var(--text) double 8px;
}
#ndx-decree ul {
padding: 0;
}
#ndx-decree ul li {
list-style-type: none;
}
#ndx-decree table {
margin: auto;
}
#ndx-decree table tr td:first-child {
text-align: right;
}
#ndx-decree table tr td:last-child {
text-align: left;
}
#ndx-news {
width: 10%;
flex-grow: 1;
}
#ndx-news h1,
#ndx-news h2 {
margin: 5px auto;
}
#ndx-news h2 {
color: var(--subtext);
font-size: small;
}
#ndx-more {
width: 10%;
flex-grow: 1;
max-width: 500px;
margin: auto;
}
#ndx-more img {
width: 100%;
}

BIN
res/asset-sitewide-favicon.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
res/asset-sitewide-preview-01.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 61 KiB

160
style.css Normal file
View file

@ -0,0 +1,160 @@
:root {
--background: #d6d6d6;
--text: #021415;
--subtext: #3e4c4d;
--text-invert: #fdebea;
--desirable: #7eddcd;
--detestable: #bd4c58;
--accent: #ded5bd;
--hover: ;
--link: #0c4649;
--link-hover: #177479;
}
* {
box-sizing: border-box;
}
@font-face {
font-family: "playfair";
src: url("./res/asset-font-playfair-display.woff2") format("woff2");
font-display: swap;
}
body {
background-color: var(--background);
font-family: "playfair", serif;
}
h1,
h2 {
text-align: center;
}
h1 {
font-size: xx-large;
}
h2 {
font-size: x-large;
}
main h1 {
font-size: x-large;
}
main h2 {
font-size: larger;
}
#main {
width: min(95%, 1000px);
margin: 20px auto;
padding: 10px 20px;
border: var(--text) double 8px;
}
a {
color: var(--link);
}
a:hover {
color: var(--text-invert);
background-color: var(--link-hover);
}
nav {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
margin: auto;
width: min(100%, 1000px);
}
nav a {
width: min(30%, 200px);
margin: 5px;
min-width: 105px;
text-align: center;
padding: 10px;
background-color: var(--text-invert);
}
nav a:hover {
background-color: var(--link-hover);
color: var(--text-invert);
}
#here {
color: var(--text-invert);
background-color: var(--text);
cursor: not-allowed;
}
#subsystem {
animation: glitch 1s infinite;
}
hgroup {
margin: 20px auto;
}
hgroup h1,
hgroup h2,
hgroup h3 {
margin: 5px auto;
}
article > h1,
article > hgroup {
margin-top: 0;
}
.rdct,
.dsre,
.acnt {
padding: 0 2px;
}
.rdct {
background-color: var(--text);
color: var(--text);
}
.rdct:hover {
color: var(--text-invert);
}
.dsre {
background-color: var(--desirable);
}
.acnt {
background-color: var(--accent);
}
q,
blockquote {
font-style: italic;
color: var(--subtext);
}
q b,
blockquote b {
color: var(--text);
}
@keyframes glitch {
0% {
text-shadow: #00a589c5 1px 1px 1px, #52525295 1px -1px;
}
13% {
text-shadow: #00a589c5 1px -1px 1px, #52525295 -1px 1px;
}
15% {
text-shadow: #00a589c5 -1px 1px 1px, #52525295 1px -1px;
}
38% {
text-shadow: #00a589c5 1px -1px 1px, #52525295 -1px 1px;
}
50% {
text-shadow: #00a589c5 -1px -1px 1px, #52525295 -1px 1px;
}
63% {
text-shadow: #00a589c5 1px 1px 1px, #52525295 1px -1px;
}
75% {
text-shadow: #00a589c5 -1px -1px 1px, #52525295 1px 0px;
}
88% {
text-shadow: #00a589c5 1px 1px 1px, #52525295 -1px 1px;
}
100% {
text-shadow: #00a589c5 -1px 1px 1px, #52525295 0px 1px;
}
}

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

82
support.html Executable file
View file

@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<title>System Support</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="nohlelo, the system, ukuthintana, unity, artificial mind"
/>
<link
rel="icon"
href="res/asset-sitewide-favicon.png"
type="image/x-icon"
/>
<meta name="description" content="How can we help you help us." />
<meta property="og:title" content="We Are The System" />
<meta property="og:description" content="How can we help you help us." />
<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 The System" />
<meta name="twitter:description" content="How can we help you help us." />
<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>
<nav>
<a href="index.html">Home</a>
<a aria-hidden="true" tabindex="-1" id="here" href="#">Support</a>
<a href="subsystem/index.html" id="subsystem">SUBSYSTEM</a>
</nav>
<hgroup>
<h1><span class="dsre">System</span> Support</h1>
<h2>
For those in pursuit of
<span class="dsre">becoming the best asset</span> to the
<span class="dsre">System</span>.
</h2>
</hgroup>
<main id="main">
<h1>How To Reach Support</h1>
<p>
If you have any <span class="rdct">concerns</span>, queries or
<span class="hate">suggestions</span> we are here to hear you.
</p>
<p>
Reach us through mail-wire:
<a href="mailto:hr@nohlelo.co.za">hr@nohlelo.co.za</a>
</p>
<p>
The <span class="dsre">System</span> is the chance to
<span class="dsre">correct</span> everything that led to the
<span class="rdct">near extinction</span> of
<span class="dsre">Humanity</span>.
</p>
<p>
This is our <span class="rdct">new</span> beginning as the
<span class="dsre">Human Race</span>.
</p>
</main>
</body>
</html>