// Animated SVG covers — code-window style with thematic backdrops. // Each cover keeps a unique backdrop motif behind a window chrome that // shows project-relevant code / config / timeline. const Covers = {}; // ─── Shared window chrome helpers ──────────────────────────────────────────── function WindowChrome({ x, y, w, h, title, hue, hideLights }) { return ( {!hideLights && ( )} {title} ); } // Caret blink reused inside windows function Caret({ x, y, hue }) { return ( ); } // ─── Project Zeus — Unreal C++ header in front of a storm ─────────────────── Covers.zeus = function ZeusCover({ hue = 220 }) { return ( {/* lightning flash backdrop */} {/* rain */} {Array.from({ length: 30 }).map((_, i) => { const x = (i * 27) % 800; return ( ); })} {/* code window */} {[ { n: 1, txt: [['// gameplay · cinematics · UI', `oklch(0.5 0.05 ${hue})`]] }, { n: 2, txt: [['UCLASS', 'oklch(0.85 0.18 50)'], ['(Blueprintable)', '#ededed']] }, { n: 3, txt: [['class', `oklch(0.85 0.18 ${hue})`], [' AZeusCharacter ', '#ededed'], [':', `oklch(0.85 0.18 ${hue})`], [' public ACharacter ', '#ededed'], ['{', '#ededed']] }, { n: 4, txt: [[' GENERATED_BODY', 'oklch(0.85 0.18 50)'], ['()', '#ededed']] }, { n: 5, txt: [[' UFUNCTION', 'oklch(0.85 0.18 50)'], ['(BlueprintCallable)', '#ededed']] }, { n: 6, txt: [[' void ', `oklch(0.85 0.18 ${hue})`], ['TriggerCinematic', 'oklch(0.85 0.16 50)'], ['();', '#ededed']] }, { n: 7, txt: [[' UFUNCTION', 'oklch(0.85 0.18 50)'], ['()', '#ededed']] }, { n: 8, txt: [[' void ', `oklch(0.85 0.18 ${hue})`], ['MoveAlong', 'oklch(0.85 0.16 50)'], ['(FVector dir);', '#ededed']] }, { n: 9, txt: [['};', '#ededed']] } ].map((line, i) => { let x = 50; return ( {line.n} {line.txt.map((seg, j) => { const t = {seg[0]}; x += seg[0].length * 7.4; return t; })} ); })} ); }; // ─── Ghostrunner Fan Trailer — CapCut-style editor timeline ───────────────── Covers.ghost = function GhostCover({ hue = 350 }) { return ( {/* scanlines */} {Array.from({ length: 80 }).map((_, i) => ( ))} {/* preview viewport */} ● REC · 00:00:47 / 00:01:38 {/* metadata panel */} // project fan-trailer // course Cinematography // length 01:38 // status NOT OFFICIAL {/* timeline tracks */} V1 {[0, 90, 160, 250, 360, 480, 560].map((x, i) => ( ))} A1 {/* waveform */} {Array.from({ length: 80 }).map((_, i) => ( ))} {/* playhead */} ); }; // ─── Konata — terminal session in front of waveform ───────────────────────── Covers.konata = function KonataCover({ hue = 168 }) { return ( {/* dim waveform backdrop */} {Array.from({ length: 60 }).map((_, i) => { const x = 30 + i * 12.5; const base = Math.abs(Math.sin(i * 0.45)) * 30 + Math.abs(Math.sin(i * 0.18)) * 25 + 8; return ( ); })} {/* terminal window — slightly tilted */} {[ ['[INFO] ', `oklch(0.85 0.16 145)`, ' Shard 0/3 ready', '#ededed'], ['[INFO] ', `oklch(0.85 0.16 145)`, ' Shard 1/3 ready', '#ededed'], ['[INFO] ', `oklch(0.85 0.16 145)`, ' Shard 2/3 ready', '#ededed'], ['[CMD] ', `oklch(0.85 0.16 ${hue})`, ' /play → ', '#ededed', 'spotify:trk:42', `oklch(0.85 0.18 80)`], ['[STRM] ', `oklch(0.85 0.16 ${hue})`, ' opus@48kHz · stereo', '#ededed'], ['[DB] ', `oklch(0.85 0.16 50)`, ' wrote queue → ', '#ededed', 'sqlite', `oklch(0.85 0.18 ${hue})`], ['[CMD] ', `oklch(0.85 0.16 ${hue})`, ' /filter bassboost', '#ededed'], ['[OK] ', `oklch(0.85 0.16 145)`, ' 4 servers · 12 voice chans', '#ededed'], ['❯ ', `oklch(0.95 0.18 ${hue})`, '', '#ededed'] ].map((row, i) => { const y = 70 + i * 24; return ( {row[0]} {row[2]} {row[4] && {row[4]}} ); })} ); }; // ─── Snowy Parkour — level.json viewer with snowfall + yellow target ──────── Covers.snowy = function SnowyCover({ hue = 195 }) { return ( {/* mountains */} {/* yellow target floating right */} {/* snowfall */} {Array.from({ length: 35 }).map((_, i) => ( ))} {/* JSON window */} {[ { n: 1, txt: [['{', '#ededed']] }, { n: 2, txt: [[' "objective"', `oklch(0.85 0.16 50)`], [': ', '#ededed'], ['"yellow_box"', `oklch(0.8 0.16 145)`], [',', '#ededed']] }, { n: 3, txt: [[' "timer"', `oklch(0.85 0.16 50)`], [': ', '#ededed'], ['30', `oklch(0.85 0.18 90)`], [',', '#ededed']] }, { n: 4, txt: [[' "spawn"', `oklch(0.85 0.16 50)`], [': ', '#ededed'], ['[0, 0, 0]', `oklch(0.85 0.18 90)`], [',', '#ededed']] }, { n: 5, txt: [[' "wind"', `oklch(0.85 0.16 50)`], [': ', '#ededed'], ['"chilly"', `oklch(0.8 0.16 145)`], [',', '#ededed']] }, { n: 6, txt: [[' "best"', `oklch(0.85 0.16 50)`], [': ', '#ededed'], ['"00:18.4"', `oklch(0.8 0.16 145)`]] }, { n: 7, txt: [['}', '#ededed']] }, { n: 8, txt: [['// nyxoril.itch.io/snowy-parkour', `oklch(0.5 0.05 ${hue})`]] } ].map((line, i) => { let x = 50; return ( {line.n} {line.txt.map((seg, j) => { const t = {seg[0]}; x += seg[0].length * 7.6; return t; })} ); })} ); }; // ─── Three.js Porsche — scene init code over wireframe car ────────────────── Covers.porsche = function PorscheCover({ hue = 12 }) { return ( {/* perspective floor */} {Array.from({ length: 14 }).map((_, i) => { const t = (i + 1) / 14; const y = 340 + Math.pow(t, 2) * 160; return ; })} {Array.from({ length: 17 }).map((_, i) => { const x = (i - 8) * 70; return ; })} {/* car silhouette (lower-right, dim) */} {/* code window */} {[ { n: 1, txt: [['import ', `oklch(0.85 0.18 ${hue})`], ['* ', '#ededed'], ['as ', `oklch(0.85 0.18 ${hue})`], ['THREE ', '#ededed'], ['from ', `oklch(0.85 0.18 ${hue})`], ["'three'", 'oklch(0.8 0.16 145)']] }, { n: 2, txt: [['', '#ededed']] }, { n: 3, txt: [['const ', `oklch(0.85 0.18 ${hue})`], ['scene ', '#ededed'], ['= ', `oklch(0.85 0.18 ${hue})`], ['new ', `oklch(0.85 0.18 ${hue})`], ['THREE.Scene', 'oklch(0.85 0.16 50)'], ['()', '#ededed']] }, { n: 4, txt: [['const ', `oklch(0.85 0.18 ${hue})`], ['renderer ', '#ededed'], ['= ', `oklch(0.85 0.18 ${hue})`], ['new ', `oklch(0.85 0.18 ${hue})`], ['WebGLRenderer', 'oklch(0.85 0.16 50)'], ['({ ', '#ededed'], ['antialias', 'oklch(0.85 0.16 50)'], [': ', '#ededed'], ['true ', `oklch(0.85 0.18 ${hue})`], ['})', '#ededed']] }, { n: 5, txt: [['', '#ededed']] }, { n: 6, txt: [['loader.', '#ededed'], ['load', 'oklch(0.85 0.16 50)'], ["('porsche.glb', ", '#ededed'], ['gltf ', '#ededed'], ['=> ', `oklch(0.85 0.18 ${hue})`], ['{', '#ededed']] }, { n: 7, txt: [[' scene.', '#ededed'], ['add', 'oklch(0.85 0.16 50)'], ['(gltf.scene)', '#ededed']] }, { n: 8, txt: [[' scene.environment ', '#ededed'], ['= ', `oklch(0.85 0.18 ${hue})`], ['hdr', '#ededed']] }, { n: 9, txt: [['})', '#ededed']] }, { n: 10, txt: [['', '#ededed']] }, { n: 11, txt: [['// 🚗 → orbit · HDR · custom shaders', `oklch(0.5 0.05 ${hue})`]] } ].map((line, i) => { let x = 50; return ( {line.n} {line.txt.map((seg, j) => { const t = {seg[0]}; x += seg[0].length * 7.4; return t; })} ); })} ); }; // ─── This Portfolio — original code window (kept) ─────────────────────────── Covers.portfolio = function PortfolioCover({ hue = 285 }) { return ( {Array.from({ length: 18 }).map((_, i) => ( ))} {Array.from({ length: 11 }).map((_, i) => ( ))} 1 const Cedrick = () => ( 2 <Portfolio 3 name= "Cédrick" 4 alias= "Nyxoril" 5 role= "Game Dev" 6 /> 7 ); 8 // shipped → you're reading it { } ); }; window.Covers = Covers;