Portfolio Website for Emma Halliwell

Projects Portfolio Project: Personal Portfolio Website
1

Hi Everyone,

This project took me 3 days to complete. I had trouble with implementing JavaScript. I did include a button that can be pressed to change the color of the heading. I am still looking for other places to add JavaScript. If anyone has any idea please let me know.

If you have any other feedback. All is welcome.

Here is a link to the portfolio website on GitHub.

Thanks

Emma

2

Hi, Emma!

I would love to get a live look at your portfolio if you could launch a GitHub page for it. :slight_smile:

3

Hi Everyone,

I have sorted out the problem. Here are the new links that you will need.

https://emma-halliwell.github.io/Portfolio-Website/

Sorry of the inconvenience.

Thanks

Emma

5

Hi Farhad,

Thanks for the suggestion. We definitely try this out. Also thank you for reviewing my portfolio website.

Thanks

Emma

1 Like
6

No inconvenience was caused!

Thank you for updating it. I have a couple of things I’d like to touch on.

First, your navigation. Currently, because the padding is on the <li> instead of the <a>, only the words are clickable. It is much more intuitive and user-friendly if the entire “button” is clickable vs. one area. On a small note, the contact page is the only link that takes the user to another page. This is just my opinion, but because this is a beginner portfolio and there isn’t a lot of extra information, I think it would make more sense for everything to be on a single page.

Second, the page has overflow, which is causing the horizontal scrollbar to appear. This is caused by the padding-left on the .container class. Third, I like that you used <details> for your projects. However, be sure to include a visual cue on its clickability. You’ll want to put cursor: pointer; on the summary element.

image
I would also recommend filling in the JavaScript image so that they all look the same.

Lastly, I noticed that the page is not responsive. This is one of the most crucial aspects of web design, as we want our projects to be accessible from any device. I’d encourage you to take the steps to ensure responsiveness. A big first step is to make sure <meta name="viewport" content="width=device-width, initial-scale=1.0"> is included in the <head> of the HTML document.

As for JavaScript, it’s easy to put too much into small projects like this. I would recommend adjusting your changeColor() script to include even more colors, randomly selecting a different color each time the button is clicked.

Keep it up and happy coding! :slight_smile: