TEAM ONBOARDING
A dark-theme onboarding site for a new team member. Custom GSAP character animations, mouse-tracked gradient cards, a live RSS feed — all vanilla HTML/CSS/JS. No build step, no npm, no framework. Deployed as static files, loads in under a second.
The droid fades in on load, floats idle, and types out the welcome message character by character. No framework — just GSAP timelines and ~200 lines of vanilla JS just for the droid (the whole site fits in ~600).
8 modules, structured by role
From "Who we are" through to "Objection handling" — each module is its own HTML file with its own accent color. The tile navigation uses mouse tracking for the radial gradient glow: the cursor position is written into CSS variables, and every card gets its own gradient.
A reference wiki that sits alongside
The 8 modules walk you through the training sequence once. But in a real client conversation you don't re-read modules — you scroll back to the reference wiki next to them. A toolbox (tools.html) of the stack pieces I actually recommend, a cheat sheet (schnellreferenz.html) for the quick answers, a funding-programmes overview (foerderungen.html) for grant-eligible clients, plus the AI glossary and the live YouTube radar that get their own sections below. Each piece is its own HTML file, linked from every module where it's relevant — so the knowledge is always one click away, not buried in a sequence.
Interactive AI Glossary
The AI vocabulary a new hire needs before their first client call. 10 terms across five categories — tech, data, process, legal, service — covering LLMs, RAG, embeddings, vector databases, hallucination, fine-tuning, tokens, GDPR and the rest. Live search, category filters, accordion cards that expand for the full explanation. No framework: pure DOM toggling of CSS classes, multilingual search terms baked in so typing "Sprachmodell" finds "LLM". Meant to be used as a reference, not just a showcase — try the search.
Live feed from 19 YouTube channels
Browser-side RSS fetching via rss2json.com — no backend. A priority system decides what shows up: P1 channels are always visible, P2 and P3 rotate randomly. The radar stays fresh without any server having to run.
Onboarding Modules
YouTube Channels
Glossary Terms
npm Dependencies
The Code Behind It
Dual-layer cursor glow, GSAP character timelines, and browser-side RSS fetching — all without a single npm install. Pure vanilla craft.
// Dual-layer cursor glow — GPU-accelerated via translate3d
// Outer layer: slow lerp (0.07) for ambient glow
// Inner layer: fast lerp (0.2) for responsive highlight
outerX += (mouseX - outerX) * 0.07;
outerY += (mouseY - outerY) * 0.07;
outer.style.transform = `translate3d(${outerX}px,${outerY}px,0) translate(-50%,-50%)`;
innerX += (mouseX - innerX) * 0.2;
innerY += (mouseY - innerY) * 0.2;
inner.style.transform = `translate3d(${innerX}px,${innerY}px,0) translate(-50%,-50%)`;Key Decisions
- →Vanilla over React
No npm dependencies, no build step. GSAP loads from a CDN; everything else is vanilla. scp onto the VPS and it runs. For a single-purpose onboarding site a framework just adds complexity without paying it back.
- →GSAP for character animation
Timeline sequencing for the droid entrance — scale, position, rotation, in an exact order. CSS keyframes can't express dependent sequences that cleanly.
- →RSS via rss2json.com proxy
Browser-side RSS fetching with no backend. A priority system (P1 always visible, P2/P3 rotating) keeps the most relevant content on the surface without anyone managing a feed list.