Halfway through resume page. Need to add modals.

This commit is contained in:
g_it 2026-02-13 22:41:52 +01:00
commit 3f38f601e9
Signed by untrusted user who does not match committer: g_it
GPG key ID: A2B0A7C06A054627
30 changed files with 514 additions and 194 deletions

View file

@ -2,10 +2,6 @@
description: experience, skills, education.
extra_css:
- assets/css/resume.css
extra_js:
- assets/js/gsap/gsap.min.js
- assets/js/gsap/ScrollTrigger.min.js
- assets/js/resume.js
hide:
- toc
- navigation
@ -17,21 +13,138 @@ title: Resume
<!-- markdownlint-disable MD033 -->
<div class="portfolio">
<div class="page-menu">
<span><a href="#experience">experience</a></span>
<span><a href="#demo">demo</a></span>
<span><a href="#learning">learning</a></span>
</div>
<div class="hero">
<div>Gugulethu Hlekwayo</div>
<div class="section hero">
<div class="title">Gugulethu Hlekwayo</div>
<div class="metadetails">
<div>
<figure>
<img src="assets/media/berlin-logo-1000x1000.png" alt="City of Berlin logo" >
<figcaption>Based in <br>Berlin, Germany</figcaption>
</figure>
</div>
<div>
<figure>
<img src="assets/media/id-card-icon-512x512.png" alt="ID card icon" >
<figcaption>German <br>Permanent Resident</figcaption>
</figure>
</div>
<div>
<figure>
<img src="assets/media/languages-icon-512x512.png" alt="Languages icon" >
<figcaption>Native English, B1 German,<br> isiZulu, isiXhosa, A1 Mandarin</figcaption>
</figure>
</div>
<div>
<figure>
<img src="assets/media/technical-writing-icon-512x512.png" alt="Technical Writing icon" >
<figcaption><abbr title="8 years in content management, 2 years in copywriting, and 5 years in Technical Writing" >15 years</abbr> of <br>professional writing experience</figcaption>
</figure>
</div>
</div>
</div>
<div class="experience">
<div class="section grid cards" id="experience" >
<div class="grid cards">
<ul>
<li>
<div class="mambu">
<h2>Senior Technical Writer</h2>
<div class="company"><abbr title="Mambu is a Software-as-a-Service (SaaS) banking backend that provides services to banks such as N26 and Solaris.">MAMBU</abbr> <span>2021 to 2023</span></div>
<div class="job-blurb">Promoted to team lead; managing a team of three technical writers.</div>
<div class="job-achievements">
<h5>Documented the Mambu ecosystem <span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M384 32c35.3 0 64 28.7 64 64v320c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96c0-35.3 28.7-64 64-64zM272 296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24H184c-13.3 0-24 10.7-24 24s10.7 24 24 24h54.1l-103 103c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l103-103z"></path></svg></span></h5>
<p>Documented integrations, such as payment and compliance services, and the low-code orchestrator that clients used for their flows.</p>
<h5>Documented a command-line interface <span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M384 32c35.3 0 64 28.7 64 64v320c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96c0-35.3 28.7-64 64-64zM272 296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24H184c-13.3 0-24 10.7-24 24s10.7 24 24 24h54.1l-103 103c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l103-103z"></path></svg></span></h5>
<p>Documented the Mambu <abbr title='Command-line interfaces use text instead of UI elements.'>CLI</abbr> for external engineers to connect to the backend directly.</p>
<h5>Assumed leadership role</h5>
<p>Promoted to team lead, which shifted the role into more managerial responsibilities on top of working on documentation.</p>
</div>
</div>
</li>
<li>
<div class="spread">
<h2>Documentation Engineer</h2>
<div class="company"><abbr title="SPREAD 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.">SPREAD</abbr> <span>2024 to 2026</span></div>
<div class="job-blurb">Hired as the first Technical Writer to establish the documentation function.</div>
<div class="job-achievements">
<h5>Built a docs-as-code publishing pipeline <span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M384 32c35.3 0 64 28.7 64 64v320c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96c0-35.3 28.7-64 64-64zM272 296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24H184c-13.3 0-24 10.7-24 24s10.7 24 24 24h54.1l-103 103c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l103-103z"></path></svg></span></h5>
<p>Built a pipeline that used GitHub Actions to build the documentation site, Vale to lint content, Docker to deploy the site, and shell scripting.</p>
<h5>Established the documentation function <span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M384 32c35.3 0 64 28.7 64 64v320c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96c0-35.3 28.7-64 64-64zM272 296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24H184c-13.3 0-24 10.7-24 24s10.7 24 24 24h54.1l-103 103c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l103-103z"></path></svg></span></h5>
<p>Socialized the rest of the company to documentation processes and workings; this included onboarding colleagues to edit and use docs.</p>
<h5>Documented the full product range</h5>
<p>Documented the full product range within two quarters. Kept the documentation up to date through two product refreshes.</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="skills">
<div class="section" id="demo" >
<div class="grid cards">
<ul>
<li>
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M195.1 9.5c3-14.8 16.1-25.5 31.3-25.5h59.8c15.2 0 28.3 10.7 31.3 25.5l14.5 70c14.1 6 27.3 13.7 39.3 22.8l67.8-22.5c14.4-4.8 30.2 1.2 37.8 14.4l29.9 51.8c7.6 13.2 4.9 29.8-6.5 39.9L447 233.3c.9 7.4 1.3 15 1.3 22.7s-.5 15.3-1.3 22.7l53.4 47.5c11.4 10.1 14 26.8 6.5 39.9L477 417.9c-7.6 13.1-23.4 19.2-37.8 14.4l-67.8-22.5c-12.1 9.1-25.3 16.7-39.3 22.8l-14.4 69.9c-3.1 14.9-16.2 25.5-31.3 25.5h-59.8c-15.2 0-28.3-10.7-31.3-25.5l-14.4-69.9c-14.1-6-27.2-13.7-39.3-22.8l-68.1 22.5c-14.4 4.8-30.2-1.2-37.8-14.4L5.8 366.1c-7.6-13.2-4.9-29.8 6.5-39.9l53.4-47.5c-.9-7.4-1.3-15-1.3-22.7s.5-15.3 1.3-22.7l-53.4-47.5C.9 175.7-1.7 159 5.8 145.9l29.9-51.8c7.6-13.2 23.4-19.2 37.8-14.4l67.8 22.5c12.1-9.1 25.3-16.7 39.3-22.8zM256.3 336a80 80 0 1 0-.6-160 80 80 0 1 0 .6 160"></path></svg></span>
<strong>Technical</strong>
</li>
<li>
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M64 64C28.7 64 0 92.7 0 128v256c0 35.3 28.7 64 64 64h448c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64zm16 64h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16M64 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16zm112-112h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16m-16 112c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16zm16 80h224c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16m80-176c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16m80-80c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16m80-80c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16zm16 80h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16"></path></svg></span>
<strong>Writing</strong>
</li>
<li>
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 15a3 3 0 0 1 3 3 3 3 0 0 1-3 3 2.99 2.99 0 0 1-2.83-2H14v-2h1.17c.41-1.17 1.52-2 2.83-2m0 2a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1m0-9a1.43 1.43 0 0 0 1.43-1.43 1.43 1.43 0 1 0-2.86 0A1.43 1.43 0 0 0 18 8m0-5.43a4 4 0 0 1 4 4C22 9.56 18 14 18 14s-4-4.44-4-7.43a4 4 0 0 1 4-4M8.83 17H10v2H8.83A2.99 2.99 0 0 1 6 21a3 3 0 0 1-3-3c0-1.31.83-2.42 2-2.83V14h2v1.17c.85.3 1.53.98 1.83 1.83M6 17a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1M6 3a3 3 0 0 1 3 3c0 1.31-.83 2.42-2 2.83V10H5V8.83A2.99 2.99 0 0 1 3 6a3 3 0 0 1 3-3m0 2a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1m5 14v-2h2v2zm-4-6H5v-2h2z"></path></svg></span>
<strong>Process</strong>
</li>
</ul>
</div>
</div>
<div class="education">
<div class="section" id="learning" >
<div class="grid cards">
<ul>
<li>
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="m0 32 34.9 395.8L191.5 480l157.6-52.2L384 32zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1z"></path></svg></span> <strong><abbr title="Hyper Text Markup Language">HTML</abbr></strong> for content and structure
</li>
<li>
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M0 32v448h448V32zm243.8 349.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6"></path></svg></span> <strong>JavaScript</strong> for interactivity
</li>
<li>
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="m480 32-64 368-223.3 80L0 400l19.6-94.8h82l-8 40.6L210 390.2l134.1-44.4 18.8-97.1H29.5l16-82h333.7l10.5-52.7H56.3l16.3-82z"></path></svg></span> <strong>CSS</strong> for text running out of boxes
</li>
<li>
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M483.1 159.7c10.9-24.6 21.4-60.4 21.4-87.9 0-72.7-79.6-98.4-209.7-38.6C187.2 26 83.6 106.9 57.7 219.7c30.9-34.9 78.3-82.3 122-101.2C125.4 166.8 79.1 227.9 44 291.7c-20.7 37.9-44 99.2-44 145 0 98.6 92.9 86.5 180.3 42 31.4 15.4 66.6 15.6 101.7 15.6 97.1 0 184.2-54.3 216.8-146H378c-52.5 88.6-196.8 53-196.8-47.4H510c6.4-43.6-1.7-95.7-26.9-141.2M64.6 346.9c17.7 51.1 53.7 95.8 100.2 123.3C76.1 519.1-8.4 499.3 64.6 346.9M180.5 238c2-55.2 50.3-94.9 104-94.9 53.4 0 102 39.7 104 94.9zM365.1 50.4c21.4-10.3 48.6-22 72.6-22 31.4 0 54.3 21.7 54.3 53.7 0 20-7.4 49-14.6 67.9-26.3-42.3-66-81.6-112.3-99.6"></path></svg></span> <strong>Internet Explorer</strong> ... huh?
</li>
</ul>
</div>
</div>
<div class="faq">
<div class="prefooter" >
<div><a href="https://git.gugulet.hu/explore" target="_blank"><img src="assets/media/git-link-512x512.png" alt="Self-hosted ForgeJo instance with git repos"></a></div>
<div><a href="https://linkedin.com/in/gugulet-hu" target="_blank"><img src="assets/media/linkedin-logo-512x512.png" alt="Link to LinkedIn profile"></a></div>
<div><a href="https://gugulet.hu" target="_blank"><img src="assets/media/site-link-512x512.png" alt="Link to the home page"></a></div>
</div>
<div class="faq-container">
<input type="checkbox" id="faq-toggle" class="visually-hidden">
<label for="faq-toggle" class="question-icon">
<span class="icon question"><p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512m0-336c-17.7 0-32 14.3-32 32 0 13.3-10.7 24-24 24s-24-10.7-24-24c0-44.2 35.8-80 80-80s80 35.8 80 80c0 47.2-36 67.2-56 74.5v3.8c0 13.3-10.7 24-24 24s-24-10.7-24-24v-8.1c0-20.5 14.8-35.2 30.1-40.2 6.4-2.1 13.2-5.5 18.2-10.3 4.3-4.2 7.7-10 7.7-19.6 0-17.7-14.3-32-32-32zm-32 192a32 32 0 1 1 64 0 32 32 0 1 1-64 0"></path></svg></span></p></span>
<span class="icon close"><p><span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-18C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m2.59 6L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41z"></path></svg></span></p></span>
</label>
<div class="faq">
<h3>Questions and Answers</h3>
<p>Why did you resign from your last job?</p>
<blockquote>Grey / Gray</blockquote>
<p>Do you need visa support? Do you have the right to work in Germany?</p>
<blockquote>Sesame seed</blockquote>
<p>Do you need visa support? Do you have the right to work in Germany (and the EU)?</p>
<p>Can you work remotely?</p>
<p>Are you able to work on your own?</p>
<p>When can you start?</p>
</div>
</div>