{children}

{ e.currentTarget.style.textDecoration = "underline"; }} onMouseLeave={(e) => { e.currentTarget.style.textDecoration = "none"; }} > {children}

{children}

); } export function Section({ id, title, children }: { id: string; title: string; children: React.ReactNode }) { return ( <> {title} {children} ); } export function OL({ children }: { children: React.ReactNode }) { return (

{children} ); } export function List({ children }: { children: React.ReactNode }) { return (

{children} ); } export function Li({ children }: { children: React.ReactNode }) { return

{children}

; } /* ========================================================================= Code block with Prism syntax highlighting and line numbers ========================================================================= */ export function CodeBlock({ children, lang = "jsx", lineHeight = "1.85" }: { children: string; lang?: string; lineHeight?: string }) { const codeRef = useRef(null); const lines = children.split("\n"); useEffect(() => { if (codeRef.current) { Prism.highlightElement(codeRef.current); } }, [children]); return (

          
            
              {lines.map((_, i) => {
                return (
                  
                    {i + 1}
                  
                );
              })}
            
            
              {children}

); } /* ========================================================================= Pixelated placeholder image Uses a tiny pre-generated image with CSS image-rendering: pixelated (nearest-neighbor / point sampling in GPU terms) for a crisp mosaic effect. The real image fades in on top once loaded — no flash because the placeholder stays underneath and the real image starts at opacity 0. ========================================================================= */ export function PixelatedImage({ src, placeholder, alt, width, height, className = "", style, }: { src: string; /** * URL of the tiny pixelated placeholder image. Use a static import so Vite * inlines it as a base64 data URI (all placeholders are < 4KB, well under * Vite's default assetsInlineLimit of 4096 bytes). This makes the * placeholder available synchronously on first render with zero HTTP * requests. Do NOT use dynamic imports or public/ paths — dynamic imports * add a microtask delay, and public/ files bypass Vite's asset pipeline. * * @example * ```tsx * import placeholderScreenshot from "../assets/placeholders/placeholder-screenshot@2x.png"; * * ``` */ placeholder: string; alt: string; width: number; height: number; className?: string; style?: React.CSSProperties; }) { const [loaded, setLoaded] = useState(false); // Handles both the normal onLoad event and the case where the image is // already cached (img.complete is true before React mounts the handler). const imgRef = useCallback((img: HTMLImageElement | null) => { if (img?.complete && img.naturalWidth > 0) { setLoaded(true); } }, []); return (

{/* Placeholder: tiny image rendered with nearest-neighbor sampling */}

{/* Real image: starts invisible, fades in over the placeholder */} {alt}

{ setLoaded(true); }} style={{ position: "relative", width: "100%", height: "100%", objectFit: "cover", opacity: loaded ? 1 : 0, transition: "opacity 0.4s ease", zIndex: 1, }} />

); } /* ========================================================================= Lazy video with pixelated poster placeholder Same visual pattern as PixelatedImage but for