Improving design

HTML-CSS
1

Hey guys!
I’m very new to web development.
For the past few days, I’ve been trying to make a portfolio for myself.
But I’m unable to make it more interesting, I mean my portfolio straight up looks boring ;-;
Any tips to improve it is much appreciated.
My portfolio: http://rafihasan0178.github.io

2

Hi Rafi, I’ve checked your website and I must say that I really like your animation for the menu :slight_smile:

For the advice about the portfolio, mine are the following:

  • I’d make different sections. You could start with a presentation of yourself. That presentation should talk about both your technical skills and the soft skills (in a work environment these are very important, sometimes more than the technical skills).
    Near the presentation you could put a professional picture of yourself, that would create more connection with a portfolio reviewer.
  • In the portfolio section, put some examples of previous projects you’ve done (or even better, link them if they are on some websites like github or codepen, so the portfolio reviewer has access to them).
    The goal of the portfolio is to showcase those works so that a potential employer/client gets interested in that and will contact you.
  • At least at the beginning while you work on the first projects to put in the portfolio, I’d put a section where you can link the certificates you get on FreeCodeCamp (or any other site/school, for the matter).
  • I think that the social icons don’t have enough contrast with background and people with visual disabilities might find it hard to get them. I’d put them of the same color of the rest of the text (#F0F8FF)
  • In my opinion, if you don’t have any at the moment, you could create professional social media pages for yourself to keep detached from the personal life ones.
    The social icons should link to professional life pages.
    One of the advices I hear often is to create a LinkedIn profile, because many companies nowadays recruit also through LinkedIn.
  • I would switch the position of the hamburger menu to the right side of the screen, unless the majority of the viewers are from places that have right to left reading and writing directions.
    On the left side I’d put a logo. Clicking on the logo should bring you back to main page.
  • When you make the contact page you can put links or call to action buttons for mails and phone calls.

Link for phone call:

<a href="tel:0-00-000-0000">Call me!</a>

Link for mail composition:

<a href="mailto:info@example.com">Send me an email!</a>

You can add more options to the email (like a pre-written body or subject): check it here

Keep up the good work :slight_smile:

1 Like
3

@rafihasan0178 I think you should find websites that you like and don’t copy but you can imitate the style. Pick elements that you like on other websites and add those to yours. Add 4 or more fully functioning projects on there that you are proud of. The menu is very cool.

1 Like
4

Thank you so much for writing everything in great detail. I will make 3 sections with a good color palette now :slight_smile: and in the header section I would make a h1 that says “Something” Web Tech, give that “Something” a different color, and make it the logo which will bring me back to main page.

5

Thank you very much. <3

6

Hey, I did some improvements, can you give it a look? :sweat_smile::sweat_smile: