The challenge this week was to creeate a portfolio page that will be a demonstration of the skills aquired during bootcamp. This of course is only the beginning stages of the deployed application as there aren't any projects to show off yet. There is a placeholder where the projects will go.
A portfolio page with the developers name, photo, and links to sections about them
My name is the h2 found in the header. My photo cna be found on the right side of the header. I was having trouble trying to arrange the image and header elements with flexbox, so instead I added the image with CSS making it a background image in the header and positioning it was much easier. I also liked how i could resize the photo appropriate to different screeen sizes more easily. THe links work to the different sections. While I have no projects to show off just yet, there is a coming soon placeholder.
When I resize the page, I am presented with a responsive layout
I used media queries to mmove the elements so they look good on a variety of screens. The most fun and challenging part was adding the burger menu for mobile layout. I relied heavily on youtube tutorials for help. They styling is not exactly what I want but I am excited that it works.
I had some fun with pseudo elements. Changing the properties of the about me section using 'hover' and 'cursor' . I used the 'transform' element of the coming soon image to make it tip on hover. I was surprised at how easy it was to add an alert in the HTML when you click submit on the form.
For accesibility I made sure to add the underline for links in an active state.
Overall I learned alot about editing my use of CSS. not every skill has to go into every element. I know I probably have some redundant code still left. I had alot of fun adding in the javascript function and look forward to the next module to build on that knowledge. Mostly I feel like I have built a good skeleton to build upon as bootcamp progresses.