
@@ -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: