Resized and reformatted images.

content/assets/css/resume.css

@@ -93,11 +93,11 @@ body {
      }
 
      .mambu {
-          background-image: url("../media/mambu-logo-272x263.png");
+          background-image: url("../media/mambu-logo-272x263.webp");
      }
 
      .spread {
-          background-image: url("../media/spread-ai-logo-125x144.png");
+          background-image: url("../media/spread-ai-logo-125x144.webp");
      }
 
      .mambu,

content/resume.md

@@ -25,25 +25,25 @@ title: Resume
      <div class="metadetails">
           <div>
                <figure>
-                    <img src="assets/media/berlin-logo-1000x1000.png" alt="City of Berlin logo" >
+                    <img src="assets/media/berlin-logo-200x200.webp" 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" >
+                    <img src="assets/media/id-card-icon-512x512.webp" alt="ID card icon" >
                     <figcaption>German <br>Permanent Residency</figcaption>
                </figure>
           </div>
           <div>
                <figure>
-                    <img src="assets/media/languages-icon-512x512.png" alt="Languages icon" >
+                    <img src="assets/media/languages-icon-512x512.webp" alt="Languages icon" >
                     <figcaption>Fluent 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" >
+                    <img src="assets/media/technical-writing-icon-512x512.webp" 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>
@@ -95,7 +95,7 @@ title: Resume
      </label>
      <div class="modal" id="mambu-ecosystem-modal">
           <div class="modal-content">
-               <img src="assets/media/mpo-complex-process-2355x1237.png" alt="An image of a process in the Mambu Process Orchestartor" height="300px" >
+               <img src="assets/media/mpo-complex-process-1200x630.webp" alt="An image of a process in the Mambu Process Orchestartor" height="300px" >
                <h5>Challenge</h5>
                <p>Mambu Process Orchestrator, a white-labelled product built on top of the Corezoid low-code engine, had no documentation, but was already being used by clients. Some with highly complex workflows that were beginning to break in unexpected ways. The underlying technology was built by a Ukrainian company, who were under strain following the invasion by Russia in the same time period.</p>
                <h5>Solution</h5>
@@ -113,7 +113,7 @@ title: Resume
      </label>
      <div class="modal" id="mambu-cli-modal">
           <div class="modal-content">
-               <img src="assets/media/mambu-cli-1638x1355.jpg" alt="An image of the Mambu CLI" height="300px" >
+               <img src="assets/media/mambu-cli-994x800.webp" alt="An image of the Mambu CLI" height="300px" >
                <h5>Challenge</h5>
                <p>Document the command-line context as efficiently as possible, with little support from the developing team. Mambu CLI was in prototype and the team had no time to help me document the commands, flags, topics, and functioning of the CLI.</p>
                <h5>Solution</h5>
@@ -130,7 +130,7 @@ title: Resume
      </label>
      <div class="modal" id="spread-docs-modal">
           <div class="modal-content">
-               <img src="assets/media/spread-docs-v3-3456x2170.png" alt="An image of Spread documentation site" height="300px" >
+               <img src="assets/media/spread-docs-v3-1500x970.webp" alt="An image of Spread documentation site" height="300px" >
                <h5>Challenge</h5>
                <p>There was no documentation, except for a few Confluence pages put together by engineers. The challenge was to create a documentation site, create the processes and pipelines to maintain it, and to write the content.</p>
                <h5>Solution</h5>
@@ -144,7 +144,7 @@ title: Resume
                          <li>Wrote an initial style guide for other contributors.</li>
                     </ul>
                </p>
-               <img alt="The first published version of the SPREAD docs site" src="assets/media/spread-docs-v1-3024x1890.png" height="300px" class="body-image" >
+               <img alt="The first published version of the SPREAD docs site" src="assets/media/spread-docs-3v1-1500x938.webp" height="300px" class="body-image" >
                <p><strong>In the second quarter:</strong>
                     <ul>
                          <li>Got product coverage to 90%.</li>
@@ -153,7 +153,7 @@ title: Resume
                          <li>Documented white-labelled products with internal customisations.</li>
                     </ul>
                </p>
-               <img alt="The first public version of the SPREAD docs site" src="assets/media/spread-docs-v2-3024x1890.png" height="300px" class="body-image" >
+               <img alt="The first public version of the SPREAD docs site" src="assets/media/spread-docs-v2-1500x938.webp" height="300px" class="body-image" >
                <p><strong>Within the first year:</strong>
                     <ul>
                          <li>Published the documentation site publicly.</li>
@@ -181,7 +181,7 @@ title: Resume
                     <h3>Technical</h3>
                     <div class="technical-icons">
                          <div class="technical">
-                              <span><img src="assets/media/doc-detective-logo-200x200.png" alt="Zensical logo" > <abbr title='Doc Detective allows you to test and check documentation for accuracy and errors. Used this tool to keep the Spread documentation up to date.'>Doc Detective</abbr></span>
+                              <span><img src="assets/media/doc-detective-logo-200x200.webp" alt="Zensical logo" > <abbr title='Doc Detective allows you to test and check documentation for accuracy and errors. Used this tool to keep the Spread documentation up to date.'>Doc Detective</abbr></span>
                          </div>
                          <div class="technical">
                               <span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.983 11.078h2.119a.186.186 0 0 0 .186-.185V9.006a.186.186 0 0 0-.186-.186h-2.119a.185.185 0 0 0-.185.185v1.888c0 .102.083.185.185.185m-2.954-5.43h2.118a.186.186 0 0 0 .186-.186V3.574a.186.186 0 0 0-.186-.185h-2.118a.185.185 0 0 0-.185.185v1.888c0 .102.082.185.185.185m0 2.716h2.118a.187.187 0 0 0 .186-.186V6.29a.186.186 0 0 0-.186-.185h-2.118a.185.185 0 0 0-.185.185v1.887c0 .102.082.185.185.186m-2.93 0h2.12a.186.186 0 0 0 .184-.186V6.29a.185.185 0 0 0-.185-.185H8.1a.185.185 0 0 0-.185.185v1.887c0 .102.083.185.185.186m-2.964 0h2.119a.186.186 0 0 0 .185-.186V6.29a.185.185 0 0 0-.185-.185H5.136a.186.186 0 0 0-.186.185v1.887c0 .102.084.185.186.186m5.893 2.715h2.118a.186.186 0 0 0 .186-.185V9.006a.186.186 0 0 0-.186-.186h-2.118a.185.185 0 0 0-.185.185v1.888c0 .102.082.185.185.185m-2.93 0h2.12a.185.185 0 0 0 .184-.185V9.006a.185.185 0 0 0-.184-.186h-2.12a.185.185 0 0 0-.184.185v1.888c0 .102.083.185.185.185m-2.964 0h2.119a.185.185 0 0 0 .185-.185V9.006a.185.185 0 0 0-.184-.186h-2.12a.186.186 0 0 0-.186.186v1.887c0 .102.084.185.186.185m-2.92 0h2.12a.185.185 0 0 0 .184-.185V9.006a.185.185 0 0 0-.184-.186h-2.12a.185.185 0 0 0-.184.185v1.888c0 .102.082.185.185.185M23.763 9.89c-.065-.051-.672-.51-1.954-.51q-.508.001-1.01.087c-.248-1.7-1.653-2.53-1.716-2.566l-.344-.199-.226.327c-.284.438-.49.922-.612 1.43-.23.97-.09 1.882.403 2.661-.595.332-1.55.413-1.744.42H.751a.75.75 0 0 0-.75.748 11.4 11.4 0 0 0 .692 4.062c.545 1.428 1.355 2.48 2.41 3.124 1.18.723 3.1 1.137 5.275 1.137a15.7 15.7 0 0 0 2.93-.266 12.3 12.3 0 0 0 3.823-1.389 10.5 10.5 0 0 0 2.61-2.136c1.252-1.418 1.998-2.997 2.553-4.4h.221c1.372 0 2.215-.549 2.68-1.009.309-.293.55-.65.707-1.046l.098-.288Z"></path></svg> <abbr title="Docker allows you to create and run images of custom development environments on top of any system. At Spread, the documentation site was deployed as a containerised application.">Docker</abbr></span>
@@ -223,7 +223,7 @@ title: Resume
                               <span class="twemoji"><svg version="1.0" viewBox="0 0 417.000000 387.000000" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6"><defs></defs><g transform="translate(0.000000,387.000000) scale(0.100000,-0.100000)" fill="currentColor" stroke="none"><path d="M2761 3207 c-30 -61 -162 -329 -293 -593 -131 -265 -238 -488 -238 -495 0 -8 75 -165 166 -349 92 -184 170 -346 175 -359 8 -19 12 -21 24 -11 8 7 15 16 15 20 0 5 132 275 293 602 162 326 370 748 464 938 94 190 169 348 166 353 -2 4 -165 7 -361 7 l-357 0 -54 -113z"></path><path d="M560 2467 c0 -2 20 -39 45 -83 25 -43 45 -82 45 -86 0 -4 134 -279 299 -610 452 -914 541 -1095 541 -1107 0 -7 12 -16 26 -21 33 -13 684 -13 704 0 12 8 13 13 3 27 -7 10 -30 54 -52 98 -41 84 -332 674 -673 1365 -110 223 -205 408 -212 412 -10 7 -726 12 -726 5z"></path></g></svg> <abbr title="Vale allows you to language lint content. All of my documentation work has included Vale as part of the publication process.">Vale</abbr></span>
                          </div>
                          <div class="technical">
-                              <span><img src="assets/media/zensical-logo-200x200.png" alt="Zensical logo" > <abbr title='Zensical is the successor to MkDocs Material. This site uses Zensical to create a heavily-customized experience.'>Zensical</abbr></span>
+                              <span><img src="assets/media/zensical-logo-200x200.webp" alt="Zensical logo" > <abbr title='Zensical is the successor to MkDocs Material. This site uses Zensical to create a heavily-customized experience.'>Zensical</abbr></span>
                          </div>
                     </div>
                </li>
@@ -252,19 +252,19 @@ title: Resume
                     <h3>Media</h3>
                     <div class="media-tools" >
                          <figure>
-                              <img src="assets/media/mermaid-logo-200x200.png" alt="The Mermaid logo" >
+                              <img src="assets/media/mermaid-logo-200x200.webp" alt="The Mermaid logo" >
                               <figcaption><strong>Mermaid</strong><br>Created programmatic diagrams to explain complex interactions.</figcaption>
                          </figure>
                     </div>
                     <div class="media-tools" >
                          <figure>
-                              <img src="assets/media/affinity-logo-160x160.png" alt="The Affinity logo" >
+                              <img src="assets/media/affinity-logo-160x160.webp" alt="The Affinity logo" >
                               <figcaption><strong>Affinity</strong><br>Edited images and created PDF user guides for legacy clients.</figcaption>
                          </figure>
                     </div>
                     <div class="media-tools" >
                          <figure>
-                              <img src="assets/media/davinciresolve-logo-640x640.png" alt="The Da Vinci Resolve logo" >
+                              <img src="assets/media/davinciresolve-logo-200x200.webp" alt="The Da Vinci Resolve logo" >
                               <figcaption><strong>Da Vinci Resolve</strong><br>Edited video run-throughs for tutorials.</figcaption>
                          </figure>
                     </div>
@@ -273,10 +273,10 @@ title: Resume
                     <h3>AI</h3>
                          <div class="grid cards ai">
                               <ul>
-                                   <li><abbr title="Used Ollama to manage, test, and run open-source models locally."><img src="assets/media/ollama-logo-640x640.png" alt="The Ollama logo" ></abbr></li>
-                                   <li><abbr title="Created workflows to review drafts as reader personas. This was useful for engineers when drafting content."><img src="assets/media/n8n-logo-640x640.png" alt="The n8n logo" ></abbr></li>
-                                   <li><abbr title="Experimented with offering our own Model Context Protocol server at Spread. Ultimately it proved more useful for internal use."><img src="assets/media/modelcontextprotocol-logo-640x640.png" alt="The Model Context Protocol logo" ></abbr></li>
-                                   <li><abbr title="Used Krita (and its plugins) to create simple AI-generated graphics locally. An easier interface than SwarmUI."><img src="assets/media/krita-logo-640x640.png" alt="The Krita logo" ></abbr></li>
+                                   <li><abbr title="Used Ollama to manage, test, and run open-source models locally."><img src="assets/media/ollama-logo-250x250.webp" alt="The Ollama logo" ></abbr></li>
+                                   <li><abbr title="Created workflows to review drafts as reader personas. This was useful for engineers when drafting content."><img src="assets/media/n8n-logo-250x250.webp" alt="The n8n logo" ></abbr></li>
+                                   <li><abbr title="Experimented with offering our own Model Context Protocol server at Spread. Ultimately it proved more useful for internal use."><img src="assets/media/modelcontextprotocol-logo-250x250.webp" alt="The Model Context Protocol logo" ></abbr></li>
+                                   <li><abbr title="Used Krita (and its plugins) to create simple AI-generated graphics locally. An easier interface than SwarmUI."><img src="assets/media/krita-logo-200x200.webp" alt="The Krita logo" ></abbr></li>
                               </ul>
                          </div>
                </li>
@@ -290,7 +290,7 @@ title: Resume
                <li>
                     <div>
                          <figure>
-                              <img src="assets/media/uct-logo-250x306.png" alt="University of Cape Town logo" >
+                              <img src="assets/media/uct-logo-204x250.webp" alt="University of Cape Town logo" >
                               <figcaption><strong>University of Cape Town</strong><br>Bachelor of Arts (Honours)<br>History</figcaption>
                          </figure>
                     </div>
@@ -306,7 +306,7 @@ title: Resume
                <li>
                     <div>
                          <figure>
-                              <img src="assets/media/berlin-writers-workshop-1516x1516.webp" alt="Berlin Writers' Workshop logo" >
+                              <img src="assets/media/berlin-writers-workshop-118x118.webp" alt="Berlin Writers' Workshop logo" >
                               <figcaption><strong>Berlin Writers' Workshop</strong><br>Creative Writing</figcaption>
                          </figure>
                     </div>
@@ -314,7 +314,7 @@ title: Resume
                <li>
                     <div>
                          <figure>
-                              <img src="assets/media/coursera-logo-600x600.png" alt="Coursera logo" >
+                              <img src="assets/media/coursera-logo-250x250.webp" alt="Coursera logo" >
                               <figcaption><strong>Coursera</strong><br>Building intelligent agents using DeepSeek and N8N</figcaption>
                          </figure>
                     </div>
@@ -324,17 +324,17 @@ title: Resume
 </div>
 
 <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><a href="https://git.gugulet.hu/explore" target="_blank"><img src="assets/media/git-link-512x512.webp" 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.webp" alt="Link to LinkedIn profile"></a></div>
+     <div><a href="https://gugulet.hu" target="_blank"><img src="assets/media/site-link-512x512.webp" 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>
-     <input type="checkbox" id="faq-toggle" class="visually-hidden" tabindex="-1">
      <div class="faq">
           <h3>Questions and Answers</h3>
           <p>Why did you resign from your last job?</p>