DEV Community

Your feedback on my website portfolio!

Sara °°° on June 25, 2019

Here is the first draft of my portfolio that i have created using CSS, HTML, and JS, i need your feedback before publishing it. One thing am plan...

Read full post

Markel F. • Jun 27 '19

Definitely, responsiveness is probably #1 priority on web development nowadays. Flexbox and the wrap attribute should help in My Projects section.

With a flexbox generator I did a little piece of CSS that you can apply to the parent element. This should give the same effect of what you have, but wrapping it in mobile devices.

display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;

Feel free of tweaking the design, especially concerning about spacing, I leave you the template of my preferred generator it to be easier.

Also, I recommend you to add this tag to your <head> element, you will discover how magical it is when you add it.

<meta name="viewport" content="width=device-width, initial-scale=1.0>

Good luck with it, and I really like the website. If you need anything else, send me a message 😊.

Sara °°° • Jun 27 '19

Markel :) Thank you so much for the valuable information, sure will ask for your help if anything stops in the way :D

Christopher Hall • Jun 26 '19

I think that font is good for headers, but I would choose a different font that is easier to read for the description of the projects and the About section. You also have quite a few spelling errors in your About section that you should correct.

Sara °°° • Jun 26 '19 • Edited

Thank you Christopher for taking the time to view it :)
Well noted, will check spelling and find alternative for the font.

Greg Sithole • Jun 26 '19 • Edited

Just a couple of suggestions:

Maybe use a different box-shadow for your cards. Have a look at these card designs: freefrontend.com/css-cards/
Responsiveness is an issue, so maybe look into using Bulma/Bootstrap as your frontend framework
Font is not that great, so maybe have a look at fonts.google.com/ (What I like about it, is the give you an idea which secondary font to use)
Have a look at colorlib.com/wp/cat/personal/ I like some of the designs that they put there, it helps give an idea what design you'd aim for.
In terms of section, I think you're fine... Just the ordering... I'd start off with the about section, projects and then finally the contact me section
Lastly, I like the contact me icons that you're using but change your .medialinks to use the following padding: padding: 20px 30px;, so that way you have a full circle

Overall it's a good start. :)

Sara °°° • Jun 26 '19

Greg, Thank you so much for the detailed suggestions and provided links :)
Well noted. Am working on updating the website :D

Greg Sithole • Jun 27 '19

Glad I could help, Sara. Good luck and hopefully you an amazing portfolio soon

Sabrina Koumoin • Jun 27 '19 • Edited

Hey Sara,
First of all great job so far!

Here are my suggestions:

Perhaps place the Get in Touch section after your bio (About Sara). So that people get to know you first and have a greater incentive to connect.
You could also place your About Me section before your projects.
You could give the borders around your social media icons a greater radius so they can seem rounder. I think round borders look a little better (unless you actually opted for the oval)

Hope this helps and again great job!