Just finished my Portfolio Website!

Just finished my Portfolio Website!
0

#1

Aloha everyone!

Just finished my portfolio. Took me a while to finish it but I’m pretty proud of myself for coming this far.

Problems I ran into:

  1. I notice that I had a horizontal scroll and fixed it with padding on the left and right margins. I read that it’s because Bootstrap applies a negative margin of 15px to the rows inside a container to create a buffer.
  2. Didn’t fully understand the grid system. I have a better understanding of it now that I finished the project. I’m still not sure if I did this right, but the way I centered a column in a row was to split the row into three sections and added an empty div in the first column and then putting my content in the second column. I’m sure there is a cleaner and better solution out there.
  3. The jumbotron wasn’t responsive and when resizing, the text would jump out of the box and it’d be smushed. The solution that I found was to use media queries so that I could specify certain margins and heights.
  4. Centering my profile picture within a column. Found a solution to add the class .center-block.

There were a lot more, but I can’t remember what it was as of this moment.

##Summary
I learned a lot doing this project. Before I got started, I had to take a couple of days to learn more about Bootstrap because I didn’t really understand it. I got the syntax down, but I needed a more detailed explanation of what was happening. I’m still learning more about it and I think this was an amazing learning experience for me. Please feel free to leave me some feedback on what you think about my project.

Mahalo!

My Portfolio Site


#2

Aloha,
I love your background! I would remove the contact me button, as it is in the nav and at the footer.

  1. I do see that you are having some padding issues. Perhaps change your padding and margin px to em. This would be a portion of the font-size, and allow easier resizing. (if 14px is normal font-size then it would be 1em) otherwise you are stuck with static pixel sizes. Also, you may want to add a meta viewport tag inside the html stuff for your head settings.

It’s ok to call the row in css as margin/padding 0.

  1. The row covers 12-columns, and can be called at a percentage (class=“because row row-fluid pull-center text-left”) then css .because{width:90%;} this makes for a smaller row so you don’t have to have a blank div. Then your columns can be 6 each, and you can pull-center/right and text-left.

  2. Bootstrap has the media queries set up, so you don’t need to. Again, use em instead of px and it should flow properly.

  3. I’ve never seen class .center-block. I usually call the img class inside css, with margin: 0 auto;

I’m very homesick and it’s great to see a cousin over here. I’d be happy to pair up to share what I can, if you’ll share your react experience :slight_smile:

Here’s my portfolio, I’m about to move it to github. https://codepen.io/KoniKodes/full/ZWqJNv/


#3

The portfolio looks fantastic! Nice job! :smile:


#4

@KoniKodes Aloha! Always awesome to see someone from Hawaii. Thanks for the suggestions, I’ll definitely update it when I have the chance. Yeah I’m down to pair up! I’m on the object oriented and functional programming part so not at react yet, but I’ll let you know when I am there.

@ZackWard Thanks! :smile:


#5

Looks good! Add the following for smooth scrolling. No additional steps needed. Just add to the JS portion.

jQuery(document).ready(function($){
$(‘a’).click(function(){
var hashindex = $(this).attr(“href”).indexOf(’#’);
var hreflen = $(this).attr(“href”).length;
var anchortag = $(this).attr(“href”).substr(hashindex, hreflen);
$(‘html, body’).animate({
scrollTop: $( anchortag ).offset().top -100
}, 700);
return false;
});
});


#6

No problem. I’m at the pomodoro clock right now. Trying to get it to stop counting down…

Stay in touch :slight_smile:


#7

@jeffparagas great looking website


#8

@Liahkim Thanks! I added it to my portfolio. Is there a benefit to smooth scrolling?
@justdavis83 Thanks!