Building this site: particles, heatmaps, and keeping it minimal

Recruiters spend six to ten seconds on a profile, so this site had one design rule: everything important must be visible in two scrolls, and nothing should compete for attention with the work itself.

A few things I learned building it:

Canvas particles are cheaper than they look

The profile photo dissolves into ~1,600 particles on hover. The trick is doing the expensive work once: draw the image to an offscreen canvas, call getImageData, and sample a pixel every few px to build a particle array. After that, each frame is just a fillRect loop over a Float32Array — no allocations, and the requestAnimationFrame loop only runs while particles are actually moving.

The GitHub contributions graph has no official API

GitHub renders the green grid from a private endpoint. The practical options are scraping the SVG, using the GraphQL API (needs a token you can’t ship to a browser), or a public proxy like github-contributions-api.jogruber.de. I went with the proxy plus a graceful fallback link — never let a third-party API break your homepage.

Astro content collections make the blog free

Each post here is a Markdown file with three frontmatter fields. Astro type-checks the frontmatter with Zod at build time, so a typo in a date fails the build instead of silently rendering garbage.

More learnings soon — mostly about LLM agents, RAG, and whatever grad school throws at me next.