---
title: Gugulethu Hlekwayo
description: "This is not the website you're looking for."
hide:
        - toc
        - navigation
        - footer
---

<script>
document.addEventListener('DOMContentLoaded', function() {
    const columns = document.querySelectorAll('.column');

    columns.forEach(column => {
        column.addEventListener('mouseover', function() {
            // Remove background images from all other columns
            columns.forEach(otherColumn => {
                if (otherColumn !== this) {
                    otherColumn.style.backgroundImage = 'none';
                }
            });

            // Show content in other columns
            const contents = document.querySelectorAll('.content');
            contents.forEach(content => {
                if (content.parentElement !== this) {
                    content.style.opacity = '1';
                    content.style.animation = 'fadeIn 0.3s ease-out forwards';
                }
            });
        });

        column.addEventListener('mouseout', function() {
            // Reset styles when mouse leaves
            columns.forEach(otherColumn => {
                otherColumn.style.backgroundImage = otherColumn.dataset.originalBackground;
            });

            const contents = document.querySelectorAll('.content');
            contents.forEach(content => {
                content.style.opacity = '0';
                content.style.animation = '';
            });
        });

        // Store original background images
        column.dataset.originalBackground = column.style.backgroundImage;
    });
});
</script>

<link href="https://api.fonts.coollabs.io/css2?family=Lato:wght@300;400;700&family=Libre+Baskerville&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">

<style>
     @import url(src/stylesheets/index.css)
</style>


<div class="grid-container">
        <div class="column" style="background-image: url('src/gugulet.hu-visual-face-1276x1276.webp')">
               <div class="content">
                    <div style="font-family: 'Lato', mono">a thousand words at a time</div>
               </div>
        </div>
        <div class="column" style="background-image: url('src/gugulet.hu-writing-face-1276x1276.webp')">
               <div class="content">
                    <div style="font-family: 'Libre Baskerville', mono">words for humans</div>
               </div>
        </div>
        <div class="column" style="background-image: url('src/gugulet.hu-technical-face-1276x1276.webp')">
               <div class="content">
                    <div style="font-family: 'DM Mono', mono">> console.log("words")</div>
               </div>
        </div>
    </div>