Some fixes to pages.
This commit is contained in:
g*
parent
6990ffbdb2
commit
dbca266e16
7 changed files with 7 additions and 389 deletions
|
|
@ -20,17 +20,17 @@ hide:
|
|||
<div class='accent-divider'></div>
|
||||
</div>
|
||||
<div class='faces'>
|
||||
<a href='/visual'>
|
||||
<a href='#'>
|
||||
<div id='visual-hover' class='face'>
|
||||
<img src='/src/gugulet.hu-visual-face-1276x1276.webp' >
|
||||
</div>
|
||||
</a>
|
||||
<a href='/technical'>
|
||||
<a href='#'>
|
||||
<div id='technical-hover' class='face'>
|
||||
<img src='/src/gugulet.hu-technical-face-1276x1276.webp' >
|
||||
</div>
|
||||
</a>
|
||||
<a href='/writing'>
|
||||
<a href='#'>
|
||||
<div id='writing-hover' class='face'>
|
||||
<img src='/src/gugulet.hu-writing-face-1276x1276.webp' >
|
||||
</div>
|
||||
|
|
|
|||
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>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<div class="footer">
|
||||
<div class="menu">
|
||||
<a href="/technical"><span class="footer-menu-item">technical</span></a><a href="/visual"><span
|
||||
class="footer-menu-item">visual</span></a><a href="/writing"><span
|
||||
class="footer-menu-item">writing</span></a>
|
||||
<a href="#"><span class="footer-menu-item">technical</span></a>
|
||||
<a href="#"><span class="footer-menu-item">visual</span></a>
|
||||
<a href="#"><span class="footer-menu-item">writing</span></a>
|
||||
</div>
|
||||
<div class="version">v202506.1</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -339,20 +339,12 @@ body {
|
|||
🤖 automated check->>✍🏽 writer: Return fixes
|
||||
✍🏽 writer->>✍🏽 writer: Prepare and publish final draft
|
||||
```
|
||||
|
||||
<div class='two-column fade-in-up-section'>
|
||||
<div class='column'>
|
||||
<div class='content'>
|
||||
<img src='/src/spread-docs-site-3456x2160.png' width='100%' />
|
||||
</div>
|
||||
<figcaption>An example of the documentation writing process.</figcaption>
|
||||
</div>
|
||||
<div class='column'>
|
||||
<div class='content'>
|
||||
<h3>Process</h3>
|
||||
<p>Publishing content, reviewing content, and managing a tehcnical writing team involves creating processes around people. As a team lead, I've had to define priorities for the documentation function; mentor and manage other writers; create writing and review processes; measure impact; and manage relationships with software engineering teams, marketing and sales, and executives.</p>
|
||||
<h6>Maintained legacy API Reference</h6>
|
||||
<p>The API References included old documentation that needed to maintenance for clients that had not yet migrated to the latest versions of the REST API.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -138,6 +138,7 @@ div.footer {
|
|||
color: var(--primary-colour);
|
||||
margin-left: 2em;
|
||||
font-size: max(calc(var(--text-variable-size) * 2), calc(var(--text-min-size) + 2px));
|
||||
font-family: var(--primary-font);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue