Devlog #7

I finished creating the navbar and have finally started on the CSS. Now because I am a complete beginner to CSS, I did use some help of AI just to kinda get the hang of like rules and all the different like properties. I DID NOT copy paste anything from AI. This is a project that I am doing to learn HTML and CSS. I actually want to learn this, and AI is just assisting me. I completed the navbar in CSS, and started on the Hero section. Right now positioning for CSS is confusing me a bit, so I need to work on that a bit more. The Hero was fairly easy as in the text, and I haven’t added much to it, but I figured out how to center it. The next steps will be to work on the about me section.

Current Progress

I finished up the navbar by quickly making a list of links at the very top of my html that went to each section. I also added a logo in the other corner (which is just my initials for now) which will link back to the hero page, like the top of the webpage. I was able to add a nice frosty glass effect the navbar, which was pretty simple. All you got to do is make the background like a little translucent and then add a blur effect. I thought it would be super hard, but it actually wasn’t. I am probably going to use this same formula for the glass cards of each section. My plan is to make them more interactive as I continue, but for right now I will just keep it at that. For the hero, the plan is to just make my name and a short subtitle below, and then add a cool effect around it. For now I just mapped out the area of the hero section. I realized that 100vh is the same as the whole area of the screen, so that is perfect for the hero section. I set the height to that. I also learned that you could access text from within sections that you have id’ed, ex. like I could access the <p> text in the hero section by using the rule #hero p {} so that was pretty neat. Like I mentioned, I used AI to help with some of the centering stuff, because there are a lot of rules for that. I also learned a lot about default positioning, and relative, and fixed positioning. I decided to use position: fixed; for the navbar so it stays on the page the whole time. I still need to get the hang of positioning, but as I begin the next sections, I think I will learn to do that on my own.

Next Steps

I finished the Hero section for now for CSS, so I will start with the About Me sections. Again this section will have like a blurb about me and then little icons of all of the skills that I know. This is for sure going to be a lot more trickier than the Hero section. My plan is to first try and do the basic styling on my own, and then refer to other resources to polish it up. I am probably going to use the glass effect for the about me blurb and then as a little background behind each icons, like a little drop. I am excited to get this part complete because right now I just have like a very long list of large images in the website, (which are the icons for the skills) that are taking up like the whole screen and I am so ready to get rid of those and just clean up the webpage a bit. After those are organized into the skills, then everything will just be a little cleaner. I am planning to organize the skills based on software, hardware, and then others. The icons are already organized in HTML, so I am excited to begin tomorrow on styling the next section.

The navbar is glassy, its just because there is nothing under it to be blurred thats why it doesn’t show.