From 765bcec580e95c383f793e90ed1589a4652f2892 Mon Sep 17 00:00:00 2001 From: alyx Date: Sun, 11 Jan 2026 19:15:13 +0100 Subject: [PATCH] completely new site lol --- assets/Bongo.gif | Bin 0 -> 69926 bytes {static => assets}/a3l_is.png | Bin {static => assets}/jaxoff_logo.png | Bin {static => assets}/model.png | Bin {static => assets}/nessa.png | Bin {static => assets}/sweaty_postkarte.png | Bin {static => assets}/visitenkarte.png | Bin {static => assets}/xmas_postkarte.png | Bin {static => assets}/yan.png | Bin {static => assets}/yume_emotes.jpeg | Bin css/custom.css | 83 ----- css/sites.css | 19 - css/styles.css | 453 ++++++++++++++++++++++++ data/artists.json | 96 +++++ index.html | 403 ++++----------------- js/background.js | 119 +++++++ js/main.js | 146 ++++++++ 17 files changed, 881 insertions(+), 438 deletions(-) create mode 100644 assets/Bongo.gif rename {static => assets}/a3l_is.png (100%) rename {static => assets}/jaxoff_logo.png (100%) rename {static => assets}/model.png (100%) rename {static => assets}/nessa.png (100%) rename {static => assets}/sweaty_postkarte.png (100%) rename {static => assets}/visitenkarte.png (100%) rename {static => assets}/xmas_postkarte.png (100%) rename {static => assets}/yan.png (100%) rename {static => assets}/yume_emotes.jpeg (100%) delete mode 100644 css/custom.css delete mode 100644 css/sites.css create mode 100644 css/styles.css create mode 100644 data/artists.json create mode 100644 js/background.js create mode 100644 js/main.js diff --git a/assets/Bongo.gif b/assets/Bongo.gif new file mode 100644 index 0000000000000000000000000000000000000000..74185b18346acfb67b449bbf1004ab1ad3b96d47 GIT binary patch literal 69926 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 A2><{9 literal 0 HcmV?d00001 diff --git a/static/a3l_is.png b/assets/a3l_is.png similarity index 100% rename from static/a3l_is.png rename to assets/a3l_is.png diff --git a/static/jaxoff_logo.png b/assets/jaxoff_logo.png similarity index 100% rename from static/jaxoff_logo.png rename to assets/jaxoff_logo.png diff --git a/static/model.png b/assets/model.png similarity index 100% rename from static/model.png rename to assets/model.png diff --git a/static/nessa.png b/assets/nessa.png similarity index 100% rename from static/nessa.png rename to assets/nessa.png diff --git a/static/sweaty_postkarte.png b/assets/sweaty_postkarte.png similarity index 100% rename from static/sweaty_postkarte.png rename to assets/sweaty_postkarte.png diff --git a/static/visitenkarte.png b/assets/visitenkarte.png similarity index 100% rename from static/visitenkarte.png rename to assets/visitenkarte.png diff --git a/static/xmas_postkarte.png b/assets/xmas_postkarte.png similarity index 100% rename from static/xmas_postkarte.png rename to assets/xmas_postkarte.png diff --git a/static/yan.png b/assets/yan.png similarity index 100% rename from static/yan.png rename to assets/yan.png diff --git a/static/yume_emotes.jpeg b/assets/yume_emotes.jpeg similarity index 100% rename from static/yume_emotes.jpeg rename to assets/yume_emotes.jpeg diff --git a/css/custom.css b/css/custom.css deleted file mode 100644 index 8f0635c..0000000 --- a/css/custom.css +++ /dev/null @@ -1,83 +0,0 @@ -:root { - --parvus-background-color: #161618; - --parvus-color: #f2f5f4; - --parvus-caption-color: #f2f5f4; - --parvus-btn-background-color: #F5A9B8; - --parvus-btn-color: #ffffff; - --parvus-btn-disabled-background-color: #5BCEFA; - --parvus-btn-disabled-color: #161618; - --img-height: 12.5em; - --max-img-width: 22em; /* So breit wie das breiteste Bild */ - } - - -body { - background-color: #161618; - color: #f2f5f4; -} - -a { - color: #f5a9b8; -} -a:hover { - color: #f2f5f4; -} - -a.lightbox { - margin: 10px; -} - -.parvus-trigger:has(img) .parvus-zoom__indicator { - display: none; -} - -.image-box { - height: var(--img-height); - width: var(--max-img-width); - display: flex; - align-items: center; - justify-content: center; - background-color: #222222; - border: 1px solid #222222; - border-radius: 0.5rem; - -} - -.image-box img { - max-height: 100%; - max-width: 100%; - object-fit: contain; -} - -.page-title { - padding-bottom: 3em; - color: #F5A9B8; -} - -.logo { - height: 8em; - width: auto; -} - -a.svg-link { - display: inline-block; - line-height: 0; - padding: 0; - margin: 0; -} - -a.svg-link svg { - display: flex; - width: auto; - height: 3em; - object-fit: contain; -} - -.separator, .source { - color: #f2f5f4; - text-align: center; - margin: 25px auto; - margin-top: 20px; - width: 90%; - max-width: 500px; -} \ No newline at end of file diff --git a/css/sites.css b/css/sites.css deleted file mode 100644 index 32c58e1..0000000 --- a/css/sites.css +++ /dev/null @@ -1,19 +0,0 @@ -.twitch { - color: #9146ff; -} - -.twitter { - color: #1DA1F2; -} - -.vgen { - color: #B8FF26; -} - -.website { - color: #f5a9b8; -} - -.bsky { - color: #1185FE; -} \ No newline at end of file diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..b60e469 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,453 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +:root { + --primary-pink: #F5A9B8; + --primary-blue: #5BCFFA; + --white: #FFFFFF; + --dark-bg: #161618; + --gray-blue: #A8C5DB; + --dark-blue: #12354B; + --dark-teal: #12404B; + + --card-bg: rgba(22, 22, 24, 0.85); + --card-border: rgba(91, 207, 250, 0.15); + --card-hover-border: rgba(245, 169, 184, 0.25); + + --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1); +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Oxygen, Ubuntu, sans-serif; + background-color: var(--dark-bg); + color: var(--white); + min-height: 100vh; + line-height: 1.6; + overflow-x: hidden; +} + +.background-canvas { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + pointer-events: none; +} + +.main-container { + max-width: 1200px; + margin: 0 auto; + padding: 1rem 1.5rem; + position: relative; +} + +.header { + text-align: center; + padding: 4rem 0 2rem; + margin-bottom: 3rem; + position: relative; +} + +.back-button { + position: absolute; + top: 2rem; + left: 0; + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 1.5rem; + background: rgba(18, 53, 75, 0.3); + border: 1px solid rgba(91, 207, 250, 0.2); + border-radius: 12px; + color: var(--primary-blue); + text-decoration: none; + font-weight: 600; + transition: border-color 0.2s ease; + z-index: 10; +} + +.back-button:hover { + border-color: var(--primary-blue); +} + +.logo-wrapper { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 2rem; + width: 100%; + height: auto; +} + +.logo { + width: 360px; + height: auto; + object-fit: contain; +} + +.page-title { + font-size: 3.5rem; + font-weight: 800; + background: linear-gradient(135deg, #F5A9B8, #5BCFFA); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + margin-bottom: 1rem; + letter-spacing: -0.5px; +} + +.page-subtitle { + font-size: 1.25rem; + color: var(--gray-blue); + max-width: 700px; + margin: 0 auto; + opacity: 0.9; + line-height: 1.8; +} + +.bongo { + height: 1.5em; + width: auto; +} + +.loading { + text-align: center; + padding: 4rem; + color: var(--gray-blue); +} + +.spinner { + width: 50px; + height: 50px; + border: 3px solid rgba(91, 207, 250, 0.1); + border-top-color: var(--primary-blue); + border-radius: 50%; + animation: spin 1s linear infinite; + margin: 0 auto 1rem; +} + +@keyframes spin { + to { transform: rotate(360deg); } +} + +.artist-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); + gap: 2rem; + margin-bottom: 4rem; + align-items: stretch; +} + +.artist-card { + background: var(--card-bg); + border-radius: 20px; + overflow: hidden; + border: 1px solid var(--card-border); + backdrop-filter: blur(10px); + transition: border-color 0.3s ease, box-shadow 0.3s ease; + display: flex; + flex-direction: column; + height: 100%; +} + +.artist-card:hover { + border-color: var(--card-hover-border); + box-shadow: 0 0 0 1px var(--card-hover-border); +} + +.image-container { + position: relative; + overflow: hidden; + background: linear-gradient(135deg, var(--dark-blue), var(--dark-teal)); + display: flex; + align-items: center; + justify-content: center; + padding: 30px; + min-height: 320px; + max-height: 320px; + flex-shrink: 0; +} + +.image-container.horizontal { + padding: 40px 20px; +} + +.image-container.horizontal .artist-image { + width: 100%; + height: auto; + max-height: 100%; +} + +.image-container.vertical { + padding: 20px 40px; +} + +.image-container.vertical .artist-image { + width: 50%; + height: auto; + max-height: 100%; +} + +.artist-image { + object-fit: contain; + object-position: center; + display: block; +} + +.content { + padding: 1.5rem; + display: flex; + flex-direction: column; + flex-grow: 1; +} + +.artist-name { + font-size: 1.5rem; + font-weight: 700; + margin-bottom: 0.5rem; + background: linear-gradient(135deg, #F5A9B8, #5BCFFA); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.artist-role { + font-size: 1rem; + color: var(--primary-blue); + margin-bottom: 1rem; + font-weight: 600; +} + +.artist-description { + color: var(--gray-blue); + margin-bottom: 1.5rem; + line-height: 1.7; + flex-grow: 1; +} + +.social-links { + display: flex; + gap: 0.75rem; + flex-wrap: wrap; + margin-top: auto; +} + +.social-link { + width: 40px; + height: 40px; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + color: white; + text-decoration: none; + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(18, 53, 75, 0.4); + transition: all 0.2s ease; +} + +.social-link:hover { + border-color: transparent; +} + +.social-link.vgen:hover { + background: #B8FF26; + color: #0F0F16; +} + +.social-link.twitter:hover { + background: #1DA1F2; +} + +.social-link.bluesky:hover { + background: #0085FF; +} + +.social-link.youtube:hover { + background: #FF0000; +} + +.social-link.twitch:hover { + background: #9146FF; +} + +.social-link.instagram:hover { + background: linear-gradient(45deg, #405DE6, #833AB4, #C13584, #E1306C, #FD1D1D); +} + +.social-link.pixiv:hover { + background: #0096FA; +} + +.social-link.website:hover { + background: var(--primary-blue); + color: #161618; +} + +.footer { + text-align: center; + padding: 3rem 0 1rem; + border-top: 1px solid rgba(91, 207, 250, 0.1); + position: relative; +} + +.footer::before { + content: ''; + position: absolute; + top: -1px; + left: 50%; + transform: translateX(-50%); + width: 100px; + height: 2px; + background: linear-gradient(135deg, #F5A9B8, #5BCFFA); +} + +.footer-text { + font-size: 1.25rem; + color: var(--gray-blue); + margin-bottom: 1rem; +} + +.footer a { + color: rgba(168, 197, 219, 0.6); +} + +.heart { + color: var(--primary-pink); + display: inline-block; + margin: 0 0.25rem; +} + +.copyright { + color: rgba(168, 197, 219, 0.6); + font-size: 0.875rem; +} + +.error { + text-align: center; + padding: 3rem; + color: var(--primary-pink); + background: rgba(245, 169, 184, 0.1); + border-radius: 12px; + border: 1px solid rgba(245, 169, 184, 0.2); +} + +@media (max-width: 768px) { + .main-container { + padding: 1rem; + } + + .header { + padding: 3rem 0 1.5rem; + } + + .back-button { + position: relative; + top: auto; + left: auto; + margin-bottom: 2rem; + } + + .page-title { + font-size: 2.5rem; + } + + .page-subtitle { + font-size: 1.1rem; + } + + .artist-grid { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .image-container { + padding: 20px; + min-height: 280px; + max-height: 280px; + } + + .image-container.horizontal { + padding: 30px 15px; + } + + .image-container.horizontal .artist-image { + width: 100%; + height: auto; + } + + .image-container.vertical { + padding: 15px 30px; + } + + .image-container.vertical .artist-image { + width: 60%; + height: auto; + } + + .logo { + width: 240 px; + height: auto; + } +} + +@media (max-width: 480px) { + .page-title { + font-size: 2rem; + } + + .logo { + width: 200px; + height: auto; + } + + .back-button { + padding: 0.5rem 1rem; + font-size: 0.875rem; + } + + .image-container { + padding: 15px; + min-height: 250px; + max-height: 250px; + } + + .image-container.horizontal { + padding: 20px 10px; + } + + .image-container.vertical { + padding: 10px 20px; + } + + .image-container.vertical .artist-image { + width: 70%; + } +} + +.social-link.bluesky:hover { + background: #0085FF; +} + +.social-link.fiverr:hover { + background: #1DBF73; +} + +@media (prefers-reduced-motion: reduce) { + .artist-card, + .social-link, + .back-button { + transition: none !important; + } + + .spinner { + animation: spin 3s linear infinite; + } +} \ No newline at end of file diff --git a/data/artists.json b/data/artists.json new file mode 100644 index 0000000..0898318 --- /dev/null +++ b/data/artists.json @@ -0,0 +1,96 @@ +[ + { + "name": "Yume Shirokuro", + "role": "Twitch Emotes", + "description": "", + "image": "./assets/yume_emotes.jpeg", + "orientation": "horizontal", + "links": { + "vgen": "https://vgen.co/YumeShirokuro", + "bluesky": "https://bsky.app/profile/yumeshirokuro.bsky.social", + "twitch": "https://twitch.tv/yume_shirokuro" + } + }, + { + "name": "A3l_is", + "role": "Logo, Background, Stream Overlay, Schedule, Rigging, Splat Emote & Refsheet", + "description": "", + "image": "./assets/a3l_is.png", + "orientation": "horizontal", + "links": { + "vgen": "https://vgen.co/A3l_is", + "bluesky": "https://bsky.app/profile/a3lis.bsky.social", + "twitch": "https://twitch.tv/a3l_is" + } + }, + { + "name": "Milky Blanc", + "role": "Model Art", + "description": "", + "image": "./assets/model.png", + "orientation": "horizontal", + "links": { + "vgen": "https://vgen.co/m1lkyblanc", + "twitter": "https://twitter.com/m1lkyblanc" + } + }, + { + "name": "Nessai", + "role": "Sticker Design", + "description": "", + "image": "./assets/nessa.png", + "orientation": "horizontal", + "links": { + "instagram": "https://www.instagram.com/nessaihai/", + "twitch": "https://www.twitch.tv/nessai", + "website": "https://nessai.carrd.co/" + } + }, + { + "name": "lontongs_", + "role": "Sweaty Jax Postkarte", + "description": "", + "image": "./assets/sweaty_postkarte.png", + "orientation": "vertical", + "links": { + "twitter": "https://twitter.com/Lontongs_", + "instagram": "https://www.instagram.com/lontongs_" + } + }, + { + "name": "OriOttero", + "role": "Christmas Jax Postkarte", + "description": "", + "image": "./assets/xmas_postkarte.png", + "orientation": "vertical", + "links": { + "bluesky": "https://bsky.app/profile/oriottero.orifans.com", + "website": "https://orifans.com/links", + "twitch": "https://twitch.tv/OriOttero", + "instagram": "https://www.instagram.com/oriottero/" + } + }, + { + "name": "YanOrion", + "role": "PNG Tuber", + "description": "", + "image": "./assets/yan.png", + "orientation": "vertical", + "links": { + "instagram": "https://www.instagram.com/yanorion/" + } + }, + { + "name": "sleepingglitch", + "role": "Visitenkarte", + "description": "", + "image": "./assets/visitenkarte.png", + "orientation": "vertical", + "links": { + "vgen": "https://vgen.co/sleepingglitch", + "twitter": "https://twitter.com/sleepingglitch", + "twitch": "https://twitch.tv/sleepingglitch_" + } + } + +] \ No newline at end of file diff --git a/index.html b/index.html index 8eccfc4..5ab9276 100644 --- a/index.html +++ b/index.html @@ -1,336 +1,67 @@ - - - - - - - JaxOff 🌸💦 Art Credits - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
-

- -

Artist Credits

-

-
-
- - - -
- - -
-
- -
-
-
- -

Twitch Emotes & Sticker Designs

- -

by Yume Shirokuro


- -
- - - - - - - - - - - - - - - - -
- - -
-
- - - -
- - -
-
- -
-
-
- -

Logo, Background, Stream Overlay, Schedule, Rigging, Splat Emote & Refsheet

- -

by A3l_is


- -
- - - - - - - - - - - - - - - - -
- - -
-
- - - -
- - -
-
- -
-
-
- -

Model Art

- -

by Milky Blanc


- -
- - - - - - - - - -
- - -
-
- - - -
- - -
-
- -
-
-
- -

Sticker Design

- -

by Nessai


- -
- - - - - -
- - -
-
- - - - -
- - -
-
- -
-
-
- -

PNG Tuber

- -

by YanOrion


- -
- - - - - - -
- - -
-
- - - - -
- - -
-
- -
-
-
- -

Sweaty Jax Postkarte

- -

by lontongs_


- -
- - - - -
- - -
-
- - - -
- - -
-
- -
-
-
- -

Christmas Jax Postkarte

- -

by OriOttero


- -
- - - - - - - - - - - - - - - - - -
- - -
-
- - - -
- - -
-
- -
-
-
- -

Visitenkarte

- -

by sleepingglitch


- -
- - - - - - - - - - - - - - -
- - -
-
- - -
-
-
-

♥ ur artists :3

-

© JaxOffTV - -

-
- - - - \ No newline at end of file + + + + + + JaxOff 🌸💦 Artist Credits + + + + + + + + + +
+
+ + + + + Zurück zu JaxOff + + +
+ + + +
+ +

Artist Credits

+ +

+
+ +
+ +

Lade Künstler-Daten...

+
+ + + +
+ +
+

+ ♥ ur Artists :3 +

+

© JaxOffTV | designed by SleepyTawi ✨

+
+
+ + + + + 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