My latest real website project was rebuilding my own link-in-bio page, the one Instagram and TikTok send people to, into a short scroll-driven film instead of a plain list of buttons. It sounded like the simple version of a website project, the kind of thing that should take an afternoon. It was not, and the real bugs along the way are more interesting than the finished result.
Landing on the actual concept
I asked for this outright, tired of my page looking like every other link-in-bio out there. I was shown two different pitched directions before I said let's do a blend of both. What shipped mixes them: a graphic, editorial, journal-sticker feel carrying my name writing itself onto the screen, into a photo reveal, into a drag-to-rotate diamond, into the same real buttons I'd always had, all built entirely in code rather than through a video-generation engine, since that wasn't a fit for a page meant to load fast on a phone.
The bug that made my own name invisible
The very first version had my name completely invisible until you scrolled, because the reveal effect on it was gated one hundred percent behind scroll position with nothing showing before that. It looked broken on first load, because it was, and it was the very first thing anyone would have seen.
When a real photo got sliced into something that looked horrible
An early version of the diamond effect chopped my actual photo into facet-shaped crop tiles that didn't line up right. My exact reaction was "looks horrible," and it was right. That got replaced with my photo staying whole, sitting inside a diamond-shaped clip instead of being cut into pieces, with the business names orbiting around it separately instead.
Why were the rotating labels upside down?
Once the orbiting labels were in, some of them rendered sideways or upside down depending on where they landed on the circle. The actual bug was in the rotation math: each label needed to cancel out both the ring's own drag rotation and its own fixed position on that ring, not just the drag. Fixing only one of the two left the other half of the labels wrong, which is exactly what made the bug so confusing to track down at first.
The scroll bug that took the longest to track down
The page supports jumping straight to the button section from a shortcut link, but that jump quietly stopped working. The real cause was that the scroll animation library was still settling its layout asynchronously after the photo finished loading, which reset the scroll position right out from under the jump. Fixing it meant forcing the layout to recalculate itself, twice, in the same frame, right before the jump ever fired.
The floating shortcut that wouldn't get out of the way
A small floating pill exists on the page to let someone jump straight past the animation to the real buttons if they don't want to watch the scroll film play out. It kept staying visible even once someone had already scrolled all the way down to the real links, sitting right on top of the footer. The fix was making it hide itself the moment the links section actually comes into view, instead of just staying on screen by default the whole time.
Getting the small details right too
Along the way I flagged a couple of things that just didn't feel right once I actually saw them: an animated gradient blob in the background, and a gold-to-purple gradient ring around my photo. Both got replaced with flat, solid color instead, purple and gold, because the gradients read as busy rather than polished. I also asked for a light lavender card behind my name for contrast, once I saw how easily it disappeared against the dark background without one.
What I kept as a safety net
The old, plain version of the page still exists at its own address, in case I ever want to go back to something simpler and faster instead of the scroll film. Building the flashier version didn't mean throwing away the one that already worked.
More on the skills behind projects like this one is in code, craft, and create.