Initial commit

web/static/app.js

@@ -0,0 +1,40 @@
+(function () {
+  const updateHeader = () => {
+    const header = document.querySelector("[data-site-header]");
+    if (!header) return;
+    const compact = window.scrollY > 24;
+    header.classList.toggle("is-compact", compact);
+  };
+  updateHeader();
+  window.addEventListener("scroll", updateHeader, { passive: true });
+
+  function closeOverlay() {
+    const root = document.getElementById("overlay-root");
+    if (root) root.innerHTML = "";
+    document.documentElement.classList.remove("overflow-hidden");
+  }
+
+  document.addEventListener("htmx:afterSwap", function (event) {
+    if (event.detail.target && event.detail.target.id === "overlay-root") {
+      const overlay = event.detail.target.querySelector("[data-overlay]");
+      if (!overlay) return;
+      document.documentElement.classList.add("overflow-hidden");
+      const close = overlay.querySelector("[data-overlay-close]");
+      if (close) close.focus();
+    }
+  });
+
+  document.addEventListener("htmx:afterSettle", updateHeader);
+
+  document.addEventListener("click", function (event) {
+    if (event.target.matches("[data-overlay], [data-overlay-close]")) {
+      closeOverlay();
+    }
+  });
+
+  document.addEventListener("keydown", function (event) {
+    if (event.key === "Escape") {
+      closeOverlay();
+    }
+  });
+})();

web/static/placeholders/about.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 1100">
+  <rect width="900" height="1100" fill="#e5e1d8"/>
+  <circle cx="450" cy="350" r="160" fill="#a7a197"/>
+  <path d="M180 980c35-250 190-380 270-380s235 130 270 380z" fill="#2b2b2b"/>
+</svg>

web/static/placeholders/hero.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000">
+  <rect width="1600" height="1000" fill="#d8d5cf"/>
+  <path d="M0 760 420 430l290 210 290-360 600 500v220H0z" fill="#9d9a92"/>
+  <path d="M220 710h1160v95H220z" fill="#1f2933" opacity=".85"/>
+  <path d="M290 295h390v360H290zM760 210h520v445H760z" fill="#f4f0e8" opacity=".78"/>
+</svg>

web/static/placeholders/project-1.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 900">
+  <rect width="900" height="900" fill="#d7d1c5"/>
+  <path d="M120 650h660v110H120z" fill="#242424"/>
+  <path d="M190 230h210v420H190zM460 160h250v490H460z" fill="#f7f2e8"/>
+</svg>

web/static/placeholders/project-2.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 900">
+  <rect width="900" height="900" fill="#c7ced0"/>
+  <path d="M130 200h640v500H130z" fill="#f4f4ef"/>
+  <path d="M220 300h170v300H220zM500 300h170v300H500z" fill="#6d7476"/>
+</svg>

web/static/placeholders/project-3.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 900">
+  <rect width="900" height="900" fill="#ddd9d0"/>
+  <path d="M170 180h560v560H170z" fill="#f8f7f2"/>
+  <circle cx="450" cy="460" r="165" fill="#a1907c"/>
+</svg>

web/static/styles.css

@@ -0,0 +1,95 @@
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+[data-site-header].is-compact {
+  padding-top: 0.85rem;
+  padding-bottom: 0.85rem;
+  background: rgba(250, 250, 250, 0.95);
+  color: #0a0a0a;
+  box-shadow: 0 1px 0 rgba(10, 10, 10, 0.08);
+  backdrop-filter: blur(18px);
+}
+
+[data-site-header].is-compact [data-header-brand] {
+  font-size: 1.25rem;
+}
+
+@keyframes page-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes page-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes panel-fade-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+
+@keyframes panel-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+#admin-panel {
+  view-transition-name: admin-panel;
+}
+
+::view-transition-old(root) {
+  animation: 160ms ease both page-fade-out;
+}
+
+::view-transition-new(root) {
+  animation: 220ms ease both page-fade-in;
+}
+
+::view-transition-old(admin-panel) {
+  animation: 140ms ease both panel-fade-out;
+}
+
+::view-transition-new(admin-panel) {
+  animation: 180ms ease both panel-fade-in;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    scroll-behavior: auto !important;
+  }
+
+  ::view-transition-old(root),
+  ::view-transition-new(root),
+  ::view-transition-old(admin-panel),
+  ::view-transition-new(admin-panel) {
+    animation-duration: 1ms;
+  }
+}