g_it/site
g_it/site
1
0
Fork 0
Code Issues Releases Wiki Activity Actions

fgixes to CSS and home page.

Browse source
This commit is contained in:
g* 2025-06-14 22:07:10 +02:00
commit 8cc8917aa8
43 changed files with 1126 additions and 340 deletions
Download patch file Download diff file Expand all files Collapse all files

2
docs/blog/index.md Normal file
View file

@ -0,0 +1,2 @@
# Blog

3
docs/includes/defintions.md
View file

@ -1,2 +1,3 @@
<!-- List of deifintions that will appear in toptips -->
*[data]: Data defined as raw input, which when processed becomes information. Wisdom and knowledge are higher levels of information alloyed with experience. *[ADB]: The Android Debug Bridge lets you communicate with your Android or wearOS device via the terminal (or console). You can install apps, push orpull files, and change settings using commands.
*[data]: Data defined as raw input, which when processed becomes information. Wisdom and knowledge are higher levels of information alloyed with experience.
*[ADB]: The Android Debug Bridge lets you communicate with your Android or wearOS device via the terminal (or console). You can install apps, push orpull files, and change settings using commands.

52
docs/index.md
View file

@ -2,36 +2,42 @@
title: Gugulethu Hlekwayo
description: "i'm a writer..."
hide:
- toc
- navigation
- footer
- toc
- navigation
- footer
---
<link href="src/stylesheets/index.css" rel="stylesheet">
<style>
@import url(/src/stylesheets/_index.css);
</style>
<div class="container">
<div class="top-row" style="display: inline-block">
<h2>hi, i'm g* and i write<br></h2>
<p id="hover-text">...</span></p>
<div style="background-color:#EFE5DC; width: 70%; height: 10px; margin-top: 1em"></div>
</div>
<div class="columns">
<div id="visual-hover" class="image-container">
<img src="src/gugulet.hu-visual-face-1276x1276.webp" >
<div class='hero-text'>
<h2>hi, i'm g* and i write</h2>
<h4 id='hover-text'>...</h4>
<div class='accent-divider'></div>
</div>
<div class='faces'>
<a href='/visual'>
<div id='visual-hover' class='face'>
<img src='/src/gugulet.hu-visual-face-1276x1276.webp' >
</div>
<div id="technical-hover" class="image-container">
<img src="src/gugulet.hu-technical-face-1276x1276.webp" >
</a>
<a href='/technical'>
<div id='technical-hover' class='face'>
<img src='/src/gugulet.hu-technical-face-1276x1276.webp' >
</div>
<div id="writing-hover" class="image-container">
<img src="src/gugulet.hu-writing-face-1276x1276.webp" >
</a>
<a href='/writing'>
<div id='writing-hover' class='face'>
<img src='/src/gugulet.hu-writing-face-1276x1276.webp' >
</div>
</div>
</a>
</div>
<script src="src/js/index-text.js"></script>>
<div id="loader">
<div><img src="src/gugulet.hu-site-logo-350x350.png"></div>
<div id='loader'>
<div><img src='/src/gugulet.hu-site-logo-350x350.png'></div>
</div>
<script src="src/js/loader.js"></script>
<script src='/src/js/faces-intro.js'></script>
<script src='/src/js/hover-text.js'></script>
<script src='/src/js/page-loader.js'></script>

3
docs/overrides/main.html
View file

@ -5,6 +5,9 @@
{{ super() }}
<!-- Add scripts that need to run afterwards here -->
<!-- Add meta tag to allow coollabs as a font source -->
<meta http-equiv="Content-Security-Policy" content="font-src 'self' https://api.fonts.coollabs.io;">
<!-- Script to protect content on the website -->
<script>
// Prevent right-click context menu

218
docs/resume.md
View file

@ -0,0 +1,218 @@
---
title: Gugulethu Hlekwayo | Resumé
description: "i'm a pen for hire..."
hide:
- toc
- navigation
- footer
---
<link href="/src/stylesheets/index.css" rel="stylesheet">
<div class="hero-text" style="display: inline-block; height: fit !important">
<h2>hey, i'm gugulethu</h2>
<p id="hover-text">and i'm a pen for hire</span></p>
<div class="accent-divider"></div>
<div class="resume-icon-meta">
<div>
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.9 17.39c-.26-.8-1.01-1.39-1.9-1.39h-1v-3a1 1 0 0 0-1-1H8v-2h2a1 1 0 0 0 1-1V7h2a2 2 0 0 0 2-2v-.41a7.984 7.984 0 0 1 2.9 12.8M11 19.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.22.21-1.79L9 15v1a2 2 0 0 0 2 2m1-16A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2"></path></svg></span> Berlin, Germany<span class="annotate">(1)</span><ol><li>🇩🇪 German permanent residency</li></ol>
</div>
<div>
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8c0-1.11.89-2 2-2h4V4c0-1.11.89-2 2-2m4 4V4h-4v2z"></path></svg></span> 15 years<span class="annotate">(1)</span><ol><li><b>Content Management:</b> 8 years<br><b>Copywriting:</b> 2 years<br><b>Technical Writing:</b> 5 years</li></ol>
</div>
<a href="https://linkedin.com/in/gugulet-hu" >
<div>
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93zM6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37z"></path></svg></span> linkedin.com/gugulet-hu
</div>
</a>
<a href="https://codeberg.org/gugulethu" >
<div>
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2.6 10.59 8.38 4.8l1.69 1.7c-.24.85.15 1.78.93 2.23v5.54c-.6.34-1 .99-1 1.73a2 2 0 0 0 2 2 2 2 0 0 0 2-2c0-.74-.4-1.39-1-1.73V9.41l2.07 2.09c-.07.15-.07.32-.07.5a2 2 0 0 0 2 2 2 2 0 0 0 2-2 2 2 0 0 0-2-2c-.18 0-.35 0-.5.07L13.93 7.5a1.98 1.98 0 0 0-1.15-2.34c-.43-.16-.88-.2-1.28-.09L9.8 3.38l.79-.78c.78-.79 2.04-.79 2.82 0l7.99 7.99c.79.78.79 2.04 0 2.82l-7.99 7.99c-.78.79-2.04.79-2.82 0L2.6 13.41c-.79-.78-.79-2.04 0-2.82"></path></svg></span> codeberg.org/gugulethu
</div>
</a>
</div>
</div>
<div class="tabbed-set tabbed-alternate" data-tabs="1:6" style="--md-indicator-x: 93px; --md-indicator-width: 92px;">
<input checked="checked" id="__tabbed_1_1" name="__tabbed_1" type="radio" class="">
<input id="__tabbed_1_2" name="__tabbed_1" type="radio">
<input id="__tabbed_1_3" name="__tabbed_1" type="radio">
<input id="__tabbed_1_4" name="__tabbed_1" type="radio">
<input id="__tabbed_1_5" name="__tabbed_1" type="radio">
<div class="tabbed-labels tabbed-labels--linked">
<label for="__tabbed_1_1"><a href="#__tabbed_1_1" tabindex="-1">2024</a></label>
<label for="__tabbed_1_2"><a href="#__tabbed_1_2" tabindex="-1">2021</a></label>
<label for="__tabbed_1_3"><a href="#__tabbed_1_3" tabindex="-1">2019</a></label>
<label for="__tabbed_1_4"><a href="#__tabbed_1_4" tabindex="-1">2015</a></label>
<label for="__tabbed_1_5"><a href="#__tabbed_1_5" tabindex="-1">2013</a></label>
</div>
<div class="tabbed-content">
<div class="tabbed-block">
<div class="status-green">Current</div>
<h3>Documentation Engineer</h3>
<div class="logo-and-title" >
<img src="/src/spread-ai-logo-125x144.png" /><h4>SPREAD.ai</h4><span class="annotate">(1)</span><ol><li>SPREAD.ai is a Software-as-a-Service (SaaS) platform for creating actionable and contextualised data for product engineers. The platform counts Volkswagen, Audi, BMW, and other automotive firms as users.</li></ol>
</div>
<div class="tags">manufacturing, automotive, heavy machinery, saas, scale-up, series b</div>
<div class="grid-3col-container">
<div class="grid-3col-item">
<div class="grid-3col-content">
<h5>Established the documentation function</h5>
<p>As the first hired technical writer, I established documentation as a function in the company. This includes creating the processes for the Engineering and Product teams to include documentation as a part of the software cycle and onboarding new joiners.</p>
</div>
</div>
<div class="grid-3col-item">
<div class="grid-3col-content">
<h5>Set up the technical infrastructure</h5>
<p>Built the documentation operations infrastructure from scratch using a <abbr title="A Docs-as-Code appraoch to documentation treats documentation the same way you would code, with the same versions strategies, continous build process, and review process as used by software engineers. Generally, it also includes using techncial tools to build sites and pipelines.">Docs-as-Code</abbr> approach. This included getting a portal up in the first month, building the <abbr title="Stands for Continuos Integration and Continuos Delivery of content or code. The content is published as it is pushed to the main branch. This includes checking language automatically and other validation steps. ">CI/CD</abbr> pipeline for publishing and linting content in the first quarter, and setting the procedure for in-app documentation.</p>
</div>
</div>
<div class="grid-3col-item">
<div class="grid-3col-content">
<h5>Achieved 75% product coverage</h5>
<p>Achieved 75% coverage of the product range with the first documentation set published in the first three months. The product range has since shifted, but coverage remains high, despite being the only member of the Documentation department.</p>
</div>
</div>
</div>
<div class="resume-icon-meta" >
<div>
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.002 0a2.138 2.138 0 1 0 0 4.277 2.138 2.138 0 1 0 0-4.277m8.54 4.931a2.138 2.138 0 1 0 0 4.277 2.138 2.138 0 1 0 0-4.277m0 9.862a2.138 2.138 0 1 0 0 4.277 2.138 2.138 0 1 0 0-4.277m-8.54 4.931a2.138 2.138 0 1 0 0 4.276 2.138 2.138 0 1 0 0-4.276m-8.542-4.93a2.138 2.138 0 1 0 0 4.276 2.138 2.138 0 1 0 0-4.277zm0-9.863a2.138 2.138 0 1 0 0 4.277 2.138 2.138 0 1 0 0-4.277m8.542-3.378L2.953 6.777v10.448l9.049 5.224 9.047-5.224V6.777zm0 1.601 7.66 13.27H4.34zm-1.387.371L3.97 15.037V7.363zm2.774 0 6.646 3.838v7.674zM5.355 17.44h13.293l-6.646 3.836z"></path></svg></span> <abbr title="GraphQL is an API that returns more conscise results than REST APIs. It also includes a self-documenting feature.">GraphQL</abbr>
</div>
<div>
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m17.029 18.772.777 1.166-5.417 2.709L0 16.451V4.063l5.417-2.709 5.298 7.948 7.867-5.24L24 1.354V16.84l-5.417 2.709zm2.023-13.827v13.253l3.949-1.975V2.97zM5.076 2.642 1.458 4.45 12.73 21.358l3.618-1.809z"></path></svg></span> <abbr title="MkDocs Material is a customizable static site generator for documentation content. This site is built using a heavily-customized MkDocs Material.">MkDocs Material</abbr>
</div>
<div>
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.27 19.385H1.73A1.73 1.73 0 0 1 0 17.655V6.345a1.73 1.73 0 0 1 1.73-1.73h20.54A1.73 1.73 0 0 1 24 6.345v11.308a1.73 1.73 0 0 1-1.73 1.731zM5.769 15.923v-4.5l2.308 2.885 2.307-2.885v4.5h2.308V8.078h-2.308l-2.307 2.885-2.308-2.885H3.46v7.847zM21.232 12h-2.309V8.077h-2.307V12h-2.308l3.461 4.039z"></path></svg></span> <abbr title="Markdown is a markup language used to create and maintain content.">Markdown</abbr>
</div>
<div>
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m23.718.668-.08.04s-4.563 2.174-8.244 2.651c-1.854.24-4.554.481-6.964.62a66 66 0 0 1-3.254.117c-.917.005-1.63-.032-1.95-.11a20 20 0 0 1-2.4-.732l-.252-.1.346 1.172-.92.81.248.436.44.033 1.052.131.162.514.635.057.318 1.078.092.006s1.338.115 1.762.115c.365 0 .93-.04 1.072-.05l.024.396.287.054v.315l-.8.71.157.028c-.14.01-.227.018-.5.03-.43.017-.934.02-1.203-.018-.586-.086-.71-.086-.71-.086H2.98l-.122.13-.046.446h.152l.055 1.111 2.933-.113-.205 3.682-.02.347-2.242-.127-.02-.761h.538l.057-.42.464-.106.223-.312-2.111-.51-1.705.506.465.388h.166l.025.334.494.028v.763l-.611.157.19.404.105.068v.825h.343v3.296l-.566.086.098 1.247.334.056-.055 2.342 1.803.033-.32-2.303 1.982-.048-.14 1.087-.25 1.032 2.609.033.027-2.28 1.322-.12-.072 1.294-.063.99h1.633l-.053-2.3.176.027.067-1.392h-.243l-.058-.34-.131-1.29.049-1.364h.295v-1.182l-.364.027.04-.806.43-.043.023-.352.172-.025.51-.389-1.827-.375-1.71.379.286.469.239-.02.054-.004.034.442.41-.02.004.674-1.526-.035.053-.877.059-.926v-1.213l.048-1.152 3.485-.178 4.155-.24.033.674-.152 1.949-.063 1.693-1.32-.023-.006-1.018.574-.021.028-.373.27-.041-.012-.057.152-.01.29-.388-2.01-.471-1.986.426.258.45.14-.01v.089h.246v.402l.524.008-.006.856h-.527l-.014.505.187.022-.021.978.393.02-.044 3.615-.523.108.016.423h.176v.985h.289l-.07 1.205-.112 1.314 2.17.057-.07-1.172-.138-.848-.022-.593 1.325-.024-.04 1.002-.009 1.33 1.033.082 1.252-.05.533-.157-.25-.76-.053-1-.08-.583 1.233-.045-.057.742-.006 1.515.738.069.631-.016.416-.13-.187-1.424-.049-.862.25-.027.006-.895.08-.017-.027-.43h-.303l-.049-.527-.023-2.692.222-.006v-.902l.096.014v-.461l-.334-.027.006-.836.57-.051-.033-.362.26-.021-.024-.117.58-.29-2.056-.413-1.88.38.231.432.223-.02.014.077h.203l.011.426.547-.006.035.773-1.67-.012-.212-1.457-.178-.826-.145-1.469.075-.746 3.847-.293.012-1.316.201-.05-.023-.38-.239-.138h-.037l-.357.05-.793.116a62 62 0 0 1-1.625.216l-.19.02-.015-.178-.785-.41.006-.275.271-.008.02-.672c.09-.006.352-.024.771-.062.484-.045 1.04-.105 1.361-.18.597-.14 1.452-.28 1.452-.28l.076-.013.408-1.108.805-.234.066-.184 1.78-.492.306-.252-.717-1.564.047-.236.344-.18.297-.906-.252-.223zM14.825 6.73l-.01.526.407.017-.016.32-.789.518-.086.258-1.86.09.01-.184.112-.18.01-.154.001-.228.067-.156.031-.16v-.092l.08-.323zm-5.18.461-.043.264.199.234-.014.387.176.27-.047.328.025.035-1.847.074.02-.152-.653-.354-.022-.345.29-.014.029-.598zm4.014 8.5 1.258.082-.05 1.938.183 1.54-1.34-.046zm-10.225.084 2.16.112L5.4 17.17v1.219l.137.523-2.09.098zm15.376.01v3.256l-1.29.094-.052-1.723-.158-1.592zm-11.494.076 1.538.006.017 2.996-1.43.026-.076-.928-.006-1.047z"></path></svg></span> <abbr title="Jinja is a templating engine that can be used to extend MkDocs Material.">Jinja</abbr>
</div>
<div>
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.583 23.497c.067.192-.043.348-.247.348H9.074c-.408 0-.85-.311-.988-.695L.043.784C-.105.393.149.115.528.16L6.92.776c.405.039.844.383.978.767zM23.473.16l-6.392.616c-.406.039-.844.383-.978.768l-3.827 10.99 3.678 10.509L23.959.783c.137-.383-.08-.662-.485-.623"></path></svg></span> <abbr title="Vale is a tool to do language linting. It can be used within a code editor or in an automated build process to check language according to a set of defined rules.">Vale</abbr>
</div>
<div>
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.361 10.26a.9.9 0 0 0-.558.47l-.072.148.001.207c0 .193.004.217.059.353.076.193.152.312.291.448.24.238.51.3.872.205a.86.86 0 0 0 .517-.436.75.75 0 0 0 .08-.498c-.064-.453-.33-.782-.724-.897a1.1 1.1 0 0 0-.466 0m-9.203.005c-.305.096-.533.32-.65.639a1.2 1.2 0 0 0-.06.52c.057.309.31.59.598.667.362.095.632.033.872-.205.14-.136.215-.255.291-.448.055-.136.059-.16.059-.353l.001-.207-.072-.148a.9.9 0 0 0-.565-.472 1 1 0 0 0-.474.007m4.184 2c-.131.071-.223.25-.195.383.031.143.157.288.353.407.105.063.112.072.117.136.004.038-.01.146-.029.243-.02.094-.036.194-.036.222.002.074.07.195.143.253.064.052.076.054.255.059.164.005.198.001.264-.03.169-.082.212-.234.15-.525-.052-.243-.042-.28.087-.355.137-.08.281-.219.324-.314a.365.365 0 0 0-.175-.48.4.4 0 0 0-.181-.033c-.126 0-.207.03-.355.124l-.085.053-.053-.032c-.219-.13-.259-.145-.391-.143a.4.4 0 0 0-.193.032m.39-2.195c-.373.036-.475.05-.654.086a4.5 4.5 0 0 0-.951.328c-.94.46-1.589 1.226-1.787 2.114-.04.176-.045.234-.045.53 0 .294.005.357.043.524.264 1.16 1.332 2.017 2.714 2.173.3.033 1.596.033 1.896 0 1.11-.125 2.064-.727 2.493-1.571.114-.226.169-.372.22-.602.039-.167.044-.23.044-.523 0-.297-.005-.355-.045-.531-.288-1.29-1.539-2.304-3.072-2.497a7 7 0 0 0-.855-.031zm.645.937a3.3 3.3 0 0 1 1.44.514c.223.148.537.458.671.662.166.251.26.508.303.82.02.143.01.251-.043.482-.08.345-.332.705-.672.957a3 3 0 0 1-.689.348c-.382.122-.632.144-1.525.138-.582-.006-.686-.01-.853-.042q-.856-.16-1.35-.68c-.264-.28-.385-.535-.45-.946-.03-.192.025-.509.137-.776.136-.326.488-.73.836-.963.403-.269.934-.46 1.422-.512.187-.02.586-.02.773-.002m-5.503-11a1.65 1.65 0 0 0-.683.298C5.617.74 5.173 1.666 4.985 2.819c-.07.436-.119 1.04-.119 1.503 0 .544.064 1.24.155 1.721.02.107.031.202.023.208l-.187.152a5.3 5.3 0 0 0-.949 1.02 5.5 5.5 0 0 0-.94 2.339 6.6 6.6 0 0 0-.023 1.357c.091.78.325 1.438.727 2.04l.13.195-.037.064c-.269.452-.498 1.105-.605 1.732-.084.496-.095.629-.095 1.294 0 .67.009.803.088 1.266.095.555.288 1.143.503 1.534.071.128.243.393.264.407.007.003-.014.067-.046.141a7.4 7.4 0 0 0-.548 1.873 5 5 0 0 0-.071.991c0 .56.031.832.148 1.279L3.42 24h1.478l-.05-.091c-.297-.552-.325-1.575-.068-2.597.117-.472.25-.819.498-1.296l.148-.29v-.177c0-.165-.003-.184-.057-.293a.9.9 0 0 0-.194-.25 1.7 1.7 0 0 1-.385-.543c-.424-.92-.506-2.286-.208-3.451.124-.486.329-.918.544-1.154a.8.8 0 0 0 .223-.531c0-.195-.07-.355-.224-.522a3.14 3.14 0 0 1-.817-1.729c-.14-.96.114-2.005.69-2.834.563-.814 1.353-1.336 2.237-1.475.199-.033.57-.028.776.01.226.04.367.028.512-.041.179-.085.268-.19.374-.431.093-.215.165-.333.36-.576.234-.29.46-.489.822-.729.413-.27.884-.467 1.352-.561.17-.035.25-.04.569-.04s.398.005.569.04a4.07 4.07 0 0 1 1.914.997c.117.109.398.457.488.602.034.057.095.177.132.267.105.241.195.346.374.43.14.068.286.082.503.045.343-.058.607-.053.943.016 1.144.23 2.14 1.173 2.581 2.437.385 1.108.276 2.267-.296 3.153-.097.15-.193.27-.333.419-.301.322-.301.722-.001 1.053.493.539.801 1.866.708 3.036-.062.772-.26 1.463-.533 1.854a2 2 0 0 1-.224.258.9.9 0 0 0-.194.25c-.054.109-.057.128-.057.293v.178l.148.29c.248.476.38.823.498 1.295.253 1.008.231 2.01-.059 2.581a1 1 0 0 0-.044.098c0 .006.329.009.732.009h.73l.02-.074.036-.134c.019-.076.057-.3.088-.516a9 9 0 0 0 0-1.258c-.11-.875-.295-1.57-.597-2.226-.032-.074-.053-.138-.046-.141a1.4 1.4 0 0 0 .108-.152c.376-.569.607-1.284.724-2.228.031-.26.031-1.378 0-1.628-.083-.645-.182-1.082-.348-1.525a6 6 0 0 0-.329-.7l-.038-.064.131-.194c.402-.604.636-1.262.727-2.04a6.6 6.6 0 0 0-.024-1.358 5.5 5.5 0 0 0-.939-2.339 5.3 5.3 0 0 0-.95-1.02l-.186-.152a.7.7 0 0 1 .023-.208c.208-1.087.201-2.443-.017-3.503-.19-.924-.535-1.658-.98-2.082-.354-.338-.716-.482-1.15-.455-.996.059-1.8 1.205-2.116 3.01a7 7 0 0 0-.097.726c0 .036-.007.066-.015.066a1 1 0 0 1-.149-.078A4.86 4.86 0 0 0 12 3.03c-.832 0-1.687.243-2.456.698a1 1 0 0 1-.148.078c-.008 0-.015-.03-.015-.066a7 7 0 0 0-.097-.725C8.997 1.392 8.337.319 7.46.048a2 2 0 0 0-.585-.041Zm.293 1.402c.248.197.523.759.682 1.388.03.113.06.244.069.292.007.047.026.152.041.233.067.365.098.76.102 1.24l.002.475-.12.175-.118.178h-.278c-.324 0-.646.041-.954.124l-.238.06c-.033.007-.038-.003-.057-.144a8.4 8.4 0 0 1 .016-2.323c.124-.788.413-1.501.696-1.711.067-.05.079-.049.157.013m9.825-.012c.17.126.358.46.498.888.28.854.36 2.028.212 3.145-.019.14-.024.151-.057.144l-.238-.06a3.7 3.7 0 0 0-.954-.124h-.278l-.119-.178-.119-.175.002-.474c.004-.669.066-1.19.214-1.772.157-.623.434-1.185.68-1.382.078-.062.09-.063.159-.012"></path></svg></span> <abbr title="Ollama is a way to run AI models locally and create agents to do tasks or chat with an AI bot.">Ollama</abbr>
</div>
<div>
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m14.25.18.9.2.73.26.59.3.45.32.34.34.25.34.16.33.1.3.04.26.02.2-.01.13V8.5l-.05.63-.13.55-.21.46-.26.38-.3.31-.33.25-.35.19-.35.14-.33.1-.3.07-.26.04-.21.02H8.77l-.69.05-.59.14-.5.22-.41.27-.33.32-.27.35-.2.36-.15.37-.1.35-.07.32-.04.27-.02.21v3.06H3.17l-.21-.03-.28-.07-.32-.12-.35-.18-.36-.26-.36-.36-.35-.46-.32-.59-.28-.73-.21-.88-.14-1.05-.05-1.23.06-1.22.16-1.04.24-.87.32-.71.36-.57.4-.44.42-.33.42-.24.4-.16.36-.1.32-.05.24-.01h.16l.06.01h8.16v-.83H6.18l-.01-2.75-.02-.37.05-.34.11-.31.17-.28.25-.26.31-.23.38-.2.44-.18.51-.15.58-.12.64-.1.71-.06.77-.04.84-.02 1.27.05zm-6.3 1.98-.23.33-.08.41.08.41.23.34.33.22.41.09.41-.09.33-.22.23-.34.08-.41-.08-.41-.23-.33-.33-.22-.41-.09-.41.09zm13.09 3.95.28.06.32.12.35.18.36.27.36.35.35.47.32.59.28.73.21.88.14 1.04.05 1.23-.06 1.23-.16 1.04-.24.86-.32.71-.36.57-.4.45-.42.33-.42.24-.4.16-.36.09-.32.05-.24.02-.16-.01h-8.22v.82h5.84l.01 2.76.02.36-.05.34-.11.31-.17.29-.25.25-.31.24-.38.2-.44.17-.51.15-.58.13-.64.09-.71.07-.77.04-.84.01-1.27-.04-1.07-.14-.9-.2-.73-.25-.59-.3-.45-.33-.34-.34-.25-.34-.16-.33-.1-.3-.04-.25-.02-.2.01-.13v-5.34l.05-.64.13-.54.21-.46.26-.38.3-.32.33-.24.35-.2.35-.14.33-.1.3-.06.26-.04.21-.02.13-.01h5.84l.69-.05.59-.14.5-.21.41-.28.33-.32.27-.35.2-.36.15-.36.1-.35.07-.32.04-.28.02-.21V6.07h2.09l.14.01zm-6.47 14.25-.23.33-.08.41.08.41.23.33.33.23.41.08.41-.08.33-.23.23-.33.08-.41-.08-.41-.23-.33-.33-.23-.41-.08-.41.08z"></path></svg></span> Python
</div>
<div>
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179z"></path></svg></span> JavaScript
</div>
</div>
</div>
<div class="tabbed-block">
<h3>Senior Technical Writer</h3>
<div class="logo-and-title" >
<img src="/src/mambu-logo-110x112.png" /><h4>Mambu</h4><span class="annotate">(1)</span><ol><li>Mambu is a SaaS banking back-end that provides services to banks such as N26 and Solaris.</li></ol>
</div>
<div class="tags">financial services, banking, saas, scale-up, series e</div>
<div class="grid-3col-container">
<div class="grid-3col-item">
<div class="grid-3col-content">
<h5>Promoted to team lead</h5>
<p>I was promoted to team lead to lead a team of two other technical writers. This shifted my role into more managerial tasks on top of working on documentation. </p>
</div>
</div>
<div class="grid-3col-item">
<div class="grid-3col-content">
<h5>Maintained legacy API Reference</h5>
<p>The API References included old documentation that needed to maintenance for clients that had not yet migrated to the latest versions of the REST API.</p>
</div>
</div>
<div class="grid-3col-item">
<div class="grid-3col-content">
<h5>Documented integrations and <abbr title="Command-line interface, using text instead of UI elements.">CLI</abbr></h5>
<p>Documented integrations with services like nCino and Wise, and documented the Mambu Process Orchestrator - which managed these connections. Also documented the Mambu <abbr title="Command-line interface, using text instead of UI elements.">CLI</abbr> for external engineers to connect to the back-end.</p>
</div>
</div>
</div>
<div class="resume-icon-meta" >
<div>
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.039 0a2.96 2.96 0 0 0-2.65 4.274l-6.447 6.447a2.96 2.96 0 1 0 1.335 1.336l6.447-6.447A2.959 2.959 0 1 0 21.04 0zM10.628 2.745q-.108.001-.214.004-.107.002-.215.005a11 11 0 0 0-1.335.138l-.03.005-.185.033-.105.02a8 8 0 0 0-.289.062l-.032.008a10.7 10.7 0 0 0-2.55.95l-.155.089q-.094.052-.187.105-.07.039-.14.079H5.19l-.01.005-.036.02v.002l.111.184 3.15 5.23a4 4 0 0 1 .38-.202 4.3 4.3 0 0 1 1.628-.413q.107-.007.214-.008zm.428.01v6.333q.489.05.96.209l4.66-4.66q-.259-.181-.528-.347l-.026-.015q-.084-.052-.168-.1l-.098-.056-.099-.055-.171-.092-.027-.014a11 11 0 0 0-1.425-.617c-.69-.241-1.403-.41-2.128-.505l-.089-.012-.09-.01-.17-.019-.049-.004-.204-.017a6 6 0 0 0-.255-.015q-.046-.004-.093-.004M4.782 4.498a10 10 0 0 0-1.36 1.062l4.461 4.461.018.018q.073-.06.149-.116l-.011-.018zm-1.67 1.36q-.074.076-.147.154l-.149.155q-.494.536-.902 1.118l-.039.056a11 11 0 0 0-.216.326 10.6 10.6 0 0 0-1.65 5.276l-.006.215-.003.214h6.317c0-.072.007-.143.01-.214.005-.072.006-.144.013-.215a4.3 4.3 0 0 1 .952-2.3c.045-.055.096-.106.144-.16.048-.052.093-.107.144-.158zm16.255 1.464-4.663 4.663q.158.47.21.959h6.332l-.004-.094a12 12 0 0 0-.032-.456l-.005-.052-.026-.241v-.009l-.033-.24v-.009a11 11 0 0 0-.327-1.493l-.003-.01-.07-.228-.01-.03-.069-.204-.02-.055a6 6 0 0 0-.153-.405l-.093-.227-.063-.144-.037-.081-.08-.171-.024-.052-.096-.194-.014-.027-.112-.212-.004-.008a11 11 0 0 0-.604-.98m-4.43 6.05c0 .071-.006.142-.01.214q-.003.108-.012.214a4.3 4.3 0 0 1-.952 2.301c-.045.055-.096.107-.144.16s-.093.108-.144.159l4.467 4.467q.075-.078.148-.155.076-.078.148-.155.497-.538.905-1.122l.032-.046.098-.144.085-.13.04-.063a10.6 10.6 0 0 0 1.647-5.272q.004-.107.006-.214.003-.107.004-.214zM.01 13.8l.004.093.01.179.005.076.017.206.005.046q.01.115.024.228l.003.022.033.248q.109.758.327 1.497l.002.006q.034.116.071.23l.004.014.005.014a16 16 0 0 0 .153.439l.03.08.059.148.093.228.062.14.038.084.078.169.027.054a11 11 0 0 0 .225.441l.025.043 5.408-3.258.02-.012a4.3 4.3 0 0 1-.395-1.414h-.025zm.505 2.846-.206.058.002.005zm6.425-1.052-5.415 3.262q.125.207.259.406l.008.014.004.005.008.014h.001l.022.032.001.002v.001a11 11 0 0 0 .298.417l.006.008a10 10 0 0 0 .29.368l.033.04q.064.078.13.153l.057.065.112.127.064.069.029.031.083.09.035.035q.073.077.149.153L7.58 16.42a4 4 0 0 1-.285-.321 4.4 4.4 0 0 1-.356-.505zm6.416 1.111q-.075.06-.15.116l.011.018 3.257 5.407q.227-.148.446-.307.473-.348.914-.756l-4.46-4.46zm-5.457.003-.015.015-4.46 4.46.195.176q.033.03.065.058l.152.13.215.174.023.017.191.148.008.005q.403.3.834.564l.03.018.164.097.101.057a6 6 0 0 0 .27.148q.012.007.025.013.243.127.493.24l.158-.385 2.243-5.448.009-.02a4.3 4.3 0 0 1-.701-.467m4.951.353q-.092.054-.187.104a4.32 4.32 0 0 1-3.271.336c-.069-.02-.135-.047-.203-.071-.067-.024-.136-.044-.202-.072l-2.242 5.444-.088.213-.075.183v.001l.017.007.019.007.005.003q.079.03.159.06.1.04.2.077l.102.04c.702.247 1.43.42 2.168.518l.087.012.09.01.172.019a7 7 0 0 0 .252.022q.035 0 .071.003l.184.011.112.005a7 7 0 0 0 .358.007h.05a10.7 10.7 0 0 0 1.793-.15l.185-.034.105-.02.109-.023.18-.04.032-.008a10.7 10.7 0 0 0 2.55-.95q.078-.044.156-.089.094-.052.187-.105.065-.035.13-.073h.001l.002-.002.002-.001.002-.001.007-.004.042-.025-.11-.183-.11-.184zm3.262 5.414-.042.025zm-.055.033h-.002z"></path></svg></span> <abbr title="The OpenAPI specification is a standard for documenting REST APIs.">OpenAPI Specification</abbr>
</div>
<div>
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.754 0a4 4 0 0 0-2.049.596L3.33 4.532a4.25 4.25 0 0 0-2.017 3.615v8.03a4.13 4.13 0 0 0 2.067 3.574l6.486 3.733a3.88 3.88 0 0 0 3.835.018l7.043-3.966a3.82 3.82 0 0 0 1.943-3.323V7.752a3.57 3.57 0 0 0-1.774-3.084L13.817.541a4 4 0 0 0-2.063-.54zm.022 1.674c.413-.006.828.1 1.2.315l7.095 4.127c.584.34.941.96.94 1.635v8.462c0 .774-.414 1.484-1.089 1.864l-7.042 3.966a2.2 2.2 0 0 1-2.179-.01l-6.485-3.734a2.45 2.45 0 0 1-1.228-2.123v-8.03c0-.893.461-1.72 1.221-2.19l6.376-3.935a2.3 2.3 0 0 1 1.19-.347zm-4.7 3.844V18.37h2.69v-5.62h4.46v5.62h2.696V5.518h-2.696v4.681h-4.46V5.518Z"></path></svg></span> <abbr title="Hugo is a general purpose static site generator.">Hugo</abbr>
</div>
<div>
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179z"></path></svg></span> JavaScript
</div>
</div>
</div>
<div class="tabbed-block">
<h3>Content Manager</h3>
<div class="logo-and-title" >
<img src="/src/yoco-logo-206x206.png" /><h4>Yoco</h4><span class="annotate">(1)</span><ol><li>Yoco is the largest payments processor for small- and medium-businesses in South Africa.</li></ol>
</div>
<div class="tags">financial services, payments, hardware, scale-up, series b</div>
<p class="blurb">Built a content hub from its foundations - including building a team of freelance writers across the country to supply the content. I was involved in developing content for content marketing campaigns and multimedia stories about merchants.</p>
</div>
<div class="tabbed-block">
<h3>Communications Specialist</h3>
<div class="logo-and-title" >
<img src="/src/allan-gray-logo-243x160.png" /><h4>Allan Gray</h4><span class="annotate">(1)</span><ol><li>Allan Gray Investment Management is one of the largest asset managers in Africa and operates in South Africa, Namibia, Kenya, Nigeria, Botswana, and other countries.</li></ol>
</div>
<div class="tags">financial services, investment, unit trusts (mutual funds), established, private</div>
<p class="blurb">I created and edited investment content for radio, print, and online; worked in public relations to prepare executives for inrterviews; managed the creation of webinars for outreach to advisers and other creative projects.</p>
</div>
<div class="tabbed-block">
<h3>Copywriting</h3>
<div class="logo-and-title" >
<img src="/src/the-jupiter-drawing-room-logo-119x118.png" /><h4>The Jupiter Drawing Room</h4><span class="annotate">(1)</span><ol><li>The Jupiter Drawing Room is an advertising agency that serviced clients across South Africa and Namibia.</li></ol>
</div>
<div class="tags">marketing, advertising, print, radio, television, online, established, private</div>
<p class="blurb">I worked on brands such as Windhoek Beer, Hyundai, Vitaminwater, Sanlam (financial services), Lucky Star (food), and Club Mykonos (accommodation) in print, radio, online, and television. Campaigns where I was the Copywriter have won Gold, Silver, and Bronze <abbr title="South African advertising awards for creativity in the field.">Loeries</abbr>; a Silver <abbr title="An international advertising awards for creativity in communications.">Cannes</abbr> Lion; and a Bronze <abbr title="An American advertising award for creative excellence.">Clio</abbr>.</p>
</div>
</div>
<div class="tabbed-control tabbed-control--prev" hidden="">
<button class="tabbed-button" tabindex="-1" aria-hidden="true"></button>
</div>
<div class="tabbed-control tabbed-control--next" hidden="">
<button class="tabbed-button" tabindex="-1" aria-hidden="true"></button>
</div>
</div>
<div class="portfolio">
<div class="grid-3col-container">
<div class="grid-3col-item">
<div class="grid-3col-content">
<img src="/src/spread-docs-site-3456x2160.png" width="100%" />
</div>
</div>
<div class="grid-3col-item">
<div class="grid-3col-content">
<h5>Maintained legacy API Reference</h5>
<p>The API References included old documentation that needed to maintenance for clients that had not yet migrated to the latest versions of the REST API.</p>
</div>
</div>
</div>
<div class="resume-footer">
<div class="resume-footer-menu">
<a href="/technical"><span class="resume-footer-menu-item technical">technical</span></a><a href="/visual"><span class="resume-footer-menu-item visual">visual</span></a><a href="/writing"><span class="resume-footer-menu-item writing">writing</span></a>
</div>
<div class="version">v202506.1</div>
</div>
<div id="loader">
<div><img src="/src/gugulet.hu-site-logo-350x350.png"></div>
</div>
<script src="/src/js/loader.js"></script>

BIN
docs/src/allan-gray-logo-243x160.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
docs/src/fonts/dm-mono/DMMono-Italic.ttf Normal file
View file

Binary file not shown.

BIN
docs/src/fonts/dm-mono/DMMono-Light.ttf Normal file
View file

Binary file not shown.

BIN
docs/src/fonts/dm-mono/DMMono-LightItalic.ttf Normal file
View file

Binary file not shown.

BIN
docs/src/fonts/dm-mono/DMMono-Medium.ttf Normal file
View file

Binary file not shown.

BIN
docs/src/fonts/dm-mono/DMMono-MediumItalic.ttf Normal file
View file

Binary file not shown.

BIN
docs/src/fonts/dm-mono/DMMono-Regular.ttf Normal file
View file

Binary file not shown.

BIN
docs/src/fonts/lato/Lato-Black.ttf Normal file
View file

Binary file not shown.

BIN
docs/src/fonts/lato/Lato-BlackItalic.ttf Normal file
View file

Binary file not shown.

BIN
docs/src/fonts/lato/Lato-Bold.ttf Normal file
View file

Binary file not shown.

BIN
docs/src/fonts/lato/Lato-BoldItalic.ttf Normal file
View file

Binary file not shown.

BIN
docs/src/fonts/lato/Lato-Italic.ttf Normal file
View file

Binary file not shown.

BIN
docs/src/fonts/lato/Lato-Light.ttf Normal file
View file

Binary file not shown.

BIN
docs/src/fonts/lato/Lato-LightItalic.ttf Normal file
View file

Binary file not shown.

BIN
docs/src/fonts/lato/Lato-Regular.ttf Normal file
View file

Binary file not shown.

BIN
docs/src/fonts/lato/Lato-Thin.ttf Normal file
View file

Binary file not shown.

BIN
docs/src/fonts/lato/Lato-ThinItalic.ttf Normal file
View file

Binary file not shown.

BIN
docs/src/fonts/libre-baskerville/LibreBaskerville-Bold.woff Normal file
View file

Binary file not shown.

BIN
docs/src/fonts/libre-baskerville/LibreBaskerville-Italic.woff Normal file
View file

Binary file not shown.

BIN
docs/src/fonts/libre-baskerville/LibreBaskerville-Regular.woff Normal file
View file

Binary file not shown.

24
docs/src/fonts/libre-baskerville/style.css Normal file
View file

@ -0,0 +1,24 @@
/* #### Generated By: http://font.download #### */
@font-face {
font-family: 'Libre Baskerville';
font-style: normal;
font-weight: normal;
src: local('Libre Baskerville'), url('LibreBaskerville-Regular.woff') format('woff');
}
@font-face {
font-family: 'Libre Baskerville Italic';
font-style: normal;
font-weight: normal;
src: local('Libre Baskerville Italic'), url('LibreBaskerville-Italic.woff') format('woff');
}
@font-face {
font-family: 'Libre Baskerville Bold';
font-style: normal;
font-weight: normal;
src: local('Libre Baskerville Bold'), url('LibreBaskerville-Bold.woff') format('woff');
}

16
docs/src/js/faces-intro.js Normal file
View file

@ -0,0 +1,16 @@
// ---------------------
// This script does the animations for the faces
// on the home page.
// ---------------------
document.addEventListener('DOMContentLoaded', function () {
const imageContainers = document.querySelectorAll('.face');
setTimeout(() => {
imageContainers.forEach((container, index) => {
setTimeout(() => {
container.classList.add('active');
}, (index + 1) * 1000); // Adjust delay between images
});
}, 4800);
});

22
docs/src/js/hover-text.js Normal file
View file

@ -0,0 +1,22 @@
// ---------------------
// This script changes the text when hovering over faces on the home page.
// ---------------------
function setHoverText(elementId, text) {
const hoverTextElement = document.getElementById('hover-text');
document.getElementById(elementId).onmouseover = function () {
hoverTextElement.innerHTML = text;
hoverTextElement.classList.remove('leave');
hoverTextElement.classList.add('fade-in');
};
document.getElementById(elementId).onmouseout = function () {
hoverTextElement.classList.remove('fade-in');
hoverTextElement.classList.add('leave');
};
}
setHoverText('visual-hover', 'a thousand words at a time');
setHoverText('technical-hover', 'in zeroes, ones, and other numbers');
setHoverText('writing-hover', 'letter by letter, word by word');

11
docs/src/js/index-text.js
View file

@ -1,11 +0,0 @@
document.getElementById('visual-hover').onmouseover = function () {
document.getElementById('hover-text').innerHTML = "a thousand words at a time";
};
document.getElementById('technical-hover').onmouseover = function () {
document.getElementById('hover-text').innerHTML = "in zeroes, ones, and other numbers";
};
document.getElementById('writing-hover').onmouseover = function () {
document.getElementById('hover-text').innerHTML = "letter by letter, word by word";
};

4
docs/src/js/loader.js → docs/src/js/page-loader.js
View file

@ -1,3 +1,7 @@
// ---------------------
// This script loads the page loading animation.
// ---------------------
document.getElementById('loader').style.display = 'block';
function fadeOutLoader() {

BIN
docs/src/mambu-logo-110x112.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
docs/src/spread-ai-logo-125x144.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7 KiB

BIN
docs/src/spread-docs-site-3456x2160.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.6 MiB

65
docs/src/stylesheets/_colours.css
View file

@ -1,22 +1,55 @@
/* Change the colours of the root colour scheme */
/*****************************
* COLOURS
*****************************/
:root {
--background: #FAF9F6;
--md-primary-fg-color: #323036;
--md-primary-fg-color--light: #818589;
--md-primary-fg-color--dark: #323036;
--md-primary-bg-color: #FAF9F6;
--md-footer-bg-color: transparent;
--md-default-bg-color: #EFE5DC;
--background-colour: #FFF;
--primary-colour: #323036;
--secondary-colour: #EFE5DC;
--tertiary-colour: #818589;
--quarternary-colour: #FAF9F6;
}
[data-md-color-scheme=default] {
--md-default-bg-color: #FAF9F6;
/* Adjust Mkdocs colours */
:root {
--md-primary-fg-color: var(--primary-colour);
--md-primary-fg-color--light: var(--tertiary-colour);
--md-primary-fg-color--dark: var(--primary-colour);
--md-primary-bg-color: var(--background-colour);
--md-footer-bg-color: var(--background-colour);
--md-default-bg-color: var(--background-colour);
}
/* Edit the indigo accent colour scheme (no grey colour scheme) */
[data-md-color-accent=indigo] {
--md-primary-fg-color: #323036;
--md-primary-fg-color--light: var(--md-primary-bg-color);
--md-primary-fg-color--dark: var(--md-primary-fg-color--dark);
--md-accent-fg-color: #323036;
[data-md-color-accent=custom] {
--md-primary-fg-color: var(--primary-colour);
--md-primary-fg-color--light: var(--tertiary-colour);
--md-primary-fg-color--dark: var(--primary-colour);
--md-accent-fg-color: var(--secondary-colour);
}
/* Font colours */
.md-typeset {
p,
h1,
h2,
h3 {
color: var(--primary-color);
}
h4,
h5,
h6 {
color: var(--tertiary-colour);
}
a {
color: var(--tertiary-colour);
}
a:hover {
color: var(--primary-color);
}
}

183
docs/src/stylesheets/_fonts.css Normal file
View file

@ -0,0 +1,183 @@
/*****************************
* FONTS
*****************************/
@font-face {
font-family: 'Libre Baskerville';
font-weight: normal;
font-style: normal;
src: url('../fonts/libre-baskerville/LibreBaskerville-Regular.woff');
}
@font-face {
font-family: 'Libre Baskerville';
font-weight: bold;
font-style: normal;
src: url('../fonts/libre-baskerville/LibreBaskerville-Bold.woff');
}
@font-face {
font-family: 'Libre Baskerville';
font-weight: normal;
font-style: italic;
src: url('../fonts/libre-baskerville/LibreBaskerville-Italic.woff');
}
@font-face {
font-family: 'Lato';
font-weight: normal;
font-style: normal;
src: url('../fonts/lato/Lato-Regular.ttf');
}
@font-face {
font-family: 'Lato';
font-weight: normal;
font-style: italic;
src: url('../fonts/lato/Lato-Italic.ttf');
}
@font-face {
font-family: 'Lato';
font-weight: bold;
font-style: normal;
src: url('../fonts/lato/Lato-Bold.ttf');
}
@font-face {
font-family: 'Lato';
font-weight: bold;
font-style: italic;
src: url('../fonts/lato/Lato-BoldItalic.ttf');
}
@font-face {
font-family: 'Lato';
font-weight: light;
font-style: normal;
src: url('../fonts/lato/Lato-Light.ttf');
}
@font-face {
font-family: 'Lato';
font-weight: light;
font-style: italic;
src: url('../fonts/lato/Lato-LightItalic.ttf');
}
@font-face {
font-family: 'Lato';
font-weight: bolder;
font-style: normal;
src: url('../fonts/lato/Lato-Black.ttf');
}
@font-face {
font-family: 'Lato';
font-weight: bolder;
font-style: italic;
src: url('../fonts/lato/Lato-BlackItalic.ttf');
}
@font-face {
font-family: 'Lato';
font-weight: thin;
font-style: normal;
src: url('../fonts/lato/Lato-Light.ttf');
}
@font-face {
font-family: 'Lato';
font-weight: thin;
font-style: italic;
src: url('../fonts/lato/Lato-ThinItalic.ttf');
}
@font-face {
font-family: 'DM Mono';
font-weight: normal;
font-style: normal;
src: url('../fonts/dm-mono/DMMono-Regular.ttf');
}
@font-face {
font-family: 'DM Mono';
font-weight: normal;
font-style: italic;
src: url('../fonts/dm-mono/DMMono-Italic.ttf');
}
@font-face {
font-family: 'DM Mono';
font-weight: medium;
font-style: italic;
src: url('../fonts/dm-mono/DMMono-MediumItalic.ttf');
}
@font-face {
font-family: 'DM Mono';
font-weight: medium;
font-style: normal;
src: url('../fonts/dm-mono/DMMono-Medium.ttf');
}
@font-face {
font-family: 'DM Mono';
font-weight: light;
font-style: normal;
src: url('../fonts/dm-mono/DMMono-Light.ttf');
}
@font-face {
font-family: 'DM Mono';
font-weight: light;
font-style: italic;
src: url('../fonts/dm-mono/DMMono-LightItalic.ttf');
}
/* Variables */
:root {
--primary-font: 'Libre Baskerville', serif;
--secondary-font: 'Lato', sans-serif;
--tertiary-font: 'DM Mono', monospace;
}
/* Typeset */
.md-typeset p {
font-size: max(var(--text-variable-size), var(--text-min-size));
}
.md-typeset {
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
}
}
.md-typeset {
h1,
h2,
h3 {
font-family: var(--primary-font);
}
h4,
h5,
h6 {
font-family: var(--secondary-font);
}
}

30
docs/src/stylesheets/_index.css Normal file
View file

@ -0,0 +1,30 @@
/*****************************
* INDEX
* Styling for index pages.
*****************************/
.md-content__inner,
.md-main__inner,
.md-grid,
html,
body,
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
article,
.md-container {
min-height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
header,
nav,
footer,
.md-content .md-typeset h1 {
display: none !important;
}

84
docs/src/stylesheets/_size.css Normal file
View file

@ -0,0 +1,84 @@
/*****************************
* SIZE
*****************************/
/* Standard screen size is based on 1728x1117 screen. */
:root {
--text-min-size: 8px;
--text-variable-size: 0.7vw;
--zero: 0;
--full-width: 100vw;
--half-width: 50vw;
--third-width: 33.3vw;
--quarter-width: 25vw;
--fifth-width: 20vw;
--full-height: 100vh;
--half-height: 50vh;
--third-height: 33.3vh;
--quarter-height: 25vh;
--fifth-height: 20vh;
--three-column: repeat(3, 1fr);
--two-column: repeat(2, 1fr);
--horizontal-spacing: 0.3vw;
--vertical-spacing: 0.45vh;
}
/* Font sizes */
.md-typeset {
p {
font-size: max(var(--text-variable-size), var(--text-min-size));
}
h1,
h2,
h3,
h4,
h5,
h6 {
letter-spacing: normal;
margin: var(--zero);
}
}
.md-typeset {
h1 {
font-size: max(calc(var(--text-variable-size) * 6), calc(var(--text-min-size) + 6px));
}
h2 {
font-size: max(calc(var(--text-variable-size) * 6), calc(var(--text-min-size) + 5px));
}
h3 {
font-size: max(calc(var(--text-variable-size) * 4), calc(var(--text-min-size) + 4px));
}
h4 {
font-size: max(calc(var(--text-variable-size) * 3), calc(var(--text-min-size) + 3px));
}
h5 {
font-size: max(calc(var(--text-variable-size) * 2), calc(var(--text-min-size) + 2px));
}
h6 {
font-size: max(calc(var(--text-variable-size) + 5px), calc(var(--text-min-size) + 1px));
}
}
/* Default padding and margins */
div {
margin: calc(var(--vertical-spacing) * 2) 0;
padding: calc(var(--vertical-spacing) * 2) 0;
&.no-spacing {
margin: var(--zero);
padding: var(--zero);
}
}
span {
margin-left: var(--horizontal-spacing);
}

553
docs/src/stylesheets/g.css
View file

@ -1,118 +1,491 @@
@import "_colours.css";
@import url("https: //api.fonts.coollabs.io/css2?family=Lato:wght@300;400;700;900&family=Libre+Baskerville&family=DM+Mono:wght@400;500&display=swap");
@import url(_colours.css);
@import url(_fonts.css);
@import url(_size.css);
/* Body background colour */
/*****************************
* GENERAL RULES
*****************************/
body {
background: transparent;
background: var(--background);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
/* Link colours */
a {
color: var(--md-primary-fg-color--light);
.md-typeset a:hover {
text-decoration: none;
}
a:hover {
color: var(--md-primary-fg-color--dark);
text-decoration: none !important;
}
/* Bold headings */
h1,
h2,
h3,
h4,
h5 {
font-weight: bold !important;
}
h1 {
color: var(--md-primary-fg-color--dark) !important
}
/* Paragraph font-size */
.md-typeset {
font-size: .7rem;
}
/* Remove the shadow under the header */
.md-header--shadow {
box-shadow: none;
}
/* Make the logo in the header larger */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
height: 2.5rem;
}
/* Do not display the site title in the header */
.md-header__topic:first-child {
display: none;
}
/* Use dark colour for the navigation links */
.md-typeset a,
.md-nav__item .md-nav__link--active {
color: var(--md-primary-fg-color--dark);
}
/* Underline links in text on hover an focus */
.md-typeset a:focus,
.md-typeset a:hover {
text-decoration: underline;
}
/* Change the colour of links on hover and focus */
.md-nav__link:focus,
.md-nav__link:hover,
.md-typeset .headerlink:focus,
.md-typeset .headerlink:hover,
.md-typeset :target>.headerlink {
color: var(--md-primary-bg-color);
}
html .md-footer-meta.md-typeset a,
.md-copyright__highlight {
color: var(--md-primary-bg-color);
}
html .md-footer-meta.md-typeset a:hover,
html .md-footer-meta.md-typeset a:focus {
color: var(--md-primary-fg-color--dark);
}
/* Make the footer background white and the content dark */
.md-footer,
.md-footer-meta {
background-color: var(--md-primary-fg-color);
color: var(--md-primary-bg-color);
}
/* Change colour of search highlighting */
/* Change colour of search highlighting. */
.md-search-result__link:focus,
.md-search-result__link:hover {
background-color: #E6E6E6;
background-color: var(--secondary-colour);
}
.md-typeset mark {
background-color: var(--md-accent-fg-color);
background-color: var(--secondary-colour);
}
/* Hide stars and forks in git section */
li.md-source__fact.md-source__fact--stars,
li.md-source__fact.md-source__fact--forks {
display: none !important;
/* This was creating an annoying space at the top. */
article.md-content__inner.md-typeset:before,
article.md-content__inner.md-typeset:after {
content: none;
}
/* Fixing admonitions */
/*****************************
* HERO TEXT
*****************************/
.admonition {
border: none !important;
.hero-text {
flex: 1;
min-width: fit-content;
height: 50vh;
display: inline-block;
flex-direction: row;
justify-content: center;
padding: 5em;
font-family: var(--primary-font);
text-align: left;
margin: var(--zero);
h2 {
margin-bottom: 0.1em;
overflow: hidden;
border-right: .15em solid var(--tertiary-colour);
white-space: nowrap;
letter-spacing: .05em;
animation:
typing 5s steps(40, end) forwards 2s,
blink-caret 0.75s step-end infinite;
}
h4#hover-text {
font-weight: normal;
opacity: 0;
transition: opacity 0.5s ease-out;
&.fade-in {
opacity: 1;
}
&.leave {
opacity: 0;
}
}
.accent-divider {
background-color: var(--secondary-colour);
width: 100%;
height: 10px;
margin: 1em 0;
}
}
.admonition>p:nth-child(2) {
background-color: white !important;
@keyframes typing {
from {
width: 0
}
to {
width: 100%
}
}
@keyframes blink-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: var(--tertiary-colour);
}
}
/*****************************
* INDEX FACES
*****************************/
.faces {
display: flex;
justify-content: space-between;
width: 80vw;
height: 30vh;
}
.face {
width: 100%;
height: 33.33vh;
position: relative;
overflow: hidden;
transition: all 0.5s ease;
}
.face:hover {
filter: invert(50%);
}
.face img {
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0;
transform: scale(0.9);
transition: all 2s ease-out forwards;
}
.face.active img {
animation: fadeIn 2s ease-out forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@media (max-width: 768px) {
.faces {
flex-direction: column;
}
}
/*****************************
* PAGE LOADER
*****************************/
#loader {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: var(--secondary-colour);
display: flex !important;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 1s ease-out, transform 0.5s ease-out;
margin: 0;
padding: 0;
}
#loader.fade-out {
opacity: 0;
transform: scale(1.1);
}
#loader img {
width: 50px;
height: 50px;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#loading-text {
font-family: var(--secondary-font);
font-size: 24px;
color: black;
animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(1.1);
}
}
.fade-out {
animation: fadeOut 1s ease-out forwards;
}
/* */
.resume-icon-meta {
font-size: max(1vw, 8px);
color: var(--tertiary-colour);
text-align: left;
display: flex;
justify-content: left;
gap: 0.5rem;
}
.resume-icon-meta>div,
.resume-icon-meta>a {
margin-right: 2em;
display: flex;
align-items: center;
font-family: var(--secondary-font);
}
svg {
width: 30px;
height: auto;
margin-right: 0.3rem;
}
span {
font-size: 1rem;
}
.annotate {
color: transparent;
font-size: small;
}
.md-annotation:not([hidden]) {
line-height: inherit;
}
.md-tooltip__inner {
font-family: var(--secondary-font);
}
.logo-and-title {
display: inline-block;
}
.logo-and-title img {
height: max(12px, 0.5vh);
margin-right: 10px;
}
.logo-and-title h4 {
display: inline-block;
font-family: var(--secondary-font);
margin-right: 5px;
font-size: max(16px, inherit);
}
.tabbed-labels {
font-family: var(--secondary-font);
}
.md-typeset .tabbed-labels>label {
font-size: max(1.7vw, 8px);
}
.tabbed-content {
background-color: #FAF9F6;
}
div.tabbed-block {
padding: 3em;
}
div.status-green {
background-color: #007a5a;
color: var(--background-colour);
border-radius: 5px;
padding: 5px 15px;
text-transform: uppercase;
font-family: var(--secondary-font);
font-weight: 900;
font-size: 0.8em;
width: fit-content;
margin: 0;
letter-spacing: 0.3em;
}
.tabbed-labels>label:nth-child(1) {
margin-left: 3vw;
}
.tabbed-labels>label:nth-child(2) {
margin-left: 18vw;
}
.tabbed-labels>label:nth-child(3) {
margin-left: 12vw;
}
.tabbed-labels>label:nth-child(4) {
margin-left: 21vw;
}
.tabbed-labels>label:nth-child(5) {
margin-left: 3vw;
}
span.md-annotation__index {
font-size: inherit;
}
div.tags {
font-size: max(9px, 0.8em);
font-style: italic;
color: var(--tertiary-colour);
}
.grid-3col-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
max-width: 1500px;
padding: 20px 20px 20px 0;
width: 100vw;
}
/* Center content within columns */
.grid-3col-item {
justify-self: center;
min-height: 150px;
padding: 20px;
text-align: left;
}
.grid-3col-item:nth-child(1) {
padding-left: 0;
}
.grid-3col-item:nth-child(2) {
border-left: 1px solid var(--secondary-colour);
border-right: 1px solid var(--secondary-colour);
}
/* Responsive design */
@media (max-width: 768px) {
.grid-3col-container {
grid-template-columns: 1fr;
}
.grid-3col-item:nth-child(1) {
padding-left: 20px;
}
.grid-3col-item:nth-child(2) {
border: none;
}
}
/* Optional: Add some styling to the content */
.grid-3col-content {
font-size: 1.2em;
margin-top: 10px;
}
p.blurb {
margin: 20px 0;
font-size: 1.5em;
}
div.resume-footer {
margin: 30px 0 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.version {
transform: rotate(180deg);
font-size: 8px;
margin-left: 20px;
writing-mode: vertical-rl;
font-family: var(--secondary-font);
}
.resume-footer-menu {
display: flex;
justify-content: center;
gap: 3em;
color: var(--primary-colour);
margin-left: 2em;
}
.resume-footer-menu .technical {}
span.visual {
text-decoration: none;
transition: all 0.3s ease;
}
span.visual:hover {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 3px;
text-decoration-color: var(--secondary-colour);
transition: text-decoration 0.3s ease;
}
.portfolio>.grid-3col-container {
margin: 30px auto;
border-bottom: 1px solid var(--secondary-colour);
grid-template-columns: repeat(2, 1fr);
max-width: 1500px;
padding: 20px 20px 20px 0;
width: 100vw;
}
.portfolio>.grid-3col-item>.grid-3col-content {
display: flex;
justify-content: center;
align-items: center;
min-height: fit-content;
gap: 1rem;
}
.portfolio .grid-3col-item:nth-child(2) {
border: none;
}
.portfolio h4 {
font-size: 3em;
color: var(--secondary-colour);
/* text-transform: uppercase; */
font-family: var(--secondary-font);
text-align: center;
}

213
docs/src/stylesheets/index.css
View file

@ -1,213 +0,0 @@
@import url(_colours.css);
@import url("https: //api.fonts.coollabs.io/css2?family=Lato:wght@300;400;700;900&family=Libre+Baskerville&family=DM+Mono:wght@400;500&display=swap");
header,
nav,
footer,
.md-content .md-typeset h1 {
display: none !important;
}
article,
.md-container {
min-height: 100vh;
width: 100%;
margin: 0;
padding: 0;
}
.md-content__inner,
.md-main__inner,
.md-grid,
html,
body,
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.md-grid {
max-width: none;
}
/* This was creating an annoying space at the top */
article.md-content__inner.md-typeset:before,
article.md-content__inner.md-typeset:after {
content: none;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
width: 100%;
}
.container {
width: 100%;
height: 100%;
}
.columns {
display: flex;
justify-content: space-between;
width: 100%;
height: 50vh;
}
.top-row {
flex: 1;
min-width: 100vw;
height: 50vh;
display: flex;
flex-direction: row;
justify-content: center;
padding: 5em;
font-family: 'Libre Baskerville', serif;
}
.top-row h2 {
margin-bottom: 0.1em;
font-size: 5vw;
font-weight: 900;
overflow: hidden;
border-right: .15em solid #818589;
white-space: nowrap;
letter-spacing: .05em;
animation:
typing 5s steps(40, end) forwards 2s,
blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from {
width: 0
}
to {
width: 100%
}
}
@keyframes blink-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: #818589;
}
}
.top-row p {
font-size: 3vw;
color: #818589;
}
.top-row * {
text-align: left;
}
/* Image Container Styling */
.image-container {
width: 100%;
height: 33.33vh;
position: relative;
overflow: hidden;
}
.image-container:hover {
filter: invert(50%);
}
.image-container img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Responsive Design */
@media (max-width: 768px) {
.columns {
flex-direction: column;
}
}
#loader {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #EFE5DC;
display: flex !important;
justify-content: center;
align-items: center;
z-index: 9998;
transition: opacity 1s ease-out, transform 0.5s ease-out;
}
#loader.fade-out {
opacity: 0;
transform: scale(1.1);
}
#loader img {
width: 50px;
height: 50px;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#loading-text {
font-family: Arial, sans-serif;
font-size: 24px;
color: black;
/* Change text color if needed */
animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
/* Add fade-out animation */
@keyframes fadeOut {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(1.1);
}
}
.fade-out {
animation: fadeOut 1s ease-out forwards;
}

BIN
docs/src/the-jupiter-drawing-room-logo-119x118.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
docs/src/yoco-logo-206x206.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 23 KiB

3
docs/technical.md
View file

@ -0,0 +1,3 @@
---
title: Gugulethu Hlekwayo | Technical
---

14
mkdocs.yml
View file

@ -45,11 +45,17 @@ markdown_extensions:
- attr_list
# Allows creating footonotes. [https://squidfunk.github.io/mkdocs-material/reference/footnotes/?h=footnotes#footnotes]
- footnotes
# Write Markdown in HTML. [https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/#markdown-in-html]
- md_in_html
# Improves handling of emphasis in MarkDown. [https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/?h=bet#betterem]
- pymdownx.betterem:
smart_enable: all
# Add captions to any block of content. [https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/#caption]
- pymdownx.blocks.caption
# Enable carets in MarkDown. [https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/?h=bet#betterem]
- pymdownx.caret
# Add editing marks in the text using Markdown. [https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/#critic]
- pymdownx.critic
# Makes admonitions collapsible. [https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/#details]
- pymdownx.details
- pymdownx.emoji:
@ -103,6 +109,8 @@ nav:
- Resumé: resume.md
plugins:
# Plugin to enable the blog feature. [https://squidfunk.github.io/mkdocs-material/setup/setting-up-a-blog/#built-in-blog-plugin]
- blog
# Plugin to display a lightbox for clicked images. [https://github.com/Blueswen/mkdocs-glightbox]
- glightbox:
background: white
@ -110,8 +118,7 @@ plugins:
width: 100%
height: auto
slide_effect: fade
skip_classes:
- skip-lightbox
manual: true
# Plugin to use variables and macros across the docs. [https://github.com/fralau/mkdocs-macros-plugin]
- macros:
on_undefined: strict
@ -181,6 +188,7 @@ theme:
code: DM Mono
# Icons to use for different tags and the repo.
icon:
annotation: material/plus-circle-outline
repo: material/git
tag:
analyse: material/finance
@ -206,7 +214,7 @@ theme:
palette:
scheme: default
primary: custom
accent: indigo
accent: custom
# Properties to validate and return messages for in the build process.
validation: