removing test files.
This commit is contained in:
g*
parent
2fcf9bfdda
commit
0ac9709ec8
10 changed files with 2 additions and 377 deletions
196
docs/index2.md
196
docs/index2.md
|
|
@ -1,196 +0,0 @@
|
|||
---
|
||||
title: Gugulethu Hlekwayo
|
||||
description: "This is not the website you're looking for."
|
||||
hide:
|
||||
- toc
|
||||
- navigation
|
||||
- footer
|
||||
---
|
||||
|
||||
<link href="https://api.fonts.coollabs.io/css2?family=Lato:wght@300;400;700&family=Libre+Baskerville&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
header, nav {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
height: 100%;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.md-content .md-typeset h1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 3rem;
|
||||
padding: 2rem;
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Left half - Image background */
|
||||
.image-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 1276px;
|
||||
max-height: 1276px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
transition: all 0.5s ease-in-out;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.image-container::before,
|
||||
.image-container::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.image-container:hover::before,
|
||||
.image-container:hover::after {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Right half - Menu */
|
||||
.menu-container {
|
||||
padding: 2rem;
|
||||
background-color: var(--md-default-bg-color);
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
list-style: none !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
text-align: left;
|
||||
padding-left: 0;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.menu-list li {
|
||||
margin: 1.5rem 0;
|
||||
transition: all 0.3s ease;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--md-primary-fg-color--light);
|
||||
}
|
||||
|
||||
.menu-list .description {
|
||||
font-family: 'Libre Baskerville', serif;
|
||||
font-size: 0.7rem;
|
||||
color: #666;
|
||||
text-align: left;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.menu-list li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.menu-list a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
font-size: 1.2rem;
|
||||
padding: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-list a:hover {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
min-height: auto;
|
||||
height: calc(100vh - 4rem);
|
||||
}
|
||||
|
||||
.image-container {
|
||||
max-width: none !important;
|
||||
width: 95vw;
|
||||
}
|
||||
|
||||
.menu-list .description {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid-item image-container" style="background-image: url(src/gugulet.hu-unedited-face-1276x1276.webp)" ></div>
|
||||
|
||||
<div class="grid-item menu-container">
|
||||
<ul class="menu-list">
|
||||
<li data-image="unedited" >
|
||||
<a href="#">Resumé</a>
|
||||
<div class="description">View my professional summary and work experience.</div>
|
||||
</li>
|
||||
<li data-image="writing" >
|
||||
<a href="#">Writing</a>
|
||||
<div class="description">Explore my articles and creative writing pieces.</div>
|
||||
</li>
|
||||
<li data-image="technical" >
|
||||
<a href="#">Technical</a>
|
||||
<div class="description">Discover my coding projects and technical skills.</div>
|
||||
</li>
|
||||
<li data-image="visual" >
|
||||
<a href="#">Visual</a>
|
||||
<div class="description">Browse my photography and visual projects.</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.querySelectorAll('.menu-list li').forEach(item => {
|
||||
const imageData = item.dataset.image;
|
||||
|
||||
item.addEventListener('mouseover', function() {
|
||||
// Set the background image for the container
|
||||
const container = document.querySelector('.image-container');
|
||||
container.style.backgroundImage = `url('src/gugulet.hu-${imageData}-face-1276x1276.webp')`;
|
||||
|
||||
// Add a small delay to ensure the new image loads before applying transition
|
||||
setTimeout(() => {
|
||||
container.style.transition = 'background-image 0.5s ease-in-out';
|
||||
}, 50);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
---
|
||||
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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 141 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 189 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 206 KiB |
|
|
@ -1,104 +0,0 @@
|
|||
@import url(_colours.css);
|
||||
|
||||
header,
|
||||
nav,
|
||||
footer,
|
||||
.md-content .md-typeset h1 {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
height: 100%;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.md-grid {
|
||||
max-width: 100vw;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.md-content__inner {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 50px;
|
||||
min-height: 95vh;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.column {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.column:hover {
|
||||
opacity: 1;
|
||||
filter: invert(50%);
|
||||
}
|
||||
|
||||
.content {
|
||||
position: static;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
color: var(--md-primary-fg-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.column:hover .content {
|
||||
opacity: 0;
|
||||
animation: fadeIn 1s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
div.content>div {
|
||||
margin: 0;
|
||||
font-size: 1.5em;
|
||||
color: var(--md-primary-fg-color);
|
||||
padding: 8px;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
0
docs/technical.md
Normal file
0
docs/technical.md
Normal file
|
|
@ -91,8 +91,8 @@ nav:
|
|||
- Homepage: index.md
|
||||
- Writing: writing.md
|
||||
- Visual: visual.md
|
||||
- Code and Data:
|
||||
- code-data.md
|
||||
- Technical:
|
||||
- technical.md
|
||||
- Qself:
|
||||
- qself/qself.md
|
||||
- Getting started: qself/getting-started.md
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue