Building my first personal website with HTML, CSS, and JavaScript. I will use it to showcase my projects and creative endeavors and to show other people who I am. This is one of my first web dev projects, and includes a custom navbar and cursor effects.
My first flavortown ship!
This project is my personal website to show my current projects and interests, as well as give me a place to share my work. It features three sections: homepage, about me, and projects. There is a navbar and custom cursor that are responsive.
This project helped me learn more JS fundamentals and improve my web dev skills!
I created a custom cursor by hiding the real cursor and creating a div object that follows the mouse’s position in JS. The mouse reacts to links when hovered and changes color and size. This was done using the mouseenter and mouseleave properties on all button objects. I also finished polishing up the projects and links section with final text and hover effects. Lastly, I completed the README file with all of the necessary information!
Log in to leave a comment
I created an about me page with four images in yet another flexbox. I also made the navbar automatically switch to the section you are on as you scroll using the scrollY value in JS. Lastly, I added some links to my other socials at the bottom of the page.
Log in to leave a comment
I created a JS script that makes the active section change color when clicked, and causes all of the other buttons to turn back to grey. The navbar is now fully functional. I also created one of the project pages, and learned how to embed a video into a page!
Log in to leave a comment
I created a simple hompage and projects section. I created both of these using flexbox elements and the project pages each scroll on their own. I also added hover effects on the project pages.
Log in to leave a comment
I recreated my navbar in flexbox and centered it using the text-align property. I also added transition animations to the links when hovered and made them link to different sections. When clicked, some buttons smooth scroll to other sections and the photography button links to a different page, where the other button is now active.
Log in to leave a comment
I created a simple navbar design using the w3schools tutorial and adding my own effects in HTML. I used hover properties and transitions to animate the links when hovered. Currently, I only have one page but plan to add more. The current page is just a placeholder to make sure the navbar remains at the top when scrolled (caused by using fixed positioning in CSS). Next, I will create some more pages and try to center the navbar.
Log in to leave a comment
I’m working on my first project! This is so exciting. I can’t wait to share more updates as I build.
Log in to leave a comment