What makes a portfolio look more professional?

Code Feedback
1

Hi all!,
Ive been working on this portfolio for a while and I’m stuck on a few things that I’m sure are simple but i can’t seem to figure it out. any help or hints will be helpful.

  1. I want my sections to show as different sections. is that done by just making each div a different color?
  2. i would like my contact form to be smaller or not appear so close to the portfolio section
    2b. the “name” title on my contact form appears to the right of the input field when viewed on mobile, how can i make this mobile responsive?
  3. I want the titles of my “coming soon” pictures to be within the border.
  4. i thought a {color:inherit; } will stop my links from turning blue but it doesn’t seem to be working.
  5. Ive been playing around with the colors and fonts. any tips on making it look more professional?
    Thank you!
    Portfolio2
2

Hi! Nice work so far. A few general thoughts:

  • You do not need an html, head, or body tag in Codepen. Codepen takes care of that for you behind the scenes.
  • I would move the link to font-awesome to either the CSS tab of the Pen Settings menu under Add External CSS or to the HTML tab in Stuff for <head>.
  • There are a couple of totally empty elements (e.g.<div class="sections"></div>). Those can be removed as far as I can see.

Now to answer your questions:

  1. Each section being a different color (or alternating color) will definitely separate them for you. If you make each one a separate Bootstrap div, then it will come with its own padding and margins which will also help to visually separate the sections.
  2. If you wrap the contact section in a smaller Bootstrap div (e.g. col-md-4 col-md-offset-4) then it will appear smaller than the other sections. Adding margin-top to the contact section div should move it down.
    2b. I couldn’t replicate this. Have you found a solution already?
  3. Your titles are currently in their own div’s. You could try wrapping the image and text inside one div or using figcaption.
  4. You can define the color of your anchor tags for each pseudo-class. This lets you control exactly how they appear.
  5. Have you tried Google Fonts? I have found that moving to a non-standard font makes my apps look slightly more professional. I have also found Adobe’s Kuler to be extremely helpful in choosing colors that complement each other.

Keep up the great work!

1 Like
3

Thank you for all your feedback! I really appreciate that you took the time to go over it. I had a feeling there were some empty elements but after a while everything just started to blur together that’s when I tried to go back and comment the different sections.