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

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;