Portfolio Project Round 2!

If I click on the Projects in your Navigation bar, it doesn’t guide me to Projects section of your portfolio. In that Projects section, the Tribute Page and Landing Page has a font that I dislike. Otherwise, it’s fine

1 Like

Thank you for checking it out again! I think I should implement more CSS grid into the small areas, like the hobbies area, the project section, and the contact section. I’ll start working on that first. Hopefully it helps with the responsiveness. Thank you for showing me a screenshot of what’s going on (intentionally put the button outside of the contact form to do some overlapping, and was thinking of adding a footer that would be under the button too, just for fun. But maybe I should keep it simple).

I didn’t add my phone number yet lol.

Yeah, I was thinking of having the contact containers change from icon to the information on hover, but decided to test this out first. I’m not getting as nice of feedback, so I think I’ll revert back.

I’m thinking of choosing some simpler, sans serif fonts and changing their weight and size for the titles. Since I posted this yesterday, I watched some videos on typography, composition, and other design topics and their explanations were to do just that.

I’ll add my name to the hamburger menu for mobile too. I’m just happy its finally a noticeable navbar haha

2 Likes

I suppose its not as cool as I thought it was haha. So I’m gunna change it to something simpler. Besides, its better to simplify than have something I can’t control well. Thank you for letting me know!

1 Like

Hey, thank you for the encouragement! You should’ve seen the first one :sweat_smile: I’m glad this is more impressive.

That is a good idea on searching for fonts. I did come across some nice design videos on youtube and a few on typography, so I have a better idea of what’s more acceptable/attractive. But I think I should pay attention more to what I learn from those videos when I’m on the net. I don’t pay attention to it enough.

When I learned flexbox, I thought it was the shit. But I think I’m over using it. I think CSS grid is appropriate for certain set up, and flexbox for others. The grid would be more effective, I think, and I might have to do some forking :face_with_head_bandage: its gunna be a long night!

I’ll definitely let you know. Thank you for your suggestions

2 Likes

Thank you for pointing that out! I had to change my projects id from what I previously had to what the project requires me to name it. I forgot to change it for the navigation. All fixed now!

Yeah, my fonts are the nicest. Thank you for your honesty. I’m gunna change them to be a bit more simple with different weights, sizes, and colors. :+1:

1 Like

One thing to remember when deciding which is that items in a grid can overlap, which can be good(or bad). Items in a flex container will never overlap. They can only fill their container. It makes a lot of sense because it’s one of the few pages that accurately compares the 2 in use cases with great images of whats going on. I’d check it out.
This page may help to decide which is better(Grid/Flex) for which situation.

1 Like

The reason why you can’t click the project links is the negative z-index. Also, I’m not sure if only using the arrow for the link is a good idea, you might want to wrap each project in a link.

  1. I would make the mobile nav take up less vertical space.

  2. Change the look of the contact icon containers and their hover animation.

  3. You have an overflow on the page, you can hide it on the body (overflow-x: hidden;).

  4. Your form also has an overflow, the elements inside are not contained. Remove the height: auto; on the #contact-form in the 867px media query and give it some padding instead of height.

Here is a version I made you can have a look at. Just to give you an idea of what the nav and contact stuff might look like.

I get a little OCD about it and start to fix all kinds of things I really have no business fixing. I’m not trying to do your work for you, it’s just a bad habit I have. I have added some comments and commented out CSS instead of just removing it. If you want, you can fork it and then let me know when I should delete my fork of your project.

1 Like

Wow… Did I have a look at the project before! I guess I didn’t. The new look is so so beautiful and professional. May be it dies out on the a lower viewport. It only requires a quick media query fix… Otherwise things are nice @pleeseno

May be another observation is under the projects section. Still the same… Media queries will give a fix…

Good job.

  • I think that you should rotate your image so that it is aligned vertically. It just looks off.
  • in your About Me section, your images/icons are not showing up and look like a broke image link. They are also running together and separated into a 2x3 since you have 6 projects there.
  • In your Projects section, I would bring up the content closer to the top of the section. There is a big gap in there.
  • in your Contact Me section I would take out most of the extra space between things. It looks like you are just using wasted space to make your page longer.

Great job and hope that helps.

@alexiorodrigues @snowmonkey @Jerami @Sakka_Boi @lasjorg @bmutebi @geekysmurf

Thank you everyone who gave me some feedback. I have posted my final result from inspiration of some of your suggestions and I hope you like the final look!

2 Likes

My @pleeseno… Great job done dear.

2 Likes

When hovering the interest, the highlight color is difficult to read against the background.

At this point I’d just move on to new projects and come back later for adjustments when you gather more experience (and more projects to add to the portfolio)

I’m not sure which one you mean. The buttons or nav links that I have on my new portfolio, or are you looking at the old one still?

Sorry, I posted the new portfolio’s post in my previous reply on here. It’ll take you to the new portfolio page.

2 Likes

Thank you! I have more confidence with this one

1 Like

Different version actually, I went into your codepen and search for the latest one but this one is completely different.

Munch more visually appealing :slight_smile:
I’d just add more vertical space between the elements and the container’s margins. Also on the left hover links, the freecodecamp logo is difficult to see due to the background (on the darker one is better).

if you reduce your screen to 930px, the menu item “contact” is hidden on the right, you should increase the query to something like 1000px

1 Like

I’ll definitely change those both. Thank you for nothing them! I decided to do the mobile-first, but instead of doing one huge section of mobile and one huge section of media queries, I blocked them up section by section with their own queries. I actually got a lot more work done that way

1 Like

Because you said multiple media queries, I recall that they may have an impact on the performance of the page. Here’s homework for you and me:

The new version is pretty nice. I will say personally I’m getting a bit of sensory overload from the page. I feel like there are too many things competing for attention.

I would tone down the color usage. Maybe just use the yellow as an accent color, on headers and links, not all the text.

I would drop the extra color on the header and only use the yellow.

I would see if you can find a different hover color for the buttons. I actually do like your use of that same color for the hover on the social links, but not for the big buttons hover color. Colors are obviously a matter of taste and very subjective

Be mindful of the colors your images have and how they work with the colors on the page. The second image is really good because it has both similar and contrasting colors but the first image is not that great, color wise. It is competing for attention more than complementing. Maybe desaturate it a bit. You can also try giving it a slight blur to put it more in the background.

Staying with color, using transparency to make colors is great. But, I would color pick them so you know what colors they actually are (like the light gray made from transparency is #859AA5).

rgba goes from 0 to 255, if you give higher numbers the computed style will just clamp down the numbers to 255 (you have background-color: rgba(999,999,999,0.5);).

I feel you need more vertical space, things are a little too squished together. Remember whitespace is your friend.

I would increase the font size on the headers. More contrast in sizes gives better hierarchy, there is a reason why headers have the default sizes they do.

Sorry for the wall of text.

1 Like