#5 Devlog

This session was all about making the site actually feel finished instead of a grey skeleton. ngl I leaned on Claude a LOT this time, mostly for the animations and getting the little game to work, cuz plain JS animation stuff is still kinda over my head.-  The animationsThe big one was the scroll. I wanted the text and sections to fade up as you reach them, and the backgrounds to bloom in instead of just snapping. Claude pointed me at IntersectionObserver, which basically watches for when an element hits the screen and lets you fire something off. so every bit that should animate just gets a class added when it shows up.and the actual fade is pure CSS (opacity + a translateY that resets to 0). The whole page also still starts grey with filter: grayscale(100%) and blooms to colour when you reach About, same trick as last time but now it fades instead of snapping. On top of that i’ve got two full-screen photo backgrounds now, peonies behind About and two bunnies-in-grass behind Projects, and they crossfade as you scroll, each toggling a “show” class when its section is in view. honestly tuning the dark veils so the white text stays readable over the photos took me forever.-The mini gameI really wanted a tiny reward for the people who scroll all the way to the bottom, so I added a dino-style game in the MORE section, jump my bunny over the rocks. this is the part i used Claude the most for, not gonna lie. it’s a canvas game loop: gravity drags the bunny down every frame, you tap/space to jump, rocks scroll in from the right, score climbs and everything speeds up the longer you survive. collision is just basic box overlap:a.x < b.x+b.w && a.x+a.w > b.x && a.y < b.y+b.h && a.y+a.h > b.y- Images + ProjectsProjects is real now. each category (engineering, gamedev, music, coding) is a click-to-open accordion, and i dropped my fusion renders and a star catcher screenshot in, cropping them into clean squares with object-fit: cover so nothing stretches. i also added a live age counter that ticks every second, which was a fun little thing. one dumb mistake, I baked every image into the html as base64 at first and the file blew up to over a megabyte, so later I had to pull them all back out into normal image files.Claude did a lot of the heavy lifting on the animation logic and the game loop. i do actually understand what’s going on now though, which was kinda the point of doing it this way.

(mb, my paragraphs somehow got deleted)