# Help on the personal portfolio page

**URL:** <https://forum.freecodecamp.org/t/help-on-the-personal-portfolio-page/75703>\
**Category:** General\
**Created:** [January 12, 2017, 5:04am UTC](https://forum.freecodecamp.org/t/help-on-the-personal-portfolio-page/75703 "2017-01-12T05:04:40Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ahenry80](https://avatars.discourse-cdn.com/v4/letter/a/f08c70/32.png) [@Ahenry80](https://forum.freecodecamp.org/u/Ahenry80)\
**Post date:** [January 12, 2017, 5:04am UTC](https://forum.freecodecamp.org/t/help-on-the-personal-portfolio-page/75703/1 "2017-01-12T05:04:40Z")

</div>

For anyone who has done or is currently working on the personal portfolio page I need assistance. I currently have made my navigation bar but i’m not sure if i’m doing it correctly. I am trying to make the about me part but the text keeps on showing up behind the navigation bar. I feel like i’m not doing this correctly and i might even restart if I can’t think of any solution. Any help would be great help. Any help would be considered useful during my time of need Thank You all.

My Project: [http://codepen.io/ahenry890/pen/ZLYZJO](http://codepen.io/ahenry890/pen/ZLYZJO)

---

<div class="post-metadata">

**Author:** ![aoganezo](https://avatars.discourse-cdn.com/v4/letter/a/db5fbb/32.png) [@aoganezo](https://forum.freecodecamp.org/u/aoganezo)\
**Post date:** [January 12, 2017, 5:14am UTC](https://forum.freecodecamp.org/t/help-on-the-personal-portfolio-page/75703/2 "2017-01-12T05:14:08Z")

</div>

One way to fix this is to add styling to your body. Adding, `padding-top:95px;` will push everything in the body below the nav bar.

---

<div class="post-metadata">

**Author:** ![rico042002](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/rico042002/32/9410_2.png) [@rico042002](https://forum.freecodecamp.org/u/rico042002)\
**Post date:** [January 12, 2017, 5:41am UTC](https://forum.freecodecamp.org/t/help-on-the-personal-portfolio-page/75703/3 "2017-01-12T05:41:19Z")

</div>

Here is a [link](http://codepen.io/rico042002/pen/QEaBjo) to my first portfolio page. Hope it helps, I was so much for not copying other people’s code that I made it as simple as I could but fulfilled the user stories. Maybe it will give you a platform to jump off of like some portfolios inspired me. I’m actually in the middle of making a second one, I only need to create a few more web apps 😄

---

<div class="post-metadata">

**Author:** ![zhouxiang19910319](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/zhouxiang19910319/32/98849_2.png) [@zhouxiang19910319](https://forum.freecodecamp.org/u/zhouxiang19910319)\
**Post date:** [January 12, 2017, 7:29am UTC](https://forum.freecodecamp.org/t/help-on-the-personal-portfolio-page/75703/4 "2017-01-12T07:29:42Z")

</div>

I am on mobile so I can’t really help much. But let me tell you how I diagnosis all the issues I found in my project. If i have a full page of code, I divide them into different part like: header , my work, contact. And I copy each section’s code into another new codepen page. Then I focus on the part that was giving me glitches and issues. Try to fix things. I think this can help you. Make a duplicate and start on changing things. Hope this help.

---

<div class="post-metadata">

**Author:** ![whiterosecoffee](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/whiterosecoffee/32/32663_2.png) [@whiterosecoffee](https://forum.freecodecamp.org/u/whiterosecoffee)\
**Post date:** [January 12, 2017, 7:58am UTC](https://forum.freecodecamp.org/t/help-on-the-personal-portfolio-page/75703/5 "2017-01-12T07:58:09Z")

</div>

@aoganezo we should always try to avoid styling the \<body\> directly. It is considered to be “anti-pattern” or just a bad general practice.

One reason for this is that the top / left of the body is the default for all of your css ‘position: x’ statements. It will also over complicated any background image positioning.

A better approach would be to add _padding-top:_ to your \<header\> element, or _margin-top:_ to your \<nav\> element.

I also like to include a \<div id=“wrapper”\> just inside my \<body\> which fits the screen exactly. If you are sure you want that padding on every page, you could apply it to that without the side effects.

---

<div class="post-metadata">

**Author:** ![whiterosecoffee](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/whiterosecoffee/32/32663_2.png) [@whiterosecoffee](https://forum.freecodecamp.org/u/whiterosecoffee)\
**Post date:** [January 12, 2017, 8:10am UTC](https://forum.freecodecamp.org/t/help-on-the-personal-portfolio-page/75703/6 "2017-01-12T08:10:54Z")

</div>

@Ahenry80 check out this[fork of your codepen](http://codepen.io/whiterosecoffee/pen/MJyvKq).

As @zhouxiang19910319 mentioned, you always want to separate your page into different top level sections, this will apply to 99% of all projects you do.

The standard top level html5 markup is

\<container\> (or #wrapper)  
\<header\>  
\<logo\>\<nav\>  
\</header\>  
\<main\>  
\<footer\>  
\</container\>

---

<div class="post-metadata">

**Author:** ![mones-cse](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/mones-cse/32/1736_2.png) [@mones-cse](https://forum.freecodecamp.org/u/mones-cse)\
**Post date:** [January 12, 2017, 8:12am UTC](https://forum.freecodecamp.org/t/help-on-the-personal-portfolio-page/75703/7 "2017-01-12T08:12:41Z")

</div>

looks like you are using bootstrap .  
then try to understand [navbar](http://getbootstrap.com/components/#navbar) documentation  
and also check the difference between container and container-fluid class

---

<div class="post-metadata">

**Author:** ![whiterosecoffee](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/whiterosecoffee/32/32663_2.png) [@whiterosecoffee](https://forum.freecodecamp.org/u/whiterosecoffee)\
**Post date:** [January 12, 2017, 8:25am UTC](https://forum.freecodecamp.org/t/help-on-the-personal-portfolio-page/75703/8 "2017-01-12T08:25:35Z")

</div>

IMO as a teacher and developer, using bootstrap on an early small project like this will only mess with your learning process. I highly recommend ignoring bootstrap until you feel you have a solid understanding of core css.

Bootstrap is a “convenience” library for people who don’t know how to code. It results bloated css and ugly markup. Please don’t become dependent on it early in your education.

---

<div class="post-metadata">

**Author:** ![tdreid](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/tdreid/32/104754_2.png) [@tdreid](https://forum.freecodecamp.org/u/tdreid)\
**Post date:** [January 13, 2017, 12:10am UTC](https://forum.freecodecamp.org/t/help-on-the-personal-portfolio-page/75703/9 "2017-01-13T00:10:28Z")

</div>

Are power tools conveniences for carpenters who don’t know how to use hand tools? I’d still agree with you by analogy, about the value of a carpenter knowing his hand tools. But I wouldn’t say using the latter implies lack of skill or knowledge.

---

<div class="post-metadata">

**Author:** ![whiterosecoffee](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/whiterosecoffee/32/32663_2.png) [@whiterosecoffee](https://forum.freecodecamp.org/u/whiterosecoffee)\
**Post date:** [January 13, 2017, 2:00pm UTC](https://forum.freecodecamp.org/t/help-on-the-personal-portfolio-page/75703/10 "2017-01-13T14:00:29Z")

</div>

@tdreid, that is a great discussion point, and important enough to get right.

IMO jQuery, SCSS and Gulp are all great examples of ‘power tools’ I would love to see new students to using.

To be clear - my comment is as much about ‘when’ to learn x subject as ‘what’ is worth spending your time on.

Bootstrap however is not a ‘power tool’, it is a ‘prefab home’. - a bunch of pieces that are pre built off-site that a someone **assembles**. This is a highly limited skill(?), and the experience(?) you gain is not teaching you to solve real world problems.

When you start to custom build even the smallest Bootstrap class you will certainly run into challenges. For example, replacing their grid system requires a comprehensive knowledge of media queries and floats. But what you learn solving ‘wireframing’ will give you much more control over responsively positioning all future custom content.

Likely, your first concept of a custom grid system would be as clunky as mine. But you are now touching on 'what works when, where, why"… and your next version will solve another problem/limitation, and the next, until you eventually have such a clear understanding that you can \*_gasp_ create something better than Bootstrap.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 5:09pm UTC](https://forum.freecodecamp.org/t/help-on-the-personal-portfolio-page/75703/11 "2021-01-16T17:09:39Z")

</div>

Closed on January 16, 2021, 5:09pm UTC