docs: add architecture documentation and slides

docs/slides/slides.js

@@ -0,0 +1,28 @@
+const slides = [...document.querySelectorAll(".slide")];
+const counter = document.querySelector("#counter");
+const root = document.documentElement;
+let index = 0;
+
+function render() {
+  slides.forEach((slide, current) => slide.classList.toggle("active", current === index));
+  counter.textContent = `${index + 1} / ${slides.length}`;
+}
+
+function move(delta) {
+  index = (index + delta + slides.length) % slides.length;
+  render();
+}
+
+document.querySelector("#next").addEventListener("click", () => move(1));
+document.querySelector("#prev").addEventListener("click", () => move(-1));
+document.querySelector("#theme-toggle").addEventListener("click", () => {
+  root.classList.toggle("light");
+});
+
+document.addEventListener("keydown", (event) => {
+  if (event.key === "ArrowRight" || event.key === " ") move(1);
+  if (event.key === "ArrowLeft") move(-1);
+});
+
+render();
+