script.js

 const DISCORD_ID = '786298938915422219';
  const LANYARD_WS = 'wss://api.lanyard.rest/socket';
  const LANYARD_API = `https://api.lanyard.rest/v1/users/${DISCORD_ID}`;

  let ws;
  let heartbeatInterval;
  let elapsed;

  const statusMap = {
    online: 'Online',
    idle:   'Abwesend',
    dnd:    'Bitte nicht stören',
    offline:'Offline'
  };

  function setStatus(status) {
    const badge = document.getElementById('status-badge');
    const dot   = document.getElementById('status-dot');
    const label = document.getElementById('status-label');
    badge.dataset.status = status;
    dot.dataset.status   = status;
    label.textContent    = statusMap[status] || 'Unbekannt';
  }

  function setAvatar(avatarHash, userId) {
    const img = document.getElementById('avatar-img');
    const skeleton = document.getElementById('avatar-skeleton');
    if (avatarHash) {
      img.src = `https://cdn.discordapp.com/avatars/${userId}/${avatarHash}.${avatarHash.startsWith('a_') ? 'gif' : 'webp'}?size=256`;
      img.onload = () => {
        skeleton.style.display = 'none';
        img.style.display = 'block';
      };
    }
  }

  function setUsername(name) {
    const el = document.getElementById('username-heading');
    el.innerHTML = name + '<span>.</span>';
  }

  function msToTime(ms) {
    const s = Math.floor(ms / 1000);
    const m = Math.floor(s / 60);
    const h = Math.floor(m / 60);
    if (h > 0) return `${h}:${String(m%60).padStart(2,'0')}:${String(s%60).padStart(2,'0')}`;
    return `${m}:${String(s%60).padStart(2,'0')}`;
  }

  function getActivityTypeLabel(type) {
    switch(type) {
      case 0: return 'Spielt gerade';
      case 1: return 'Streamt gerade';
      case 2: return 'Hört gerade';
      case 3: return 'Schaut gerade';
      case 5: return 'Konkurriert gerade';
      default: return 'Aktiv';
    }
  }

  function renderActivity(activities) {
    const container = document.getElementById('activity-content');
    if (elapsed) clearInterval(elapsed);

    // Filter out Spotify & custom status (type 4)
    const activity = activities?.find(a => a.type !== 4);

    if (!activity) {
      container.innerHTML = `
        <div class="no-activity">
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
            <circle cx="12" cy="12" r="10"/><path d="M8 12h8M12 8v8"/>
          </svg>
          <span>Gerade nichts aktiv</span>
        </div>`;
      return;
    }

    const typeLabel = getActivityTypeLabel(activity.type);
    const appId = activity.application_id;

    // Build image URLs
    let largeImg = null;
    let smallImg = null;

    if (activity.assets?.large_image) {
      const li = activity.assets.large_image;
      if (li.startsWith('mp:external/')) {
        largeImg = 'https://media.discordapp.net/external/' + li.replace('mp:external/','');
      } else if (appId) {
        largeImg = `https://cdn.discordapp.com/app-assets/${appId}/${li}.webp`;
      }
    }
    if (activity.assets?.small_image) {
      const si = activity.assets.small_image;
      if (si.startsWith('mp:external/')) {
        smallImg = 'https://media.discordapp.net/external/' + si.replace('mp:external/','');
      } else if (appId) {
        smallImg = `https://cdn.discordapp.com/app-assets/${appId}/${si}.webp`;
      }
    }

    const details = activity.details || '';
    const state   = activity.state   || '';

    const artHtml = largeImg
      ? `<img src="${largeImg}" alt="Cover" onerror="this.style.display='none'" />`
      : '';
    const smallHtml = smallImg
      ? `<div class="activity-art-small"><img src="${smallImg}" alt="" onerror="this.parentElement.style.display='none'" /></div>`
      : '';

    const elapsedId = 'elapsed-' + Date.now();

    container.innerHTML = `
      <div class="activity">
        <div class="activity-art">${artHtml}${smallHtml}</div>
        <div class="activity-info">
          <div class="activity-type">${typeLabel}</div>
          <div class="activity-name">${activity.name}</div>
          ${details ? `<div class="activity-detail">${details}</div>` : ''}
          ${state   ? `<div class="activity-detail">${state}</div>`   : ''}
          ${activity.timestamps?.start
            ? `<div class="activity-elapsed" id="${elapsedId}">00:00</div>`
            : ''}
        </div>
      </div>`;

    if (activity.timestamps?.start) {
      const start = activity.timestamps.start;
      const tick = () => {
        const el = document.getElementById(elapsedId);
        if (el) el.textContent = msToTime(Date.now() - start) + ' vergangen';
      };
      tick();
      elapsed = setInterval(tick, 1000);
    }
  }

  function applyData(data) {
    setStatus(data.discord_status || 'offline');
    setAvatar(data.discord_user?.avatar, DISCORD_ID);
    const display = data.discord_user?.global_name || data.discord_user?.username || 'Unbekannt';
    setUsername(display);
    renderBadges(data.discord_user?.public_flags);
    renderActivity(data.activities);
  }

  // Intersection Observer for section animations
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((e, i) => {
      if (e.isIntersecting) {
        e.target.style.animationDelay = (i * 0.1 + 0.3) + 's';
        e.target.classList.add('visible');
        observer.unobserve(e.target);
      }
    });
  }, { threshold: 0.1 });

  document.querySelectorAll('.section').forEach(s => observer.observe(s));

  // WebSocket connection to Lanyard
  function connect() {
    ws = new WebSocket(LANYARD_WS);

    ws.onmessage = (event) => {
      const msg = JSON.parse(event.data);

      if (msg.op === 1) { // Hello
        const interval = msg.d.heartbeat_interval;
        heartbeatInterval = setInterval(() => ws.send(JSON.stringify({ op: 3 })), interval);
        ws.send(JSON.stringify({ op: 2, d: { subscribe_to_id: DISCORD_ID } }));
      }

      if (msg.op === 0) { // Event
        if (msg.t === 'INIT_STATE' || msg.t === 'PRESENCE_UPDATE') {
          applyData(msg.d);
        }
      }
    };

    ws.onclose = () => {
      clearInterval(heartbeatInterval);
      setTimeout(connect, 3000); // reconnect
    };

    ws.onerror = () => ws.close();
  }

  // ── BEGRÜSSUNG ──
  function setGreeting() {
    const hour = new Date().toLocaleString('de-DE', { timeZone: 'Europe/Berlin', hour: 'numeric', hour12: false }) * 1;
    let text;
    if (hour >= 5  && hour < 11) text = '🌅 Guten Morgen';
    else if (hour >= 11 && hour < 14) text = '☀️ Guten Mittag';
    else if (hour >= 14 && hour < 18) text = '🌤️ Guten Nachmittag';
    else if (hour >= 18 && hour < 22) text = '🌆 Guten Abend';
    else text = '🌙 Gute Nacht';
    document.getElementById('greeting').textContent = text;
  }
  setGreeting();

  // ── DISCORD KOPIEREN ──
  function copyDiscord() {
    navigator.clipboard.writeText('yuray_').then(() => {
      const label = document.getElementById('copy-discord-label');
      label.textContent = '✓ Kopiert!';
      setTimeout(() => label.textContent = 'yuray_ kopieren', 2000);
    });
  }
  document.getElementById('copy-discord-btn').addEventListener('click', copyDiscord);

  // ── BESUCHERZÄHLER ──
  async function loadVisitorCount() {
    try {
      const res = await fetch('https://api.countapi.xyz/hit/yuray-dev-portfolio/visits');
      const data = await res.json();
      document.getElementById('visitor-count').textContent = data.value.toLocaleString('de-DE');
    } catch {
      document.getElementById('visitor-count').textContent = '—';
    }
  }
  loadVisitorCount();

  // ── CURSOR PARTIKEL ──
  const particleColors = ['#7c6af7','#f76a8a','#23d18b','#f0b132','#a78bfa','#ffffff'];
  let lastParticle = 0;

  document.addEventListener('mousemove', (e) => {
    const now = Date.now();
    if (now - lastParticle < 40) return;
    lastParticle = now;

    const p = document.createElement('div');
    p.className = 'cursor-particle';
    const size = Math.random() * 7 + 4;
    const tx = (Math.random() - 0.5) * 40 + 'px';
    const ty = (Math.random() - 0.5) * 40 + 'px';
    p.style.cssText = `
      width:${size}px; height:${size}px;
      left:${e.clientX - size/2}px; top:${e.clientY - size/2}px;
      background:${particleColors[Math.floor(Math.random()*particleColors.length)]};
      --tx:${tx}; --ty:${ty};
    `;
    document.body.appendChild(p);
    setTimeout(() => p.remove(), 600);
  });

  // ── DISCORD BADGES ──
  const BADGE_FLAGS = [
    { flag: 1 << 0,  label: 'Discord Staff',          emoji: '🛡️' },
    { flag: 1 << 1,  label: 'Partner',                emoji: '🤝' },
    { flag: 1 << 2,  label: 'HypeSquad Events',       emoji: '🏅' },
    { flag: 1 << 3,  label: 'Bug Hunter Lv1',         emoji: '🐛' },
    { flag: 1 << 6,  label: 'HypeSquad Bravery',      emoji: '🏠' },
    { flag: 1 << 7,  label: 'HypeSquad Brilliance',   emoji: '💎' },
    { flag: 1 << 8,  label: 'HypeSquad Balance',      emoji: '⚖️' },
    { flag: 1 << 9,  label: 'Early Supporter',        emoji: '⭐' },
    { flag: 1 << 14, label: 'Bug Hunter Lv2',         emoji: '🐞' },
    { flag: 1 << 17, label: 'Early Verified Dev',     emoji: '🔧' },
    { flag: 1 << 18, label: 'Moderator Alumni',       emoji: '🎓' },
    { flag: 1 << 22, label: 'Active Developer',       emoji: '💻' },
  ];

  function renderBadges(flags) {
    const container = document.getElementById('discord-badges');
    if (!flags) return;
    const earned = BADGE_FLAGS.filter(b => (flags & b.flag) !== 0);
    if (earned.length === 0) return;
    container.innerHTML = earned.map(b =>
      `<div class="badge" title="${b.label}"><span>${b.emoji}</span>${b.label}</div>`
    ).join('');
  }

  // ── GEBURTSTAG & KONFETTI ──
  function checkBirthday() {
    const now = new Date();
    const isBirthday = now.getMonth() === 3 && now.getDate() === 4; // 4. April
    if (!isBirthday) return;

    // Banner
    const banner = document.getElementById('birthday-banner');
    const ageEl  = document.getElementById('birthday-age');
    let age = now.getFullYear() - 2006;
    ageEl.textContent = age;
    banner.classList.add('show');

    // Konfetti
    startConfetti();
  }

  function startConfetti() {
    const canvas = document.getElementById('confetti-canvas');
    const ctx = canvas.getContext('2d');
    canvas.width  = window.innerWidth;
    canvas.height = window.innerHeight;

    const colors = ['#7c6af7','#f76a8a','#23d18b','#f0b132','#ffffff','#a78bfa'];
    const pieces = Array.from({ length: 160 }, () => ({
      x: Math.random() * canvas.width,
      y: Math.random() * -canvas.height,
      r: Math.random() * 7 + 3,
      d: Math.random() * 3 + 1,
      color: colors[Math.floor(Math.random() * colors.length)],
      tilt: Math.random() * 10 - 5,
      tiltSpeed: Math.random() * 0.1 + 0.05,
      angle: 0,
    }));

    let frame;
    let opacity = 1;
    const startTime = Date.now();

    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      const elapsed = Date.now() - startTime;
      if (elapsed > 5000) opacity = Math.max(0, 1 - (elapsed - 5000) / 1500);

      pieces.forEach(p => {
        p.angle += p.tiltSpeed;
        p.y += p.d;
        p.x += Math.sin(p.angle) * 1.5;
        p.tilt = Math.sin(p.angle) * 12;

        if (p.y > canvas.height) {
          p.y = -10;
          p.x = Math.random() * canvas.width;
        }

        ctx.globalAlpha = opacity;
        ctx.beginPath();
        ctx.ellipse(p.x, p.y, p.r, p.r / 2, p.tilt, 0, Math.PI * 2);
        ctx.fillStyle = p.color;
        ctx.fill();
      });

      if (opacity > 0) {
        frame = requestAnimationFrame(draw);
      } else {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
      }
    }

    draw();
    window.addEventListener('resize', () => {
      canvas.width  = window.innerWidth;
      canvas.height = window.innerHeight;
    });
  }

  checkBirthday();

  // ── ALTER ──
  function updateAge() {
    const birth = new Date(2006, 3, 4); // 04.04.2006
    const now = new Date();
    let age = now.getFullYear() - birth.getFullYear();
    const m = now.getMonth() - birth.getMonth();
    if (m < 0 || (m === 0 && now.getDate() < birth.getDate())) age--;
    document.getElementById('age-number').textContent = age;
  }
  updateAge();

  // ── ZITAT ──
  const quotes = [
    { text: "Das Leben ist zu kurz, um langweilige Software zu benutzen.", author: "— Marc Andreessen" },
    { text: "Fantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.", author: "— Albert Einstein" },
    { text: "Der einzige Weg, großartige Arbeit zu leisten, ist zu lieben, was man tut.", author: "— Steve Jobs" },
    { text: "Einfachheit ist die höchste Stufe der Vollkommenheit.", author: "— Leonardo da Vinci" },
    { text: "Wer aufhört, besser werden zu wollen, hört auf, gut zu sein.", author: "— Philip Rosenthal" },
    { text: "Nicht weil die Dinge schwierig sind, wagen wir sie nicht, sondern weil wir sie nicht wagen, sind sie schwierig.", author: "— Seneca" },
    { text: "Der Unterschied zwischen Theorie und Praxis ist in der Praxis größer als in der Theorie.", author: "— Yogi Berra" },
    { text: "Kreativität ist Intelligenz, die Spaß hat.", author: "— Albert Einstein" },
    { text: "Wer kämpft, kann verlieren. Wer nicht kämpft, hat schon verloren.", author: "— Bertolt Brecht" },
    { text: "Das Geheimnis des Fortschritts ist der Fortschritt selbst.", author: "— Marie Curie" },
    { text: "In der Mitte der Schwierigkeit liegt die Möglichkeit.", author: "— Albert Einstein" },
    { text: "Die Zukunft gehört denen, die an die Schönheit ihrer Träume glauben.", author: "— Eleanor Roosevelt" },
  ];

  function pickQuote() {
    // Seed basiert auf dem heutigen Datum → täglich anderes Zitat
    const today = new Date();
    const seed = today.getFullYear() * 10000 + (today.getMonth() + 1) * 100 + today.getDate();
    const idx = seed % quotes.length;
    const q = quotes[idx];
    document.getElementById('quote-text').textContent = q.text;
    document.getElementById('quote-author').textContent = q.author;
  }
  pickQuote();

  // ── UHRZEIT ──
  function updateClock() {
    const now = new Date();
    const tz = 'Europe/Berlin';

    const time = now.toLocaleTimeString('de-DE', { timeZone: tz, hour: '2-digit', minute: '2-digit', second: '2-digit' });
    const date = now.toLocaleDateString('de-DE', { timeZone: tz, weekday: 'long', day: 'numeric', month: 'long' });

    document.getElementById('time-display').textContent = time;
    document.getElementById('time-date').textContent = date;
  }

  updateClock();
  setInterval(updateClock, 1000);

  // ── GITHUB PROJEKTE ──
  const LANG_COLORS = {
    JavaScript: '#f1e05a', TypeScript: '#3178c6', Python: '#3572A5',
    HTML: '#e34c26', CSS: '#563d7c', Rust: '#dea584', Go: '#00ADD8',
    Java: '#b07219', 'C#': '#178600', 'C++': '#f34b7d', C: '#555555',
    Vue: '#41b883', Svelte: '#ff3e00', Kotlin: '#A97BFF', Ruby: '#701516',
    Shell: '#89e051', Lua: '#000080', PHP: '#4F5D95', Swift: '#F05138',
  };

  async function loadProjects() {
    const grid = document.getElementById('projects-grid');
    try {
      const res = await fetch('https://api.github.com/users/Yuray-Dev/repos?sort=updated&per_page=100');
      if (!res.ok) throw new Error('GitHub API Fehler');
      const repos = await res.json();

      // Filter: keine Forks, sortiert nach Stars, max 6
      const filtered = repos
        .filter(r => !r.fork)
        .sort((a, b) => b.stargazers_count - a.stargazers_count)
        .slice(0, 6);

      if (filtered.length === 0) {
        grid.innerHTML = `<p class="projects-error">Keine öffentlichen Repositories gefunden.</p>`;
        return;
      }

      grid.innerHTML = filtered.map(repo => {
        const lang = repo.language || null;
        const color = lang ? (LANG_COLORS[lang] || '#6b6b80') : null;
        const desc = repo.description || 'Keine Beschreibung vorhanden.';

        return `
          <a class="project-card" href="${repo.html_url}" target="_blank" rel="noopener">
            <div class="project-name">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z"/>
              </svg>
              ${repo.name}
            </div>
            <div class="project-desc">${desc}</div>
            <div class="project-meta">
              ${lang ? `<div class="project-lang"><span class="lang-dot" style="background:${color}"></span>${lang}</div>` : ''}
              <div class="project-stars">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                ${repo.stargazers_count}
              </div>
              ${repo.forks_count > 0 ? `<div class="project-fork">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 3v12M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM18 9a9 9 0 0 1-9 9"/></svg>
                ${repo.forks_count}
              </div>` : ''}
            </div>
          </a>`;
      }).join('');

    } catch (e) {
      grid.innerHTML = `<p class="projects-error">Projekte konnten nicht geladen werden.</p>`;
    }
  }

  loadProjects();

  connect();