Please help my portfolio page

Hello,
I’m wondering if someone can please give me some feedback on my portfolio page? I have spent 5 days in what seems like a forever trying to finish it off and every time i manage to fix one thing, something else then becomes the problem. here is the page Portfolio page

Some of the problems i am noticing are:

The header overlaps when i change the screen size

The about page content starts halfway down the page, despite changing the padding.

If there are any suggestions on how to fix this i would be very open to any feedback on these issues o any others that you find.

Thanking you in advance

Emma

@macey26 hi the first thing i noticed is that you have things like html and head in your pen. codepen handles all that and you pretend that you just typed body…in other words only include what is between the body tags in html section of codepen… to add to external styles and scripts go to setting and plug them in. I don’t know if this is why your page is doing these things…i looked at your code and there is alot of strange things to me…but i did this edit

when you want to link internal things just give the whole about section the id about…then i just pushed the margin of the section down…i deleted some other stuff in my fork but you get the idea

edit also u only need the externals that i put in the fork…i deleted a bunch of the ones you had…im not sure if you are doing something im unfamiliar with in that case sorry. I use the regular jquery and materialize(similar to bootstrap) and that requires just the minified css, and js for bootstrap and jquery

hope this helps a little :slight_smile:

Hi benjaminadk,

Thank you for looking into the page and cleaning it up a bit, i was unclear about how to use external files appropriately, so that cleared it up. Also thanks for cleaning up the code, i was trying to experiment, i guess that didn’t work so well.

I think you sorted the #about problem i was having too, So thank you for having a look.

You helped a great deal.

yah so for bootstrap you just want one file for css and one for js. then jquery. those are the main framework/libraries. then there are like the plug-ins/add-ons. like jquery-ui. its totally confusing at first to understand. then there is .min. im still figuring that out. but in a nut shell the .min it just smaller or minified, when u look at the file it will be like one long line of code…where as the version without the min is easy to read an looks like css(in the case of bootstrap). im over simplifying things but i hope that helps.

for the header overlap…i’d have to take another look, but it seemed like you had a ton of stuff in what should just be navigation…i think it would be better if you just had maybe your name/logo and links…i use materialize like i said…but it has a feature so that when screen size gets small it hides most of the nav content…hard to explain…i got an idea…check out this site i built and change screen sizes…things change…bootstrap should do this too…i just havent used it in a while

look into css media queries as well…building these things is never ending trail and error :spy:

You’ve explained the external files really well, i actually understand the how use it now.

I will definitely try to simplify the heading and try the CSS media queries for the to make the page more responsive in smaller screens. I had a look at your site and found that really useful too.

Thanks for checking it out for me, you have been a great help