Pls give some feedback on my Portfolio Page Project

Hi everyone, as usual, I would love to hear your feedback on my finished FCC portfolio page project. I also tried to focus on the responsiveness for most devices. I must say Firefox developer edition is a must for me now, can’t live without it…

The codepen is available here:

And also finally got the github publish right…
https://1guywebdev.github.io/

2 Likes

Looks good for me man. And clean codes too. Clearly you gave a lot of thought on it. Now let’s go to Algorithm and Data Structure!

1 Like

Thanks alot @shugyoza.
On to JS! Can’t wait to see how I can style websites with JS.

  1. I recommend you to delete border-radius on the #navbar and add more padding to the top of the #navbar.

  2. You can choose a better gradient than yours. Pls check some Gradient sites:
    https://www.grabient.com/
    https://cssgradient.io/
    uiGradients - Beautiful colored gradients
    https://webgradients.com/

  3. On the project section, make a grid style for your projects section instead of vertical style. These sites will help you:
    https://grid.layoutit.com/
    https://cssgr.id/

  4. My advice to you is to practice your HTML and CSS skills by building projects. Go frontendmentor and choose projects to build.

1 Like

Wow, thanks alot @abdulrahman.mhd.anas, these sites will help plenty!
On point number 3, I had it on a grid layout, but then navbar wasn’t fixed in the mobile environment.
Do you have any advise for that please. I sort of figured out that when the grid overflows horizontally then the fixed position doesn’t work in responsiveness. Am I right?

You should have grid style only in laptop/tablets screens.

  1. Delete dispaly: inline-block; from #project-tiles

  2. add grid style on the bigger screens:

@media (min-width: 1024px) {
  #project-tiles {
   display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 24px 24px; 
  grid-template-areas: 
    ". ."
    ". ."; 
}
}

You can change min-width: 1024px) to any value, for example 768px (iPad/tablets screen)

1 Like

At the last part the Have a look at my progress on screens with smaller width hovering on the my progress makes it way to large .

For the project part. Hovering on the image will only make the image larger and hovering on the text part only makes the text larger. Are you able to place them in one container and when the container is hovered both the image and the text will go larger? Because this might imply that the image and text aren’t related and each element will redirect the user to a different website.

For the about me section. The length of the sentences per line isn’t consistent. Some are longer than others and some are shorter. I would suggest for you to use a width with a ch as a unit. ch unit is relative to width of the “0” (zero). eg width: 30ch; This makes the width equal to 30 “0” having some control to text width.

Overall looking good. I do see you are playing with a lot of animations.

1 Like

Done, thanks for all your help @abdulrahman.mhd.anas , REALLY appreciate it.

Thanks @stravse, really been trying to get my CSS animation down, but these @media queries are really getting to me.
When I check responsiveness in Edge and Firefox developer in their device emulators, it looks good, but when my wife opens the pen on her phone, it doesn’t show correctly.
And for you too now also…
Is there something to use that is better to check responsiveness?

Nothing special really I just made the browser in mini-screen mode and play around with the size.

I think I kinda know why some of the stuff is happening. You are using the margins to center some stuffs? This might be the reason why things are going crazy for some screen sizes. Would suggest to try and use display: flex; on containers and using the justify-content: center; and align-items: center;

If you want to know more about display flex check this website.

1 Like

Thanks @stravse, I keep forgetting how important display: flex is.
Very versatile…
I changed my #project-tiles to display: flex also, instead of the display: grid and it is working in this instance…

Hello :wave:

Your website looks good.

My feedback is for the navbar. The navbar is very and tooo much noticeable. You can make the navbar transparent and with a slight shadow under it when scrolled down. Have a nice coding :3

I think you should change the font family for the headings, it looks a little like comic sans… With the right font family you can improve the app easily and create your own identity. Also the spacing is to much and the animations should not take to much attention.

Ohh and would not use smilies, better use really good icons :slight_smile:

Thanks for the feedback @kazooi! This was more of a mockup site, not using it anywhere, I just tried to apply my CSS knowledge with this project, obviously building the whole page from scratch with what I’ve learned up to that point.
And still learning…

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.