Fixed partials and overrides. Added analytics and meta blocks to header.

This commit is contained in:
g_it 2026-02-02 20:38:05 +01:00
commit 407ff4b6e9
Signed by untrusted user who does not match committer: g_it
GPG key ID: A2B0A7C06A054627
85 changed files with 77 additions and 11880 deletions

View file

@ -23,7 +23,6 @@ article,
padding: 0;
}
header,
nav,
.md-content .md-typeset h1 {
display: none !important;

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

View file

@ -1,37 +0,0 @@
/*
Homepage
*/
// 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');
// 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);
});

View file

@ -1,17 +0,0 @@
/*
PAGE LOADER
*/
// This loads a screen before the page is fully loaded.
document.getElementById('loader').style.display = 'block';
function fadeOutLoader() {
const loader = document.getElementById('loader');
loader.classList.add('fade-out');
setTimeout(() => {
loader.remove();
}, 1000);
}
setTimeout(fadeOutLoader, 2500);

View file

@ -1,25 +0,0 @@
/*
RESUME
*/
// Make elements visible as the user scrolls down the page by applying a class
window.addEventListener('scroll', function () {
const contents = document.querySelectorAll('.fade-in-up-section');
contents.forEach(content => {
const contentPosition = content.getBoundingClientRect().top;
const screenPosition = window.innerHeight / 1.2;
if (contentPosition < screenPosition) {
content.classList.add('visible');
}
});
});
// Get the name of the company from URL
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.has('name')) {
const paramValue = urlParams.get('name');
document.getElementById('companyName').innerHTML = ` ${paramValue}`;
}

View file

@ -1,17 +1,12 @@
---
title: i'm a writer
description: "i'm a writer..."
hide:
- toc
- navigation
title: Home
description: "words, visual, technicalities."
# hide:
# - toc
# - navigation
---
<link href="/src/stylesheets/_index.css" rel="stylesheet">
<style>
footer {
display: none !important;
}
</style>
<link href="/assets/css/_index.css" rel="stylesheet">
<div class='hero-text'>
<h2>hi, i'm g* and i write</h2>
@ -21,24 +16,17 @@ hide:
<div class='faces'>
<!-- <a href='#'> -->
<div id='visual-hover' class='face'>
<img src='/src/gugulet.hu-visual-face-1276x1276.webp' >
<img src='/assets/media/gugulet.hu-visual-face-1276x1276.webp' >
</div>
<!-- </a>
<a href='#'> -->
<div id='technical-hover' class='face'>
<img src='/src/gugulet.hu-technical-face-1276x1276.webp' >
<img src='/assets/media/gugulet.hu-technical-face-1276x1276.webp' >
</div>
<!-- </a>
<a href='#'> -->
<div id='writing-hover' class='face'>
<img src='/src/gugulet.hu-writing-face-1276x1276.webp' >
<img src='/assets/media/gugulet.hu-writing-face-1276x1276.webp' >
</div>
<!-- </a> -->
</div>
<div id='loader'>
<div><img src='/src/gugulet.hu-site-logo-350x350.png'></div>
<script src='/src/js/loader.js'></script>
</div>
<script src='/src/js/index.js'></script>

View file

@ -1,8 +1,22 @@
{% extends "base.html" %}
{% block extrahead %}
{% block site_meta %}
<meta name="robots"
content="nocache, noindex, noimageindex, nofollow, noarchive, nosnippet, notranslate, nositelinkssearchbox, noai, noimageai">
content="nocache, noindex, noimageindex, nofollow, noarchive, nosnippet, notranslate, nositelinkssearchbox, noai, noimageai" />
{% endblock %}
{% block analytics %}
<!-- Analytics tracking script -->
<script>
window.op = window.op || function () { var n = []; return new Proxy(function () { arguments.length && n.push([].slice.call(arguments)) }, { get: function (t, r) { return "q" === r ? n : function () { n.push([r].concat([].slice.call(arguments))) } }, has: function (t, r) { return "q" === r } }) }();
window.op('init', {
clientId: '4148df94-31a3-47ee-b998-6de681efcbd5',
trackScreenViews: true,
trackOutgoingLinks: true,
trackAttributes: true,
});
</script>
<script src="https://analytics.gugulet.hu/op1.js" defer async></script>
{% endblock %}
{% block content %}
@ -39,16 +53,4 @@
});
</script>
<!-- Analytics script to measure the performance of the website -->
<script>
window.op = window.op || function () { var n = []; return new Proxy(function () { arguments.length && n.push([].slice.call(arguments)) }, { get: function (t, r) { return "q" === r ? n : function () { n.push([r].concat([].slice.call(arguments))) } }, has: function (t, r) { return "q" === r } }) }();
window.op('init', {
clientId: '4148df94-31a3-47ee-b998-6de681efcbd5',
trackScreenViews: true,
trackOutgoingLinks: true,
trackAttributes: true,
});
</script>
<script src="https://analytics.gugulet.hu/op1.js" defer async></script>
{% endblock %}

View file

@ -6,12 +6,11 @@ hide:
- navigation
---
<link href='/src/stylesheets/_index.css' rel='stylesheet'>
<link href='/assets/css/_index.css' rel='stylesheet'>
<link rel="stylesheet" href="https://cdn.vidstack.io/player/theme.css" />
<link rel="stylesheet" href="https://cdn.vidstack.io/player/audio.css" />
<script src="https://cdn.vidstack.io/player" type="module"></script>
<div class='hero-text'>
<h2>hey<span id="companyName"></span>, i'm gugulethu</h2>
<h4>and i'm a pen for hire</h4>
@ -67,7 +66,7 @@ body {
<div class='tabbed-block'>
<h3>Copywriting</h3>
<div class='logo-and-title' >
<img src='/src/the-jupiter-drawing-room-logo-119x118.png' /><h6>The Jupiter Drawing Room</h6><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>
<img src='/assets/media/the-jupiter-drawing-room-logo-119x118.png' /><h6>The Jupiter Drawing Room</h6><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>
@ -75,7 +74,7 @@ body {
<div class='tabbed-block'>
<h3>Communications Specialist</h3>
<div class='logo-and-title' >
<img src='/src/allan-gray-logo-243x160.png' /><h6>Allan Gray</h6><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>
<img src='/assets/media/allan-gray-logo-243x160.png' /><h6>Allan Gray</h6><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>
@ -83,7 +82,7 @@ body {
<div class='tabbed-block'>
<h3>Content Manager</h3>
<div class='logo-and-title' >
<img src='/src/yoco-logo-206x206.png' /><h6>Yoco</h6><span class='annotate'>(1)</span><ol><li>Yoco is the largest payments processor for small- and medium-businesses in South Africa.</li></ol>
<img src='/assets/media/yoco-logo-206x206.png' /><h6>Yoco</h6><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>
@ -91,7 +90,7 @@ body {
<div class='tabbed-block'>
<h3>Senior Technical Writer</h3>
<div class='logo-and-title' >
<img src='/src/mambu-logo-110x112.png' /><h6>Mambu</h6><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>
<img src='/assets/media/mambu-logo-110x112.png' /><h6>Mambu</h6><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='three-column'>
@ -136,7 +135,7 @@ body {
<div class='status-green'>Current</div>
<h3>Documentation Engineer</h3>
<div class='logo-and-title' >
<img src='/src/spread-ai-logo-125x144.png' /><h6>SPREAD.ai</h6><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>
<img src='/assets/media/spread-ai-logo-125x144.png' /><h6>SPREAD.ai</h6><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='three-column'>
@ -272,7 +271,7 @@ body {
</h6>
<p>I have written and edited scripts for television and radio, including this advert.
</p>
<media-player title="Windhoek Jazz Festival" src="/src/windhoek-jazz-festival-50s.mp3">
<media-player title="Windhoek Jazz Festival" src="/assets/media/windhoek-jazz-festival-50s.mp3">
<media-provider></media-provider>
<media-audio-layout></media-audio-layout>
</media-player>
@ -304,7 +303,7 @@ body {
<div class='column'>
<div class='content'>
<a href="https://docs.spread.ai" target="_blank">
<img src='/src/spread-docs-site-3456x2160.png' width='100%' />
<img src='/assets/media/spread-docs-site-3456x2160.png' width='100%' />
</a>
<figcaption>Built the documentation site of SPREAD.ai and the CI/CD pipeline and review automation process.</figcaption>
</div>
@ -356,11 +355,5 @@ body {
</div>
<div id='loader'>
<div><img src='/src/gugulet.hu-site-logo-350x350.png'></div>
<div><img src='/assets/media/gugulet.hu-site-logo-350x350.png'></div>
</div>
<script src='/src/js/loader.js'></script>
<script src='/src/js/resume.js'></script>
<!-- Mava Widget -->
<script defer src="https://widget.mava.app" widget-version="v2" id="MavaWebChat" enable-sdk="false" data-token="ded472c7c84501fbb19280c79a857439a5c2dfb10dddc7dbe4c19c2443952c37"></script>

View file

@ -24,12 +24,13 @@ div.tooling p {
</style>
> ### Brief<br>
>
> **February 2022**<br>
> Establish the documentation function at SPREAD.
<div class='tooling' markdown>:simple-materialformkdocs: MkDocs Material ⋅ :material-graphql: GraphQL ⋅ :material-language-javascript: JavaScript ⋅ :material-language-python: Python ⋅ :simple-jinja: Jinja ⋅ :material-language-markdown: MarkDown ⋅ :simple-v: Vale ⋅ :simple-githubactions: GitHub Actions ⋅ :material-docker: Docker</div>
![An image of the current version of the SPREAD documentation site](/src/spread-docs-v3-3456x2170.png){ height=300px }
![An image of the current version of the SPREAD documentation site](/assets/media/spread-docs-v3-3456x2170.png){ height=300px }
## Challenge
@ -46,7 +47,7 @@ There was no documentation, except for a few Confluence pages put together by en
- Got to 50% product coverage.
- Wrote an initial style guide for general contributions
![The first published version of the SPREAD docs site](/src/spread-docs-v1-3024x1890.png){ height=300px }
![The first published version of the SPREAD docs site](/assets/media/spread-docs-v1-3024x1890.png){ height=300px }
**In the second quarter:**
@ -55,7 +56,7 @@ There was no documentation, except for a few Confluence pages put together by en
- Built the linting pipelines for general contributions.
- Document white-labelled products with internal customisations.
![The first public version of the SPREAD docs site](/src/spread-docs-v2-3024x1890.png){ height=300px }
![The first public version of the SPREAD docs site](/assets/media/spread-docs-v2-3024x1890.png){ height=300px }
**Within the first year:**
@ -87,4 +88,4 @@ There was no documentation, except for a few Confluence pages put together by en
<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> gugulet.hu/dev
</div>
</a>
</div>
</div>

View file

@ -24,13 +24,13 @@ div.tooling p {
</style>
> ### Brief<br>
>
> **November 2023**<br>
> Create documentation for a command-line interface (CLI) used by banking engineering teams to perform actions in Mambu.
<div class='tooling' markdown>:material-language-typescript: TypeScript ⋅ :material-nodejs: NodeJS</div>
![An image of the Mambu CLI](../src/mambu-cli-1638x1355.jpg){ height=300px }
![An image of the Mambu CLI](../assets/media/mambu-cli-1638x1355.jpg){ height=300px }
## Challenge

View file

@ -24,12 +24,13 @@ div.tooling p {
</style>
> ### Brief<br>
>
> **March 2021**<br>
> Own the documentation for the low-code orchestrator for integrations into banking services.
<div class='tooling' markdown>:simple-hugo: Hugo</div>
![An image of a process in the Mambu Process Orchestartor](/src/mpo-complex-process-2355x1237.png){ height=300px }
![An image of a process in the Mambu Process Orchestartor](/assets/media/mpo-complex-process-2355x1237.png){ height=300px }
## Challenge
@ -55,4 +56,4 @@ Partner with Corezoid to help them develop their documentation alongside ours. G
<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> gugulet.hu/dev
</div>
</a>
</div>
</div>

View file

@ -15,10 +15,11 @@ hide:
</style>
> ### Brief<br>
>
> **October 2025**<br>
> Briefly assess the quality of the [product documentation](https://www.pcvue.com/ProductHelp/PcVue/en/Content/AboutHelp/Welcome_PubWeb.php) of PcVue.
![An image of the landing page of documentation section of PcVue](/src/pcvue-documentation-2728x1756.png){ height=300px }
![An image of the landing page of documentation section of PcVue](/assets/media/pcvue-documentation-2728x1756.png){ height=300px }
## Content clarity
@ -28,8 +29,9 @@ hide:
_The HMI (1) for your project is composed of mimics. Mimics (2) are easily and quickly developed to form menus, overviews, process diagrams, trend viewers and so on..._
{ .annotate }
1. Even if the acronym has been written out elsewhere it needs to be re-introduced on every new page.
2. Mimics are a new concept as well, and the way this is written assumes the reader already knows what they are.
1. Even if the acronym has been written out elsewhere it needs to be re-introduced on every new page.
2. Mimics are a new concept as well, and the way this is written assumes the reader already knows what they are.
---
**Assumed knowledge**: Many pages presuppose a significant amount of technical knowledge, which could confuse readers - especially those new to the industry. The first principle of technical writing is that every page is page one and the reader should find all the context they need on the page (or linked on the page).
@ -47,7 +49,7 @@ This is especially jarring on the landing page of the Product Documentation: PcV
**Search functionality**: The search feature needs enhancement to accommodate natural language queries rather than expecting users to know logical operators or regular expressions. Every reader's expectation is a search experience as good as Google; especially as the main way to navigate a large documentation set is through the search box.
<figure>
<img src='/src/what-is-hmi.gif' alt='A simple search to find what HMI means'>
<img src='/assets/media/what-is-hmi.gif' alt='A simple search to find what HMI means'>
<figcaption>The search function is slow, fragmented, and can't handle questions</figcaption>
</figure>
@ -73,20 +75,19 @@ This is especially jarring on the landing page of the Product Documentation: PcV
**Print layout**: The print layout when using the print button is not well-styled for PDFs or physical printing. The text is too small, the spacing and styling is a facsimile of the web view when it should be simplified for the print view. Some compliance functions need good PDF functionality to prove that content was made available at a certain time for auditing purposes.
<div class="grid cards" markdown>
- __PcVue print layout__
- **PcVue print layout**
---
![The PcVue print layout](/src/pcvue-print-layout-1573x1433.png)
![The PcVue print layout](/assets/media/pcvue-print-layout-1573x1433.png)
- __Styled print layout__
- **Styled print layout**
---
![A styled print layout](/src/spread-print-layout-1596x1872.png)
![A styled print layout](/assets/media/spread-print-layout-1596x1872.png)
</div>

View file

@ -6,8 +6,7 @@ hide:
- navigation
---
<link href='/src/stylesheets/_index.css' rel='stylesheet'>
<link href='/assets/css/_index.css' rel='stylesheet'>
<div class='hero-text'>
<h2>sawubona, i'm g*</h2>