BuildTeam Onboarding

Team
Onboarding

A dark-theme onboarding site for a new team member: GSAP character animations, mouse-tracked gradient cards, and a live RSS feed, all in plain HTML/CSS/JS. Ships as static files, no build step, loads in under a second.

Module 01 · Who we are
Vision, mission, team. The foundation.

01

Who we are

Vision, mission, team. The foundation.

02

What we build

Services, process, industries. What lands with clients.

03

AI fundamentals

Our technology — to the point. No nerd-speak.

Module 01At a glance

Team Onboarding at a glance

I'm made of

  • HTML5
  • CSS3
  • JavaScript
  • GSAP
  • Canvas
  • RSS
Onboarding Modules
0
YouTube Channels
0
Glossary Terms
0
npm Dependencies
0

Module 02The welcome

A droid types out the hello

The droid fades in on load, floats idle, and types out the welcome message character by character. It runs on GSAP timelines and about 200 lines of JS, with the full site coming in around 600.

Loading demo…
  • GSAP timeline
  • typewriter
  • idle float

Module 03The modules

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 mouse position writes into CSS variables, and every card draws its radial glow from there.

Loading demo…

Module 04Beyond the modules

A reference wiki that sits alongside

The modules run once; the wiki stays open beside them. A toolbox (tools.html), a cheat sheet (schnellreferenz.html), and a funding overview (foerderungen.html), each its own HTML file, linked from every module where it's relevant.

Toolbox

tools.html

Cheat sheet

schnellreferenz.html

Funding overview

foerderungen.html

Module 05The glossary

Interactive AI Glossary

The AI vocabulary a new hire needs before their first client call: 10 terms across four categories, with live search, filters, and accordion cards. Multilingual search terms are baked in, so typing "Sprachmodell" finds "LLM".

Type Sprachmodell, find LLM.

Loading demo…

Module 06Your radar

Live feed from 8 YouTube channels

Browser-side RSS fetching through rss2json.com, no backend. A priority system decides what shows up: P1 channels stay visible, P2 and P3 rotate at random.

  • P1stays visible
  • P2rotates at random
  • P3rotates at random
Loading demo…

Module 07Code

How the cursor glow works

The glow runs on two layers that lerp toward the mouse at different speeds, so the highlight feels responsive while the ambient ring drags behind it. Both move on the GPU via translate3d.

0.07 for the ambient glow, 0.2 for the highlight.

view-source:main.jsjs
// 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%)`;

Module 08Decisions

Why it's built the way it is

I skipped React here

GSAP loads from a CDN and everything else is plain JS, so there's no build step: I scp the files onto the VPS and it runs. A framework would have added weight I'd never use.

GSAP handles the droid entrance

Scale, position, and rotation have to fire in an exact order, and a GSAP timeline expresses that dependency cleanly where CSS keyframes get awkward.

The feed runs without a backend

rss2json.com lets the browser pull the RSS directly, and the priority system keeps relevant channels on top without anyone curating a feed list.

Static files, no build step, loads in under a second.

8 of 8 modules