DEV Community

Cover image for Your feedback on my website portfolio!
Sara °°°
Sara °°°

Posted on

Your feedback on my website portfolio!

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 planning to add is a logo.
  • Also am not satisfied yet with the projects section design, any ideas?
  • What you think about the font?
  • Do i need to add more sections, like CV?

Projects listed are Imaginary i didn't create any of them, but will add later when i finish developing

Kindly find the link:
My Portfolio

Discussion (13)

Collapse
markel profile image
Markel F.

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 😊.

Collapse
saraahmed626 profile image
Sara °°° Author

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

Collapse
chrishall78 profile image
Christopher Hall

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.

Collapse
saraahmed626 profile image
Sara °°° Author • Edited on

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

Collapse
gregsithole profile image
Greg Sithole • Edited on

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. :)

Collapse
saraahmed626 profile image
Sara °°° Author

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

Collapse
gregsithole profile image
Greg Sithole

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

Collapse
brinascode profile image
Sabrina Koumoin • Edited on

Hey Sara,
First of all great job so far!

Here are my suggestions:

  1. 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.

  2. You could also place your About Me section before your projects.

  3. 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!

Collapse
saraahmed626 profile image
Sara °°° Author

Hello Sabrina :)
Thank you so much for the feedback, specially the first point, that way, it would make more sense.

Collapse
saraahmed626 profile image
Sara °°° Author

Well noted Vikas.
Thank you for taking the time to view it :)

Collapse
simo97 profile image
ADONIS SIMO • Edited on

you should review, the responsiveness of your design, and also the font aren't allowing me to read it easily.

TIP: You can host your website in HTML on Github Pages. pages.github.com/

Collapse
saraahmed626 profile image
Sara °°° Author

Thank you Adonis for taking the time to view it and for the tip also :)
Well noted.