FCC Zipline Series
by strongeleeroy

FCC Zipline Series 101: Build a Personal Portfolio Webpage

What better way to get started with the front-end than creating your own portfolio? This first Zipline will have you build up your portfolio website from scratch. I’m going to go dead basic on this, no external tools or bundling bonanza. Just HTML, CSS, JS and a few few libraries.

Building stuff, anything really, as vague as it may seem, is the best way to keep your skills sharp. For this particular project, we’re asked to fulfill the following user stories:

  • As a user, I can access all of the portfolio webpage’s content just by scrolling.
  • As a user, I can click different buttons that will take me to the portfolio creator’s different social media pages.
  • As a user, I can see thumbnail images of different projects the portfolio creator has built (if you haven’t built any websites before, use placeholders.)
  • Bonus: As a user, I navigate to different sections of the webpage by clicking buttons in the navigation.

Now, get scared. I won’t be using Bootstrap or jQuery at all. For heavens sake, it’s a static, single page site. It has two advantages, it’s easy to navigate, and it is fast. Having to include Bootstrap and jQuery will just slow it down and spoil you (feel free to use them though 🙂 ).

Not only that, but getting too used to the conveniences that jQuery brings can be dangerous. It’s a simple project, and we’ll use simple technologies. I’ll just include FontAwesome because it’s awesome (haha) and normalize.css. I’m also going to be using Sass instead of CSS. It’s gonna be great!

You may, or may not have used SASS/SCSS before, but oh boy, you should. If you want to get a feel for it, go ahead and take a look at my post on SASS.

I’m going to go pretty minimalist on it. Let’s make the content our focus. Here’s two constrains that I’ll put in place before we do anything:

  • Choose one font family for the whole project.
  • Use very few colors.

Trust me on these two, you’ll thank me later.

Making your page responsive is going to be a task that you’ll have to figure out on your own.

We’re told to code something that resembles this. This is the layout that we’ll use:

 

Page Layout

Simple, yet elegant enough for a very first project. Let’s go ahead and start coding this baby.

I’m going to be using dummy text and picture thumbnails, but you should definitely get a decent looking picture of yourself if you intend to use this site as a personal portfolio. I recommend that you go through the code and look closely, it’s pretty self explanatory.

I’ll be doing four sections:

  • Home: A catchy phrase and social media links will be shown as the main focus.
  • About: A quick summary about myself, along with a picture.
  • Portfolio: A few thumbnails that link to different projects.
  • Contact: Contact info.

Each one of them is going to be taking up 100% of the browsers viewport height. Here’s the HTML markup:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>My Portfolio</title>
    
    <!-- Normalize and FontAwesome CSS files -->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    
    <!-- Custom CSS files -->
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    

       
        
        
            

                
            

            

                
                
                
                
            </div>
        </nav>
        <!-- END Header -->

        <!-- START Navigation bar -->
        

            
            
            

                

                    
I LOVE MYSELF

                    
love me too!

                    
                </div>
            </div>
            <!-- END Home content -->
            
            <!-- START About content -->
            

                

                    

                        

                            
About me.

                            
This is actually not me. It is a cat. Or a placeholder. Or you. It depends on a few factors.

                            
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi a consequatur, facere numquam sint earum adipisci aliquam nostrum perspiciatis corporis veritatis repellendus voluptatum voluptas dolores aperiam explicabo obcaecati. Consequuntur, repellendus.

                        

                        

                           

                               
                           

                        </div>
                    </div>
                </div>
            </div>
            <!-- END About content -->
            
            <!-- START Portfolio content -->
            

                

                    
Admire my work.

                    

                       

                           

                       </div>
                       

                           

                       </div>
                       

                           

                       </div>
                    </div>
                    

                       

                           

                       </div>
                       

                           

                       </div>
                       

                           

                       </div>
                    </div>
                </div>
            </div>
            <!-- END Portfolio content -->
            
            <!-- START Contact content -->
            

                

                    

                       
Find me pls

                        
                    

                </div>
            </div>
            <!-- END Contact content -->
            
        </div>
        <!-- START Main content -->

        <!-- START Footer -->
        <footer>
            Crafted with <i class="fa fa-heart"></i> by Someone.
        </footer>
        <!-- END Footer -->
    </div>

    <!-- Custom JS files -->
    http://js/app.js
</body>
</html>

And the SCSS files:

@import url(https://fonts.googleapis.com/css?family=Lato:100,200,400,300,700,900,400italic);
@import 'partials/color-palette';
 

* {
    box-sizing: border-box;
}

body {
    font-family: 'Lato', Arial, sans-serif;
    font-weight: 300;
    font-size: 1.2rem;
}

h1, h2, h3 {
    font-weight: 300;
    margin-top: 0;
}

h1 {
    font-size: 6rem;
}

h2 {
    font-size: 3rem;
}

h3 {
    font-size: 2rem;
}

p {
    font-weight: 300;
    font-size: 1.2rem;
}

a {
    color: #333;
    text-decoration: none;
    
    &:hover {
        color: $blue;
    }
}

@import 'partials/navigation-bar';

.main-content > div {
    display: table;
    width: 100%;
    height: 100vh;
    min-height: 500px;
    
    > div {
        display: table-cell;
        vertical-align: middle;
    }
}

@import 'partials/home';
@import 'partials/about';
@import 'partials/contact';
@import 'partials/portfolio';
@import 'partials/footer';

.row {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    display: table;

    .col-half {
        display: table-cell;
        width: 48%;
        vertical-align: middle;

        margin: 0 1%; 
    }
    
    .col-third {
        display: table-cell;
        width: 31.333333%;
        vertical-align: middle;
        padding: 10px;
    }
}
$blue:       #3EB1F1;
$dark-gray:  #333;
$mid-gray:   #777;
$light-gray: #f0f0f0;
nav.top-fixed-nav {
    position: fixed;
    top: 0;
    width: 100%;
    
    padding: 10px;
    height: 85px;
    
    background-color: #fff;
    border-bottom: 1px solid transparent;
    
    transition: 0.1s ease-out all;
    
    &.scrolling-header {
        border-color: #aaa;
    }
    
    > div, .nav-links > div {
        display: inline-block;
    }
    
    .nav-links {
        height: 65px;
        float: right;
        margin-right: 25px;
        
        > div {
            margin-left: 25px;
            height: 100%;
            
            a {
                line-height: 65px;
                font-weight: 900;
                color: #111;
                text-decoration: none;
                transition: 0.2s ease-in all;
                
                &:hover {
                    color: $blue;
                }
            }
        }
    }
}
.home {
    text-align: center;
    
    h1 {
        color: #333;
        margin-bottom: 0;
    }
    
    h3 {
        margin-top: 0;
    }
    
    .social-icons {
        margin-top: 45px;
        a {
            margin: 0 25px;
            
            i {
                transition: 0.1s ease-out all;
            }
            
            &:hover i {
                -webkit-transform: scale(1.3, 1.3) rotateZ(-10deg);
                transform: scale(1.3, 1.3) rotateZ(-10deg);
                color: $blue;
            }
        }
    }
}
.about {
    background-color: $dark-gray;
    color: #ddd;
    
    p:last-child {
        border-bottom: 2px solid #555;
        padding-bottom: 30px;
    }
    
    .photo-rounded {
        text-align: right;
        img {
            border-radius: 50%;
        }
    }
}
.portfolio {
    text-align: center;
    
    .photo-rounded {
        height: 300px;
        width: 300px;
        float: right;
        border-radius: 100%;
        overflow: hidden;
    }

    .placeholder {
        height: 250px;
        width: 100%;
        background-color: $light-gray;
        border: 1px solid $mid-gray;

        transition: 0.1s ease-out all;

        &:hover {
            border: 10px solid $blue;
        }
    }
}
.contact {
    background-color: $blue;
    background-image: url(../img/bg.png);
    background-repeat: no-repeat;
    background-position: top right;
    color: $light-gray;
    
    a {
        color: $light-gray;
        transition: 0.1s ease-in-out;
        
        &:hover {
            margin-left: 3px;
        }
    }
    
    ul {
        list-style: none;
        
        li {
            margin: 15px 0;
            
            i {
                margin-right: 10px;
            }
        }
    }
}
footer {
    background-color: $blue;
    color: #fff;
    font-size: 0.8rem;
    padding-bottom: 10px;
    text-align: center;
    
    i {
        color: crimson;
    }
}

 

As you can see, the page is pretty simple, and Sass gives us some modularity in the CSS side of things. I’ve chosen to go for a fixed top navigation bar with links to different sections of the page. This is achieved thanks to the ID tag on each section (home, about, portfolio and contact) and then using <a> links with an href value of say: #home.

This is quite useful when dealing with a simple and static page such as this. The layout goes as follows:

<body>
  <wrapper>
    <navigation-bar />
    <main-content>
       <home />
       <about />
       <portfolio />
       <contact>
    </main-content>
    <footer />
  </wrapper>
</body>

 

For each section inside the main-content div, I’ve chosen to set the height to 100vh (100% of viewport height). Using vh as unit, will help in being consistent across all browser window sizes and is supported by most modern browsers.

As an added bonus, I’m adding a tiny bit of JS to style our fixed header when we scroll down. We first need to select the navigation bar element, and then add an event listener to the window that will trigger on the resize event:

(function () {
    
    var navbar = document.querySelector('nav.top-fixed-nav');
    
    window.addEventListener('scroll', function() {
        // Resize magic!
    })
}());

 

Now, we need to check if the scroll distance is greater than 0, and if it is, we add the .scrolling-header class to the header. The scrolling-header class is defined in the _navigation-bar.scss file and looks like so:

.scrolling-header {
        border-color: #aaa;
        height: 60px;
        .nav-links {
            height: 60px;
            a {
                line-height: 60px;
            }
        }
    }

 

Since our header already has a transition set, adding this class has quite a nice feel to it. Now, onto adding the class itself, let’s go back to the JS file:

(function () {
    
    var navbar = document.querySelector('nav.top-fixed-nav');
    
    window.addEventListener('scroll', function() {
        if (window.scrollY > 0) {
            navbar.className += ' scrolling-header';
        } else {
            navbar.className = 'top-fixed-nav';
        }
    })
}());

 

Try it out in the live demo. You can also download the project files here. Give it a thorough look, and try to build your own. Feel free to borrow ideas and code snippets, let me know what you get done! As always, send me an email, ping me on twitter or post a comment below if you need any help, guidance, want to hear a bad joke or just need someone to talk to!

 

 

Begin typing your search above and press return to search. Press Esc to cancel.

%d bloggers like this: