Feedback on my first online portfolio

Feedback on my first online portfolio
0

#1

After a long time of not coding, I decieded to give it a go again.

I started with finaly creating my own portfolio website, to put myself out there on the web.
I hoop I could get some feedback on my page, keep in mind that I’m a beginner :slight_smile:

http://www.nilsgovaerts.be/

Thanks in advance you awesome community !


#2

Hey good job! I would

give more margins or paddings to each sections.
Create hover effects on your social icons.
create a contactme section.
align your social icons in responsive view.

Good luck!


#3

thanks for the advice !

the social icons where kinda messy on smaller screens, that one I noticed.
Will try to play around more with hover effects !
I’m still thinking how I would do the contact section.


#4

I would make the mobile menu cover all of the page when open (just remember to give the .menu-toggle a higher z-index than the menu).

Summary
@media (max-width: 860px)
header nav {
  /* display: none; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  margin: 0;
  background: #333;
  transition: 0.5s;
  z-index: 3;
}


.menu-toggle {
  z-index: 4;
}

To make the menu close when you click the links, change your code to this (should work).

Summary
// from this
$('#nav').click(function () {
  $(this).siblings().removeClass('active');
  $(this).toggleClass('active');
});
// to this
$('#nav').on('click', 'li', function () {
  $(this).parent().removeClass('active');
});

#5

Thank you so much!
I was looking for such a long time why my menu wouldn’t close after clicking a link. Will try this out Asap.
Realy Thanks for the advice !


#6

The navbar looks better indeed when it covers the screen completly. sadly it still won’t close when a link is clicked.
Think I have tried everything at this point.

Just found a solution !

$("nav li").click(function () {
        $(".active").toggleClass();
    });

#7

Good to hear you got it working, sorry i should have paid more attention to where the .active class was.

  1. It would be better to attach the event listener to the parent and do event delegation, that way you only have one event listener, and not one per li.

  2. I’m not sure using toggle() makes much sense seeing as clicking the li can only happen if the menu is active, i.e. you can’t toggle it on from the li, only off.

If you don’t mind, can you tell me if this works?

$('#nav').on('click', 'li', function () {
  $('.active').removeClass();
});

#8

I did try the removeClass last Night, But the problem I had with it, is that it works only once.
After the class is removed I can’t use the hamburger menu anymore for a reason.
That is why i went for toggle :slight_smile:


#9

You can use .toggleClass function.


#10

That is what I use now and it works fine now :slight_smile:
Took me a while to get it to work like it was planned.