loading...
Cover image for Your feedback on my website portfolio!

Your feedback on my website portfolio!

saraahmed626 profile image Sara °°° ・1 min read

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

pic
Editor guide
Collapse
vikasyadav_dev profile image
Vikas yadav

Considering so many people are on mobile devices and many a times they check profiles on phone (I do it all the times ). I think it should be responsive. That is the first thing I saw when I opened it on my phone.

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
saraahmed626 profile image
Sara °°° Author

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

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

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

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

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
simo97 profile image
ADONIS SIMO

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.