Devlog #12

This block was mainly dedicated towards making my site look a lot more aesthetic. I spent over 4 hours just tinkering with JS and fonts and color combos and everything, trying to find the perfect combos and fonts that looked super good. I am overall very happy with the progress that I made in this amount of time. At first I thought that the site looked good even without any styling because of my color gradients and all of that, but I just realized how much better it is with like better fonts, and like the small things, like moving gradients instead of static ones. So this whole block was just dedicated to making my site look better.

Current Progress

The first thing that I did was change my cursor. For this I had to use JS. I changed the cursor to just be like a little white dot with a nice glow around it, and then when it hovers over like a link, then it gets a bit bigger and turns into a light purple color. In JS, I figured out how to like grab an element from CSS, and then use like states, like mousemove to have like a specific action, and then like have the dot follow my actual cursor, but super close so it seems like that is the cursor. And then I hid my actual mouse to really sell the illusion. For the hover thing, I created a hover class in CSS, and then added that class when the mouse “entered” a link, and removed it when it “left” the link.

The next thing I did was make the gradients on my text like circle around, so the gradient was always moving around and it looked like dynamic. I actually got this idea from the Hack Club website because in there they have a moving gradient on the text. For this, I actually did not need any JS, and instead just make a looping animation in CSS for the background of the text. I first did it only for the Hero title, but then I liked it so much that I added it to all of the section headings so yeah I thought was a really nice addition

The next thing that I did was to edit my skill icons. I mentioned in a previous devlog when I was styling the About Me section, that the little subtitle for each skill was showing on the top of it, so then for skills in the bottom row, it was covering the skill on top. I also used JS for this fix. I first made a class for the subtitle on the bottom, and then again in JS made it so if it was detected to be lower, that class would apply

The last thing I did was change the fonts. I am really happy I did this, because the site just looks so much better with different fonts. I imported all of my fonts from Google Fonts. I inserted the link in the <head> section and then used that font family in CSS. I did a lot of like comparing and swithcing around and researching and all of that just to find good fonts, and I have a really bad habit of like taking a lot of time on these kind of things, and it wasn’t even getting tracked on Hackatime, so I tried to do it quickly. I found some really nice fonts for the headings and titles so I am super happy with that.

Next Steps

Now the only thing left to do that I still havent gotten around to yet is making a really nice background in JS. I really want to make an animation background, because I think that will be like a unique aspect of my website. The main thing I really want that for is the glassmorphism effect that I have on the cards. On a plain dark background, you can’t tell at all that there is a glass effect. But with a sick background that moves, you can see that shapes blur under the cards. So I think that is the last thing to do, because I finished up all the small little details. However, I also think this will be the longest and hardest part because of its complexity in JS so yeah. I am really hoping to ship soon after 1 or 2 more devlogs.

Below is a video of the new hero section with cool fonts and a moving gradient background.