From 3dad792c5f2d0f8a66c3d24ae1224dd4051d2230 Mon Sep 17 00:00:00 2001 From: g* Date: Sun, 15 Jun 2025 16:22:31 +0200 Subject: [PATCH] Added fading for resume page. --- docs/resume.md | 42 ++++++++++++++++++++++++-------------- docs/src/js/resume.js | 12 +++++++++++ docs/src/stylesheets/g.css | 36 +++++++++++++++++++++++++------- docs/visual.md | 1 - 4 files changed, 68 insertions(+), 23 deletions(-) create mode 100644 docs/src/js/resume.js diff --git a/docs/resume.md b/docs/resume.md index 491c4fd..72cc298 100644 --- a/docs/resume.md +++ b/docs/resume.md @@ -37,20 +37,29 @@ hide: -
- - - - - + + +
+ + + + +
- - - - - + + + + +
-
+
Current

Documentation Engineer

@@ -74,7 +83,7 @@ hide:
Achieved 75% product coverage
-

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.

+

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.

@@ -97,6 +106,9 @@ hide:
Ollama
+
+ Docker +
Python
@@ -179,7 +191,7 @@ hide:
-
+
@@ -210,9 +222,9 @@ hide: -
+ diff --git a/docs/src/js/resume.js b/docs/src/js/resume.js new file mode 100644 index 0000000..f62aac6 --- /dev/null +++ b/docs/src/js/resume.js @@ -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'); + } + }); +}); diff --git a/docs/src/stylesheets/g.css b/docs/src/stylesheets/g.css index 3d58089..3875f61 100644 --- a/docs/src/stylesheets/g.css +++ b/docs/src/stylesheets/g.css @@ -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; diff --git a/docs/visual.md b/docs/visual.md index 1698832..e69de29 100644 --- a/docs/visual.md +++ b/docs/visual.md @@ -1 +0,0 @@ -:octicons-terminal-16: