Check out my personal portfolio project!

I finished the personal portfolio project, and I want feedback, I know for some reason then in Full page mode the navbar looks a bit off, but that would be a lot of fixing to do which Iā€™m not sure how. But in editor mode, it looks fine.
My Personal Portfolio Project

Maybe you can use Flexbox instead of center.

<section id="welcome-section">
  <nav id="navbar"> <!-- Nav -->
    <div>
      <h1>My portoflio page</h1>
    </div>
    <div>
      <img id="code" src="https://i.postimg.cc/HxG2zYQF/Logo-Makr-6-HRok-N.png" alt="code" width="80px" height="50px"> <!-- Code picture -->
      <img id="logo" src="https://i.postimg.cc/xTcmdVvN/d42d3959-cbb2-4d5c-96ef-9a96f2610acf.jpg" alt="Logo" height="100px" width="100px">
      <a href="#links_to_projects" class="Links">Some of my projects</a>
      <a href="#links_for_profiles" class="Links">Some of my profiles</a>
    </div>
  </nav> <!-- Nav -->
</section>
#welcome-section {
  background-color:#FFED33;
  text-align:center;
  position:relative;
  padding-top: 0px;
  margin-top: 0px;
  display: block;
  height: 100vh;
}
#navbar {
  display: flex;
  flex-direction: row;
  width: 100%;
  border: 1px red solid;
  justify-content: space-around;
}
div{
  border: 1px solid;
}

1 Like

Looks great!

You see how when you hover over the images in your profiles section, it forces the elements above it to kind of jump about a bit? You can improve this by using CSS transform: scale() when hovering over images instead of just increasing their width and height.

img { 
  transition:0.3s /*this is the duration of the transform property on hover.*/
}

img:hover {
  transform:scale(1.2, 1.2); /*this says to scale the height and width by 1.2 it's original value.*/
}
1 Like

Wow thank you, it looks so much more smooth.

Looks good but try to apply HCI rules to interact with user with good interface (color , infographics).

What places teach about HCI?