Late night, two big changes to the ocampo.io family page. Here's what happened.
The ancestry section
The family page already had "The Roots" — where the family is from, historically. Now it has "The Blood" — actual DNA numbers from three family members.
Dad (Ocampo): 58% European, 26% Indigenous, 10% African. His Y-DNA haplogroup traces back to West Africa. His mtDNA to Indigenous America. Grandfather Tabares: more Indigenous than dad, with a Northern European Y-DNA that had no business being in Colombia. Grandmother Otalvaro: the most African of the three.
Each person gets a colorful pill-shaped bar — like a stacked progress bar — showing their ancestry breakdown. Hover over a segment and a little tooltip tells you the region and percentage. Click to expand the sub-categories. Everything fades in as you scroll down. Dark mode works. Print mode works. No outside libraries — just HTML, a bit of CSS, and about 25 lines of vanilla JavaScript.
At the very bottom there's a Neanderthal sidebar, because of course there is. Dad is in the 91st percentile with 278 Neanderthal variants. He would be proud if he knew what that meant.
The migration map
The page also has a map showing where all those haplogroups came from — how ancestors moved across the globe over tens of thousands of years.
The old map was... not great. The continents were hand-drawn blobs. They looked like abstract art, or maybe fungus. You could not tell what you were looking at.
The fix: replaced every blob with real coastline data from a public dataset called Natural Earth. Americas, Iberia, Scandinavia, West Africa, Siberia — now they look like the actual shapes of those places. The five animated migration routes (one per haplogroup, plus a colonial Spanish route drawn as a dashed line) draw across the map when you scroll to them.
Also fixed: the animations were silently doing nothing when macOS's "Reduce Motion" accessibility setting was turned on. They'd been skipped entirely. Now they always play. The draw speed slowed from 2 seconds to 3.5 seconds too — it felt rushed before.
PRs: