Portfolio - Penny for your thoughts

Finished my portfolio project last night. It could definitely use some more work and the code could be cleaner (much cleaner). Let me know your thoughts/tips!

Here: https://codepen.io/jwwakeup/pen/vKagxE

I can’t see the images. Try provide alt attributes to img tags and reapair src links

1 Like

Hmmm…It works fine on my end. I have the photos is my Dropbox. Could that be the problem?

Yes, the photos have to be saved somewhere that’s publicly accessible from the web. So, you can use Imgur or Flickr to start.

Yes, the photos have to be saved somewhere that’s publicly accessible from the web. So, you can use Imgur or Flickr to start.

No, you cannot use imgur on codepen, it will not work, trust me. Dropbox does work (I use it), but you have to use a direct file link.
So instead of https://www.dropbox.com/oahfoiwafo, you need to use https://dl.dropbox.com/ahawfoha etc.

Ah, okay. I’ve only got placeholder images in my portfolio right now, but haven’t used Codepen until FCC. Didn’t know there was an issue with it. Thanks for the heads up and saving me time later on!

Awesome! Thanks guys!

Someone correct me if I’m wrong but I’d change the description of yourself. I know providing for your family might sound good but to me it seems like you didn’t really like coding that much and only started to because money got tight and you didn’t have any other choice.

So, to make it sound less like that, I suggest that your description goes like this: “I tried coding again at X time and loved it, ever since then I’ve learned…I get extra motivation from family because I want to support them”

So make money and family support a second goal and love for coding your first goal.

Also pics don’t work for me either, nice coloring though.

I see where you’re coming from. I’ll change that. Thanks!

Alright. I think I fixed the images. I also changed the “About” section to sound a little better. I’m not much of a writer when it comes to talking about myself so I’ll work on that more at a later date.

Thanks for all the input!

Whenever I scroll to see the images, the page lurches as if performing a blocking image load.
Love the monochromatic color palette and simplicity of the overall design.

Thanks for the input! How would one go about fixing the image issue?

In my opinion coding for money and loving it is not a flaw. But social stupid standards still dictate “business proper” presentation when you are new. Imho fuck that, show me what you make not how you talk.

Sorry for rant. Back to subject. Your portfolio doesn’t scale well, actually at all. Make your page scale for all of the devices. You might try making it mobile friendly first (stack up your content is the easiest way). Focus on designing mobile first, it’s a little frustrating to do that when you are coding it on a PC. I use two monitors to alleviate that frustration, but still. Most of the people these days discover content on mobile devices. And if I go to a page that makes me struggle to navigate I close it within 10 sec. I and probably a lot of people smarter than myself have a 10-20-30 seconds rule. 10 second if the web page looks good, 20 seconds if I can navigate easily, 30 seconds if the information I want is there to access. If something is outside of those parameters I skip. Avoid inline styling at all cost, always put it into your CSS file. If you want some space between your sentences you don’t need to start a new < p > tag, use < br > instead (use 2 if you want). If you want to target parts of your paragraph use < span >. It’s not a big deal, it’s just semantics of writing code and it works the way you did it too. But everything from google crawlers to programmers maintaining your code won’t like it.

It’s mostly content over design these days. And I truly don’t mean to bash on your page, I think it looks really good. You just have to work out minor details. Keep on pushing forward with your code and Happy Hacking!

P.S. What I mean by mobile first is design for col-xs-* first and go up from there.

1 Like

Thanks, man! I love that you’re straight to the point and 100% honest. I completely agree with the scalability and yes, mobile is definitely king these days. I’m the same way: 10 seconds max and gone if it’s too difficult to navigate on my phone. I’m just still figuring this stuff out. I’m always open for critique and tips! Let me have it! That’s why I’m here: to learn, not have my ego stroked.

Definitely need to work on my Bootstrap grid knowledge. Thanks, again!

Hey man good job.

Just spend a little bit more time on the spacing in the navigation. I forked your pen here’s a version of it fixed.

Fixed navigation spacing pen

Thanks for the tip, man! I literally was just watching a video on flexbox. I’ll definitely be playing around with it!

Like the style, but you might want to take a look at the mobile version tho, your line spacing on the heading goes all wonky.