Skip to content

Instantly share code, notes, and snippets.

@yilverdeja
Created March 9, 2024 08:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yilverdeja/f27f563958e3f9a8089708e6c5a6b172 to your computer and use it in GitHub Desktop.
Save yilverdeja/f27f563958e3f9a8089708e6c5a6b172 to your computer and use it in GitHub Desktop.
Feedback for Hunter Portfolio

Hey! Good job on the portfolio! Here are some comments I have while going through your website.

Skills Icon Color

Why is the typescript icon the only colored skill? Personally, I think it would be nice having the rest colored in as well - to stay consistent with your design. Or just keep them all white.

image|244x405, 50%

Icons

I see for the contact section that you're using an image for the fiverr logo. If you're using react-icons, you should be able to use the SiFiverr icon instead.

Skills View

Top Padding

First, there's the padding on the top of the section which is set to 160px. I think I see what you're going for, but I think it would look better if at least the title of the section was sitting closer to the top, and then you can add the content in the middle.

Icons Vertical vs Horizontal

The vertical format on the phone looks good, but on the desktop, there's a lot of empty space on the sides, and I think it could look much cleaner if you add the icons horizontally. You don't have to have it all in one row either, I think it could look nice on two different rows with bigger icon sizes!

image|690x495, 50%

Favicon

To give it a more professional look, I would suggest adding your logo as a favicon so it shows up correctly in the browser. Right now, the favicon logo set in place is the Vite logo.

image|230x220, 100%

Navigation on Mobile

As one of the users mentioned above, make sure to add a mobile navigation for your website. I think in the HTML / CSS part 3 course, Mosh has a good example on how he did this with expanding a menu icon.

Minor Note

I think this may be an AOS bug, but I would just like to bring it to your attention. I've seen the same issue appear in some of my other websites when the content hasn't appeared on the screen yet.

AOS Bug?

It's hard to notice until you start using the dev tools or if you're using a computer with a smaller screen. It seems that the body is not filling the whole viewport width, which results in this extra space on the right side.

image|690x320, 50% image|690x353, 50%

Eventually, once you scroll down and load in the projects, the size adjusts and, and everything looks normal again.

If you're curious on how to fix it, I would recommend checking with the developers at AOS. Maybe this is a known issue, and they may already have a fix for it.

Keep on it!

Keep up the good work! Keep developing on your own time too so you can add more projects into your portfolio :)

@hunter-orion
Copy link

hunter-orion commented Mar 13, 2024

I really appreciate the feedback, after implementing those changes it really looks a lot better and I enjoy the feel of the page tenfold. The AOS bug is pretty tricky but had to do with an overflow property needing to be set to hidden and your right for some reason the body isn't fully rendering. I was about to give up on that before you gave me a an idea of what to look into. Thank you so much that was really professional feedback.

@yilverdeja
Copy link
Author

yilverdeja commented Mar 14, 2024

No problem! It looks much better - glad I could help :)

The AOS bug is pretty tricky but had to do with an overflow property needing to be set to hidden and your right for some reason the body isn't fully rendering. I was about to give up on that before you gave me a an idea of what to look into. Thank you so much that was really professional feedback.

@hunter-orion glad you were able to find the fix! If you don't mind, could you share the solution to fix the AOS bug? I think it would be helpful to know in future projects I use AOS.

@hunter-orion
Copy link

Yeah of course, For me it was a 2 or 3 part solution i'll have to refactor to be 100% sure.

set overflow-x: hidden; in body using a <style> before the head

then i had to change my meta tag to
meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1.0, user-scalable=no"

It did misalign all my elements to the right so i had to add some margin right on each block, it still needs a little tweaking however it's mostly centered now and there is no side scroll.

here is the full conversation michalsnik/aos#416

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment