<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
<a class="navbar-brand js-scroll-trigger" href="#page-top">
<span class="d-block d-lg-none">Abel Baloi</span>
<span class="d-none d-lg-block">
<!-- Shoud out to the lunatic demon who made this url!-->
<img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="https://cdn.pixabay.com/photo/2015/09/02/13/24/woman-919047_960_720.jpg" alt="">
</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#experience">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#education">Education</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#interests">Interests</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Contact us</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid p-0">
<section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="about">
<div class="w-100">
<h1 class="mb-0">BALOI
<span class="text-primary">ABEL TSHEPO</span>
</h1>
<div class="subheading mb-5">73 Juta Street · Braamfontein, 2001 · (+27) 76 585-8468 ·
<a href="mailto:name@email.com">abeltshepo@abedesigns.co.za</a>
</div>
<p class="lead mb-5">I am Baloi Abel Tshepo, or just BigT for short.Iam A Web Developer and a Free Lancer.</p>
<div class="social-icons">
<a href="#">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="#">
<i class="fab fa-github"></i>
</a>
<a href="#">
<i class="fab fa-twitter"></i>
</a>
<a href="#">
<i class="fab fa-facebook-f"></i>
</a>
</div>
</div>
</section>
<hr class="m-0">
<section class="resume-section p-3 p-lg-5 d-flex justify-content-center" id="experience">
<div class="w-100">
<h2 class="mb-5">Experience</h2>
<div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
<div class="resume-content">
<h3 class="mb-0">Senior Frontend Web Developer</h3>
<div class="subheading mb-3">Web Solutions</div>
<p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. BigT is ready</p>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">Jan 2016 - Present</span>
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
<div class="resume-content">
<h3 class="mb-0">Frontend Web Developer</h3>
<div class="subheading mb-3">Web Solutions</div>
<p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. Which is Baloi.</p>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">December 2017 - March 2018</span>
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row justify-content-between">
<div class="resume-content">
<h3 class="mb-0">Junior Web Design Intern</h3>
<div class="subheading mb-3">Open learn</div>
<p>Used to work for my cousin.</p>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">January 2017 - June 2017</span>
</div>
</div>
</div>
</section>
<hr class="m-0">
<section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="education">
<div class="w-100">
<h2 class="mb-5">Education</h2>
<div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
<div class="resume-content">
<h3 class="mb-0">College Orbit Fetr</h3>
<div class="subheading mb-3">Nated Diploma</div>
<div>Computer Science - Web Development </div>
<p>GPA: 3.23</p>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">August 2012 - May 2015</span>
</div>
</div>
<div class="resume-item d-flex flex-column flex-md-row justify-content-between">
<div class="resume-content">
<h3 class="mb-0">Tshepagalang High School</h3>
<div class="subheading mb-3">Mercedezbenz Program</div>
<p>GPA: 3.56</p>
</div>
<div class="resume-date text-md-right">
<span class="text-primary">August 2008 - May 2009</span>
</div>
</div>
</div>
</section>
<hr class="m-0">
<section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="skills">
<div class="w-100">
<h2 class="mb-5">Skills</h2>
<div class="subheading mb-3">Programming Languages & Tools</div>
<ul class="list-inline dev-icons">
<li class="list-inline-item">
<i class="fab fa-html5"></i>
</li>
<li class="list-inline-item">
<i class="fab fa-css3-alt"></i>
</li>
<li class="list-inline-item">
<i class="fab fa-js-square"></i>
</li>
<li class="list-inline-item">
<i class="fab fa-angular"></i>
</li>
<li class="list-inline-item">
<i class="fab fa-react"></i>
</li>
<li class="list-inline-item">
<i class="fab fa-node-js"></i>
</li>
<li class="list-inline-item">
<i class="fab fa-sass"></i>
</li>
<li class="list-inline-item">
<i class="fab fa-less"></i>
</li>
<li class="list-inline-item">
<i class="fab fa-wordpress"></i>
</li>
<li class="list-inline-item">
<i class="fab fa-gulp"></i>
</li>
<li class="list-inline-item">
<i class="fab fa-grunt"></i>
</li>
<li class="list-inline-item">
<i class="fab fa-npm"></i>
</li>
</ul>
<div class="subheading mb-3">Workflow</div>
<ul class="fa-ul mb-0">
<li>
<i class="fa-li fa fa-check"></i>
Mobile-First, Responsive Design</li>
<li>
<i class="fa-li fa fa-check"></i>
Cross Browser Testing & Debugging</li>
<li>
<i class="fa-li fa fa-check"></i>
Cross Functional Teams</li>
<li>
<i class="fa-li fa fa-check"></i>
Agile Development & Scrum</li>
</ul>
</div>
</section>
<hr class="m-0">
<section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="interests">
<div class="w-100">
<h2 class="mb-5">Interests</h2>
<p>Apart from being a web developer, I enjoy most of my time being outdoors. In the winter, I am an soccer player and novice in tennis. During the warmer months here in Braamfontein, I enjoy playing soccer, free climbing, and kayaking.</p>
<p class="mb-0">When forced indoors, I follow a number of sci-fi and fantasy genre movies and television shows, I am an aspiring chef, and I spend a large amount of my free time exploring the latest technology advancements in the front-end web development world.</p>
</div>
</section>
<hr class="m-0">
<section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="contact">
<div class="w-100">
<h2 class="mb-5">Contact Us</h2>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-3 my-5">
<div class="card border-0">
<div class="card-body text-center">
<i class="fa fa-phone fa-5x mb-3" aria-hidden="true"></i>
<h4 class="text-uppercase mb-5">call us</h4>
<p>+27764567748/+27836762520</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3 my-5">
<div class="card border-0">
<div class="card-body text-center">
<i class="fa fa-map-marker fa-5x mb-3" aria-hidden="true"></i>
<h4 class="text-uppercase mb-5">office loaction</h4>
<address>2415 ext 2 letlhabile block b/ </address>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3 my-5">
<div class="card border-0">
<div class="card-body text-center">
<i class="fa fa-map-marker fa-5x mb-3" aria-hidden="true"></i>
<h4 class="text-uppercase mb-5">office loaction</h4>
<address>2415 ext2 b/b garankuwa </address>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-3 my-5">
<div class="card border-0">
<div class="card-body text-center">
<i class="fa fa-globe fa-5x mb-3" aria-hidden="true"></i>
<h4 class="text-uppercase mb-5">email</h4>
<p>abedesigns6@gmail.com</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
/*!
* Start Bootstrap - Resume v5.0.4 (https://startbootstrap.com/template-overviews/resume)
* Copyright 2013-2019 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-resume/blob/master/LICENSE)
*/
body {
font-family: 'Muli', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
padding-top: 54px;
color: #868e96;
}
@media (min-width: 992px) {
body {
padding-top: 0;
padding-left: 17rem;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Saira Extra Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
font-weight: 700;
text-transform: uppercase;
color: #343a40;
}
h1 {
font-size: 6rem;
line-height: 5.5rem;
}
h2 {
font-size: 3.5rem;
}
h3 {
font-size: 2rem;
}
p.lead {
font-size: 1.15rem;
font-weight: 400;
}
.subheading {
text-transform: uppercase;
font-weight: 500;
font-family: 'Saira Extra Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
font-size: 1.5rem;
}
.social-icons a {
display: inline-block;
height: 3.5rem;
width: 3.5rem;
background-color: #495057;
color: #fff !important;
border-radius: 100%;
text-align: center;
font-size: 1.5rem;
line-height: 3.5rem;
margin-right: 1rem;
}
.social-icons a:last-child {
margin-right: 0;
}
.social-icons a:hover {
background-color: #BD5D38;
}
.dev-icons {
font-size: 3rem;
}
.dev-icons .list-inline-item i:hover {
color: #BD5D38;
}
#sideNav .navbar-nav .nav-item .nav-link {
font-weight: 800;
letter-spacing: 0.05rem;
text-transform: uppercase;
}
#sideNav .navbar-toggler:focus {
outline-color: #d48a6e;
}
@media (min-width: 992px) {
#sideNav {
text-align: center;
position: fixed;
top: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 17rem;
height: 100vh;
}
#sideNav .navbar-brand {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: auto auto 0;
padding: 0.5rem;
}
#sideNav .navbar-brand .img-profile {
max-width: 10rem;
max-height: 10rem;
border: 0.5rem solid rgba(255, 255, 255, 0.2);
}
#sideNav .navbar-collapse {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
width: 100%;
margin-bottom: auto;
}
#sideNav .navbar-collapse .navbar-nav {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
}
#sideNav .navbar-collapse .navbar-nav .nav-item {
display: block;
}
#sideNav .navbar-collapse .navbar-nav .nav-item .nav-link {
display: block;
}
}
section.resume-section {
padding-top: 5rem !important;
padding-bottom: 5rem !important;
max-width: 75rem;
}
section.resume-section .resume-item .resume-date {
min-width: none;
}
@media (min-width: 768px) {
section.resume-section {
min-height: 100vh;
}
section.resume-section .resume-item .resume-date {
min-width: 18rem;
}
}
@media (min-width: 992px) {
section.resume-section {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
}
.bg-primary {
background-color: #BD5D38 !important;
}
.text-primary {
color: #BD5D38 !important;
}
a {
color: #BD5D38;
}
a:hover, a:focus, a:active {
color: #824027;
}
(function($) {
"use strict"; // Start of use strict
// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: (target.offset().top)
}, 1000, "easeInOutExpo");
return false;
}
}
});
// Closes responsive menu when a scroll trigger link is clicked
$('.js-scroll-trigger').click(function() {
$('.navbar-collapse').collapse('hide');
});
// Activate scrollspy to add active class to navbar items on scroll
$('body').scrollspy({
target: '#sideNav'
});
})(jQuery); // End of use strict
