Personal Website, vers. 1 (pushed far to late)
This commit is contained in:
Harlekin committed
commit
c8df66d3da
103 files changed
+8977
No files matched your search
@@ -0,0 +1,66 @@
|
||||
export function initContactForm(form) {
|
||||
const status = form.querySelector('[data-form-status]');
|
||||
const submit = form.querySelector('[type="submit"]');
|
||||
const submitLabel = submit.innerHTML;
|
||||
|
||||
function setFieldError(name, message) {
|
||||
const input = form.elements[name];
|
||||
const error = form.querySelector(`[data-error-for="${name}"]`);
|
||||
if (!input || !error) return;
|
||||
input.closest('.field').classList.toggle('field--invalid', Boolean(message));
|
||||
error.textContent = message || '';
|
||||
error.hidden = !message;
|
||||
if (message) {
|
||||
input.setAttribute('aria-invalid', 'true');
|
||||
input.setAttribute('aria-describedby', error.id);
|
||||
} else {
|
||||
input.removeAttribute('aria-invalid');
|
||||
input.removeAttribute('aria-describedby');
|
||||
}
|
||||
}
|
||||
|
||||
function showStatus(message, kind) {
|
||||
status.textContent = message;
|
||||
status.className = `form-status form-status--${kind}`;
|
||||
status.hidden = false;
|
||||
}
|
||||
|
||||
form.addEventListener('submit', async (event) => {
|
||||
event.preventDefault();
|
||||
form.querySelector('[role="alert"]')?.remove();
|
||||
for (const name of ['name', 'email', 'message']) setFieldError(name, null);
|
||||
status.hidden = true;
|
||||
|
||||
submit.disabled = true;
|
||||
submit.textContent = form.dataset.sending;
|
||||
|
||||
try {
|
||||
const response = await fetch(form.action, {
|
||||
method: 'POST',
|
||||
headers: { Accept: 'application/json' },
|
||||
body: new URLSearchParams(new FormData(form)),
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
if (data.ok) {
|
||||
const done = document.createElement('p');
|
||||
done.className = 'form-status form-status--ok';
|
||||
done.setAttribute('role', 'status');
|
||||
done.tabIndex = -1;
|
||||
done.textContent = data.message;
|
||||
form.replaceWith(done);
|
||||
done.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
for (const [name, message] of Object.entries(data.errors ?? {})) setFieldError(name, message);
|
||||
showStatus(data.message, 'error');
|
||||
form.querySelector('[aria-invalid="true"]')?.focus();
|
||||
} catch {
|
||||
showStatus(form.dataset.failed, 'error');
|
||||
} finally {
|
||||
submit.disabled = false;
|
||||
submit.innerHTML = submitLabel;
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
// Portfolio tag filter. The chips are plain links (?tag=...), the server filters too,
|
||||
// so this only makes it instant.
|
||||
export function initFilter(nav) {
|
||||
const list = document.querySelector('[data-filter-list]');
|
||||
const empty = document.querySelector('[data-filter-empty]');
|
||||
if (!list) return;
|
||||
const items = [...list.children];
|
||||
const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)');
|
||||
|
||||
function apply(tag) {
|
||||
for (const chip of nav.querySelectorAll('[data-tag]')) {
|
||||
if (chip.dataset.tag === tag) chip.setAttribute('aria-current', 'true');
|
||||
else chip.removeAttribute('aria-current');
|
||||
}
|
||||
let shown = 0;
|
||||
for (const item of items) {
|
||||
const match = !tag || item.dataset.tags.split(' ').includes(tag);
|
||||
item.hidden = !match;
|
||||
if (match) {
|
||||
item.classList.add('is-visible');
|
||||
shown++;
|
||||
}
|
||||
}
|
||||
if (empty) empty.hidden = shown > 0;
|
||||
}
|
||||
|
||||
nav.addEventListener('click', (event) => {
|
||||
const chip = event.target.closest('[data-tag]');
|
||||
if (!chip || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
|
||||
event.preventDefault();
|
||||
history.replaceState(null, '', chip.href);
|
||||
|
||||
if (!document.startViewTransition || reducedMotion.matches) {
|
||||
apply(chip.dataset.tag);
|
||||
return;
|
||||
}
|
||||
|
||||
// names only for the duration of the transition, so they don't clash with page navigation
|
||||
items.forEach((item, index) => (item.style.viewTransitionName = `project-${index}`));
|
||||
const transition = document.startViewTransition(() => apply(chip.dataset.tag));
|
||||
transition.finished.finally(() => {
|
||||
for (const item of items) item.style.viewTransitionName = '';
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
// The hero background: the five stripes of the genderfluid flag, bent by layered noise.
|
||||
|
||||
const vertexSource = `
|
||||
attribute vec2 position;
|
||||
void main() {
|
||||
gl_Position = vec4(position, 0.0, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
const fragmentSource = `
|
||||
#ifdef GL_FRAGMENT_PRECISION_HIGH
|
||||
precision highp float;
|
||||
#else
|
||||
precision mediump float;
|
||||
#endif
|
||||
|
||||
uniform vec2 resolution;
|
||||
uniform float time;
|
||||
uniform vec2 pointer;
|
||||
|
||||
vec3 stripe(float i) {
|
||||
if (i < 0.5) return vec3(1.0, 0.463, 0.643);
|
||||
if (i < 1.5) return vec3(0.88, 0.85, 0.92);
|
||||
if (i < 2.5) return vec3(0.753, 0.067, 0.843);
|
||||
if (i < 3.5) return vec3(0.05, 0.04, 0.08);
|
||||
return vec3(0.184, 0.235, 0.745);
|
||||
}
|
||||
|
||||
float hash(vec2 p) {
|
||||
return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
|
||||
}
|
||||
|
||||
float noise(vec2 p) {
|
||||
vec2 i = floor(p);
|
||||
vec2 f = fract(p);
|
||||
vec2 u = f * f * (3.0 - 2.0 * f);
|
||||
return mix(
|
||||
mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),
|
||||
mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),
|
||||
u.y
|
||||
);
|
||||
}
|
||||
|
||||
float fbm(vec2 p) {
|
||||
float value = 0.0;
|
||||
float amp = 0.5;
|
||||
for (int i = 0; i < 4; i++) {
|
||||
value += amp * noise(p);
|
||||
p = p * 2.02 + vec2(1.7, 9.2);
|
||||
amp *= 0.5;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
void main() {
|
||||
vec2 uv = gl_FragCoord.xy / resolution;
|
||||
vec2 p = uv * vec2(resolution.x / resolution.y, 1.0);
|
||||
float t = time * 0.035;
|
||||
|
||||
vec2 q = vec2(fbm(p * 0.9 + vec2(0.0, t)), fbm(p * 0.9 + vec2(5.2, -t)));
|
||||
vec2 r = vec2(
|
||||
fbm(p * 0.8 + 2.2 * q + vec2(1.7, 9.2) + t * 0.6),
|
||||
fbm(p * 0.8 + 2.2 * q + vec2(8.3, 2.8) - t * 0.4)
|
||||
);
|
||||
|
||||
float d = distance(uv, pointer);
|
||||
float bend = 0.1 * exp(-d * d * 14.0);
|
||||
|
||||
float y = uv.y + (r.y - 0.5) * 0.9 + (q.x - 0.5) * 0.4 + bend;
|
||||
float s = clamp(1.0 - y, 0.0, 0.9999) * 5.0;
|
||||
float i = floor(s);
|
||||
float f = fract(s);
|
||||
vec3 col = mix(stripe(i), stripe(min(i + 1.0, 4.0)), smoothstep(0.3, 1.0, f));
|
||||
|
||||
col *= 0.55 + 0.45 * smoothstep(0.15, 0.85, r.x);
|
||||
col = mix(vec3(0.047, 0.039, 0.071), col, 0.8);
|
||||
gl_FragColor = vec4(col, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
function compile(gl, type, source) {
|
||||
const shader = gl.createShader(type);
|
||||
gl.shaderSource(shader, source);
|
||||
gl.compileShader(shader);
|
||||
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
||||
console.warn(gl.getShaderInfoLog(shader));
|
||||
return null;
|
||||
}
|
||||
return shader;
|
||||
}
|
||||
|
||||
export function initFluid(canvas) {
|
||||
const gl = canvas.getContext('webgl', { antialias: false, depth: false, powerPreference: 'low-power' });
|
||||
if (!gl) return;
|
||||
|
||||
const vertex = compile(gl, gl.VERTEX_SHADER, vertexSource);
|
||||
const fragment = compile(gl, gl.FRAGMENT_SHADER, fragmentSource);
|
||||
if (!vertex || !fragment) return;
|
||||
|
||||
const program = gl.createProgram();
|
||||
gl.attachShader(program, vertex);
|
||||
gl.attachShader(program, fragment);
|
||||
gl.linkProgram(program);
|
||||
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return;
|
||||
gl.useProgram(program);
|
||||
|
||||
// one triangle that covers the whole viewport
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
|
||||
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
|
||||
const position = gl.getAttribLocation(program, 'position');
|
||||
gl.enableVertexAttribArray(position);
|
||||
gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
|
||||
|
||||
const uniforms = {
|
||||
resolution: gl.getUniformLocation(program, 'resolution'),
|
||||
time: gl.getUniformLocation(program, 'time'),
|
||||
pointer: gl.getUniformLocation(program, 'pointer'),
|
||||
};
|
||||
|
||||
const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)');
|
||||
const finePointer = matchMedia('(pointer: fine)').matches;
|
||||
// The noise is soft anyway, rendering at a fraction of the size is barely visible and saves a lot
|
||||
const scale = Math.min(devicePixelRatio || 1, 2) * (finePointer ? 0.5 : 0.35);
|
||||
const offset = Math.random() * 200;
|
||||
const pointer = { x: 0.7, y: 0.6, targetX: 0.7, targetY: 0.6 };
|
||||
|
||||
let visible = true;
|
||||
let frame = 0;
|
||||
let start = performance.now();
|
||||
|
||||
function resize() {
|
||||
const width = Math.max(1, Math.round(canvas.clientWidth * scale));
|
||||
const height = Math.max(1, Math.round(canvas.clientHeight * scale));
|
||||
if (canvas.width !== width || canvas.height !== height) {
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
gl.viewport(0, 0, width, height);
|
||||
}
|
||||
}
|
||||
|
||||
function draw(now) {
|
||||
resize();
|
||||
pointer.x += (pointer.targetX - pointer.x) * 0.04;
|
||||
pointer.y += (pointer.targetY - pointer.y) * 0.04;
|
||||
gl.uniform2f(uniforms.resolution, canvas.width, canvas.height);
|
||||
gl.uniform1f(uniforms.time, offset + (now - start) / 1000);
|
||||
gl.uniform2f(uniforms.pointer, pointer.x, pointer.y);
|
||||
gl.drawArrays(gl.TRIANGLES, 0, 3);
|
||||
}
|
||||
|
||||
const animated = () => !reducedMotion.matches;
|
||||
|
||||
function loop(now) {
|
||||
frame = 0;
|
||||
if (!visible || document.hidden || !animated()) return;
|
||||
draw(now);
|
||||
frame = requestAnimationFrame(loop);
|
||||
}
|
||||
|
||||
function play() {
|
||||
if (!frame && visible && !document.hidden && animated()) frame = requestAnimationFrame(loop);
|
||||
}
|
||||
|
||||
draw(start);
|
||||
canvas.classList.add('is-ready');
|
||||
|
||||
new ResizeObserver(() => {
|
||||
if (!animated()) draw(start);
|
||||
}).observe(canvas);
|
||||
|
||||
new IntersectionObserver(([entry]) => {
|
||||
visible = entry.isIntersecting;
|
||||
play();
|
||||
}).observe(canvas);
|
||||
|
||||
document.addEventListener('visibilitychange', play);
|
||||
reducedMotion.addEventListener('change', () => {
|
||||
start = performance.now();
|
||||
play();
|
||||
});
|
||||
|
||||
if (finePointer) {
|
||||
addEventListener(
|
||||
'pointermove',
|
||||
(event) => {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
pointer.targetX = (event.clientX - rect.left) / rect.width;
|
||||
pointer.targetY = 1 - (event.clientY - rect.top) / rect.height;
|
||||
},
|
||||
{ passive: true },
|
||||
);
|
||||
}
|
||||
|
||||
play();
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
const paths = {
|
||||
close: 'M6 6l12 12M18 6 6 18',
|
||||
prev: 'M15 5l-7 7 7 7',
|
||||
next: 'M9 5l7 7-7 7',
|
||||
};
|
||||
|
||||
function button(className, name, label) {
|
||||
const element = document.createElement('button');
|
||||
element.type = 'button';
|
||||
element.className = `lightbox__btn ${className}`;
|
||||
element.setAttribute('aria-label', label);
|
||||
element.innerHTML = `<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="${paths[name]}"/></svg>`;
|
||||
return element;
|
||||
}
|
||||
|
||||
export function initLightbox(gallery) {
|
||||
const links = [...gallery.querySelectorAll('.gallery__link')];
|
||||
if (!links.length || typeof HTMLDialogElement !== 'function') return;
|
||||
const { labelPrev, labelNext, labelClose } = gallery.dataset;
|
||||
|
||||
const dialog = document.createElement('dialog');
|
||||
dialog.className = 'lightbox';
|
||||
const figure = document.createElement('figure');
|
||||
figure.className = 'lightbox__figure';
|
||||
const image = document.createElement('img');
|
||||
image.className = 'lightbox__img';
|
||||
image.decoding = 'async';
|
||||
figure.append(image);
|
||||
const count = document.createElement('p');
|
||||
count.className = 'lightbox__count';
|
||||
const close = button('lightbox__close', 'close', labelClose);
|
||||
const prev = button('lightbox__prev', 'prev', labelPrev);
|
||||
const next = button('lightbox__next', 'next', labelNext);
|
||||
dialog.append(figure, count, close, prev, next);
|
||||
document.body.append(dialog);
|
||||
|
||||
if (links.length < 2) {
|
||||
prev.hidden = true;
|
||||
next.hidden = true;
|
||||
count.hidden = true;
|
||||
}
|
||||
|
||||
let current = 0;
|
||||
|
||||
function show(index) {
|
||||
current = (index + links.length) % links.length;
|
||||
const link = links[current];
|
||||
image.src = link.dataset.full || link.href;
|
||||
image.width = Number(link.dataset.width) || 0;
|
||||
image.height = Number(link.dataset.height) || 0;
|
||||
image.alt = link.querySelector('img')?.alt ?? '';
|
||||
count.textContent = `${current + 1} / ${links.length}`;
|
||||
}
|
||||
|
||||
function open(index) {
|
||||
show(index);
|
||||
dialog.showModal();
|
||||
document.documentElement.classList.add('lightbox-open');
|
||||
}
|
||||
|
||||
links.forEach((link, index) => {
|
||||
link.addEventListener('click', (event) => {
|
||||
if (event.metaKey || event.ctrlKey || event.shiftKey) return;
|
||||
event.preventDefault();
|
||||
open(index);
|
||||
});
|
||||
});
|
||||
|
||||
dialog.addEventListener('close', () => {
|
||||
document.documentElement.classList.remove('lightbox-open');
|
||||
links[current].focus();
|
||||
});
|
||||
close.addEventListener('click', () => dialog.close());
|
||||
prev.addEventListener('click', () => show(current - 1));
|
||||
next.addEventListener('click', () => show(current + 1));
|
||||
|
||||
// a click on the dark area around the image closes it
|
||||
figure.addEventListener('click', (event) => {
|
||||
if (event.target === figure) dialog.close();
|
||||
});
|
||||
|
||||
dialog.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'ArrowLeft') show(current - 1);
|
||||
if (event.key === 'ArrowRight') show(current + 1);
|
||||
});
|
||||
|
||||
let startX = null;
|
||||
figure.addEventListener('pointerdown', (event) => {
|
||||
if (event.pointerType !== 'mouse') startX = event.clientX;
|
||||
});
|
||||
figure.addEventListener('pointerup', (event) => {
|
||||
if (startX === null) return;
|
||||
const distance = event.clientX - startX;
|
||||
startX = null;
|
||||
if (Math.abs(distance) > 50 && links.length > 1) show(current + (distance < 0 ? 1 : -1));
|
||||
});
|
||||
figure.addEventListener('pointercancel', () => (startX = null));
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import { initContactForm } from './contact.js';
|
||||
import { initFilter } from './filter.js';
|
||||
import { initFluid } from './fluid.js';
|
||||
import { initLightbox } from './lightbox.js';
|
||||
import { initNav } from './nav.js';
|
||||
import { initPointerEffects } from './pointer.js';
|
||||
import { initReveal, initTimeline } from './reveal.js';
|
||||
import { initCoverTransitions } from './transitions.js';
|
||||
import { initVideos } from './video.js';
|
||||
|
||||
initNav();
|
||||
initReveal();
|
||||
initTimeline();
|
||||
initPointerEffects();
|
||||
initCoverTransitions();
|
||||
initVideos();
|
||||
|
||||
const canvas = document.querySelector('[data-fluid]');
|
||||
if (canvas) initFluid(canvas);
|
||||
|
||||
const filter = document.querySelector('[data-filter]');
|
||||
if (filter) initFilter(filter);
|
||||
|
||||
for (const gallery of document.querySelectorAll('[data-gallery]')) initLightbox(gallery);
|
||||
|
||||
const form = document.querySelector('[data-contact-form]');
|
||||
if (form) initContactForm(form);
|
||||
@@ -0,0 +1,61 @@
|
||||
export function initNav() {
|
||||
const header = document.querySelector('[data-header]');
|
||||
if (!header) return;
|
||||
const root = document.documentElement;
|
||||
const toggle = header.querySelector('[data-menu-toggle]');
|
||||
const nav = header.querySelector('[data-nav]');
|
||||
const label = toggle.querySelector('.menu-toggle__label');
|
||||
const outside = [document.querySelector('main'), document.querySelector('.site-footer')];
|
||||
|
||||
let lastY = scrollY;
|
||||
let ticking = false;
|
||||
|
||||
function onScroll() {
|
||||
const y = scrollY;
|
||||
header.classList.toggle('is-scrolled', y > 24);
|
||||
if (!root.classList.contains('menu-open')) {
|
||||
// hide while scrolling down, come back as soon as the user scrolls up
|
||||
if (y > lastY + 4 && y > 240) header.classList.add('is-hidden');
|
||||
else if (y < lastY - 4 || y <= 240) header.classList.remove('is-hidden');
|
||||
}
|
||||
lastY = y;
|
||||
ticking = false;
|
||||
}
|
||||
|
||||
addEventListener(
|
||||
'scroll',
|
||||
() => {
|
||||
if (!ticking) requestAnimationFrame(onScroll);
|
||||
ticking = true;
|
||||
},
|
||||
{ passive: true },
|
||||
);
|
||||
onScroll();
|
||||
|
||||
header.addEventListener('focusin', () => header.classList.remove('is-hidden'));
|
||||
|
||||
function setOpen(open) {
|
||||
toggle.setAttribute('aria-expanded', String(open));
|
||||
root.classList.toggle('menu-open', open);
|
||||
label.textContent = open ? label.dataset.labelClose : label.dataset.labelOpen;
|
||||
for (const element of outside) if (element) element.inert = open;
|
||||
if (open) header.classList.remove('is-hidden');
|
||||
}
|
||||
|
||||
toggle.addEventListener('click', () => setOpen(toggle.getAttribute('aria-expanded') !== 'true'));
|
||||
|
||||
nav.addEventListener('click', (event) => {
|
||||
if (event.target.closest('a')) setOpen(false);
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Escape' && root.classList.contains('menu-open')) {
|
||||
setOpen(false);
|
||||
toggle.focus();
|
||||
}
|
||||
});
|
||||
|
||||
matchMedia('(min-width: 48em)').addEventListener('change', (event) => {
|
||||
if (event.matches) setOpen(false);
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
// Mouse-only effects: border glow that follows the cursor and buttons that lean towards it
|
||||
export function initPointerEffects() {
|
||||
if (!matchMedia('(hover: hover) and (pointer: fine)').matches) return;
|
||||
|
||||
document.addEventListener(
|
||||
'pointermove',
|
||||
(event) => {
|
||||
const element = event.target.closest?.('[data-glow]');
|
||||
if (!element) return;
|
||||
const rect = element.getBoundingClientRect();
|
||||
element.style.setProperty('--mx', `${event.clientX - rect.left}px`);
|
||||
element.style.setProperty('--my', `${event.clientY - rect.top}px`);
|
||||
},
|
||||
{ passive: true },
|
||||
);
|
||||
|
||||
if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
||||
|
||||
for (const element of document.querySelectorAll('[data-magnetic]')) {
|
||||
element.addEventListener('pointermove', (event) => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
const x = (event.clientX - rect.left - rect.width / 2) * 0.2;
|
||||
const y = (event.clientY - rect.top - rect.height / 2) * 0.35;
|
||||
element.style.translate = `${x.toFixed(1)}px ${y.toFixed(1)}px`;
|
||||
});
|
||||
element.addEventListener('pointerleave', () => {
|
||||
element.style.translate = '';
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
export function initReveal() {
|
||||
const items = document.querySelectorAll('[data-reveal]');
|
||||
if (!('IntersectionObserver' in window)) {
|
||||
for (const item of items) item.classList.add('is-visible');
|
||||
return;
|
||||
}
|
||||
|
||||
const groups = new Map();
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
// things that come into view together get a small stagger
|
||||
let index = 0;
|
||||
for (const entry of entries) {
|
||||
if (!entry.isIntersecting) continue;
|
||||
for (const item of groups.get(entry.target)) {
|
||||
item.style.setProperty('--delay', `${Math.min(index++ * 90, 450)}ms`);
|
||||
item.classList.add('is-visible');
|
||||
}
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
},
|
||||
{ rootMargin: '0px 0px -6% 0px' },
|
||||
);
|
||||
|
||||
for (const item of items) {
|
||||
// Chrome applies the element's own clip-path, so a fully clipped heading never
|
||||
// counts as intersecting. Watch the parent for those instead.
|
||||
const target = item.dataset.reveal === 'mask' ? item.parentElement : item;
|
||||
if (!groups.has(target)) groups.set(target, []);
|
||||
groups.get(target).push(item);
|
||||
observer.observe(target);
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback for browsers without scroll-driven animations
|
||||
export function initTimeline() {
|
||||
const timeline = document.querySelector('[data-timeline]');
|
||||
if (!timeline || CSS.supports('animation-timeline: view()')) return;
|
||||
if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
||||
|
||||
let ticking = false;
|
||||
const update = () => {
|
||||
const rect = timeline.getBoundingClientRect();
|
||||
const progress = (innerHeight * 0.75 - rect.top) / rect.height;
|
||||
timeline.style.setProperty('--progress', Math.min(1, Math.max(0, progress)).toFixed(3));
|
||||
ticking = false;
|
||||
};
|
||||
|
||||
addEventListener(
|
||||
'scroll',
|
||||
() => {
|
||||
if (!ticking) requestAnimationFrame(update);
|
||||
ticking = true;
|
||||
},
|
||||
{ passive: true },
|
||||
);
|
||||
update();
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
// Cover image morphs into the project page (cross-document view transition)
|
||||
export function initCoverTransitions() {
|
||||
const clear = () => {
|
||||
for (const img of document.querySelectorAll('.card__img')) img.style.viewTransitionName = '';
|
||||
};
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
const link = event.target.closest('[data-cover-link]');
|
||||
if (!link || event.metaKey || event.ctrlKey || event.shiftKey) return;
|
||||
clear();
|
||||
const img = link.querySelector('.card__img');
|
||||
if (img) img.style.viewTransitionName = 'project-cover';
|
||||
});
|
||||
|
||||
// coming back via bfcache would otherwise leave the name on the old card
|
||||
addEventListener('pageshow', clear);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
// YouTube is only contacted after a click, until then it's just a link with a poster
|
||||
export function initVideos() {
|
||||
for (const box of document.querySelectorAll('[data-youtube]')) {
|
||||
const play = box.querySelector('[data-video-play]');
|
||||
play?.addEventListener('click', (event) => {
|
||||
if (event.metaKey || event.ctrlKey || event.shiftKey) return;
|
||||
event.preventDefault();
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.src = `https://www.youtube-nocookie.com/embed/${encodeURIComponent(box.dataset.youtube)}?autoplay=1&rel=0`;
|
||||
iframe.title = box.dataset.title || 'YouTube';
|
||||
iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';
|
||||
iframe.allowFullscreen = true;
|
||||
// YouTube refuses to play embeds without a referrer, helmet sets no-referrer for the page
|
||||
iframe.referrerPolicy = 'strict-origin-when-cross-origin';
|
||||
box.replaceChildren(iframe);
|
||||
iframe.focus();
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user