#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)

#4 Devlog

I kept seeing other people’s portfolio sites looking way more professional than mine, so I decided to scrap the old tab thing and just remake the whole site from scratch.
It’s one long scrolling page now instead of clicking tabs, sticky nav up top, a big hero with my name and my bunny, then About, Projects and Contact underneath. it already feels way cleaner to me.
I wanted the site to start all grey and then have the background bloom into colour as you scroll. The colour draining was easy, just one CSS line, filter: grayscale(100%), but i could not figure out how to make the flower photo fade in at the right moment. So I asked Claude how to make the flowers fade in.
For now Projects is just my real repos and games listed under each category, no images or hover stuff yet, and Contact is just links.
Next session I really wanna make it feel finished, maybe add some some images, add little animations on the text, and a tiny game would be sick.

#3 Devlog

I kinda realized my site still didn’t have any actual content in it, just pretty buttons that led nowhere. So this session was all about turning it into a real portfolio instead of a demo.
First big thing: project sub-tabs. Before, clicking “Engineering” or “Gamedev” did literally nothing. Now each one opens its own little page with the projects inside, plus a back arrow to get you out. This was basically the whole tab show/hide thing again but one layer deeper, and it took me a sec to figure out how to switch to sections that weren’t even in the nav. Ended up just giving every button a data-goto and reusing the same function:
showSection(el.dataset.goto)
Then I actually filled them with my real projects, pulling my repos and games and writing a short description for each. I split them into “finished” and “In Progress” so it’s honest about what’s actually done, what I’m still designing and made them sit 3 boxes to a row so it looks tidy.
Ngl the most annoying part was images. I dropped my Fusion renders and a Star Catcher screenshot into each bubble, plus song covers into the music tab, cropping them all into neat squares with
object-fit: cover;
Getting pictures to fit without stretching is way fiddlier than I expected, and the file got kinda huge from baking them all in.
Next, i really wanna make the whole thing feel more professional and add some animations, maybe the color fading in instead of just snapping on, or the bubbles doing something when you hover over them.

#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.

#1 Devlog

I split my project into two files: site.html for the content and style.css for the styling, connecting them with a tag in the .

html(2nd picture):

Inside the I built a holding my title and a of four links. Each link uses a jump-link (href=”#about”) that matches the id of a below it, so clicking scrolls the user to that part. I made four sections: Home, About Me, Projects, Socials. i filled them with boxes and links. I used a class for the project boxes since I wanted several styled the same way.

css(1st pic):

I wrote rules that target my HTML elements- a tag name like body, a class with a dot (.card), or an id with a hash. Each rule lists properties inside curly braces(idk how to make these look like a text from a code text):
section { background-color: #ffffff; border: 2px solid #E78EA2; border-radius: 10px; padding: 20px; margin: 20px; }
I used the pink color, because it was the color of my year(2011) and the font was like pantone