Personal portfolio project help

Code Feedback
1

hi, guys. so…tired…would…love…feedback. thanks! :sleepy:

1 Like
2

Your portfolio looks nice good job man!
But your hamburger menu has some styling problem after I click and your landing page has lot of white space you should fix it .

1 Like
3

Hello @grrleed! It’s a very nice page. Your css usage is above what I normally see on here for the beginner projects.

As for the hamburger menu that @priyanshushrama709 pointed out I think if you changed to something like this it may appear better.

 .nav-open .hamburger {
    transform: rotate(.5turn);
}
.nav-open .hamburger::before {
    transform: rotate(0deg) translateX(0px);
}

I’m not even sure you need the ::before unless there was something else you were going for. The translateX is causing one of the bars to be out of sync.

Good job using that menu style. I don’t see it often with these projects.

1 Like
4

thanks for the tips. the hamburger menu looked even wonkier while i tinkered with it. made the changes and i do like it better:

so much css to learn!

5

you should use this code to style hamburger menu It appear better.

Use this HTML.

 <div class="hamburger-menu">
         <div class="menu-mes">menu</div>
         <div class="menu-btn">
          <div class="menu-btn__burger"></div>
    </div>
 </div>

CSS.


.hamburger-menu {
    display: flex;
    align-items: center;
    width: 60%;
    justify-content: space-evenly;
    z-index: 9999;
}
.menu-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 43px;
    height: 45px;
    cursor: pointer;
    transition: all .5s ease-in-out;
    overflow: hidden;
  }

  .menu-btn__burger {
    width: 40px;
    height: 5px;
    background: #3F3D56;
    border-radius: 5px;
    transition: all .5s ease-in-out;
  }

  .menu-btn__burger::before,
  .menu-btn__burger::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 5px;
    background: #3F3D56;
    border-radius: 5px;
    transition: all .5s ease-in-out;
  }


  .menu-btn__burger::before {
    transform: translateY(-12px);
  }


  .menu-btn__burger::after {
    transform: translateY(12px);
  }
  
  /* ANIMATION */
  .menu-btn.open .menu-btn__burger {
    transform: translateX(-50px);
    background: transparent;
    box-shadow: none;
  }
  .menu-btn.open .menu-btn__burger::before {
    transform: rotate(45deg) translate(35px, -35px);
  }
  .menu-btn.open .menu-btn__burger::after {
    transform: rotate(-45deg) translate(35px, 35px);
  }

Javascript.

 const menuBars = document.querySelector(".menu-btn");
    let isOpen = false;
 

    menuBars.addEventListener("click", (e) => {
        if(!isOpen) {
            menuBars.classList.add("open")
            isOpen = true;
        }
        else {
            menuBars.classList.remove("open")
            isOpen = false;
        }
    })
1 Like
6

simple, cool and pleasant interface… did not worked on my safari browser though… I had to use chrome

1 Like