75 lines
2.6 KiB
Markdown
75 lines
2.6 KiB
Markdown
---
|
|
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>
|