-
+
+ 
+
+
+
+
+
+ Artist Credits
+ +
+
+
+
+
+
+
+
+
+ Lade Künstler-Daten...
+
-
-
-
-
-
-
-
- 
-
Artist Credits
- -
-
-
-
-
-
-
-
-
-
-
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
-
-
-
-
-
-
-
-
-
-
-
-
- 
-
-
- -
- - - - - \ No newline at end of file + + + + + +
+
+
+
+ Zurück zu JaxOff
+
+
+
+
+
+
+
+
+
+
diff --git a/js/background.js b/js/background.js
new file mode 100644
index 0000000..91c4bf6
--- /dev/null
+++ b/js/background.js
@@ -0,0 +1,119 @@
+(() => {
+ document.addEventListener("DOMContentLoaded", () => {
+ const canvas = document.getElementById("backgroundCanvas");
+ if (!canvas) return;
+
+ if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+ const ctx = canvas.getContext("2d", { alpha: true, desynchronized: true });
+
+ const isMobile = window.matchMedia("(max-width: 768px)").matches;
+ const DPR_CAP = Math.min(1.5, isMobile ? 1.0 : 1.25);
+
+ const getOrbCount = () => {
+ const baseCount = Math.floor((window.innerWidth * window.innerHeight) / 40000);
+ return Math.min(Math.max(baseCount, isMobile ? 15 : 25), isMobile ? 30 : 50);
+ };
+
+ const R_MIN = isMobile ? 3 : 4;
+ const R_MAX = isMobile ? 8 : 12;
+ const SPEED = isMobile ? 0.08 : 0.12;
+
+ const PINK = [245, 169, 184];
+ const BLUE = [91, 207, 250];
+
+ let w = 0, h = 0, dpr = 1;
+ let orbs = [];
+ let raf = 0;
+ let last = 0;
+
+ function resize() {
+ w = window.innerWidth;
+ h = window.innerHeight;
+
+ dpr = Math.min(DPR_CAP, window.devicePixelRatio || 1);
+ canvas.width = Math.floor(w * dpr);
+ canvas.height = Math.floor(h * dpr);
+ canvas.style.width = w + "px";
+ canvas.style.height = h + "px";
+
+ ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+ createOrbs();
+ last = 0;
+ }
+
+ function createOrbs() {
+ const count = getOrbCount();
+ orbs = new Array(count);
+
+ for (let i = 0; i < count; i++) {
+ const r = Math.random() * (R_MAX - R_MIN) + R_MIN;
+ const color = Math.random() > 0.5 ? PINK : BLUE;
+ orbs[i] = {
+ x: Math.random() * w,
+ y: Math.random() * h,
+ r,
+ a: Math.random() * 0.15 + 0.4,
+ vx: (Math.random() - 0.5) * SPEED,
+ vy: (Math.random() - 0.5) * SPEED,
+ color: color
+ };
+ }
+ }
+
+ function step() {
+ ctx.clearRect(0, 0, w, h);
+
+ for (let i = 0; i < orbs.length; i++) {
+ const o = orbs[i];
+ o.x += o.vx;
+ o.y += o.vy;
+
+ const margin = o.r * 3;
+ if (o.x < -margin) o.x = w + margin;
+ else if (o.x > w + margin) o.x = -margin;
+ if (o.y < -margin) o.y = h + margin;
+ else if (o.y > h + margin) o.y = -margin;
+
+ ctx.beginPath();
+ ctx.arc(o.x, o.y, o.r, 0, Math.PI * 2);
+ ctx.fillStyle = `rgba(${o.color[0]}, ${o.color[1]}, ${o.color[2]}, ${o.a})`;
+ ctx.fill();
+ }
+ }
+
+ function tick(now) {
+ if (document.hidden) {
+ raf = 0;
+ return;
+ }
+
+ if (!last) last = now;
+ if (now - last >= 16) {
+ last = now;
+ step();
+ }
+
+ raf = requestAnimationFrame(tick);
+ }
+
+ let resizeTimer;
+ window.addEventListener("resize", () => {
+ clearTimeout(resizeTimer);
+ resizeTimer = setTimeout(resize, 150);
+ }, { passive: true });
+
+ document.addEventListener("visibilitychange", () => {
+ if (document.hidden) {
+ cancelAnimationFrame(raf);
+ raf = 0;
+ } else if (!raf) {
+ last = 0;
+ raf = requestAnimationFrame(tick);
+ }
+ });
+
+ resize();
+ raf = requestAnimationFrame(tick);
+ });
+})();
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..e2591f4
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,146 @@
+(() => {
+ document.addEventListener("DOMContentLoaded", init);
+
+ async function init() {
+ document.getElementById("currentYear").textContent = new Date().getFullYear();
+ await loadArtists();
+ }
+
+ async function loadArtists() {
+ const loadingEl = document.getElementById("loading");
+ const errorEl = document.getElementById("error");
+ const gridEl = document.getElementById("artistGrid");
+
+ errorEl.style.display = "none";
+ loadingEl.style.display = "block";
+
+ try {
+ const url = `./data/artists.json?v=${Date.now()}`;
+ const res = await fetch(url, {
+ cache: "no-store",
+ headers: { "Accept": "application/json" }
+ });
+
+ if (!res.ok) {
+ throw new Error(`artists.json fetch failed: ${res.status} ${res.statusText}`);
+ }
+
+ const artists = await res.json();
+
+ loadingEl.style.display = "none";
+
+ if (!Array.isArray(artists) || artists.length === 0) {
+ gridEl.innerHTML = 'Keine Künstler-Daten verfügbar.
'; + return; + } + + const frag = document.createDocumentFragment(); + for (const artist of artists) { + frag.appendChild(createArtistCardNode(artist)); + } + + gridEl.replaceChildren(frag); + + } catch (err) { + console.error("Error loading artists:", err); + + loadingEl.style.display = "none"; + errorEl.style.display = "block"; + + gridEl.textContent = ""; + } + } + + function createArtistCardNode(artist) { + const article = document.createElement("article"); + article.className = "artist-card"; + + const inner = document.createElement("div"); + inner.className = "card-inner"; + + const imageContainer = document.createElement("div"); + imageContainer.className = "image-container"; + if (artist.orientation) { + imageContainer.classList.add(artist.orientation); + } + + const img = document.createElement("img"); + img.className = "artist-image"; + img.src = artist.image; + img.alt = `${artist.role} von ${artist.name}`; + img.loading = "lazy"; + img.decoding = "async"; + img.dataset.orientation = artist.orientation || 'auto'; + + imageContainer.appendChild(img); + + const content = document.createElement("div"); + content.className = "content"; + + const name = document.createElement("h2"); + name.className = "artist-name"; + name.textContent = artist.name; + + const role = document.createElement("div"); + role.className = "artist-role"; + role.textContent = artist.role; + + const desc = document.createElement("p"); + desc.className = "artist-description"; + desc.textContent = artist.description ?? ""; + + content.appendChild(name); + content.appendChild(role); + content.appendChild(desc); + + const links = createSocialLinksNode(artist.links); + if (links) content.appendChild(links); + + inner.appendChild(imageContainer); + inner.appendChild(content); + article.appendChild(inner); + + return article; + } + + function createSocialLinksNode(links) { + if (!links) return null; + + const wrap = document.createElement("div"); + wrap.className = "social-links"; + + const order = ["vgen", "twitter", "bluesky", "youtube", "twitch", "instagram", "fiverr", "website"]; + for (const platform of order) { + if (!links[platform]) continue; + wrap.appendChild(createIconLink(platform, links[platform])); + } + + return wrap.childElementCount ? wrap : null; + } + + function createIconLink(platform, url) { + const a = document.createElement("a"); + a.href = url; + a.className = `social-link ${platform}`; + a.target = "_blank"; + a.rel = "noopener"; + a.ariaLabel = platform; + + a.innerHTML = getPlatformSvg(platform); + return a; + } + + function getPlatformSvg(platform) { + const svgs = { + vgen: ``, + twitter: ``, + bluesky: ``, + youtube: ``, + twitch: ``, + instagram: ``, + fiverr: ``, + website: `` + } + return svgs[platform] || ""; + } +})(); \ No newline at end of file