How It Works

⚙️ Architecture & Math: How It Works

This page breaks down the technical magic that turns a boring JSON data payload into a 60FPS animated game sequence.

1. Fetching the Data (GraphQL)

Instead of scraping the HTML, the script uses the urllib library to securely query the GitHub GraphQL API. It fetches your contributionCalendar, returning exactly 52 weeks of data, categorized into levels (NONE, FIRST_QUARTILE, etc.).

2. Generating the "Level"

The grid is drawn on an offset, giving room for the Warp Pipe on the left and the Flagpole on the right. The script maps your commit intensity to specific CSS classes:

• Empty days become translucent blocks (rgba(255,255,255,0.2)).
• Level 4 days spawn extra SVG <use> elements for the spinning coins.

3. The Pathfinding Algorithm (Parkour Math)

The hardest part of this project is making Mario "know" where to jump. The script builds a continuous SVG <path> using the d="" attribute.

Action	Logic	SVG Command Used
Running	If the target block is at the same height as Mario's current height, he runs straight.	L x y (Line To)
Jumping / Falling	If the target block is higher or lower, the script calculates the midpoint between the two blocks and sets a control point 25 pixels higher in the air.	Q cx cy x y (Quadratic Bezier Curve)

4. Time-Syncing Physics

To make the coins disappear exactly when Mario touches them, the script calculates the total distance Mario travels. It then uses the formula (coin_x - start_x) / total_distance to figure out the exact percentage of the animation timeline (e.g., 0.45 or 45%) at which Mario hits the coin. This triggers the coin's CSS opacity to drop to 0 at that exact millisecond!