Kill Your Darlings - Refactoring a navbar for 66% code reduction

There's a wildly overused turn of phrase in writing, attributed (probably erroneously) to Faulkner, that you should kill your darlings. A dramatic turn of phrase that is supposed to shock you into ruthless editing. It's good advice, if a trifle overwrought, and applies to code as much or more than to writing.

For a few years now, I've had kind of a cute header on my site. When designing my portfolio,I wanted to do something slightly different and unexpected. After all, I'm a software engineer with an eye for design! I want to show that off.

Here's what it used to look like:

It's nice, right? It's cute, it's clever, it's... wildly overengineered.

Before: 100 lines of html/javascript, 172 lines of css. State, intersection observer. Multiple props.

After:

8 lines of html, 87 lines css

That's a whopping 66% reduction. 92% of the html/javascript and 50% of the css. Ouch. It was fun to think of and build this navbar, but ultimately nobody is visiting this site to experience the thrill of a clever navbar.

Moral of the story: Don't fall in love with your own code or your own cleverness. Kill 'em.