Devlog #14

So I started working on it further before my project even got fully rated, so this is my first devlog after shipping my portfolio! During this block, I just added some small features that just overall polished my site a bit more. A lot of these features were added in JS, and I think I actually am starting to get the hang of JS in the way that I actually am starting to understand how to identify objects using const and like how to select them using document.querySelector. So I think I am starting to learn, and just working with these little features just got me a little more familar with JS. I also got the hang of CSS animations, as before I had a little trouble understanding keyframes, but now it makes sense, so it was a good block.

Current Progress

I added three main things to my website, each of which use JS in them, and I will explain how.

The first thing that I added was a scroll progress bar at the top. I really wanted to add this onto website, as I really liked seeing them on other websites, and I styled it to match my theme, and it just looks super good. I make a horizontal bar in my navbar for this, and it has a rainbow gradient. Basically, JS detects where the person is at the website, and just adjusts the scale based on that to show the bar. At first, I made it so it would expand as I scrolled, but then the rainbow was like squished at the beginning, and then I adjusted it so that it actually revealed the bar as I scrolled down, so like same idea but just applied to a different thing. I looks super cool now.

The next thing that I added was a loading page. I tried to look into some videos for this, but I ended up making a super simple gradient ring that was animated (again to spin a rainbow). For this, I like made a loader page, which covered the whole view. In it, I made a circle which had a rainbow conic gradient, and then just animated it in CSS to rotate to 360 degrees over the course of like 1.2 seconds. I then used JS to add a class which made the loader disappear and like unresponsive to any pointer controls when the site finished loading. It also looks super good and totally matches the vibe of the site. So yeah, super happy with that.

The last thing that I added was like a scroll fade up reveal effect to almost everything in my site, like the cards and the headings and everything. Again, this was a pretty simple trick that I used. Basically you set the object a set number of pixels (like I used 30px) down on the Y axis and turn the opacity down, and then when JS detects the object as the person scrolls, it just moves it up to 0px on the Y axis and goes to full opacity, and it ends up looking super sleek. That little touch just upped the whole website. I was actually looking to add this feature in the beginning of my site, but I never got to it mainly because it used JS, so now I took the chance to add it in.

A lot of these features were ones that I saw in like cool websites. So like I’m always on the lookout for cool features, and these were some that I thought really made a website look more polished, and I realized that they are not actually that hard to build once you understand the core concept. Through these I really got better in JS, and upped my skills in CSS, so it was a good block.

Next Steps

I really do not have anything left to add in this project. Like I even added extra stuff. Please, if you guys have any suggestions, comment them so I can implement them. I will attach a video of my site so you guys can see what its like. One thing I might consider adding is like a easter egg thing or some like sequence or action that will generate a cool surprise. I have to still think about that. But right now I have almost nothing left to do. I actually might ship this again just to get the hours counted in.

Below you can see the loading and the scroll fade up reveal and the scroll progress bar at the top.