Website/www/projects/index.html

<!DOCTYPE html>
<html lang="de" dir="ltr">

<head>
  <meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/png" href="/avatar.png">
<title>Projects</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<link rel="stylesheet" type='text/css' href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
  integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw=="
  crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
  @import url('https://fonts.googleapis.com/css2?family=Ubuntu+Sans+Mono:ital,wght@0,400..700;1,400..700&display=swap');

  .font-jersey {

    font-family: "Ubuntu Sans Mono", monospace;
    font-optical-sizing: auto;
    font-style: normal;
  }


  .md-content .katex-display {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .md-content .katex-display>.katex {
    display: inline-block;
    max-width: 100%;
  }

  .swup-transition-fade {
    opacity: 1;
    transition: 300ms ease-in-out;
  }

  .is-animating .swup-transition-fade {
    opacity: 0;
  }

  .swup-transition-fade {
    opacity: 1;
    transition: opacity 300ms ease-in-out;
  }

  html.is-animating .swup-transition-fade {
    opacity: 0;
  }

  html.is-animating {
    cursor: progress;
  }

  html.is-leaving .swup-transition-fade {
    opacity: 0;
  }
</style>

<script src="https://unpkg.com/swup@4"></script>
<script src="https://unpkg.com/@swup/preload-plugin@3"></script>
<script src="https://unpkg.com/@swup/progress-plugin@3"></script>
<script>
  const swup = new Swup({
    containers: ['#swup'],
    animationSelector: '[class*="swup-transition-"]',
    cache: true,
    preload: true,
    animateHistoryBrowsing: true,

    plugins: [
      new SwupPreloadPlugin(),
      new SwupProgressPlugin()
    ]
  })
  window.swup = swup
</script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js"
  crossorigin="anonymous"></script>

<script>
  

  
  const KATEX_CONFIG = {
    delimiters: [
      {left: "$$", right: "$$", display: true},
      {left: "$", right: "$", display: false},
      {left: "\\[", right: "\\]", display: true},
      {left: "\\(", right: "\\)", display: false}
    ],
    ignoredTags: ["script", "noscript", "style", "textarea", "pre", "code"],
    throwOnError: false
  };

  
  function renderKatex() {
    
    if (typeof renderMathInElement !== "function") {
      console.log("⏳ Waiting for KaTeX to load...");
      return;
    }

    
    const contentArea = document.getElementById('swup') || document.body;

    try {
      renderMathInElement(contentArea, KATEX_CONFIG);
      console.log("✅ KaTeX rendered successfully");
    } catch (error) {
      console.error("❌ KaTeX rendering error:", error);
    }
  }

  
  function renderKatexWithRetry(maxRetries = 10, delay = 100) {
    let attempts = 0;

    const attempt = () => {
      if (typeof renderMathInElement === "function") {
        renderKatex();
      } else if (attempts < maxRetries) {
        attempts++;
        setTimeout(attempt, delay);
      } else {
        console.warn("⚠️ KaTeX auto-render not available after", maxRetries, "attempts");
      }
    };

    attempt();
  }

  
  function setupSwupIntegration() {
    
    if (window.swup) {
      window.swup.hooks.on('page:view', () => {
        console.log("🔄 Swup transition complete, re-rendering KaTeX...");
        
        setTimeout(() => renderKatexWithRetry(3, 50), 50);
      });
      console.log("✅ KaTeX-Swup integration ready");
    } else {
      
      setTimeout(setupSwupIntegration, 100);
    }
  }

  
  document.addEventListener("DOMContentLoaded", function () {
    console.log("🚀 Initializing KaTeX...");

    
    renderKatexWithRetry();

    
    setupSwupIntegration();
  });

  
  window.renderKatex = renderKatex;
</script>

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';

  let initialized = false;

  function renderMermaid() {
    const contentArea = document.getElementById('swup') || document.body;
    const mermaidBlocks = contentArea.querySelectorAll('.language-mermaid, .mermaid');

    if (mermaidBlocks.length === 0) {
      console.log("ℹ️ No mermaid blocks found on this page");
      return;
    }

    if (!initialized) {
      mermaid.initialize({startOnLoad: false, theme: 'dark'});
      initialized = true;
    }

    mermaidBlocks.forEach(el => {
      if (el.dataset.processed === 'true') {
        const source = el.dataset.mermaidSource;
        if (source) {
          el.innerHTML = source;
          el.removeAttribute('data-processed');
        }
      } else {
        el.dataset.mermaidSource = el.textContent;
      }
    });

    mermaid.run({nodes: mermaidBlocks})
      .then(() => console.log("✅ Mermaid rendered successfully"))
      .catch(err => console.error("❌ Mermaid rendering error:", err));
  }

  function renderMermaidWithRetry(maxRetries = 10, delay = 100) {
    let attempts = 0;

    const attempt = () => {
      if (typeof mermaid.initialize === "function") {
        renderMermaid();
      } else if (attempts < maxRetries) {
        attempts++;
        setTimeout(attempt, delay);
      } else {
        console.warn("⚠️ Mermaid auto-render not available after", maxRetries, "attempts");
      }
    };

    attempt();
  }

  
  function setupSwupIntegration() {
    
    if (window.swup) {
      window.swup.hooks.on('page:view', () => {
        console.log("🔄 Swup transition complete, re-rendering mermaid...");
        
        setTimeout(() => renderMermaidWithRetry(3, 50), 50);
      });
      console.log("✅ Mermaid-Swup integration ready");
    } else {
      
      setTimeout(setupSwupIntegration, 100);
    }
  }

  
  document.addEventListener("DOMContentLoaded", function () {
    console.log("🚀 Initializing KaTeX...");

    
    renderMermaidWithRetry();

    
    setupSwupIntegration();
  });



</script>


</head>

<body class="min-h-screen flex flex-col bg-black font-jersey text-white text-3xl">
  <header>
    <div class="sticky absolute top-0 z-50">
  <nav class="w-full border-b border-gray-800 bg-[#070709]/95 backdrop-blur-sm text-gray-100">
    <div class="max-w-6xl mx-auto px-4 sm:px-6">
      <div class="flex items-center justify-between h-16">
        
        <div class="flex items-center gap-3">

          <a href='https://thereisno.space/' class="flex items-center gap-3 group" aria-label="Homepage">

            <img src='/avatar.jpg' alt="ThereIsNo.Space"
              class="w-10 h-10 rounded-sm border-2 border-gray-700 object-cover transition-transform duration-300 transform group-hover:scale-105"
              style="animation: border-breathe 4s ease-in-out infinite;" />
            <span class="text-white text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold tracking-wide">
              ThereIsNo.Space
              <span class="inline-block ml-2" style="animation: flicker 1.6s steps(2, end) infinite;">_</span>
            </span>
          </a>
        </div>

        
        <div class="flex items-center gap-4">
          
          <div class="hidden md:flex items-center">
            

<nav aria-label="Primary" class="w-full">
  <ul
    class="flex flex-col md:flex-row md:items-center md:space-x-6 space-y-2 md:space-y-0 sm:text-lg md:text-xl lg:text-3xl"><li>
      <a aria-current="page" href="/projects/"class="group inline-flex items-center px-3 py-2 rounded-sm text-gray-200 hover:text-white transition-colors duration-200">
        <span class="relative inline-block">
          <span>Projekte</span>
          
          <span
            class="absolute left-0 -bottom-1 h-[2px] w-0 bg-indigo-400 transition-all duration-300 group-hover:w-full"></span>
        </span>
      </a>
    </li><li>
      <a href="/blog/"class="group inline-flex items-center px-3 py-2 rounded-sm text-gray-200 hover:text-white transition-colors duration-200">
        <span class="relative inline-block">
          <span>Blog</span>
          
          <span
            class="absolute left-0 -bottom-1 h-[2px] w-0 bg-indigo-400 transition-all duration-300 group-hover:w-full"></span>
        </span>
      </a>
    </li><li>
      <a href="/"class="group inline-flex items-center px-3 py-2 rounded-sm text-gray-200 hover:text-white transition-colors duration-200">
        <span class="relative inline-block">
          <span>Über uns</span>
          
          <span
            class="absolute left-0 -bottom-1 h-[2px] w-0 bg-indigo-400 transition-all duration-300 group-hover:w-full"></span>
        </span>
      </a>
    </li>
  </ul>
</nav>

          </div>

          
          <div class="md:hidden">
            <button id="nav-toggle" aria-controls="mobile-menu" aria-expanded="false"
              class="inline-flex items-center justify-center p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-400"
              aria-label="Open menu">
              <svg class="h-6 w-6 text-gray-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </button>
          </div>
        </div>
      </div>

      
      <div id="mobile-menu" class="md:hidden hidden pb-4">
        
        

<nav aria-label="Primary" class="w-full">
  <ul
    class="flex flex-col md:flex-row md:items-center md:space-x-6 space-y-2 md:space-y-0 sm:text-lg md:text-xl lg:text-3xl"><li>
      <a aria-current="page" href="/projects/"class="group inline-flex items-center px-3 py-2 rounded-sm text-gray-200 hover:text-white transition-colors duration-200">
        <span class="relative inline-block">
          <span>Projekte</span>
          
          <span
            class="absolute left-0 -bottom-1 h-[2px] w-0 bg-indigo-400 transition-all duration-300 group-hover:w-full"></span>
        </span>
      </a>
    </li><li>
      <a href="/blog/"class="group inline-flex items-center px-3 py-2 rounded-sm text-gray-200 hover:text-white transition-colors duration-200">
        <span class="relative inline-block">
          <span>Blog</span>
          
          <span
            class="absolute left-0 -bottom-1 h-[2px] w-0 bg-indigo-400 transition-all duration-300 group-hover:w-full"></span>
        </span>
      </a>
    </li><li>
      <a href="/"class="group inline-flex items-center px-3 py-2 rounded-sm text-gray-200 hover:text-white transition-colors duration-200">
        <span class="relative inline-block">
          <span>Über uns</span>
          
          <span
            class="absolute left-0 -bottom-1 h-[2px] w-0 bg-indigo-400 transition-all duration-300 group-hover:w-full"></span>
        </span>
      </a>
    </li>
  </ul>
</nav>

      </div>
    </div>
  </nav>

  
  <style>
    @keyframes flicker {
      0% {
        opacity: 1;
        transform: translateY(0);
      }

      10% {
        opacity: 0.2;
        transform: translateY(-1px);
      }

      20% {
        opacity: 1;
        transform: translateY(0);
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes border-breathe {
      0% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.06);
      }

      50% {
        box-shadow: 0 0 18px 6px rgba(99, 102, 241, 0.03);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.06);
      }
    }
  </style>

  
  <script>
    (function () {
      const btn = document.getElementById('nav-toggle');
      const menu = document.getElementById('mobile-menu');
      if (!btn || !menu) return;
      btn.addEventListener('click', () => {
        const open = menu.classList.toggle('hidden') === false;
        btn.setAttribute('aria-expanded', open ? 'true' : 'false');
      });
    })();
  </script>
</div>

  </header>

  <main class="flex-1 w-full">
    <div id="swup" class="swup-transition-fade">
      <div class="max-w-3xl lg:max-w-6xl xl:max-w-7xl mx-auto px-5 sm:px-8 lg:px-10 py-10 lg:py-16">
        
<main class="max-w-6xl mx-auto px-4 sm:px-6 pt-24 pb-12 text-gray-100">
  <header class="mb-8">
    <h1 class="text-2xl sm:text-3xl md:text-4xl tracking-wide text-white">Projects</h1>
    <p class="mt-2 text-sm sm:text-base text-gray-400">
      1 items under this folder.
    </p>
  </header><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"><a href="/projects/empty/"
      class="group block border border-gray-800/80 bg-[#070709] rounded-sm p-5 transition duration-200 hover:-translate-y-0.5 hover:bg-white/5 hover:border-indigo-400/30 hover:ring-1 hover:ring-indigo-400/20 motion-reduce:hover:translate-y-0"
      >
      <div class="flex items-start justify-between gap-3">
        <h2 class="text-lg sm:text-xl text-white tracking-wide leading-snug">
          <span class="relative inline-block">
            
            <span
              class="absolute left-0 -bottom-1 h-px w-0 bg-indigo-400 transition-all duration-300 group-hover:w-full"></span>
          </span>
        </h2>
        <span class="text-gray-500 group-hover:text-indigo-300 transition-colors" aria-hidden="true">↗</span>
      </div>

      <p class="mt-3 text-sm sm:text-base text-gray-400 leading-relaxed"> /_ / / ___ ________ / // | / / / / / __ / _ / / _ \ / // / |/ / __ / / / / / / __/ / / // /( ) /| / // / // // //_/_/ _//// |/_/ / / ____ …</p>

      <div class="mt-4 flex flex-wrap gap-2"></div>
    </a></div>
</main>

      </div>

    </div>
  </main>

  <footer>
    <div class="border-t border-gray-800 bg-[#070709] text-gray-400">
  <div class="max-w-6xl mx-auto px-4 sm:px-6">
    <div class="flex flex-col md:flex-row items-center justify-between py-6 space-y-4 md:space-y-0">

      
      <div class="text-sm sm:text-base md:text-lg">
        <span class="relative inline-block">
          © 2026 ThereIsNo.Space. All rights reserved. <br>
          Made with <a href="https://gohugo.io" target="_blank">Hugo</a> | <a
            href="https://github.com/Enerhim/enervoid-theme" target="_blank">Enervoid</a>
        </span>
      </div>

      
      <div class="flex items-center space-x-6 text-sm sm:text-base md:text-lg">

        

      </div>
    </div>
  </div>
</div>

  </footer>
</body>

</html>