how this site
actually works.

A short tour through the decisions, constraints and accidents that made this resume into Kevil.OS. No build step, no framework, just plain HTML/CSS/JS plus three CDN scripts.

// the constraints

• No build step. Opens directly with open site/index.html. Anyone can read the source.
• One HTML, one CSS, one JS. Easier to fork, easier to audit.
• No backend. GitHub stats come from api.github.com; everything else is static.
• Three CDN scripts only: GSAP, ScrollTrigger, Lenis. Total <90 kB.
• Web Audio for sound — no audio assets shipped.

// the layers

1. Neural canvas behind everything — particles + lines, paused when offscreen.
2. Blurred SVG blob for the colour wash, animated via GSAP path morph.
3. Grain + scanlines via SVG turbulence and repeating linear gradients.
4. Custom cursor with a dot pinned to the pointer and a ring lagged by linear interpolation.
5. Lenis for smooth scroll — tells ScrollTrigger when to update.
6. Photo carousel with five FX renderers (glitch, pixelate, sweep, aberration, dissolve) on a dedicated canvas.
7. LangGraph simulator — SVG beams + particle bursts + per-stage pulse + animated progress bar.
8. Skills network — force-floating nodes with cursor repulsion and dashed core edges.
9. Terminal + command palette + matrix rain + konami + snake + chess + doom mode.

// performance budget

• Photos preloaded for hero, lazy for certs.
• GSAP loaded via jsdelivr + preconnect.
• Animations pause when their owning view isn't active (skill renderers, photo carousel on hover).
• No web fonts blocking render (display=swap).
• JSON-LD + OG + Twitter cards in the head.

// lessons

• Custom cursors hurt accessibility unless you also keep the native one functional in form inputs.
• Web Audio refuses to start without a user gesture — that is why the boot screen exists.
• Skill-orbit looks magical but reading the labels is hard on small screens — the network view is now the default.
• Animating SVG stroke-dashoffset outperforms canvas line drawing on phones.