My Personal Portfolio Webpage: Feedback Please!

I just finished up my bootstrap portfolio page after spending 4 hours making it! Feel free to give feedback for my portfolio because I know that my portfolio is still lacking in some areas. And your feedback will keep me going and advancing, Thanks in advanced campers :grinning: !!!

I finished the updated version of this. Mind taking a look of it here .

1 Like

Is it finished? It looks half done.

Can you tell me what should I’ve done to complete it? For me it fulfills the given criteria so i said that I am done. I am new to coding so I hope for your understanding. Furthermore, can you tell me how to make the web responsive, because I don’t know why it is not.:no_mouth:

Your content is overlapping. Recommend looking at your grid structure. Assuming you used bootstrap, if not i’d recommend.

I did use it. I just don;t know what should i do to make each section responsive. Mind taking a look at my code?

Hey, your off to a good start!

While I’m not (normally) as sarcastic as Johnny is, he has a point that it barely meets the minimum requirements. This isn’t a problem though, because when everyone starts out their first sites are basic like this, and I’m glad you visited the forums to get some help making it better!

I’ll take a look at your code here and see why it’s not responsive. I’ll try to give you some helpful feedback.

2 Likes

looks good dude, I like the touch of soft blue color.

I noticed you using ‘button’ tag to make anchor link to ‘#contactme’, but simply use ‘a’ tag to make it work as an anchor link, you already using btn class from bootstrap, so it will look like a button.

agree with @EyEmAn00b some section/content are overlapping. try to inspect with firefox dev tools or chrome dev tools (f12) to see what exactly makes the overlapping viewports(the horizontal navigation at the bottom). at the intro section, try to wrap the whole .row > .col grid with .container-fluid.

First, let’s take care of that ugly scrollbar at the bottom. Look at your intro section:

  <section id="intro">
    <div class="row">
      <div class="col-lg-12">
        <div id="content">...</div>
      </div>
    </div>
  </section>

You do not have your row nested inside a container. Rows must be inside containers, or else your paddings and margins will be off. Put your row inside a container-fluid, and your scrollbar on the bottom will magically disappear.

Ok, let’s head to your next section and get that working. You have the container being 56vh high. This is fine for desktop when the items are side by side, but when the page shrinks down, your image needs to go on top of your text, and all of a sudden that height becomes a restriction, and your text overflows into the container below. To fix this, specify that the minimum height is 56vh. This will allow the container to get bigger if needed:

#aboutSec {
    min-height: 56vh;
}

Ok, now the next problem is that the image is way to big when it gets in the awkward in between stage:

This is due to the col classes you used. Instead of using col-lg-9 I would use col-sm-9 for this about section to keep the text next to image until absolutely necessary for them to break apart. If you add the class .center-block to your image, it will also center it when the page breaks down:

Alright, that takes care of the first couple sections, onto the portfolio area. You are closing your class tags too soon in the second paragraph row. Fix those quotation marks. I personally don’t like breaking a three column row into what I call a 2 column row like you are doing:

I would rearrange your column number, or break it down into full width with sm-12 so it looks more consistent and there isn’t one lonely portfolio item hanging over:

Notice the image is small. Fill out the other columns with dummy content exactly like you would have it, I mean links and pictures so you can style it how you want instead of an image only taking up part of the column.

Also, you got the same height problem in this section. Switch the container to min-height. Now, the margin spacing in the portfolio section is very cramped on mobile:

Insert the most common meta viewport tag in codepen settings. Then you will need to add what is called a CSS media query to give some margin once the screen shrinks down.

All that is left is to fix the images in the portfolio section. I can’t help you with that, because I don’t know how you want to do that. I’ll leave that for you to figure out.

With just those changes, the result looks pretty good on mobile now (click image to view in a new tab, and click again to zoom in and see it):

https:/uploads/default/original/3X/9/b/9bcbab028d61ef2b2d4a0173624a2a36b109a7a5.jpg

Finally, don’t consider your portfolio done. It is pretty lacking, there is a lot you can do to improve it and make it more creative and personal to you, but you are off to a great start! Hope this helps.

2 Likes

Really appreciate your feedback Isaac? I will try to spend more time on it and improve it.

Thanks bro, I will try to do that.

Hey, I follow your advise and make a new portfolio that is more personal. Here . Hope you take a look at it!

Hey, your sarcasm motivates me to work on a new portfolio, so mind checking it out and I hope you’re satisfied with it. Here . Hope you take a look at it!

Ok much better :slight_smile:

Wow the best website ever seen. :slight_smile:

This one or the new one? :thinking:

Thanks means a lot to get an approval from an experienced web developer.

1 Like

New one :smiley: amaziiiiiiing!

Thank u after all I spend 8 hours making it!