Devlog #8

I am finished the About Me section. I came across a problem though. In the pills, I want it to be like that when I hover over the pill, the name of that skill shows above it in a small text. However, pills in the bottom row, their text will start to hover into the pill of the next row, so that messes up the thing. BUT, if I add a space, it will look like a really weird gap between the rows. I did some research and I read that I might need to use some JS to fix, so like pills on the bottom, their text shows on the bottom, and pills on the top, their text shows on the top. So I am going to leave that for now, and work on it after I am done with the rest of the webpage.

Current Progress

Right now I finished position the stuff for the About Me section. I found this part really complicated, especially with the little icons. I ended up having to add more classes in my HTML to style them accordingly in CSS. Again, I still have a bit of problems with positioning, but I am starting to get the hang of like display, margin, padding, and gap, and how they work with different classes to arrange and organize everything. I also learned how to use transition to just make thing shift smoothly when you hover one them. This section took me a really long time because I had to arrange the about me text and all of my skills. I figured out where like display: relative and display: absolute are used, because I then had to arrange my text so that it was like positioned vertically 110% and horizontally 50% of the icon, so they helped in that. Otherwise, this part really familirized me a bit more with CSS. I especially got the hang of like background and border styling, and how to experiment with corner rounding and different colors and transitions and all of that, so I think this section was really a learning experience.

Next Steps

I will now begin to work on the Projects section. For this section I am just thinking making cards for each project each with a glassy effect behind it. Because I am giving each element like a glass effect, I am planning on making a super cool background later once I finished the site in JS so that the glass effect really shows and provides a unique aspect to my website. I think this section will be a lot simpler, but I will have to add more classes in HTML to do this I think. A tricky part might be to style the links, because I have links to all of my projects and their repositories, so yeah. Once I figure out the positioning of the cards, its practically smooth sailing from there, because like adjust font sizes and colors are like pretty easy for me. I might even make like the glass lighten up when I hover. One thing I want to experiment with is with box-shadow so that a shadow shows underneath the card. So I will play around with that. Otherwise, I am excited to continue working on this. The layout for this section is similar to the rest, so I think from here I will begin to quickly finish up the rest of the sections.

You can view the about me page here. I am hovering over the HTML pill, and you can see the text over it.