Feedback on my Portfolio Project?

https://codepen.io/abrandx/full/BrWdNj/

I haven’t implemented a contact form yet, might just make it so it shows an email. Also don’t know why my main-banner text doesn’t stay in the area of the “splash” screen when I resize the window.

Any feedback and criticism is appreciated, as well as tips on how to improve it.

Also feel like my design overall is a a lil’ pretentious but whatever.

Your splash screen is too boring. I thought something wasnt loaded in at first.

Nothing wrong with simple design but you have to take that one word and really sell it. Right now its not doing you any favors.

OK nevermind, turns out something really wasnt loading in.Still isnt but it atleast managed to load in your landing image upon refreshing. Immediately looks good now :+1: :slight_smile: Its still not loading your portfolio images I think this has something to do with codepen and not your code I recommend hosting your images on dropbox instead of imgur if your using codepen.

Ignoring the images part, The overall design looks pretty neat! Kinda reminds me of googles Material Design.
Keep it up! :+1:

If only those images were loading in hmmm…

1 Like

Hi. I agree with @ItsRoyal.
It looks bland at the moment. If there are images that need to load, they have to be hosted on the internet publicly for codepen to be able to load them in.
flickr is another option.

Appreciate the feedback I’ll switch it up. Also that Material Design is a great resource. Thanks. :ok_hand:

please, text-align: center;

It looks nice, add some images and add more too it. Add a paragraph below you github, FCC, etc links just to add a natural border.

Your portfolio section needs to be fixed. Maybe embed your Tribute page there, along with any other future projects. This will provide a good oversight and visual.

 <p data-height="265" data-theme-id="0" data-slug-hash="wmzPwM" data-default-tab="html,result" data-user="abrandx" data-embed-version="2" data-pen-title="J Dilla Tribute Page" class="codepen">See the Pen <a href="https://codepen.io/abrandx/pen/wmzPwM/">J Dilla Tribute Page</a> by abrand (<a href="https://codepen.io/abrandx">@abrandx</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

(Bottom right hand corner -->)

1 Like

I don’t know if you’re in the middle of relocating the images, but none of them are loading for me.

hmm… can’t figure out why the images aren’t loading. loads fine on my desktop pc but when i go to my phone it looks like pure trash. and the tribute page looks like a mess.

edit: same thing happens with the images with my tribute page :thinking:

Looks like this on my desktop:

Could it be because you’re hosting on imgur? I may be wrong, but I think they frown upon hotlinking. I’m using cloudinary to host my images for codepen.

Hosted the main image on dropbox like @ItsRoyal suggested, works now.

also automatically disables parallax scrolling on mobile. now just to fix the tribute page…

Image is now loading for me on desktop. You could maybe:

@media only screen and (max-width: 600px) {
    .header-text {
        text-align: center;
    }
   .header {
       background-color: purple;
   }
}

This could center your text and change background of where image would be if the screen size <= 600.

This is if image isn’t appearing

Maybe should add some bootstrap or min-width your body

1 Like

Very nice. I need to learn more about this responsive stuff.

What do you mean by adding a min-width to my body though?

I’m not sure if this would work, but try adding min-width: 600px; or a range where the image still appears to your body element. If that doesn’t work, surround all your code in a Div and try again with the Div.

This will also prevent resizing/ down sizing to 600px;

it works, but the problem with that is it doesn’t show the full image of the header. :thinking:

Looks a lot better with the images. I like it so far.

i’m not sure why its not preventing down sizing, it worked with my projects.

just updated it. had a different footer but on mobile wasn’t working right so i just commented it out for now.

still definitely need to fix it for mobile.

In your JavaScript section, you only need one of these:

$(function() {

});

You can remove the other ones. Also, (document).ready(function() { });** is the long-hand version of **(function() { });

Also, in your HTML, remove the following after the closing tag of the 3rd div with class=“col-sm-6 col-md-4”. This will allow your projects to show in two columns when the page width gets to a certain width.

                </div>
                <div class="row">

1 Like

Very nice. Thanks. :ok_hand:

Deff need to work on JS, not to mention jQuery. Kinda looks like Chinese to me atm.

Something about the $ signs grosses me out… and the way it’s formatted.

The $ is just shorthand for jQuery
This is valid jQuery code

jQuery(document).ready(function() {

  jQuery('#box').css("box-shadow", "0 0 8px 6px rgba(255,255,255, 0.5), 0 0 20px 5px rgba(152,173,131, 0.5)");
});


So until you are happy, feel free to write it out long hand!

1 Like

I feel like I’d be more comfortable just sticking to JS since I already know a fair bit of Java, and they at least look somewhat similar. Wish I could just code all the features in Java though, lol.