Portfolio Project Round 2!

@Jerami @alexiorodrigues @snowmonkey @bmutebi @ChrisCline1138

Hey, after I think over a week of recreating my portfolio page, I finally have a much better presentation. It also all passes now too. I still have a few things I see as issues:

  • The biggest thing I want to get working is in my projects section. I have the little header for each project, along with icons of what I used to create it. I added a right double arrow and I want to use that as my platform for people to see my projects on a new page, but can’t get it to work :confused:

  • My typography…I’m still learning what looks good. I use google fonts and see what fonts are compatible with one another, but I don’t really like it still.

  • In my contact section, my contact icons overlap my contact form. I gotta give a little more spacing, I think.

  • I can’t figure out why I have a slight horizontal scroll bar. (Oh Jess, what did you do?)

So lay it on me, guys. What do you think?

6 Likes

Hello Again :smiley:
At first glance it has a much better presence :smiley:

Desktop

  • I’d divide the about me paragraph into 2 just to make it easier to read
  • On your hobbies, I’d make them as a 3 x 2 grid to also bump up the size of the item for better reading
  • On Projects, I like the idea of the tech and the descriptions on them. However I’d move the description to the bottom of the container so that people can glance at the project image directly without looking around the text
  • Titles on the projects could have the same font family as the other titles. At least it seems weird for me with that font.
  • Phone has a the text “#phone”. Is it suppose to be like this?
  • I wouldn’t hide the contacts, (in mobile it still hidden, which is a problem), I’d exhibit as it is on hover
  • Text area placeholder has a different font size from the other inputs. Should it be different?

Mobile

Some issues with the form container on mobile format

I need some time to check your problems thoroughly, this was just an overview :slight_smile:

1 Like

Love it, very well done. In addition to the points you noted, I’d like to add something to look at. Very minor, but.

  • when you mouse over a contact method, there is an abrupt width change. I might suggest either leave the width alone, or animate the change in width to make it ‘intentional’.
2 Likes

Also I’ve notice that on mobile you have placed the hamburger menu on the centre with no information. I’d add some sort of text to inform clueless users that there’s a menu there (suggestion: Since it’s your personal portfolio, try your name)

1 Like

Hey, Jess!
I like the page so far. There are some issues but, I think(know) that your page is above my skill level. lol. So it’s a bit hard because I don’t like to state problems without solutions. You can see the issues yourself so, me restating them wouldn’t be of benefit.

But, I can tell you what I like. I think, overall, the concept is great. I like the colors that you’ve chosen and it seems very ambitious, in a good way.

One thing I can help with is fonts. You were saying that you have a little bit of an issue deciding what works well together. My suggestion for that would be to just surf the web and find some pages that you think the fonts would work well for your project. Then you can see what they used as suggestions.

My suggestion with flex/grid, and what worked for me, was to make sure that any grid was working before adding content, which can add to the confusion. Once your grids react the way you’d like, getting the contents to fit is relatively easier.

One way to go back and fix things, on that same note for me, is if something stops working, Fork it and remove some of that content to get it’s container working, then add the content back in for the container you were having a bit of issue with, and get it’s flex working.

So, I’m sure you’re still hard at it, and tag me when you have an update. I’m happy to provide what little help and extensive opinion I have to offer. Good luck!

2 Likes

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