What this is

I wanted my GitHub profile to look like mine, not like the same badges everyone uses. So I wrote this: a handful of Python scripts that draw every graphic on the profile. The animated header, the dividers, the skills grid, the section titles and the sixty-odd little tech tags.

There's no design program involved. Everything is placed by hand with coordinates and Bézier curves, and written out with xml.etree.ElementTree from the standard library. No dependencies and no fonts to load: even the Garamond titles are just paths.

What it makes

Running it

One command builds everything into assets/:

python3 build_all.py

# or just the piece you're working on
python3 header.py
python3 divider.py
python3 tech_matrix.py

Reading the code

Switch to Code above. I'd start with build_all.py, it's short and it calls everything else.

What this is

The site you're looking at. I built it from scratch, with no framework and no UI kit: just HTML, CSS and plain JavaScript.

It was mostly an excuse to learn how the browser actually works. The starfield on the home page is a small canvas simulation, and the cursor, the Made in Human window and this code page are all written by hand.

How it's put together

index.html

The home page.

code.html

This page.

css/

All the styles. No preprocessor, just custom properties.

js/main.js

Small interactions: the menu, the modal, the contact form.

js/space.js

The stars on the home page, and how they bend around your cursor.

A note on the code

Before putting it here I swapped my local paths for relative ones (like ~/portfolio-web) and removed my comments, so it's a bit barer than what I actually work with.