.

docs/index3.md

@@ -0,0 +1,75 @@
+---
+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>