#2 Devlog
So after the basic site, I wanted it to actually do stuff. First I swapped my scroll links for real tabs, which meant JavaScript, something I’d never touched:
document.getElementById(id).classList.add(“active”)
Then the fun part: making the whole thing start grayscale and burst into colors(it isn’t really “bursting into colors”, just changing grayscale colors to colorful whenever anything but Home is opened) when you open a tab. The color drain itself was easy, just one CSS line:
filter: grayscale(100%);
But i couldnt figure out how to make Home turn colorful again when you reopen it. I was genuinely stuck, so I asked Claude how to code the color change for Home. turns out you just yank the class off:
page.classList.remove(“gray”)
and since it’s a normal variable, it resets on refresh, which was exactly the “gray again if refreshed” thing I wanted. Kinda clicked after that.
Then i went crazy on my bunny mascot. four versions on both sides of the title that swap between grayscale and pastel depending on the state. Had to cut the white background out but keep the white inside the bunny, way harder than it sounds.
Smaller stuff after that: my real social links, three project bubbles stretched to fill the box, and a live age counter that ticks every second with setInterval(updateAge, 1000)
I’m proud I worked for 5 hours today lol.
Comments 0
No comments yet. Be the first!
Sign in to join the conversation.