Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create an Online Portfolio with Bootstrap

In this article we will see how to create, from the beginning to the end, a complete and flexible online portfolio, using only CSS, HTML and JavaScript along with Bootstrap framework

Online portfolios aren’t just for certain fields or industries anymore. The importance of having a professional online presence is more important than ever, and an online portfolio will certainly increase your visibility and presence. Creating your portfolio website allows you to share and showcase your work easily with the employers you’d like to work for.

Benefits of Creating An Online Portfolio

1. PROFESSIONAL WAY TO SHOWCASE YOUR WORK

Building a website about your brand and experience is a polished way to share your expertise with others. Websites can be more creative and innovative than traditional portfolios and are able to share with anyone in the world.

2. IT’S A GREAT FIRST IMPRESSION FOR EMPLOYERS

If an employer sees your website link in your signature or on your resume, they’ll likely click on it to see what you’ve built. Seeing you’ve taken the time to build a website featuring work samples, recommendations, previous presentations and more will be a killer first impression.

3. INCREASES YOUR VISIBILITY AND ONLINE PRESENCE

When an employer Googles your name, your professional portfolio will be one of the first search results that pops up.

4. SHOWS YOU’RE MORE THAN JUST A RESUME

Because of the flexibility of an online portfolio, you’re able to show your personality by choosing design, layout and the copy you write.

5. FLEXIBILITY

With the click of a button, you can change content, videos, copy and pictures on your online portfolio. You can also constantly create new content to add to your site to show your continuous learning process—whether employed or not.

Let's Start!

Our Portfolio will consist of 5 different sections:

  1. Header Section
  2. Experience Section
  3. Projects Section
  4. Skills Section
  5. Footer Section
We’ll include Bootstrap and jQuery files to make our work easy. Create a folder named "Portfolio” and inside this folder create a file called "index.html” . This will be our main HTML file. Then, create some more folders for including Bootstrap, JavaScript and jQuery files in your portfolio. Your folder should look like this:

Figure 1: Snapshot of the Portfolio Folder.

Visit "getBootstrap.com" and download Bootstrap files and then visit "jQuery.com" and download jQuery files to your machine. It’s just a simple process which you can do on your own. Copy all the CSS files in the directory called "css” and copy the JavaScript files in the scripts folder. Make a new file "styles.css” and save it inside css folder. Also create a file "helper.js” and save it inside scripts folder. Inside the images folder, you’ll have all your portfolio images.

Listings 1: Writing index.html file

<!DOCTYPE html>
<html>
    <head>
        <title>My Portfolio</title>
        <link rel="stylesheet" type="text/css" href="./css/Bootstrap.min.css">
            <link rel="stylesheet" type="text/css" href="./css/styles.css">
                <script type="text/JavaScript" src="./scripts/jQuery.js"></script>
            </head>
            <body>
                <div class="container-fluid header-section">
                    <div class="row">
                        <div class="col-md-2">
                            <img class='imagem_artigo' src="./img/a.gif" alt="My Image" class="img-responsive">
                            </div>
                            <div class="col-md-8">
                                <h1 class="text-uppercase name">samarth paboowal</h1>
                                <h3 class="designation">
                                    <em>Full Stack Developer</em>
                                </h3>
                            </div>
                        </div>
                        <hr>
                        </div>
                        <!-- division for header section -->
                        <div class="container-fluid experience-section">
                            <h1 class="text-uppercase text-center">
                                <em>
                                    <strong>experience</strong>
                                </em>
                            </h1>
                            <div class="row">
                                <div class="col-md-12">
                                    <ul class="experience-section-info"></ul>
                                </div>
                            </div>
                        </div>
                        <!-- division for experience section -->
                        <div class="container-fluid projects-section">
                            <h1 class="text-uppercase text-center">
                                <em>
                                    <strong>projects</strong>
                                </em>
                            </h1>
                            <ul class="projects-section-info"></ul>
                        </div>
                        <!-- division for projects section -->
                        <div class="container-fluid skills-section">
                            <h1 class="text-uppercase text-center">
                                <em>
                                    <strong>skills</strong>
                                </e>
                            </h1>
                            <div class="row skills-section-images">
                                <!-- generating from JavaScript -->
                            </div>
                        </div>
                        <!-- division for skills section -->
                        <div class="container-fluid footer-section">
                            <div class="row">
                                <div class="col-md-4">
                                    <h6>
                                        <strong>Copyright © 2015 Samarth Paboowal</strong>
                                    </h6>
                                </div>
                                <div class="col-md-8">
                                    <a href="">
                                        <span class="link">
                                            <strong>Facebook</strong>
                                        </span>
                                    </a>
                                    <a href="">
                                        <span class="link">
                                            <strong>Google</strong>
                                        </span>
                                    </a>
                                    <a href="">
                                        <span class="link">
                                            <strong>Twitter</strong>
                                        </span>
                                    </a>
                                    <a href="">
                                        <span class="link">
                                            <strong>GitHub</strong>
                                        </span>
                                    </a>
                                    <a href="">
                                        <span class="link">
                                            <strong>Linkedin</strong>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <!-- division for footer section -->
                        <script type="text/JavaScript" src="./scripts/helper.js"></script>
                    </body>
                </html> 

All this content will be inside the index.html file. Now let’s understand what this code actually does.

Inside the <head> tag we’re including all our CSS files and also the jQuery file. Make sure to include the "helper.js” file at the bottom of the <body> tag so that our JavaScript runs after the HTML has loaded on our online portfolio.

Inside <body> tag we’re creating a division for the header section and it is taking a Bootstrap class called "container-fluid” which is responsible for creating a full-width container on the web page. We’re also adding a custom class called "header-section” so that we can customize the header section according to our need. Header section consists of our personal image or a company image with the name of the person or company followed by a single line describing the company or the person. We’re using different heading and classes of Bootstrap for styling our header section.

After that, we’re creating a container for the experience section with the class "experience section” and a Bootstrap class "container-fluid”. Similarly, we’re doing the same thing for the projects and skills section for our portfolio. At last we’re creating a division for the footer section. We’re creating links to different social networking websites in the footer section so that anyone can easily connect with you. The different links used are: Facebook, Google, Twitter, GitHub and Linkedin.

Listings 2: Writing Styles.css File

.header-section {
  background-color: #0099FF;
  padding-top: 10px;
  padding-left: 50px;
  padding-right: 50px;
}

.name {
  color: white;
}

.designation {
  color: #181818;
}

.experience-section {
  background-color: white;
  padding-left: 50px;
  padding-right: 50px;
}

.projects-section {
  background-color: #0099FF;
  padding-bottom: 20px;
  padding-left: 50px;
  padding-right: 50px;
}

.skills-section {
  background-color: white;
  padding-right: 50px;
  padding-left: 80px;
  padding-bottom: 20px;
}

.footer-section {
  background-color: #0099FF;
  padding-left: 50px;
  padding-right: 50px;
}

.link {
  padding-left: 50px;
  padding-right: 50px;
  color: black;
  transition: all .5s ease-in-out;
}

.link:hover {
  transform: scale(1.5);
} 

Inside styles.css file, we’re using the classes created in the index.html file to style our page. We’re using different headings, background color, font color and paddings to our page so that our portfolio looks nice and clean. All of the CSS in the file is very easy and you can just understand it by reading the contents of the file. There is an important thing to note that whenever you hover the links in the footer section of your portfolio they will automatically scale or zoom. Let’s see how this is done with the help of CSS.

We’re using " transition : all .5s ease-in-out " . ‘all’ means it will scale from all sides in .5 seconds and the scale effect name is ease-in-out. Then after that we’re using the hover property and applying " transform : scale(1.5) ". This means that whenever we hover over the links, they will automatically transform to the size 1.5x of the original size.

Listings 3: Writing helper.js File

var skills = '<div class="col-md-3"><img class='imagem_artigo' src="./img/%data%.png" alt="my skills" class="img-responsive img-circle"></div>';
var skills_array = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
var skills_new = '';
for (var i = 0; i < skills_array.length; i += 1) {
	skills_new = skills.replace('%data%', skills_array[i]);
	$('.skills-section-images').append(skills_new);
}
// experience section   
var experience = '<li><h4>%data%       ( %data1% )</h4><br><h5>%data2%</h5></li><hr>';
var experience_array = [{
	name: 'Company Name',
	years: '2012-2015',
	info: 'Company’s Information'
}, {
	name: 'Company Name',
	years: '2011-2015',
	info: 'Company’s Information'
}, {
	name: 'Company Name',
	years: '2008-2009',
	info: 'Company’s Information'
}];
var experience_new = '';
for (var i = 0; i < experience_array.length; i += 1) {
	experience_new = experience.replace('%data%', experience_array[i]['name']);
	experience_new = experience_new.replace('%data1%', experience_array[i]['years']);
	experience_new = experience_new.replace('%data2%', experience_array[i]['info']);
	$('.experience-section-info').append(experience_new);
}
var projects = '<li><h3>%data%</h3><div class="row"><div class="col-md-3"><img class='imagem_artigo' src="./img/%data1%.gif" alt="project-images" class="img-responsive"></div><div class="col-md- 9"><h3>Language(s): %data2%</h3><h5>%data3%</h5></div></div></li><br><hr>';
var projects_array = [{
	name: 'Change My voice',
	img: 'a',
	language: 'Swift',
	info: 'Project Information'
}, {
	name: 'Grapher',
	img: 'a',
	language: 'Python',
	info: 'Project Information'
}];
var projects_new = '';
for (var i = 0; i < projects_array.length; i += 1) {
	projects_new = projects.replace('%data%', projects_array[i]['name']);
	projects_new = projects_new.replace('%data1%', projects_array[i]['img']);
	projects_new = projects_new.replace('%data2%', projects_array[i]['language']);
	projects_new = projects_new.replace('%data3%', projects_array[i]['info']);
	$('.projects-section-info').append(projects_new);
}

JavaScript is used in our portfolio to automate the process of entering the data. For the skills section, we’ll be using images to show our skills. You can create your own skills image at "dummyimage.com ".

Your skills image will look like this =>

Figure 2: Skills Section.

We’re using a JavaScript array to store the names of all the skill images. Then, with the help of jQuery, we’re appending every skill using a JavaScript loop.

For the experience section, we’re using an array of objects. Each object will have three attributes: name of the company, number of years worked, and the information about the company or the work you’ve done there. We can simply fill all those information in the objects array. With the help of JavaScript and jQuery, we can append this to the experience section.

For the projects section we’re using an array of objects. Each object will have four attributes: name of the project, image of the project, technologies used for the project, and some short information about the project. After filling all this information in the helper.js file, we’ll use jQuery selectors and JavaScript loop to append this information to the index.html file.

Conclusion

So we have used HTML, CSS, Bootstrap, JavaScript and jQuery to make an awesome one page portfolio website. You can now easily showcase this portfolio to anyone. Font colors, sizes and font faces can be changed according to your need and if you want the order of sections differently then you can simply change the code in the HTML file. Here are some snapshots of the final portfolio (Remember to add your profile photo and the social network links in the HTML file ).

Snippets of the portfolio =>

Figure 3: Header and Experience Section of the Portfolio.

Figure 4: Projects Section of the Portfolio.

Figure 5: Skills section of the Portfolio.

You can also find the source code of this project available at the link in the top of this page.



CODING is my Passion first, hobby second and job third! I am Full Stack Developer from last two years and I love building scalable web applications and modern websites with new technologies.I started with my web development with ...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login