Devlog #9

I finished the Project section of the website. I also took some time to like style and experiment with some like hovering effects in the website. I also figured out how to color texts with gradients, so I changed all of my main section headings to cool colorful pastel gradients. I also made each glass card look cool when you hover over it. I also made some of the text like get bigger or show cool stuff when you hover over it. So yeah. I really think I am getting the hang of CSS. Most importantly, I think that I am able to use resources from the internet and apply them accordingly to my website. This block was mainly like a styling portion to kinda experiment and apply some aesthetics to my site.

Current Progress

I finished the Projects section. This section was much easier to arrange. Instead of using display: flexbox I used display: grid to help position each of the cards into an organized layout. What I really like about this display is that it automatically does all the math itself and gives each card its own equal amount of space so that they look even on the page. I got 4 nice cards for each project. I also styled the the heading to look like a gradient. I figured out that you make the background image a gradient, and then clip it to the text, and then just make the text clear so that the color shows. So I made all the headings look like that. Another thing that I did was use box-shadow to make the cards look cool when I hover over them. I realized that there are a lot of elements for the box-shadow, though once you figure them out, its not too complicated. So then I applied the box shadow effect to everything in the website that it would look good on. So yeah that was also a learning experience. I also figured out how to make a specific thing appear once you hover over like a bigger topic. So like I made some text a bit bigger or like an element appear when i hover over the whole card. You add the hover rule for the big card, and then add the class for the specific element, and then do your ending look. I used that for some things. So I really got some styling done to make my website like look better.

Next Steps

I will now work on the Experience section. I have around 6 cards for this. For this section, I am planning on making like a scrolling timeline to showcase like all of the past stuff in a chronological order. This might be tricky because up until now I was using the height: 100dvh to determine how big a section would be, but this one is going to have to different from that because of its scrolling nature. So yeah. But I think I am really getting the hang of positioning and display. and how to manipulate objects between different rules. I am starting to realize that code is not as strict as I thought it was. Like I thought everything needs to be like letter precise, but you have a bit space to improvise and experiment. So I can actually code a bit in CSS. I really enjoying styling things, like the gradient texts or like hover effects, so I am going to make sure to include those things in this next section as well. I am excited to get to work and encounter this new challenge.

Below is a picture of the Projects sections and I am hovering over the first card, so you can see the hover effect.