Portfolio-Review :)

Portfolio-Review :)
0

#1

Hey , I completed my 2nd challenge , Portfolio page.
I would love it if you guys take a look at it.
visit my portfolio here :slight_smile:


#2

In the ‘portfolio’ section, except the first image, I cannot see any other images. When the browser window is resized for small screen, the image in ‘about me’ section does not center but the text does.


#3

are you using a phone? I can’t see that problem… I tried on my mobile and the navigation bar is the only problem, It just gone as a list instead of inline. It just covers half of the screen , because it is fixed navbar. I can’t find a solution for that… other than that everything looks normal to me…


#4

Hey,:grinning: Following is the screenshot of what I am seeing on portfolio section (browser used is Chrome):


#5

oh… But it works fine for me… Anyway I’m gonna change the photos and see if it works for you… :slight_smile:


#6

Just updated it with some random images, Can you check now please?


#7

Hi @muhsin7majeed! Right off the bat it’s a sharp looking portfolio, love the clean presentation, good use of whitespace. I really like the way you laid out your projects too! And I can see your updated photos on my end.

There’s a few things though I’d consider changing, mostly aesthetics:

1.) The full width contact form on desktop views. To me a full width form is fine on mobile because you’ve got limited space. But on a desktop it’s just very…wide looking. And I noticed it just keeps stretching to fill the width of the screen. I’m trying imagine what it would look like on a 1920px resolution (mine is 1600), you know what I mean? I would shrink it down for desktops and then at a certain break point let it go 100% width.

2.) The footer bar. Now this might partially be because I’ve seen the example portfolio project often enough, that I know that footer is the same exact color scheme/look. Which is totally fine if you want to use the same structure. But strictly from a design perspective its coloring is kind of jarring. Like you have this really nice pallet going of white, black, and the blues of your bio image and then we get down to the bottom and suddenly you’re introducing purple. Now the grey works, because you have grey in your menu, and also it works well with white and black. I would either nix the purple for one of the blues you’re using already or if you really like it, then maybe add that purple as a small accent color somewhere else along the page.

3.) The mobile navigation. Now I know you mentioned you were having problems with this area and my suggestion is to look into working in a collapsing/expanding hamburger style menu. It’s pretty simple to set up with a touch of JS or jQuery:

4.) I noticed there’s a couple things going on when viewing in the mobile sizes:

Your bio pic is being pushed off to the side and you’re getting a horizontal scroll from something on the page pushing the width beyond the viewport resolution. You might not see the scroll bar on mobile (my screenshot is with Chrome dev tools) but I can tell you on my phone (Galaxy Core Prime 320 x 534) you can definitely scroll sideways.

There’s also a bit of clipping for your project titles:

It looks like that specific issue starts around 430px. I’ve seen that particular problem with other Bootstrap built projects. Sadly I can’t advise you on how to fix it as I haven’t learned the framework yet. Normally I’d just suggest adding a media query break point near that resolution and either expand the width of the columns or change the number of columns in general.

On a side note, your instagram is awesome :smile:


#8

Yes, images are visible now.:slightly_smiling_face:


#9

Thanks for the described feedback bro… I really appreciate that.
I tried a lot on that navbar , but couldn’t find a solution :frowning: lemme take a look at the collapsing navbar.
I’m new to web development :smiley:
is there any way to make whole page responsible to mobile ? or I have to edit everything :frowning:
btw yeah, I actually copied that footer color from that example :wink: I’ll change it.
Again thank you :slight_smile:


#10

No problem! Again I wish I could help you out more with Bootstrap but my knowledge of it is exceedingly limited. But, I took a quick look over this tutorial: https://blog.revillweb.com/bootstrap-tutorial-a-responsive-design-tutorial-with-twitter-bootstrap-3-cb6445c1e586

And it looks like there are specific classes built in that you can use that automatically add collapsible navigation. So you might be able to get that working quicker than from the previous guide I linked.

From what I do know about Bootstrap, it was made with responsive design in mind, which leads me to believe there’s gotta be some combination of classes you can use already there. It’s just a matter of figuring out what and where. The only way I personally know how to do it is from scratch with plain old HTML/CSS and yeah you’d have to rewrite and add a lot of stuff.

You might have some luck with Flexbox, maybe not for the entire page if you don’t want, but you could try it in a few sections (like your project area for example).

I would definitely say to try and find some good Bootstrap tutorials that specifically breakdown how to use the responsive column system. Cause I know it’s capable of it, I just don’t know how.


#11

Again thanks for the help bro… I saw couple of w3school links on bootstrap navbar, i was bit busy , Will check them and I’ll let you know. :slight_smile:


#12

Hey guys, i am almost finished with my portfolio page. I looked everywhere, and i can’t seem to find the answers, therefore, im asking for your help, if you can/know :slight_smile:
Problems:

  1. photos are not loaded when i load webpage on my phone, i have no idea why? (on the other hand, on my tribute page, photos loaded perfectly)
  2. when i load webpage on my cellphone, page is not fixed. I have to swipe left and right just to see the full content of the page?
  3. something is wrong with breakpoints in “about” section, photo isn’t moving, and text goes all the way to the left side of the screen.
    Can somebody help me? thank you so much :smiley:
    Happy coding

https://codepen.io/milosrancic/full/XVyWmW/


#13

Hi Mita, I took a brief look at your project and I have some hopefully helpful feedback for some of your issues:

1.) I’m guessing there’s something up with the url links to your dropbox hosted photos. I’m not sure what exactly, I’ve never hosted photos via DB but I know if I try to visit the link to view the image directly it’s giving me a 403 error. Which after looking that up is a forbidden access error. So my second guess is there might be a privacy setting issue with the files themselves. Not sure how to fix that though.

2.) & 3.) I noticed a horizontal scroll as well on your mobile views, it’s not a terribly huge one, but I did come across two things in your code:

First, you have this tiny typo in your HTML:

  <!-- ABOUT STARTS HERE -->

  <div classs="container">

The other thing is you added right padding to your #about-content element, but then never got rid of it for a smaller screen size. BTW I’d get rid of one of those two right paddings in general because there should be only one of that particular instance used at one time.

#about-content {
    padding-top: 50px;
    padding-left: 30px;
    padding-right: 100px; /* nix one of these */
    padding-right: 150px; /* nix one of these */

So those styles are still effecting that element as we go down in size.

I’d suggest adding a media query break-point at 991px (that seems to be the break-point set by Bootstrap where your portfolio columns go into a single column). You can do something like this:

@media screen and (max-width: 991px) {

   #about-content{
       padding-right: 30px;
   }

}

I’ve just matched the left padding here so it’ll be spaced evenly on both sides.

As for that horizontal scroll, that I’ve seen that happen with a lot of Bootstrap built projects here and I’m not sure exactly where it comes from. In my own coding experience, usually when a horizontal scroll appears it’s either a width or margin issue where something is being pushed out beyond the viewport’s max width.

But start with that stuff and we can see if that clears anything up.


#14

I think I fixed those problems. :smile: Everything is flexible now, only problem I’m facing is thhe huuuuge space between ‘portfolio’ and ‘contact’ . i don’t think it is a problem though, Can you check the page and see if
everything looks good?


#15

:grinning: It looks great!! Well done!
The collapsing menu is perfect, everything is centered really nicely in mobile views. And you even got rid of that horizontal scroll!

My only additional tweak would be that full width contact form. Here, you don’t have to use it in the end but try it out and see how you like it:

form{
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

I don’t know if you’ve ever messed around with max-widths but they’re pretty great for responsive designs. Basically we’re telling the element, yeah you can be 100% the width of your container, but I only want you to go out this far. What’s nice is on smaller viewports (in this case smaller than 750px) it will shrink down as it should.
That margin: 0 auto; is just there to recenter the form in the middle of the page.
I picked a random max-width number by the way, so feel free to play around with the size.

That looks like it’s coming from:

#portfolio{
  margin-top:100px;
  margin-bottom:1000px; /* <--- here */
}

I’d either get rid of that bottom margin entirely or at the very least decrease it quite a bit. Then you should be good to go there.


#16

you are the man :clap:

Didn’t see that 100px , that was the problem… Get rid of that top and bottom margins, Now it looks good, thanks for that :+1: I also adjusted form width.

Overall you helped me a lot :slight_smile: Thank you bro… :hugs:you really helped me :slight_smile:


#17

Lol well, woman :wink:

No problem! I’m glad I could help you work out the issues. And honestly you did such a great job on it in the first place that narrowing down any bugs was way easier to do :smile:

Congratz on an awesome portfolio!!


#18

oh! * awkward * well, How you doin’ (joey.jpg) :laughing:

Thanks. :blush:


#19

:laughing: it’s no big deal, I realize my username is pretty ambiguous. Besides my best female friend and I have been calling each other dude and “Hey man check this out!” since high school. So it’s all good!


#20

phew…
lol…

anyway, it was nice talking to you, see you on my next trouble :sweat_smile:
#peace