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
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?)
Hello Again
At first glance it has a much better presence
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?
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ā.
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)
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!
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
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
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!
Hey, thank you for the encouragement! You shouldāve seen the first one 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 its gunna be a long night!
Iāll definitely let you know. Thank you for your suggestions
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.
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.
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.
I would make the mobile nav take up less vertical space.
Change the look of the contact icon containers and their hover animation.
You have an overflow on the page, you can hide it on the body (overflow-x: hidden;).
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.
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
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.
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!
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 glad this is more impressive.
its gunna be a long night!