g_it/site
g_it/site
1
0
Fork 0
Code Issues Releases 1 Wiki Activity Actions

Added fading for resume page.

Browse source
This commit is contained in:
g* 2025-06-15 16:22:31 +02:00
commit 3dad792c5f
4 changed files with 68 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

42
docs/resume.md
View file

@ -37,20 +37,29 @@ hide:
</div>
</div>
<div class='tabbed-set tabbed-alternate' data-tabs='1:6' style='--md-indicator-x: 93px; --md-indicator-width: 92px;'>
<input checked='checked' id='__tabbed_1_1' name='__tabbed_1' type='radio' class=''>
<input id='__tabbed_1_2' name='__tabbed_1' type='radio'>
<input id='__tabbed_1_3' name='__tabbed_1' type='radio'>
<input id='__tabbed_1_4' name='__tabbed_1' type='radio'>
<input id='__tabbed_1_5' name='__tabbed_1' type='radio'>
<style>
body {
height: 125vh;
display: flex;
flex-direction: column;
align-items: center;
}
</style>
<div class='tabbed-set tabbed-alternate fade-in-up-section' data-tabs='1:6' style='--md-indicator-x: 93px; --md-indicator-width: 92px;'>
<input checked='checked' id='spread-ai' name='selected' type='radio' class=''>
<input id='mambu' name='selected' type='radio'>
<input id='yoco' name='selected' type='radio'>
<input id='allan_gray' name='selected' type='radio'>
<input id='the_jupiter_drawing_room' name='selected' type='radio'>
<div class='tabbed-labels tabbed-labels--linked'>
<label for='__tabbed_1_1'><a href='#__tabbed_1_1' tabindex='-1'>2024</a></label>
<label for='__tabbed_1_2'><a href='#__tabbed_1_2' tabindex='-1'>2021</a></label>
<label for='__tabbed_1_3'><a href='#__tabbed_1_3' tabindex='-1'>2019</a></label>
<label for='__tabbed_1_4'><a href='#__tabbed_1_4' tabindex='-1'>2015</a></label>
<label for='__tabbed_1_5'><a href='#__tabbed_1_5' tabindex='-1'>2013</a></label>
<label for='spread-ai'><a href='#spread-ai' tabindex='-1'>2024</a></label>
<label for='mambu'><a href='#mambu' tabindex='-1'>2021</a></label>
<label for='yoco'><a href='#yoco' tabindex='-1'>2019</a></label>
<label for='allan_gray'><a href='#allan_gray' tabindex='-1'>2015</a></label>
<label for='the_jupiter_drawing_room'><a href='#the_jupiter_drawing_room' tabindex='-1'>2013</a></label>
</div>
<div class='tabbed-content'>
<div class='tabbed-content fade-in-up-content'>
<div class='tabbed-block'>
<div class='status-green'>Current</div>
<h3>Documentation Engineer</h3>
@ -74,7 +83,7 @@ hide:
<div class='column'>
<div class='content'>
<h6>Achieved 75% product coverage</h6>
<p>Documented three quarters of the product range with the first documentation set published in the first three months. The product range has since shifted, but coverage remains high, despite being the only member of the Documentation department.</p>
<p>Documented three quarters of the product range with the first documentation set published in the first three months. The product range has since shifted, but coverage remains high - despite being the only person maintaining documentation.</p>
</div>
</div>
</div>
@ -97,6 +106,9 @@ hide:
<div>
<span class='twemoji'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.361 10.26a.9.9 0 0 0-.558.47l-.072.148.001.207c0 .193.004.217.059.353.076.193.152.312.291.448.24.238.51.3.872.205a.86.86 0 0 0 .517-.436.75.75 0 0 0 .08-.498c-.064-.453-.33-.782-.724-.897a1.1 1.1 0 0 0-.466 0m-9.203.005c-.305.096-.533.32-.65.639a1.2 1.2 0 0 0-.06.52c.057.309.31.59.598.667.362.095.632.033.872-.205.14-.136.215-.255.291-.448.055-.136.059-.16.059-.353l.001-.207-.072-.148a.9.9 0 0 0-.565-.472 1 1 0 0 0-.474.007m4.184 2c-.131.071-.223.25-.195.383.031.143.157.288.353.407.105.063.112.072.117.136.004.038-.01.146-.029.243-.02.094-.036.194-.036.222.002.074.07.195.143.253.064.052.076.054.255.059.164.005.198.001.264-.03.169-.082.212-.234.15-.525-.052-.243-.042-.28.087-.355.137-.08.281-.219.324-.314a.365.365 0 0 0-.175-.48.4.4 0 0 0-.181-.033c-.126 0-.207.03-.355.124l-.085.053-.053-.032c-.219-.13-.259-.145-.391-.143a.4.4 0 0 0-.193.032m.39-2.195c-.373.036-.475.05-.654.086a4.5 4.5 0 0 0-.951.328c-.94.46-1.589 1.226-1.787 2.114-.04.176-.045.234-.045.53 0 .294.005.357.043.524.264 1.16 1.332 2.017 2.714 2.173.3.033 1.596.033 1.896 0 1.11-.125 2.064-.727 2.493-1.571.114-.226.169-.372.22-.602.039-.167.044-.23.044-.523 0-.297-.005-.355-.045-.531-.288-1.29-1.539-2.304-3.072-2.497a7 7 0 0 0-.855-.031zm.645.937a3.3 3.3 0 0 1 1.44.514c.223.148.537.458.671.662.166.251.26.508.303.82.02.143.01.251-.043.482-.08.345-.332.705-.672.957a3 3 0 0 1-.689.348c-.382.122-.632.144-1.525.138-.582-.006-.686-.01-.853-.042q-.856-.16-1.35-.68c-.264-.28-.385-.535-.45-.946-.03-.192.025-.509.137-.776.136-.326.488-.73.836-.963.403-.269.934-.46 1.422-.512.187-.02.586-.02.773-.002m-5.503-11a1.65 1.65 0 0 0-.683.298C5.617.74 5.173 1.666 4.985 2.819c-.07.436-.119 1.04-.119 1.503 0 .544.064 1.24.155 1.721.02.107.031.202.023.208l-.187.152a5.3 5.3 0 0 0-.949 1.02 5.5 5.5 0 0 0-.94 2.339 6.6 6.6 0 0 0-.023 1.357c.091.78.325 1.438.727 2.04l.13.195-.037.064c-.269.452-.498 1.105-.605 1.732-.084.496-.095.629-.095 1.294 0 .67.009.803.088 1.266.095.555.288 1.143.503 1.534.071.128.243.393.264.407.007.003-.014.067-.046.141a7.4 7.4 0 0 0-.548 1.873 5 5 0 0 0-.071.991c0 .56.031.832.148 1.279L3.42 24h1.478l-.05-.091c-.297-.552-.325-1.575-.068-2.597.117-.472.25-.819.498-1.296l.148-.29v-.177c0-.165-.003-.184-.057-.293a.9.9 0 0 0-.194-.25 1.7 1.7 0 0 1-.385-.543c-.424-.92-.506-2.286-.208-3.451.124-.486.329-.918.544-1.154a.8.8 0 0 0 .223-.531c0-.195-.07-.355-.224-.522a3.14 3.14 0 0 1-.817-1.729c-.14-.96.114-2.005.69-2.834.563-.814 1.353-1.336 2.237-1.475.199-.033.57-.028.776.01.226.04.367.028.512-.041.179-.085.268-.19.374-.431.093-.215.165-.333.36-.576.234-.29.46-.489.822-.729.413-.27.884-.467 1.352-.561.17-.035.25-.04.569-.04s.398.005.569.04a4.07 4.07 0 0 1 1.914.997c.117.109.398.457.488.602.034.057.095.177.132.267.105.241.195.346.374.43.14.068.286.082.503.045.343-.058.607-.053.943.016 1.144.23 2.14 1.173 2.581 2.437.385 1.108.276 2.267-.296 3.153-.097.15-.193.27-.333.419-.301.322-.301.722-.001 1.053.493.539.801 1.866.708 3.036-.062.772-.26 1.463-.533 1.854a2 2 0 0 1-.224.258.9.9 0 0 0-.194.25c-.054.109-.057.128-.057.293v.178l.148.29c.248.476.38.823.498 1.295.253 1.008.231 2.01-.059 2.581a1 1 0 0 0-.044.098c0 .006.329.009.732.009h.73l.02-.074.036-.134c.019-.076.057-.3.088-.516a9 9 0 0 0 0-1.258c-.11-.875-.295-1.57-.597-2.226-.032-.074-.053-.138-.046-.141a1.4 1.4 0 0 0 .108-.152c.376-.569.607-1.284.724-2.228.031-.26.031-1.378 0-1.628-.083-.645-.182-1.082-.348-1.525a6 6 0 0 0-.329-.7l-.038-.064.131-.194c.402-.604.636-1.262.727-2.04a6.6 6.6 0 0 0-.024-1.358 5.5 5.5 0 0 0-.939-2.339 5.3 5.3 0 0 0-.95-1.02l-.186-.152a.7.7 0 0 1 .023-.208c.208-1.087.201-2.443-.017-3.503-.19-.924-.535-1.658-.98-2.082-.354-.338-.716-.482-1.15-.455-.996.059-1.8 1.205-2.116 3.01a7 7 0 0 0-.097.726c0 .036-.007.066-.015.066a1 1 0 0 1-.149-.078A4.86 4.86 0 0 0 12 3.03c-.832 0-1.687.243-2.456.698a1 1 0 0 1-.148.078c-.008 0-.015-.03-.015-.066a7 7 0 0 0-.097-.725C8.997 1.392 8.337.319 7.46.048a2 2 0 0 0-.585-.041Zm.293 1.402c.248.197.523.759.682 1.388.03.113.06.244.069.292.007.047.026.152.041.233.067.365.098.76.102 1.24l.002.475-.12.175-.118.178h-.278c-.324 0-.646.041-.954.124l-.238.06c-.033.007-.038-.003-.057-.144a8.4 8.4 0 0 1 .016-2.323c.124-.788.413-1.501.696-1.711.067-.05.079-.049.157.013m9.825-.012c.17.126.358.46.498.888.28.854.36 2.028.212 3.145-.019.14-.024.151-.057.144l-.238-.06a3.7 3.7 0 0 0-.954-.124h-.278l-.119-.178-.119-.175.002-.474c.004-.669.066-1.19.214-1.772.157-.623.434-1.185.68-1.382.078-.062.09-.063.159-.012'></path></svg></span> <abbr title='Ollama is a way to run AI models locally and create agents to do tasks or chat with an AI bot.'>Ollama</abbr>
</div>
<div>
<span class="twemoji"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.983 11.078h2.119a.186.186 0 0 0 .186-.185V9.006a.186.186 0 0 0-.186-.186h-2.119a.185.185 0 0 0-.185.185v1.888c0 .102.083.185.185.185m-2.954-5.43h2.118a.186.186 0 0 0 .186-.186V3.574a.186.186 0 0 0-.186-.185h-2.118a.185.185 0 0 0-.185.185v1.888c0 .102.082.185.185.185m0 2.716h2.118a.187.187 0 0 0 .186-.186V6.29a.186.186 0 0 0-.186-.185h-2.118a.185.185 0 0 0-.185.185v1.887c0 .102.082.185.185.186m-2.93 0h2.12a.186.186 0 0 0 .184-.186V6.29a.185.185 0 0 0-.185-.185H8.1a.185.185 0 0 0-.185.185v1.887c0 .102.083.185.185.186m-2.964 0h2.119a.186.186 0 0 0 .185-.186V6.29a.185.185 0 0 0-.185-.185H5.136a.186.186 0 0 0-.186.185v1.887c0 .102.084.185.186.186m5.893 2.715h2.118a.186.186 0 0 0 .186-.185V9.006a.186.186 0 0 0-.186-.186h-2.118a.185.185 0 0 0-.185.185v1.888c0 .102.082.185.185.185m-2.93 0h2.12a.185.185 0 0 0 .184-.185V9.006a.185.185 0 0 0-.184-.186h-2.12a.185.185 0 0 0-.184.185v1.888c0 .102.083.185.185.185m-2.964 0h2.119a.185.185 0 0 0 .185-.185V9.006a.185.185 0 0 0-.184-.186h-2.12a.186.186 0 0 0-.186.186v1.887c0 .102.084.185.186.185m-2.92 0h2.12a.185.185 0 0 0 .184-.185V9.006a.185.185 0 0 0-.184-.186h-2.12a.185.185 0 0 0-.184.185v1.888c0 .102.082.185.185.185M23.763 9.89c-.065-.051-.672-.51-1.954-.51q-.508.001-1.01.087c-.248-1.7-1.653-2.53-1.716-2.566l-.344-.199-.226.327c-.284.438-.49.922-.612 1.43-.23.97-.09 1.882.403 2.661-.595.332-1.55.413-1.744.42H.751a.75.75 0 0 0-.75.748 11.4 11.4 0 0 0 .692 4.062c.545 1.428 1.355 2.48 2.41 3.124 1.18.723 3.1 1.137 5.275 1.137a15.7 15.7 0 0 0 2.93-.266 12.3 12.3 0 0 0 3.823-1.389 10.5 10.5 0 0 0 2.61-2.136c1.252-1.418 1.998-2.997 2.553-4.4h.221c1.372 0 2.215-.549 2.68-1.009.309-.293.55-.65.707-1.046l.098-.288Z"></path></svg></span> <abbr title="Docker allows you to create and run images of custom development environments on top of any system.">Docker</abbr>
</div>
<div>
<span class='twemoji'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m14.25.18.9.2.73.26.59.3.45.32.34.34.25.34.16.33.1.3.04.26.02.2-.01.13V8.5l-.05.63-.13.55-.21.46-.26.38-.3.31-.33.25-.35.19-.35.14-.33.1-.3.07-.26.04-.21.02H8.77l-.69.05-.59.14-.5.22-.41.27-.33.32-.27.35-.2.36-.15.37-.1.35-.07.32-.04.27-.02.21v3.06H3.17l-.21-.03-.28-.07-.32-.12-.35-.18-.36-.26-.36-.36-.35-.46-.32-.59-.28-.73-.21-.88-.14-1.05-.05-1.23.06-1.22.16-1.04.24-.87.32-.71.36-.57.4-.44.42-.33.42-.24.4-.16.36-.1.32-.05.24-.01h.16l.06.01h8.16v-.83H6.18l-.01-2.75-.02-.37.05-.34.11-.31.17-.28.25-.26.31-.23.38-.2.44-.18.51-.15.58-.12.64-.1.71-.06.77-.04.84-.02 1.27.05zm-6.3 1.98-.23.33-.08.41.08.41.23.34.33.22.41.09.41-.09.33-.22.23-.34.08-.41-.08-.41-.23-.33-.33-.22-.41-.09-.41.09zm13.09 3.95.28.06.32.12.35.18.36.27.36.35.35.47.32.59.28.73.21.88.14 1.04.05 1.23-.06 1.23-.16 1.04-.24.86-.32.71-.36.57-.4.45-.42.33-.42.24-.4.16-.36.09-.32.05-.24.02-.16-.01h-8.22v.82h5.84l.01 2.76.02.36-.05.34-.11.31-.17.29-.25.25-.31.24-.38.2-.44.17-.51.15-.58.13-.64.09-.71.07-.77.04-.84.01-1.27-.04-1.07-.14-.9-.2-.73-.25-.59-.3-.45-.33-.34-.34-.25-.34-.16-.33-.1-.3-.04-.25-.02-.2.01-.13v-5.34l.05-.64.13-.54.21-.46.26-.38.3-.32.33-.24.35-.2.35-.14.33-.1.3-.06.26-.04.21-.02.13-.01h5.84l.69-.05.59-.14.5-.21.41-.28.33-.32.27-.35.2-.36.15-.36.1-.35.07-.32.04-.28.02-.21V6.07h2.09l.14.01zm-6.47 14.25-.23.33-.08.41.08.41.23.33.33.23.41.08.41-.08.33-.23.23-.33.08-.41-.08-.41-.23-.33-.33-.23-.41-.08-.41.08z'></path></svg></span> Python
</div>
@ -179,7 +191,7 @@ hide:
</div>
</div>
<div class='two-column'>
<div class='two-column fade-in-up-section'>
<div class='column'>
<div class='content'>
<img src='/src/spread-docs-site-3456x2160.png' width='100%' />
@ -210,9 +222,9 @@ hide:
<div id='loader'>
<div><img src='/src/gugulet.hu-site-logo-350x350.png'></div>
</div>
<script src='/src/js/loader.js'></script>
<script src='/src/js/resume.js'></script>

12
docs/src/js/resume.js Normal file
View file

@ -0,0 +1,12 @@
window.addEventListener('scroll', function () {
const contents = document.querySelectorAll('.fade-in-up-section');
contents.forEach(content => {
const contentPosition = content.getBoundingClientRect().top;
const screenPosition = window.innerHeight / 1.2;
if (contentPosition < screenPosition) {
content.classList.add('visible');
}
});
});

36
docs/src/stylesheets/g.css
View file

@ -250,6 +250,30 @@ article.md-content__inner.md-typeset:after {
* RESUMÉ
*****************************/
/* Fade in content */
.fade-in-up-section {
opacity: 0;
/* Start hidden */
transform: translateY(20px);
/* Start slightly below */
transition: opacity 2s ease-in-out, transform 2s ease-in-out;
/* Transition for both opacity and transform */
}
.fade-in-up-section.visible {
opacity: 1;
/* Fully visible */
transform: translateY(0);
/* Move to original position */
}
.fade-in-up-content {
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Career meta-information */
.meta-icons {
font-size: max(calc(var(--text-variable-size) + 3px), var(--text-min-size));
@ -276,7 +300,6 @@ article.md-content__inner.md-typeset:after {
}
}
/* Career timeline */
.tabbed-labels {
font-family: var(--number-font);
@ -386,9 +409,7 @@ p.blurb {
margin-top: 25px;
}
/*****************************
* PORTFOLIO
*****************************/
/* Portfolio */
.two-column {
display: grid;
@ -397,7 +418,7 @@ p.blurb {
padding: 20px 20px 20px 0;
width: 100%;
margin: 30px auto;
border-bottom: 1px solid var(--secondary-colour);
border-bottom: 1px solid var(--quarternary-colour);
.column {
justify-self: center;
@ -449,7 +470,7 @@ div.status-green {
.md-tooltip {
box-shadow: none;
border: 0.5px solid var(--secondary-colour);
border: 1px solid var(--secondary-colour);
padding: 3px;
margin: 0;
}
@ -466,7 +487,8 @@ div.status-green {
*****************************/
div.footer {
margin: 30px 0 10px 0;
margin: 30px 5px 5px 0;
padding-bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;

1
docs/visual.md
View file

@ -1 +0,0 @@
:octicons-terminal-16: