Portfolio page - CodeyMcC

Code Feedback
1

Hello

I was just looking for some feedback on my portfolio page, please take a look if you have the chance - https://codepen.io/CodeyMcC/pen/xdddaY.

Struggles

Most of my issues came form trying to centre pieces of the page in the middle. For instance, I wanted clear sections between About/Portfolio/etc so that a full page could just be taken up by one section. To do this I added extra padding on top/bottom to give it that feel.

Also had an issue on the nav bar click function - when clicking on a link it would place that section at the very top of the page, rather than in the centre like I wanted. Various stack overflow sources suggested padding/margins but i couldn’t get that to work. The I saw a javascript function which I basically just copied. I understand what’s going on with it but I wouldn’t have been able to recreate myself.

Happy to receive any feedback you may have!

CodeyMcC

2

Good work! A couple of things… Clicking on the Tribute page in your portfolio doesnt work for me… for the life of me I cant figure out why…

You used the same id throughout your page. You can create classes which can be used several times on a page, but an ID can only be used one time for one specific thing.

Not 100% sure if its required, but the directions say using the same functionality so Ill toss it in here, your nav doesnt highlight the link of the active section of the page youre on, and it snaps to the sections instead of scrolling to it.

Codepen automatically puts in the 4.0 version of Bootstrap, but 3.37 is the one that is documented, so change it to 3.37 …that was likely at the root of your issues with getting the Bootstrap Navbar to work.

3

Hi cndragn, thanks for your feedback I really appreciate it. I figured out the issue with the tribute page - I put the target = “_blank” in the wrong place (image, not anchor) and once I changed this then it started to work fine.

Tbh I’ve bene trying to sort a scrolling feature for like the last hour and I still can’t figure it out! Think I’m going to have to revisit this with a fresh mind. I was also having issues with sections in the initial stage so i think the highlighting section may cause me more issues! But I’ll definitely take a look at this when my mind is fresher, got to be better than the problems I’m having with APIs atm!

Thanks again for your feedback!

4

I just finished the quote generator project and at this point in my life feel like API is the bane of my existence :laughing:

Yeah, once you change your version of bootstrap from 4.0 to 3.3.6 in options, the navbar issues will be so much easier!! https://bootstrapdocs.com/v3.3.6/docs/getting-started/

5

Hi! This function can be usefull for scrolling

$("#nav li a[href^='#']").on('click', function(e) {
   var target = this.hash;
  //height that covered navbar
   var offSet = $('#stickynav').height();
  
   e.preventDefault();
   // animate
   $('html, body').animate({
       scrollTop: $(target).offset().top - offSet
     }, 500, function(){

     // when done, add hash to url
		//window.location.hash = target;
		return window.history.pushState(null, null, target);
     });
});

Also you have different id for link and section. That’s why the link does not work
<li><a href = "#about"
<section id="About"