Portfolio Project - What can I improve?

Code Feedback
1

Hello all, I’ve been working on this portfolio project for a few days now. I was overthinking it a lot, but I finally got something somewhat solid down.

So could you guys take a look? I don’t like how plain it is, but I’ve been doing this for 9 hours today and its 6:30AM my time. I need some sleep.

So, some questions I’d like to know, but your feedback isn’t limited to these, of course:

  • What could help make the portfolio pop? I want to use minimal JS right now b/c I haven’t truly started learning it.
  • Is the navigation bar obvious enough? I like the hover effect I added, but I know its really plain…
  • Do you guys like the color scheme? I made sure they were complimentary off of w3schools color wheel, but is it too “loud”?
  • Any better way I could display my projects?
  • Contact form at the bottom: yay or nay?
  • I’m going to get a more “professional” picture for my portfolio. Just had to work with what I got

:sleepy: https://codepen.io/pleeseno/full/VqovEY :sleeping:

@alexiorodrigues @RodrigoRiveraDlg @snowmonkey

1 Like
2
  1. Focus on on Strengths. It’s better than trying to fix every single flaw
  2. Ditch the hiding effect, navigation should always be visible. Put yourself in the user’s perspective: could you guess that there was a hidden menu there? Also give navigation elements a bit more top and bottom space.
  3. This color #387562 seems to make black text rather difficult to read. To check the best colours use this website: https://www.color-hex.com/color/387562 It gives you a lot of information, including Triadic, Analogous, and Complementary colours. My personal taste says it’s ok. The important aspect of colour is to highlight the content.

Here’s a suggestion based on your colours: https://www.behance.net/gallery/61175953/Minimalist-Color-Palettes-2018

This is my personal preference: colours and contrast;

Reading suggestion: https://material.io/design/foundation-overview/

  1. Projects can have some information under it such as title, description, goals, used tech, etc…
  2. Contact at the bottom is the usual for this kinds of contact forms. However my opinion is that the label and the input could be on the same line. As it is it kinda makes a narrow form and you have plenty of space
  3. It’s a bit blurry yeah but adding your own photo is a good way to make a more personal connection

Additional though:
General
You have plenty of space, increase the font size to, for instance, 2.5em makes text easier to read.
Also increase the space between elements, again, you have plenty of space, let the content breath.
Choose one font for headers and other for content

Hello
You can add another external links such as twitter, github, etc… (only add what you have)

About me
Too much text to the length of the line, either make the line shorter / increase font size
Play with space, make each sentence a new paragraph.

Contact
Not everyone has a company.
Instead think what would be the most interesting questions:
Is it for a project? what kind of project? frontend? backend? fullstack? is a collaboration? You can add more or less based on your objectives.

Here’s some design suggestions:
https://www.ventureharbour.com/15-contact-form-examples-help-design-ultimate-contact-page/

Good luck :slight_smile:

2 Likes
3

I like the color scheme, looking good.

now for the critical type of stuff :thinking:

the navigation took me a minute to find and I was looking for it based on your post. I don’t think most people would ever realize its there.

I would make the portfolio item images a tad larger at least until there is more there.

I noticed that you are using raleway in some elements but others are left at browser default. I tried setting it for all elements and I personally like it better that way. Its ok to use multiple fonts but it should be consistent in its use.
and for font size, this article shows an awesome trick https://css-tricks.com/snippets/css/fluid-typography/

keep it up :+1:

4 Likes
4

Thank you for taking a look. Your suggestions were all great, and I’m going to be revisiting my portfolio with a different perspective.

I’m going to change the navigation. I didn’t want to make it too fat in mobile view, so I may have to do a drop down menu with a triangle indicator for that; then maybe float my name to the left and the links to the right on the navbar in desktop view.

The color palette page was beautiful, much more striking yet softer. They flowed much better than mine. I appreciate anything more I can learn so I’m going to read the article after this.

I think I can add more info under my projects. I do need to take up more room on my page, like you said, so that will help.

I made the contact form only to read the response of me adding it. I’ve seen people use a contact form as well as people adding their information into the portfolio, and I’m thinking I should add the latter instead. I want it to still be professional and when you have a resume, you have your info on it. Should it be the same for this?

Two fonts, got it. Keep it minimal.

Thank you for helping me out! I have some paths now to get me un-stuck and more creative.

1 Like
5

Thank you, I wanted to go for different, but after seeing other color schemes, I know I can do better. I’m still not going to go monochromatic, but for something a bit more ‘mature’.

Done, I’m going to change up the navbar for both small and large viewports. Probably make a dropdown for small, mobile size and a fixed top navbar with links floated right for my large, desktop view. Thanks for showing me that.

Good idea on the portfolio pictures. I do need to fill up the portfolio more and have less blank space. Adding that and a descriptor underneath.

Yeah, I sadly didn’t see that. I should’ve taken more detail into that. I truly need to understand typography and how important it can be. Thank you for sharing that article, it’s what I needed.

:smile: I appreciate the encouragement

6

For the contact part It all depends on your preference. Having a contact form ditches the need to have to copy an email, having a email client setup on the device, etc… But you might just want to provide an contact address / social links and be done with it.

In the long run it’s not about right or wrong but what serves you better and what eases the talking process with potential clients :slight_smile:

1 Like
7

That is true… I will just have to add both! maybe make the links as icons and when they are hovered, my information shows for them. But the contact form, maybe a little more open to everyone besides “companies,” would be a better solution to what I have now.
I don’t really have much social media lol I kinda ditched 'em for a few years. But I gotta set up a Github sometime soon, maybe a Linkedin too… I suppose I could add fCC?

Yeah, I’m still overthinking it a lot. I know it isn’t going to be perfect yet (or ever), esp with how little I know right now. I just want to give it my all, and I’m being critical. Once I have a solid update, I’ll post again :slight_smile: I got some reading and typing to do

1 Like
8

My personal favorite color playground is still Adobe’s: https://color.adobe.com/ The “Compound” palettes seem more in line with what you seem to be looking for. That said, I truly do like the bright, non-primary palette you are using.

In terms of passing the challenge, I think your projects are fine (aside from failing one of the #project-tile tests). In a final portfolio, though, I might suggest a different mechanism to display a bit more background about each project. Perhaps having the projects pane show as two panels: the left listing the projects, and the right showing more detail of each. Could be driven like a carousel, but also allow the user to choose specific projects. Detail might include what technologies were used, timeframe of development, skills you had to develop for that particular project. again, though, not for the challenge.

I would also look at adding your social connections to the “contact me”, and having an email icon (using something like MaterialUI or Bootstrap/FontAwesome) that pops up a contact form.

Now, a couple weird technical questions. First, in poring through the code itself, I note you use sections in your main, which is lovely – but the welcome section is a div? And as I know you’ve heard me say before, if you have a block-level tag that only exists to contain one and only one block-level tag, one of them is not needed. You have this:

    <div id="welcome-section">
      <div id="welcome-info">
        <h1>Hello</h1>

        <img src="..." alt="A picture..." height=200px
          width=200px id="img-me">
        <div class="welcome-text">
          <p>...</p>
          <p>...</p>
        </div>
      </div>
    </div>

So welcome-info contains a number of tags, h1s and an img and some p tags. Nice. But welcome-section contains… what? welcome-info. Perhaps for styling? Nope, the only CSS applied to welcome-info is centering. So why is it there?

Again, not a big complaint, but something to watch for. It was common, many many moons ago, to use deeply nested single elements to position things, when we didn’t have the powerful CSS we do now. In HTML5+ and CSS3+, though, we can REALLY simplify our HTML.

The nav thing took a little. I hadn’t read through this thread when I first opened the site, and I didn’t realize I had to mouse over your name to see the hover effect to cue me in to click to get the links. Not that it isn’t common, simply that it isn’t necessarily intuitive.

1 Like
9

Wow, you’re right, that adobe color wheel is great! Its a little more helpful than seeing the colors in a straight line/swatch-view. Bookmarked!

Yeah, I posted this without the challenges being met, but I will be meeting them in order to finally get the certificate on this draft I’m making. That’s actually a good idea for the projects area. It would fill the space up more, while also giving more detailed information on them than what I gave currently. They were kinda treated as placeholders until I got more ideas. The ones you gave were good ones, so I’ll have to look into how to build a carousel and see how I would like that. But I do get the idea of what you mean.

So when the user clicks the email icon, the screen increases and a contact form appears? I wonder if that is achievable using CSS…I’ll have to look into that too. It would make my portfolio more dynamic for just using HTML and CSS, if that is what can be done.

Oh man…I knew I didn’t get this all right. Dang, I don’t know why I did that…I’ll definitely simplify things more on HTML. It’ll probably make my CSS looks nicer too and not so messy. The div holding a div that doesn’t do really anything is like one of the first lessons I learned from one of the first posts I saw from you on thing topic. Should’ve given this another look over :sweat_smile:

Yeah, I already have a MUCH better navbar, both for desktop and mobile sizes. I was trying to be cool, but it didn’t work :nerd_face:

1 Like