My new portfolio(outside of the FCC project)

As my skills expanded i decided to create new, more present personal portfolio which i can eventually use to apply for some education program or even a job. Duo to short time frame, i did not make it too fancy, not applying many effects, but did take the extra mile, for some minor aspect. My aim was to be more simplistic yet not boring, presenting all the important information, without going into details.
I would appreciate to hear different opinions and if there are any issues.

I’ve never been a huge fan of using a skills section with the format you used. What does 4/10 Python mean? That you’re beginner? Does 8/10 HTML mean you’re nearing master level of that particular markup language?

I’ve found that defining what each area of the skills area means is a better way to express your skill level and will provide more than just an aesthetic.

Here are a few examples I’ve found on Stack Exchange:

I would recommend redoing this area to avoid some confusion.

Other than that, solid work! :+1:


i see you are putting your inkscape skills to good use . the only piece of advice i would give is making sections 100vh or if that is not possible making the cards or subsection of the section less than 100vh because i didn’t know when to stop scrolling when went from one section to another .

the project cards were too big they were overflowing on my screen
adding a border radius to some of the boxes is a small investment that would make your site way more appealing and modern.

but all in all it is a good job i am also a fellow inkscapian so i more than appreciate the arts and design

good job

1 Like

thanks for your reply. The sections min-height is 100vh, so when a user links to a section, it takes at least the screen size, but the projects and drawings section content is more and cant be fit in a 100vh container.

Are the project cards literally overflowing? If this is the case, its serious issue and i should look it up. What browser/resolution this appears? They are intentionally designed big, but shouldnt go outside the screen width. There is a more complex grid rule to make them 50% width, but not go above 600, or beneath 400px.

grid-template-columns: repeat(auto-fill, clamp(400px, 50%, 600px));

It might not be applied for all cases and i will need to think of another solution. The same is applied for the drawings. I intentionally didnt use border radius for appearance. My last project relied heavily on that, but this time i decided it wouldnt fit for the looks i aim.

Im glad you noticed the Inkscape graphics. It helped me a great deal for icons and to fill some empty spaces

Hi ThatTyGuy,
thanks for your feedback! Would you mind checking again the project and tell me if the legend frame i added is sufficient solution for the skills charts to look less ambiguous?

1 Like

browser is firefox , device is a laptop with a resolution about 1366 * 728px

1 Like

ok, i see what you meant, thanks for your recommendation!
I recognize its the text that extends the project containers and i had in mind to make it appear on top of the image only after you hover it and remain hidden otherwise, but this is one functionality i decided not to implement, however now i see i should prolly take the time to do it.

1 Like

It’s a step in the right direction in my opinion. I like the change!

1 Like

i recommend you try out the hover effect thing
you will have learned how to implement a new feature and at the same time avoid the overflow

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.