My Portfolio Page, feedback welcome!

Hi all,

Here is a link to my Portfolio page. I appreciate any comments and feedback!

Thanks for having a look!

1 Like

at full screen looks great … thought at first though it was all white web page until after about 5 or 6 seconds the images loaded … so decided to go to dev tools and look at images … they are masssive … i opened a couple in another tab on there own and wow they are big … you need to size them down to cut down on load time.
As i said full screen looks great but any other device other than a laptop / desktop and it falls apart … everything starts to get in on top of each other … so unfortunately needs a bit of work here.

Hi John,

Thanks for the feedback!

I resized all the images and it seems to be loading faster for me.

In the FreeCodeCamp courses up to now they have talked about using the img-responsive class to make the site more responsive. However, I am setting the images in my css. Is there a way to add the responsive class to a css value? I googled “Making my website more responsive” but that seems like a pretty deep rabbit hole, maybe there is a shorter way?

It looks good on desktop but when you re-size to smaller screen the Menu is not collapsed.
Also I would suggest you re-code the site without bootstrap to show potential employers you know CSS without the help of frameworks. Learn responsive design next, it’ll help in the future.

Just my two cents

Hi Eerian,

Thanks for the two cents! Maybe I could have two more…

I coded this mainly in CodePen, and then linked Bootstrap without really realizing one way would be better, Bootstrap vs. CSS. Do employers view the use of frameworks negatively? Or is CSS just more flexible so might draw more attention?

I’m getting on responsive design. Thanks again!

I’m a beginner just like you but I do a lot of reading on the topic and that’s what I see a lot. Using frameworks is not wrong but employers like to see you can code a website without bootstrap just like using pure Javascript (Vanilla Javascript they call it) without using jQuery. It shows them that if a problem occurs you know how to fix it and not just say “well that’s bootstrap doing that and I don’t know why” lol. Just look at the portfolio pages everyone is posting here, they all contain Bootstrap or jQuery, I’m saying be different and stand out when time comes to apply for jobs, code the site without Bootstrap or jQuery, you will learn a lot more. Of course you should also know Bootstrap and jQuery and other libraries and frameworks.

1 Like

I hear you. I definitely plan on upping the css game, this website will be evolving so I appreciate feedback about where to take it. For now, I think I made the site much more responsive to smaller screens, let me know what you think:

It seemed like the image sizes are still a bit on the large size, (backgrounds were slow loading, 3-4 seconds on a so-so connection), but it was do-able on my laptop.

You asked about img-responsive in the css, there’s no need if you set background-size to cover.

I noticed you had a lot of duplication in your css by using only classes for .pageone, .pagetwo, etc. why not have a single 'page class, and use id=“one” and #one {} in your css? the you would have div class=“page” id=“one” and both css sections would apply. That way, you could leave things that stay the same on each page in the class, and individual changes, such as the background image, could be set by id.

The site looked good on a phone except for your name (H1 with id=“myName”) broke responsiveness.

Thanks for sharing,


Hi James,

Thanks for your suggestions!

I meant to have saved the smaller images for the backgrounds but guess it didn’t happen. I resized them and double-checked this time so the page should load faster now. Any idea what an ideal size for background images would be?

I also think it is a really good idea to create more general classes and use ids for the more specific things I am trying to do. I tried just now but it threw the site out of wack so I will give it another look soon.

Me and my responsiveness-breaking long name…

Thanks again!