Feedback: my Portfolio!

Hello!
I’d like some feedback for my Personal Portfolio. https://codepen.io/Azametzin/full/reQWYZ/

Any detail you see, any opinion, I’d appreciate it.
Also, I intend to use this to get a job.
So. Thanks in advance!

Hey. I like me some dark gray.

I don’t know about transitioning the “skills” icons to smaller size, they seem to go a little crazy when you hover the ones in the second row (they make the MySQL one go back on the second line when hovered), but that’s mostly it. Other than that I like it. Nice job.

Fala Henrique!

Your portfolio is awesome!

First, I loved your codepen’s project *.gif idea, I will apply this concept to my own portfolio! Tks! hahaha

About the translation method… I don’t know… I preffer to use an js object with the translated setences or words.

E.g.

var lang = {
	"learn" : "Aprender",
	"review" : "Revisar",
	"grammar" : "Gramática",
	"flashcards" : "Flashcards",
	"skills" : "Habilidades",
	"help" : "Ajuda",	
	"start" : "Começar"
}

Anyway… Congratulations!

1 Like

Oh my…! Here is happening the opposite (the transition is to larger size). I didn’t check that before. Much probably that is related to different resolutions (as I tested in quirktools.com/screenfly now). and using size in % in CSS. Thank you!

Opa! :smile:

Thank you, man!
I’ll take in consideration your hint about language to study about it too.

Yeah, they transition to smaller on smaller screens. Actually the smaller the screen size, the smaller the icons when hovered.

That’s because you used a percentage width on your :hover selector without setting a width on the icons. Give them a width (I would advice in pixels\em) and it should be fine on every resolutions, like:

.imgSkill {
    ...
    width:5em;
}
.imgSkill:hover {
    ...
    width: 6em;
}

Then you can use media queries to adjust their sizes for other resolutions if you need to.

Edit: Nevermind, didn’t read your full answer. Woops.

1 Like

Yea, I thought in using ‘px’, but I think ‘em’ is better indeed. Thank you!

1 Like