Design: D4RKST3R-Brand statt EcoGame — generisches Devlog-Archiv

- Design-System der d4rkst3r-platform übernommen: Neon-Gelb/Orange auf Schwarz,
  Bebas Neue + Barlow Condensed + Share Tech Mono (selbst gehostet)
- Noise- + Scanline-Overlay, aufsteigende Partikel, Grid-PageHeader mit Ghost-Text
- EcoGame-Branding entfernt — Seite ist jetzt projekt-neutral nutzbar
- Nav mit D4RKST3R-Wortmarke (3R in Orange), Mono-Navigation, Login als Neon-Outline
- Im Browser verifiziert (Devlogs + Commits)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/App.jsx

@@ -1,20 +1,9 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Routes, Route, NavLink, Navigate } from 'react-router-dom';
 import { apiGet } from './api.js';
 import Devlogs from './pages/Devlogs.jsx';
 import Commits from './pages/Commits.jsx';
 
-// Isometrischer Voxel-Würfel als Logo
-function VoxelLogo() {
-    return (
-        <svg className="logo" viewBox="0 0 32 32" aria-hidden="true">
-            <path d="M16 2 L29 9 L16 16 L3 9 Z" fill="#4ade80" />
-            <path d="M3 9 L16 16 L16 31 L3 23 Z" fill="#15803d" />
-            <path d="M29 9 L16 16 L16 31 L29 23 Z" fill="#22c55e" />
-        </svg>
-    );
-}
-
 function DiscordMark() {
     return (
         <svg className="discord-mark" viewBox="0 0 24 24" aria-hidden="true">
@@ -26,9 +15,35 @@ function DiscordMark() {
     );
 }
 
+/* Aufsteigende Neon-Partikel wie auf der Platform-Seite */
+function Particles() {
+    const particles = useMemo(
+        () =>
+            Array.from({ length: 24 }, (_, i) => ({
+                id: i,
+                left: `${Math.random() * 100}%`,
+                dur: `${6 + Math.random() * 8}s`,
+                delay: `${Math.random() * 8}s`,
+            })),
+        []
+    );
+    return (
+        <div className="particles-wrap" aria-hidden="true">
+            {particles.map((p) => (
+                <span
+                    key={p.id}
+                    className="particle"
+                    style={{ left: p.left, '--dur': p.dur, '--delay': p.delay, bottom: 0 }}
+                />
+            ))}
+        </div>
+    );
+}
+
 export default function App() {
     // Login-Status einmal beim Laden holen
     const [me, setMe] = useState({ user: null, admin: false, loading: true });
+    const [scrolled, setScrolled] = useState(false);
 
     useEffect(() => {
         apiGet('/api/me')
@@ -36,39 +51,38 @@ export default function App() {
             .catch(() => setMe({ user: null, admin: false, loading: false }));
     }, []);
 
+    useEffect(() => {
+        const onScroll = () => setScrolled(window.scrollY > 24);
+        window.addEventListener('scroll', onScroll, { passive: true });
+        return () => window.removeEventListener('scroll', onScroll);
+    }, []);
+
     return (
         <div className="app">
-            <div className="bg-glow" aria-hidden="true" />
+            <Particles />
 
-            <header className="header">
-                <div className="header-inner">
-                    <NavLink to="/" className="brand">
-                        <VoxelLogo />
-                        <span className="brand-name">
-                            Eco<span className="brand-accent">Game</span>
-                        </span>
-                    </NavLink>
+            <header className={`nav ${scrolled ? 'scrolled' : ''}`}>
+                <NavLink to="/" className="nav-logo">
+                    D4RKST<span>3R</span>
+                </NavLink>
 
-                    <nav className="nav">
-                        <NavLink to="/devlogs">Devlogs</NavLink>
-                        {me.admin && <NavLink to="/commits">Commits</NavLink>}
-                    </nav>
+                <nav className="nav-links">
+                    <NavLink to="/devlogs">Devlog</NavLink>
+                    {me.admin && <NavLink to="/commits">Commits</NavLink>}
+                </nav>
 
-                    <div className="auth">
-                        {me.loading ? null : me.user ? (
-                            <div className="user-chip">
-                                {me.user.avatar && (
-                                    <img className="avatar" src={me.user.avatar} alt="" />
-                                )}
-                                <span className="username">{me.user.username}</span>
-                                <a className="logout" href="/auth/logout" title="Logout">✕</a>
-                            </div>
-                        ) : (
-                            <a className="btn btn-discord" href="/auth/login">
-                                <DiscordMark /> Login
-                            </a>
-                        )}
-                    </div>
+                <div className="auth">
+                    {me.loading ? null : me.user ? (
+                        <div className="user-chip">
+                            {me.user.avatar && <img className="avatar" src={me.user.avatar} alt="" />}
+                            <span className="username">{me.user.username}</span>
+                            <a className="logout" href="/auth/logout" title="Logout">✕</a>
+                        </div>
+                    ) : (
+                        <a className="btn-login" href="/auth/login">
+                            <DiscordMark /> Login
+                        </a>
+                    )}
                 </div>
             </header>
 
@@ -82,13 +96,11 @@ export default function App() {
             </main>
 
             <footer className="footer">
-                <VoxelLogo />
-                <span>
-                    EcoGame Devlog-Archiv ·{' '}
-                    <a href="https://git.d4rkst3r.de/D4rkst3r" target="_blank" rel="noreferrer">
-                        git.d4rkst3r.de
-                    </a>
-                </span>
+                <span className="footer-logo">D4RKST<span>3R</span></span>
+                <span className="footer-sep">//</span>
+                <a href="https://git.d4rkst3r.de/D4rkst3r" target="_blank" rel="noreferrer">
+                    git.d4rkst3r.de
+                </a>
             </footer>
         </div>
     );