first commit

src/components/islands/BootSequence.tsx

@@ -0,0 +1,98 @@
+import { useEffect, useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+
+const LINES = [
+  { label: '> init.sound-system', status: 'OK', delay: 150 },
+  { label: '> load.frequency: 174Hz', status: 'LOCKED', delay: 300 },
+  { label: '> warmup.amps', status: 'OK', delay: 420 },
+  { label: '> patch.crate → decks', status: 'READY', delay: 560 },
+  { label: '> signal.online', status: 'ON AIR', delay: 720 },
+];
+
+export default function BootSequence() {
+  const [visible, setVisible] = useState(false);
+  const [step, setStep] = useState(0);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    if (sessionStorage.getItem('portfolio:booted') === '1') return;
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      sessionStorage.setItem('portfolio:booted', '1');
+      return;
+    }
+
+    setVisible(true);
+
+    const timers: number[] = [];
+    LINES.forEach((line, i) => {
+      timers.push(window.setTimeout(() => setStep(i + 1), line.delay));
+    });
+    timers.push(
+      window.setTimeout(() => {
+        setVisible(false);
+        sessionStorage.setItem('portfolio:booted', '1');
+      }, 1200),
+    );
+
+    return () => {
+      timers.forEach(clearTimeout);
+    };
+  }, []);
+
+  function skip() {
+    sessionStorage.setItem('portfolio:booted', '1');
+    setVisible(false);
+  }
+
+  return (
+    <AnimatePresence>
+      {visible && (
+        <motion.div
+          className="fixed inset-0 z-[100] flex items-center justify-center cursor-pointer"
+          onClick={skip}
+          initial={{ opacity: 1 }}
+          exit={{ opacity: 0, filter: 'blur(12px)' }}
+          transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] }}
+          style={{ background: 'var(--color-bg)' }}
+        >
+          <div className="font-mono text-xs md:text-sm max-w-sm w-full px-6">
+            <div className="mb-6 flex items-center gap-2 text-[color:var(--color-acid)] uppercase tracking-[0.3em]">
+              <span className="led led-acid animate-pulse" />
+              <span>Booting sound system</span>
+            </div>
+            <ul className="space-y-1.5">
+              {LINES.slice(0, step).map((line, i) => (
+                <motion.li
+                  key={i}
+                  initial={{ opacity: 0, x: -8 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ duration: 0.2 }}
+                  className="flex justify-between gap-4"
+                >
+                  <span className="text-[color:var(--color-text-muted)]">{line.label}</span>
+                  <span
+                    className={
+                      line.status === 'ON AIR'
+                        ? 'text-[color:var(--color-acid)]'
+                        : 'text-[color:var(--color-cyan)]'
+                    }
+                  >
+                    [{line.status}]
+                  </span>
+                </motion.li>
+              ))}
+              {step < LINES.length && (
+                <li className="flex items-center gap-1 text-[color:var(--color-text-dim)]">
+                  <span className="animate-pulse">█</span>
+                </li>
+              )}
+            </ul>
+            <p className="mt-8 text-[10px] text-[color:var(--color-text-dim)] text-center uppercase tracking-widest">
+              click to skip
+            </p>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}

src/components/islands/Crate.tsx

@@ -0,0 +1,99 @@
+import { useEffect, useRef } from 'react';
+import SkeudCard from './SkeudCard';
+
+interface Project {
+  id: string;
+  title: string;
+  subtitle?: string;
+  description: string;
+  image?: string;
+  category: string;
+  status: string;
+  url?: string;
+  stack: string[];
+  featured?: boolean;
+}
+
+interface Props {
+  projects: Project[];
+}
+
+export default function Crate({ projects }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const trackRef = useRef<HTMLDivElement>(null);
+  const scrollerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    const track = trackRef.current;
+    if (!container || !track) return;
+    // Mobile / touch : skip pinned logic, default vertical grid via CSS
+    if (window.matchMedia('(max-width: 767px)').matches) return;
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+    const getTotalScroll = () => track.scrollWidth - window.innerWidth + 100;
+
+    function onScroll() {
+      if (!container || !track) return;
+      const rect = container.getBoundingClientRect();
+      const totalScroll = getTotalScroll();
+      if (totalScroll <= 0) return;
+
+      if (rect.top <= 0 && rect.bottom > window.innerHeight) {
+        const progress = Math.min(1, Math.max(0, -rect.top / (container.offsetHeight - window.innerHeight)));
+        track.style.transform = `translate3d(${-progress * totalScroll}px, 0, 0)`;
+      }
+    }
+
+    window.addEventListener('scroll', onScroll, { passive: true });
+    window.addEventListener('resize', onScroll);
+    onScroll();
+    return () => {
+      window.removeEventListener('scroll', onScroll);
+      window.removeEventListener('resize', onScroll);
+    };
+  }, [projects.length]);
+
+  // Height of container = 100vh * (project count factor) to give scroll room
+  const containerHeightStyle = {
+    height: `${Math.max(100, projects.length * 60)}vh`,
+  };
+
+  return (
+    <>
+      {/* Desktop : pinned horizontal scroll */}
+      <div
+        ref={containerRef}
+        className="hidden md:block relative"
+        style={containerHeightStyle}
+      >
+        <div
+          ref={scrollerRef}
+          className="sticky top-16 h-screen overflow-hidden flex items-center"
+        >
+          <div
+            ref={trackRef}
+            className="flex items-center gap-10 pl-[10vw] pr-[20vw] will-change-transform"
+          >
+            {projects.map((project, i) => (
+              <SkeudCard key={project.id} project={project} index={i} />
+            ))}
+            <div
+              className="flex-shrink-0 font-mono text-xs text-[color:var(--color-text-dim)] uppercase tracking-widest writing-mode-vertical"
+              style={{ writingMode: 'vertical-rl' }}
+            >
+              end of crate · {projects.length} skeuds
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile : vertical grid fallback */}
+      <div className="md:hidden grid grid-cols-1 gap-10 pt-8">
+        {projects.map((project, i) => (
+          <SkeudCard key={project.id} project={project} index={i} />
+        ))}
+      </div>
+    </>
+  );
+}

src/components/islands/EasterEggs.tsx

@@ -0,0 +1,131 @@
+import { useEffect } from 'react';
+
+const KONAMI = [
+  'ArrowUp',
+  'ArrowUp',
+  'ArrowDown',
+  'ArrowDown',
+  'ArrowLeft',
+  'ArrowRight',
+  'ArrowLeft',
+  'ArrowRight',
+  'KeyB',
+  'KeyA',
+];
+
+function triggerPartyMode() {
+  if (document.getElementById('party-overlay')) return;
+  const overlay = document.createElement('div');
+  overlay.id = 'party-overlay';
+  overlay.style.cssText =
+    'position:fixed;inset:0;z-index:9999;pointer-events:none;background:transparent;';
+  document.body.appendChild(overlay);
+
+  // Strobe flashes
+  const strobe = document.createElement('div');
+  strobe.style.cssText =
+    'position:absolute;inset:0;background:#ffffff;opacity:0;mix-blend-mode:difference;';
+  overlay.appendChild(strobe);
+
+  const colors = ['#00F0FF', '#FF2A6D', '#C6FF00', '#B967FF'];
+  let i = 0;
+  const strobeInterval = setInterval(() => {
+    const c = colors[i++ % colors.length];
+    strobe.style.background = c;
+    strobe.style.opacity = '0.4';
+    setTimeout(() => (strobe.style.opacity = '0'), 60);
+  }, 140);
+
+  // Big text
+  const text = document.createElement('div');
+  text.textContent = 'PARTY MODE ACTIVATED';
+  text.style.cssText = `
+    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
+    font-family:"Bebas Neue",Impact,sans-serif;font-size:min(12vw,8rem);
+    color:#C6FF00;text-shadow:0 0 30px #C6FF00;letter-spacing:0.1em;
+    animation:glitch-skew 0.2s infinite;pointer-events:none;
+  `;
+  overlay.appendChild(text);
+
+  // Clean up after 4 seconds
+  setTimeout(() => {
+    clearInterval(strobeInterval);
+    overlay.style.transition = 'opacity 0.5s';
+    overlay.style.opacity = '0';
+    setTimeout(() => overlay.remove(), 500);
+  }, 4000);
+}
+
+function playTick() {
+  const soundOn = (window as unknown as { __soundOn?: boolean }).__soundOn;
+  if (!soundOn) return;
+  try {
+    const AudioCtx =
+      window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext;
+    const ctx = new AudioCtx();
+    const osc = ctx.createOscillator();
+    const gain = ctx.createGain();
+    osc.type = 'square';
+    osc.frequency.value = 1200;
+    gain.gain.value = 0.02;
+    osc.connect(gain);
+    gain.connect(ctx.destination);
+    osc.start();
+    gain.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + 0.04);
+    osc.stop(ctx.currentTime + 0.05);
+  } catch {
+    /* audio disabled */
+  }
+}
+
+export default function EasterEggs() {
+  useEffect(() => {
+    // Konami code
+    let buffer: string[] = [];
+    function onKey(e: KeyboardEvent) {
+      buffer.push(e.code);
+      if (buffer.length > KONAMI.length) buffer.shift();
+      if (KONAMI.every((k, i) => buffer[i] === k)) {
+        triggerPartyMode();
+        buffer = [];
+      }
+    }
+    window.addEventListener('keydown', onKey);
+
+    // Logo 5x click
+    let logoClickCount = 0;
+    let logoTimer: number | null = null;
+    const logo = document.querySelector<HTMLElement>('header a[href="/"]');
+    function onLogoClick(e: Event) {
+      logoClickCount += 1;
+      if (logoClickCount >= 5) {
+        e.preventDefault();
+        logoClickCount = 0;
+        triggerPartyMode();
+      }
+      if (logoTimer) window.clearTimeout(logoTimer);
+      logoTimer = window.setTimeout(() => {
+        logoClickCount = 0;
+      }, 2000);
+    }
+    logo?.addEventListener('click', onLogoClick);
+
+    // Tick on hover links/buttons
+    function onMouseOver(e: MouseEvent) {
+      const t = e.target as HTMLElement;
+      if (!t?.closest) return;
+      if (t.closest('a, button, [role="button"]')) {
+        playTick();
+      }
+    }
+    document.addEventListener('mouseover', onMouseOver, { passive: true });
+
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      logo?.removeEventListener('click', onLogoClick);
+      document.removeEventListener('mouseover', onMouseOver);
+    };
+  }, []);
+
+  return null;
+}

src/components/islands/MagneticButton.tsx

@@ -0,0 +1,71 @@
+import { useRef, type ReactNode, type MouseEvent } from 'react';
+
+interface Props {
+  children: ReactNode;
+  href?: string;
+  onClick?: () => void;
+  className?: string;
+  target?: string;
+  rel?: string;
+  strength?: number;
+  download?: boolean | string;
+}
+
+export default function MagneticButton({
+  children,
+  href,
+  onClick,
+  className = '',
+  target,
+  rel,
+  strength = 0.3,
+  download,
+}: Props) {
+  const ref = useRef<HTMLElement | null>(null);
+
+  function handleMove(e: MouseEvent) {
+    const el = ref.current;
+    if (!el) return;
+    if (window.matchMedia('(pointer: coarse)').matches) return;
+    const rect = el.getBoundingClientRect();
+    const x = e.clientX - (rect.left + rect.width / 2);
+    const y = e.clientY - (rect.top + rect.height / 2);
+    el.style.transform = `translate(${x * strength}px, ${y * strength}px)`;
+  }
+
+  function handleLeave() {
+    if (!ref.current) return;
+    ref.current.style.transform = '';
+  }
+
+  const baseClass = `inline-block transition-transform duration-200 ease-out will-change-transform ${className}`;
+
+  if (href) {
+    return (
+      <a
+        ref={ref as React.RefObject<HTMLAnchorElement>}
+        href={href}
+        target={target}
+        rel={rel}
+        download={download as boolean | string | undefined}
+        onMouseMove={handleMove}
+        onMouseLeave={handleLeave}
+        className={baseClass}
+      >
+        {children}
+      </a>
+    );
+  }
+  return (
+    <button
+      ref={ref as React.RefObject<HTMLButtonElement>}
+      type="button"
+      onMouseMove={handleMove}
+      onMouseLeave={handleLeave}
+      onClick={onClick}
+      className={baseClass}
+    >
+      {children}
+    </button>
+  );
+}

src/components/islands/PatchBay.tsx

@@ -0,0 +1,139 @@
+import { useEffect, useRef } from 'react';
+
+interface Props {
+  technical: string[];
+  soft: string[];
+}
+
+export default function PatchBay({ technical, soft }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const svgRef = useRef<SVGSVGElement>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    const svg = svgRef.current;
+    if (!container || !svg) return;
+
+    function drawCables() {
+      if (!svg || !container) return;
+      const rect = container.getBoundingClientRect();
+      const width = rect.width;
+      const height = rect.height;
+      svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
+      svg.setAttribute('width', String(width));
+      svg.setAttribute('height', String(height));
+
+      // Find left + right jack positions
+      const leftJacks = container.querySelectorAll<HTMLElement>('[data-jack="left"]');
+      const rightJacks = container.querySelectorAll<HTMLElement>('[data-jack="right"]');
+      const cr = container.getBoundingClientRect();
+
+      const leftPoints = Array.from(leftJacks).map((el) => {
+        const r = el.getBoundingClientRect();
+        return { x: r.right - cr.left, y: r.top + r.height / 2 - cr.top };
+      });
+      const rightPoints = Array.from(rightJacks).map((el) => {
+        const r = el.getBoundingClientRect();
+        return { x: r.left - cr.left, y: r.top + r.height / 2 - cr.top };
+      });
+
+      // Build cable paths pairing left to right
+      const colors = ['var(--color-cyan)', 'var(--color-magenta)', 'var(--color-acid)'];
+      svg.innerHTML = '';
+      leftPoints.forEach((p1, i) => {
+        const pairIdx = i % rightPoints.length;
+        const p2 = rightPoints[pairIdx];
+        if (!p2) return;
+        const dx = p2.x - p1.x;
+        const sag = 20 + (i % 3) * 8;
+        const midY = (p1.y + p2.y) / 2 + sag;
+        const c1x = p1.x + dx * 0.4;
+        const c2x = p1.x + dx * 0.6;
+        const d = `M ${p1.x} ${p1.y} C ${c1x} ${midY}, ${c2x} ${midY}, ${p2.x} ${p2.y}`;
+
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path.setAttribute('d', d);
+        path.setAttribute('fill', 'none');
+        path.setAttribute('stroke', colors[i % colors.length]);
+        path.setAttribute('stroke-width', '1.6');
+        path.setAttribute('stroke-opacity', '0.55');
+        path.style.filter = `drop-shadow(0 0 4px ${colors[i % colors.length]})`;
+        svg.appendChild(path);
+
+        // Plug tips
+        [p1, p2].forEach((p) => {
+          const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+          circle.setAttribute('cx', String(p.x));
+          circle.setAttribute('cy', String(p.y));
+          circle.setAttribute('r', '3');
+          circle.setAttribute('fill', colors[i % colors.length]);
+          circle.style.filter = `drop-shadow(0 0 6px ${colors[i % colors.length]})`;
+          svg.appendChild(circle);
+        });
+      });
+    }
+
+    drawCables();
+    const ro = new ResizeObserver(drawCables);
+    ro.observe(container);
+    window.addEventListener('resize', drawCables);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener('resize', drawCables);
+    };
+  }, [technical.length, soft.length]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="relative grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] gap-10 md:gap-20 bg-[color:var(--color-surface)] border border-[color:var(--color-border)] rounded-sm p-6 md:p-10"
+    >
+      {/* Left panel : technical */}
+      <div>
+        <h3 className="stencil text-sm uppercase tracking-[0.25em] text-[color:var(--color-cyan)] glow-text-cyan mb-4">
+          Techniques
+        </h3>
+        <ul className="space-y-2.5">
+          {technical.map((s, i) => (
+            <li key={s} className="flex items-center gap-3 font-mono text-xs uppercase tracking-wider">
+              <span className="text-[color:var(--color-text-muted)] flex-1">{s}</span>
+              <span
+                data-jack="left"
+                className="w-3 h-3 rounded-full border-2 border-[color:var(--color-cyan)] bg-[color:var(--color-bg)]"
+                style={{ boxShadow: `inset 0 0 0 1px #000` }}
+              />
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      {/* Middle : SVG cables */}
+      <div className="hidden md:block relative min-h-full">
+        <svg
+          ref={svgRef}
+          className="absolute inset-0 pointer-events-none"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+      </div>
+
+      {/* Right panel : soft */}
+      <div>
+        <h3 className="stencil text-sm uppercase tracking-[0.25em] text-[color:var(--color-magenta)] glow-text-magenta mb-4">
+          Transverses
+        </h3>
+        <ul className="space-y-2.5">
+          {soft.map((s, i) => (
+            <li key={s} className="flex items-center gap-3 font-mono text-xs uppercase tracking-wider">
+              <span
+                data-jack="right"
+                className="w-3 h-3 rounded-full border-2 border-[color:var(--color-magenta)] bg-[color:var(--color-bg)]"
+                style={{ boxShadow: `inset 0 0 0 1px #000` }}
+              />
+              <span className="text-[color:var(--color-text-muted)] flex-1">{s}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

src/components/islands/RackModule.tsx

@@ -0,0 +1,156 @@
+import { Icon } from '@iconify-icon/react';
+import { useEffect, useRef, useState } from 'react';
+
+interface Item {
+  name: string;
+  icon: string;
+  level: 'primary' | 'secondary';
+}
+
+interface Props {
+  label: string;
+  items: Item[];
+  accent?: 'cyan' | 'acid' | 'magenta';
+  bpm?: number;
+  index?: number;
+}
+
+const accentMap = {
+  cyan: 'var(--color-cyan)',
+  acid: 'var(--color-acid)',
+  magenta: 'var(--color-magenta)',
+};
+
+export default function RackModule({
+  label,
+  items,
+  accent = 'cyan',
+  bpm = 174,
+  index = 0,
+}: Props) {
+  const color = accentMap[accent];
+  const [levels, setLevels] = useState<number[]>([]);
+  const rafRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      setLevels([0.6, 0.5, 0.7, 0.4]);
+      return;
+    }
+    const start = performance.now() + index * 137;
+    const tick = (now: number) => {
+      const t = (now - start) / 1000;
+      setLevels([
+        0.5 + 0.3 * Math.abs(Math.sin(t * 2.1)),
+        0.4 + 0.35 * Math.abs(Math.sin(t * 2.8 + 1)),
+        0.6 + 0.25 * Math.abs(Math.sin(t * 1.5 + 2)),
+        0.3 + 0.4 * Math.abs(Math.sin(t * 3.2 + 0.5)),
+      ]);
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    rafRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, [index]);
+
+  return (
+    <article
+      className="relative bg-[color:var(--color-surface)] border border-[color:var(--color-border)] rounded-sm overflow-hidden"
+      style={{ boxShadow: `inset 0 1px 0 rgba(255,255,255,0.03)` }}
+    >
+      {/* Top bar : LED + label + BPM */}
+      <div
+        className="flex items-center justify-between px-4 py-2.5 border-b border-[color:var(--color-border)] bg-[color:var(--color-surface-2)]"
+        style={{ boxShadow: `inset 0 -1px 0 ${color}22` }}
+      >
+        <div className="flex items-center gap-2.5">
+          <span
+            className="led"
+            style={{ background: color, boxShadow: `0 0 8px ${color}` }}
+          />
+          <span
+            className="font-stencil text-sm uppercase tracking-[0.25em]"
+            style={{ color, textShadow: `0 0 10px ${color}80` }}
+          >
+            {label}
+          </span>
+        </div>
+        <span className="font-mono text-[10px] uppercase tracking-widest text-[color:var(--color-text-dim)]">
+          [{bpm} bpm]
+        </span>
+      </div>
+
+      {/* Body : VU meter (vertical bars) + pads grid */}
+      <div className="flex gap-4 p-4">
+        {/* VU meter */}
+        <div
+          className="flex flex-col gap-1 w-3 pt-1"
+          aria-hidden="true"
+          style={{ justifyContent: 'flex-end' }}
+        >
+          {[0.9, 0.75, 0.6, 0.45, 0.3, 0.15].map((threshold, i) => {
+            const on = (levels[i % 4] ?? 0) > threshold;
+            return (
+              <span
+                key={i}
+                className="block w-full h-1 rounded-[1px] transition-opacity"
+                style={{
+                  background: on ? color : `${color}20`,
+                  boxShadow: on ? `0 0 6px ${color}` : 'none',
+                }}
+              />
+            );
+          })}
+        </div>
+
+        {/* Pads grid */}
+        <div className="grid grid-cols-4 gap-2 flex-1 content-start">
+          {items.map((item) => (
+            <button
+              key={item.name}
+              type="button"
+              className="group relative aspect-square flex flex-col items-center justify-center gap-1 bg-[color:var(--color-bg)] border border-[color:var(--color-border)] rounded-sm transition-all hover:translate-y-px active:translate-y-0.5"
+              style={{
+                boxShadow: `inset 0 -2px 0 ${color}15`,
+              }}
+              title={item.name}
+              onMouseEnter={(e) => {
+                (e.currentTarget.style.borderColor = `${color}aa`);
+                (e.currentTarget.style.boxShadow = `0 0 20px ${color}44, inset 0 -2px 0 ${color}66`);
+              }}
+              onMouseLeave={(e) => {
+                (e.currentTarget.style.borderColor = '');
+                (e.currentTarget.style.boxShadow = `inset 0 -2px 0 ${color}15`);
+              }}
+            >
+              <Icon icon={item.icon} width="20" height="20" />
+              <span className="text-[9px] font-mono uppercase tracking-wider text-[color:var(--color-text-muted)] group-hover:text-[color:var(--color-text)] transition-colors truncate max-w-full px-1">
+                {item.name}
+              </span>
+              <span
+                className="absolute top-1 right-1 w-1 h-1 rounded-full opacity-30 group-hover:opacity-100 transition-opacity"
+                style={{ background: color, boxShadow: `0 0 4px ${color}` }}
+              />
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Bottom bar : screws / decoration */}
+      <div className="flex items-center justify-between px-4 py-1.5 border-t border-[color:var(--color-border)] bg-[color:var(--color-surface-2)]">
+        <span className="font-mono text-[9px] text-[color:var(--color-text-dim)] uppercase tracking-widest">
+          CH_{String(index + 1).padStart(2, '0')}
+        </span>
+        <div className="flex gap-2">
+          {[0, 1].map((i) => (
+            <span
+              key={i}
+              className="w-1.5 h-1.5 rounded-full bg-[color:var(--color-border)]"
+            />
+          ))}
+        </div>
+      </div>
+    </article>
+  );
+}

src/components/islands/Reveal.tsx

@@ -0,0 +1,42 @@
+import { motion, useInView } from 'framer-motion';
+import { useRef, type ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  delay?: number;
+  direction?: 'up' | 'down' | 'left' | 'right' | 'none';
+  once?: boolean;
+  className?: string;
+}
+
+const variants = {
+  up: { y: 30, opacity: 0, filter: 'blur(8px)' },
+  down: { y: -30, opacity: 0, filter: 'blur(8px)' },
+  left: { x: -30, opacity: 0, filter: 'blur(8px)' },
+  right: { x: 30, opacity: 0, filter: 'blur(8px)' },
+  none: { opacity: 0, filter: 'blur(8px)' },
+};
+
+export default function Reveal({
+  children,
+  delay = 0,
+  direction = 'up',
+  once = true,
+  className = '',
+}: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+  const inView = useInView(ref, { once, margin: '-50px' });
+  const initial = variants[direction];
+
+  return (
+    <motion.div
+      ref={ref}
+      className={className}
+      initial={initial}
+      animate={inView ? { x: 0, y: 0, opacity: 1, filter: 'blur(0px)' } : initial}
+      transition={{ duration: 0.8, delay, ease: [0.22, 1, 0.36, 1] }}
+    >
+      {children}
+    </motion.div>
+  );
+}

src/components/islands/RolesMorph.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+
+interface Props {
+  roles: string[];
+  interval?: number;
+}
+
+export default function RolesMorph({ roles, interval = 2600 }: Props) {
+  const [idx, setIdx] = useState(0);
+  const [glitch, setGlitch] = useState(false);
+
+  useEffect(() => {
+    if (roles.length <= 1) return;
+    const timer = setInterval(() => {
+      setGlitch(true);
+      setTimeout(() => {
+        setIdx((i) => (i + 1) % roles.length);
+        setGlitch(false);
+      }, 180);
+    }, interval);
+    return () => clearInterval(timer);
+  }, [roles, interval]);
+
+  const current = roles[idx] ?? '';
+
+  return (
+    <span
+      className={`inline-block font-display text-[color:var(--color-cyan)] glow-text-cyan transition-all duration-200 ${
+        glitch ? 'blur-[1px] opacity-60 skew-x-3' : ''
+      }`}
+      data-text={current}
+    >
+      {current}
+    </span>
+  );
+}

src/components/islands/Setlist.tsx

@@ -0,0 +1,174 @@
+import { useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+
+interface Experience {
+  id: string;
+  company: string;
+  logo?: string;
+  role: string;
+  period: string;
+  duration: string;
+  description: string;
+  missions: string[];
+  stack: string[];
+  type: string;
+  current?: boolean;
+}
+
+interface Props {
+  items: Experience[];
+}
+
+function WaveformBar({ level }: { level: number }) {
+  // ASCII-like progress bar with blocks
+  const total = 12;
+  const filled = Math.round(level * total);
+  return (
+    <span className="font-mono tracking-tighter" aria-hidden="true">
+      {Array.from({ length: total }).map((_, i) => (
+        <span
+          key={i}
+          style={{
+            opacity: i < filled ? 1 : 0.25,
+            color: i < filled ? 'var(--color-cyan)' : 'var(--color-text-dim)',
+          }}
+        >
+          █
+        </span>
+      ))}
+    </span>
+  );
+}
+
+export default function Setlist({ items }: Props) {
+  const [open, setOpen] = useState<string | null>(items[0]?.id ?? null);
+
+  return (
+    <div className="divide-y divide-[color:var(--color-border)] border-y border-[color:var(--color-border)]">
+      {items.map((exp, i) => {
+        const isOpen = open === exp.id;
+        const bpm = exp.current ? 174 : 160 - i * 10;
+        const level = exp.current ? 1 : Math.max(0.2, 1 - i * 0.15);
+        return (
+          <article key={exp.id} className={exp.current ? 'bg-[rgba(198,255,0,0.03)]' : ''}>
+            <button
+              type="button"
+              onClick={() => setOpen(isOpen ? null : exp.id)}
+              className="w-full flex items-center gap-3 md:gap-6 px-3 md:px-5 py-4 text-left group hover:bg-[rgba(255,255,255,0.02)] transition-colors"
+              aria-expanded={isOpen}
+            >
+              {/* Track number */}
+              <span className="font-mono text-xs md:text-sm text-[color:var(--color-text-dim)] w-8 tabular-nums">
+                {String(i + 1).padStart(2, '0')}
+              </span>
+
+              {/* Status tag */}
+              <span
+                className="hidden sm:inline-flex items-center gap-1.5 font-mono text-[10px] uppercase tracking-widest w-28"
+                style={{
+                  color: exp.current ? 'var(--color-red)' : 'var(--color-text-dim)',
+                }}
+              >
+                {exp.current ? (
+                  <>
+                    <span className="led led-red animate-led-red"></span>
+                    [now playing]
+                  </>
+                ) : (
+                  <span className="opacity-60">—</span>
+                )}
+              </span>
+
+              {/* Company + role */}
+              <div className="flex-1 min-w-0">
+                <div className="font-display text-sm md:text-base font-semibold truncate group-hover:text-[color:var(--color-cyan)] transition-colors">
+                  {exp.company}
+                </div>
+                <div className="font-mono text-[10px] md:text-xs text-[color:var(--color-text-muted)] uppercase tracking-wider truncate">
+                  {exp.role} · {exp.period}
+                </div>
+              </div>
+
+              {/* Waveform progress */}
+              <div className="hidden md:block">
+                <WaveformBar level={level} />
+              </div>
+
+              {/* BPM / duration */}
+              <div className="hidden sm:flex flex-col items-end gap-0.5 font-mono text-[10px] uppercase tracking-widest text-[color:var(--color-text-dim)] w-24 shrink-0">
+                <span>[{bpm} bpm]</span>
+                <span>[{exp.duration}]</span>
+              </div>
+
+              {/* Chevron */}
+              <span
+                className={`font-mono text-[color:var(--color-cyan)] transition-transform ${isOpen ? 'rotate-90' : ''}`}
+                aria-hidden="true"
+              >
+                &gt;
+              </span>
+            </button>
+
+            <AnimatePresence initial={false}>
+              {isOpen && (
+                <motion.div
+                  initial={{ height: 0, opacity: 0 }}
+                  animate={{ height: 'auto', opacity: 1 }}
+                  exit={{ height: 0, opacity: 0 }}
+                  transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }}
+                  className="overflow-hidden"
+                >
+                  <div className="px-3 md:px-5 pb-6 pt-2 grid grid-cols-1 md:grid-cols-[200px_1fr] gap-6">
+                    <div className="flex items-start gap-3">
+                      {exp.logo && (
+                        <div className="w-16 h-16 shrink-0 flex items-center justify-center bg-[color:var(--color-bg)] border border-[color:var(--color-border)] rounded-sm p-2">
+                          <img
+                            src={exp.logo}
+                            alt={exp.company}
+                            className="w-full h-full object-contain"
+                          />
+                        </div>
+                      )}
+                      <div className="font-mono text-[10px] uppercase tracking-widest text-[color:var(--color-text-dim)] space-y-1">
+                        <div>[type: {exp.type}]</div>
+                        <div>[duration: {exp.duration}]</div>
+                      </div>
+                    </div>
+
+                    <div>
+                      <p className="text-sm text-[color:var(--color-text)] mb-4">{exp.description}</p>
+
+                      {exp.missions.length > 0 && (
+                        <ul className="space-y-1.5 mb-4">
+                          {exp.missions.map((m, idx) => (
+                            <li key={idx} className="flex gap-2 text-sm">
+                              <span className="font-mono text-[color:var(--color-acid)] shrink-0">›</span>
+                              <span className="text-[color:var(--color-text-muted)]">{m}</span>
+                            </li>
+                          ))}
+                        </ul>
+                      )}
+
+                      {exp.stack.length > 0 && (
+                        <div className="flex flex-wrap gap-1.5">
+                          {exp.stack.map((tech) => (
+                            <span
+                              key={tech}
+                              className="font-mono text-[10px] uppercase tracking-wider px-2 py-1 text-[color:var(--color-cyan)] border border-[color:var(--color-cyan)]/30 bg-[color:var(--color-cyan)]/5 rounded-sm"
+                            >
+                              {tech}
+                            </span>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </article>
+        );
+      })}
+    </div>
+  );
+}

src/components/islands/SkeudCard.tsx

@@ -0,0 +1,212 @@
+import { useState } from 'react';
+import type { CSSProperties } from 'react';
+
+interface Project {
+  id: string;
+  title: string;
+  subtitle?: string;
+  description: string;
+  image?: string;
+  category: string;
+  status: string;
+  url?: string;
+  stack: string[];
+  featured?: boolean;
+}
+
+interface Props {
+  project: Project;
+  index: number;
+  bpm?: number;
+}
+
+function statusInfo(status: string) {
+  switch (status) {
+    case 'live':
+      return { label: 'LIVE', color: 'var(--color-acid)' };
+    case 'archived':
+      return { label: 'ARCHIVED', color: 'var(--color-text-dim)' };
+    case 'private':
+      return { label: 'DUBPLATE', color: 'var(--color-magenta)' };
+    case 'wip':
+      return { label: 'WIP', color: 'var(--color-violet)' };
+    default:
+      return { label: status.toUpperCase(), color: 'var(--color-cyan)' };
+  }
+}
+
+export default function SkeudCard({ project, index, bpm }: Props) {
+  const [hover, setHover] = useState(false);
+  const status = statusInfo(project.status);
+  const bpmValue = bpm ?? 120 + ((index * 13) % 80);
+  const isArchived = project.status === 'archived';
+  const isPrivate = project.status === 'private';
+  const clickable = Boolean(project.url) && !isArchived && !isPrivate;
+  const orderLabel = `#${String(index + 1).padStart(2, '0')}`;
+
+  const Wrap = clickable ? 'a' : 'div';
+  const wrapProps = clickable
+    ? { href: project.url, target: '_blank', rel: 'noopener noreferrer' }
+    : {};
+
+  return (
+    <Wrap
+      {...wrapProps}
+      className="group relative block w-[280px] sm:w-[340px] flex-shrink-0"
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      style={{ perspective: 1200 } as CSSProperties}
+    >
+      {/* Order number en filigrane derrière */}
+      <span
+        className="absolute -top-10 -left-2 stencil text-7xl leading-none text-[color:var(--color-border)] select-none pointer-events-none"
+        aria-hidden="true"
+      >
+        {orderLabel}
+      </span>
+
+      {/* Cover / pochette */}
+      <div
+        className="relative aspect-square bg-[color:var(--color-surface)] border border-[color:var(--color-border)] rounded-sm overflow-hidden transition-all duration-500"
+        style={{
+          transform: hover ? 'rotateY(-3deg) rotateX(2deg)' : 'rotateY(0) rotateX(0)',
+          transformStyle: 'preserve-3d',
+          boxShadow: hover
+            ? '0 30px 60px -20px rgba(0, 240, 255, 0.25), 0 0 1px rgba(0, 240, 255, 0.4)'
+            : '0 10px 30px -10px rgba(0,0,0,0.5)',
+          filter: isArchived ? 'grayscale(0.7)' : 'none',
+        }}
+      >
+        {project.image ? (
+          <img
+            src={project.image}
+            alt={project.title}
+            className="w-full h-full object-cover"
+            style={{
+              transform: hover ? 'scale(1.04)' : 'scale(1)',
+              transition: 'transform 0.6s cubic-bezier(0.22, 1, 0.36, 1)',
+            }}
+          />
+        ) : (
+          <div className="w-full h-full flex flex-col items-center justify-center gap-4 warehouse-bg">
+            <span className="stencil text-4xl uppercase text-[color:var(--color-text-muted)]">
+              {project.title.slice(0, 1)}
+            </span>
+            <span className="font-mono text-[9px] uppercase tracking-widest text-[color:var(--color-text-dim)]">
+              // no cover
+            </span>
+          </div>
+        )}
+
+        {/* Stickers overlay */}
+        <div className="absolute top-3 left-3 flex flex-col gap-1.5">
+          <span
+            className="sticker"
+            style={{ color: status.color, transform: 'rotate(-3deg)' }}
+          >
+            <span
+              className="led mr-1.5"
+              style={{ background: status.color, boxShadow: `0 0 6px ${status.color}` }}
+            />
+            {status.label}
+          </span>
+          <span
+            className="sticker text-[color:var(--color-cyan)]"
+            style={{ transform: 'rotate(1deg)' }}
+          >
+            {bpmValue} BPM
+          </span>
+        </div>
+
+        {/* Scanlines overlay */}
+        <div className="absolute inset-0 scanlines opacity-40 pointer-events-none"></div>
+      </div>
+
+      {/* Vinyle qui sort par la droite */}
+      <div
+        aria-hidden="true"
+        className="absolute top-0 right-0 w-[88%] aspect-square pointer-events-none transition-transform duration-500 ease-out"
+        style={{
+          transform: hover
+            ? 'translate(42%, 0) rotate(360deg)'
+            : 'translate(6%, 0) rotate(0)',
+          transitionProperty: 'transform',
+          transitionDuration: hover ? '1.4s' : '0.5s',
+          zIndex: -1,
+        }}
+      >
+        <div
+          className="w-full h-full rounded-full"
+          style={{
+            background:
+              'radial-gradient(circle at center, transparent 18%, #050508 19%, #0E0E14 55%, #050508 85%, #00000000 100%)',
+            boxShadow:
+              '0 0 0 1px rgba(255,255,255,0.04) inset, 0 15px 40px -8px rgba(0,0,0,0.8)',
+          }}
+        >
+          {/* Grooves */}
+          <svg viewBox="0 0 100 100" className="w-full h-full">
+            {[40, 35, 30, 25, 20].map((r, i) => (
+              <circle
+                key={i}
+                cx="50"
+                cy="50"
+                r={r}
+                fill="none"
+                stroke="rgba(255,255,255,0.04)"
+                strokeWidth="0.4"
+              />
+            ))}
+            <circle
+              cx="50"
+              cy="50"
+              r="11"
+              fill={hover ? 'var(--color-acid)' : 'var(--color-magenta)'}
+              style={{ transition: 'fill 0.4s' }}
+            />
+            <circle cx="50" cy="50" r="1" fill="#000" />
+          </svg>
+        </div>
+      </div>
+
+      {/* Infos en bas */}
+      <div className="mt-5 space-y-2">
+        <div className="flex items-center justify-between gap-2">
+          <h3
+            className="font-display text-lg font-semibold group-hover:text-[color:var(--color-cyan)] transition-colors"
+          >
+            {project.title}
+          </h3>
+          <span className="font-mono text-[10px] text-[color:var(--color-text-dim)] uppercase tracking-widest">
+            [{project.category}]
+          </span>
+        </div>
+        {project.subtitle && (
+          <p className="font-mono text-[10px] text-[color:var(--color-text-dim)] uppercase tracking-widest">
+            {project.subtitle}
+          </p>
+        )}
+        <p className="text-xs text-[color:var(--color-text-muted)] line-clamp-2">
+          {project.description}
+        </p>
+        {project.stack.length > 0 && (
+          <div className="flex flex-wrap gap-1 pt-1">
+            {project.stack.slice(0, 4).map((tech) => (
+              <span
+                key={tech}
+                className="font-mono text-[9px] uppercase tracking-wider px-1.5 py-0.5 text-[color:var(--color-text-muted)] border border-[color:var(--color-border)] rounded-sm"
+              >
+                {tech}
+              </span>
+            ))}
+            {project.stack.length > 4 && (
+              <span className="font-mono text-[9px] uppercase tracking-wider px-1.5 py-0.5 text-[color:var(--color-text-dim)]">
+                +{project.stack.length - 4}
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+    </Wrap>
+  );
+}

src/components/islands/SkillCard.tsx

@@ -0,0 +1,66 @@
+import { Icon } from '@iconify-icon/react';
+import { useRef, type MouseEvent } from 'react';
+
+interface Item {
+  name: string;
+  icon: string;
+  level: 'primary' | 'secondary';
+}
+
+interface Props {
+  label: string;
+  items: Item[];
+  accent?: 'cyan' | 'magenta';
+}
+
+export default function SkillCard({ label, items, accent = 'cyan' }: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  function onMove(e: MouseEvent<HTMLDivElement>) {
+    if (!ref.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    const x = (e.clientX - rect.left) / rect.width - 0.5;
+    const y = (e.clientY - rect.top) / rect.height - 0.5;
+    ref.current.style.transform = `perspective(1000px) rotateX(${-y * 6}deg) rotateY(${x * 6}deg) translateZ(0)`;
+  }
+
+  function onLeave() {
+    if (!ref.current) return;
+    ref.current.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
+  }
+
+  const accentColor = accent === 'cyan' ? 'var(--color-cyan)' : 'var(--color-magenta)';
+
+  return (
+    <div
+      ref={ref}
+      onMouseMove={onMove}
+      onMouseLeave={onLeave}
+      className="card-neon h-full flex flex-col transition-transform duration-300 ease-out will-change-transform"
+      style={{ borderColor: `${accentColor}33` }}
+    >
+      <h3
+        className="font-display uppercase text-xs tracking-[0.2em] mb-5"
+        style={{ color: accentColor, textShadow: `0 0 10px ${accentColor}66` }}
+      >
+        {label}
+      </h3>
+      <div className="grid grid-cols-4 gap-x-3 gap-y-5 flex-1 content-start">
+        {items.map((item) => (
+          <div
+            key={item.name}
+            className="flex flex-col items-center text-center group"
+            title={item.name}
+          >
+            <div className="w-11 h-11 flex items-center justify-center rounded-md bg-[color:var(--color-bg)] border border-[color:var(--color-border)] group-hover:border-[color:var(--color-cyan)] transition-all group-hover:glow-cyan">
+              <Icon icon={item.icon} width="22" height="22" />
+            </div>
+            <span className="mt-1.5 text-[10px] font-mono text-[color:var(--color-text-muted)] group-hover:text-[color:var(--color-text)] transition-colors truncate max-w-full">
+              {item.name}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/islands/SmoothScroll.tsx

@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+import Lenis from 'lenis';
+
+export default function SmoothScroll() {
+  useEffect(() => {
+    const lenis = new Lenis({
+      duration: 1.2,
+      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
+      smoothWheel: true,
+    });
+
+    let rafId: number;
+    function raf(time: number) {
+      lenis.raf(time);
+      rafId = requestAnimationFrame(raf);
+    }
+    rafId = requestAnimationFrame(raf);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      lenis.destroy();
+    };
+  }, []);
+
+  return null;
+}

src/components/islands/SplitReveal.tsx

@@ -0,0 +1,54 @@
+import { motion } from 'framer-motion';
+
+interface Props {
+  text: string;
+  className?: string;
+  delay?: number;
+  stagger?: number;
+  as?: 'span' | 'h1' | 'h2' | 'h3' | 'p' | 'div';
+}
+
+export default function SplitReveal({
+  text,
+  className = '',
+  delay = 0,
+  stagger = 0.035,
+  as = 'span',
+}: Props) {
+  const chars = Array.from(text);
+  const MotionTag = motion[as] as typeof motion.span;
+
+  return (
+    <MotionTag
+      className={className}
+      initial="hidden"
+      animate="show"
+      aria-label={text}
+      variants={{
+        hidden: {},
+        show: {
+          transition: { staggerChildren: stagger, delayChildren: delay },
+        },
+      }}
+    >
+      {chars.map((ch, i) => (
+        <motion.span
+          key={i}
+          aria-hidden="true"
+          style={{ display: 'inline-block', whiteSpace: ch === ' ' ? 'pre' : 'normal' }}
+          variants={{
+            hidden: { opacity: 0, y: '0.4em', filter: 'blur(8px)' },
+            show: {
+              opacity: 1,
+              y: 0,
+              filter: 'blur(0px)',
+              transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] },
+            },
+          }}
+        >
+          {ch === ' ' ? '\u00A0' : ch}
+        </motion.span>
+      ))}
+    </MotionTag>
+  );
+}

src/components/islands/Waveform.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useRef } from 'react';
+
+interface Props {
+  bars?: number;
+  color?: string;
+  className?: string;
+}
+
+export default function Waveform({
+  bars = 64,
+  color = 'var(--color-cyan)',
+  className = '',
+}: Props) {
+  const ref = useRef<SVGSVGElement>(null);
+  const barRefs = useRef<(SVGRectElement | null)[]>([]);
+
+  useEffect(() => {
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+    let rafId: number;
+    const start = performance.now();
+
+    const tick = (now: number) => {
+      const t = (now - start) / 1000;
+      barRefs.current.forEach((bar, i) => {
+        if (!bar) return;
+        // Multi-sine combination → pulse organique
+        const x = i / bars;
+        const amp =
+          0.5 +
+          0.25 * Math.sin(t * 1.7 + x * 8) +
+          0.15 * Math.sin(t * 3.1 + x * 16) +
+          0.1 * Math.sin(t * 0.8 + x * 4);
+        const h = Math.max(0.08, Math.min(1, amp));
+        bar.setAttribute('transform', `scale(1, ${h})`);
+      });
+      rafId = requestAnimationFrame(tick);
+    };
+    rafId = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(rafId);
+  }, [bars]);
+
+  const barWidth = 100 / bars;
+  const gap = barWidth * 0.3;
+  const rectWidth = barWidth - gap;
+
+  return (
+    <svg
+      ref={ref}
+      viewBox="0 0 100 20"
+      preserveAspectRatio="none"
+      className={className}
+      aria-hidden="true"
+    >
+      {Array.from({ length: bars }).map((_, i) => (
+        <g key={i} transform={`translate(${i * barWidth + gap / 2}, 10)`}>
+          <rect
+            ref={(el) => {
+              barRefs.current[i] = el;
+            }}
+            x={0}
+            y={-10}
+            width={rectWidth}
+            height={20}
+            fill={color}
+            style={{
+              transformBox: 'fill-box',
+              transformOrigin: 'center',
+            }}
+          />
+        </g>
+      ))}
+    </svg>
+  );
+}