diff --git a/assets/scripts/animations.js b/assets/scripts/animations.js
new file mode 100644
index 0000000..678b454
--- /dev/null
+++ b/assets/scripts/animations.js
@@ -0,0 +1,62 @@
+'use strict'
+
+const body = document.documentElement || document.body;
+function setScrollAmount() {
+ body.style.setProperty("--scrollLengthPx", body.scrollTop);
+}
+setScrollAmount();
+document.addEventListener("scroll", setScrollAmount);
+document.addEventListener("resize", setScrollAmount);
+function rippleListener(el) {
+ return(evt) => {
+ const rects = Array.from(evt.target.getClientRects());
+ Array.from(evt.target.children).forEach(child => {
+ rects.push(...Array.from(child.getClientRects()));
+ });
+ rects.forEach(rect => {
+ const {top, left, width, height} = rect;
+ const effects = body.querySelector("#effects");
+ const newEffect = document.createElement("div");
+ newEffect.classList.add("effect-instance");
+ const padding = '10rem';
+ newEffect.style.top = `calc(${
+ top + window.scrollY
+ }px - ${padding})`;
+ newEffect.style.left = `calc(${
+ left + window.scrollX
+ }px - ${padding})`;
+ newEffect.style.width = `calc(${
+ width
+ }px + 2 * ${padding})`;
+ newEffect.style.height = `calc(${
+ height
+ }px + 2 * ${padding})`;
+ effects.appendChild(newEffect);
+ const reverser = () => {
+ newEffect.getAnimations().forEach(anim => {
+ if (anim.currentTime < 100) {
+ anim.pause();
+ effects.removeChild(newEffect);
+ return;
+ }
+ anim.pause();
+ anim.updatePlaybackRate(0.25);
+ anim.reverse();
+ anim.addEventListener('finish', () => {
+ if (effects.contains(newEffect)) {
+ effects.removeChild(newEffect);
+ }
+ });
+ });
+ };
+ el.addEventListener('mouseleave', reverser);
+ el.addEventListener('blur', reverser);
+ });
+ }
+}
+Array.from(
+ document.querySelectorAll('a[href],.nav-toggle-button,button,input')
+).forEach(el => {
+ el.addEventListener('mouseenter', rippleListener(el));
+ el.addEventListener('focus', rippleListener(el));
+});
diff --git a/site/_includes/base.njk b/site/_includes/base.njk
index 3a5d003..0902283 100644
--- a/site/_includes/base.njk
+++ b/site/_includes/base.njk
@@ -24,6 +24,7 @@ title: Joshua's Homepage
+
{% include "-header.njk" %}
@@ -32,63 +33,4 @@ title: Joshua's Homepage
{% include "-footer.njk" %}
-
-