Sidebar example
Various forms of information to the right or left side of a page.
Bio
I love coding and problem solving. I have 3+ years of experience in the web development sector. Love working on both server and client side code. I like to get to know my clients closely to facilitate better communication.
Languages
English - Advanced French - UnspecifiedRewards
Industry expertise: IT, Technology and Business
Work experience
-
Product Director
- Spotify Inc.
- Jan 2008 to Mar 2010
- San Francisco, California
-
Channel Sales Director
- Dropbox Inc.
- Apr 2010 to Sep 2015
- Newark, NJ
-
Business manager
- Airbnb Inc.
- Oct 2015 to Present
- San Francisco, California
Linked accounts
Slack
jorgefields.slack.com
<!-- Sidebar Info -->
<div class="row">
<div class="col-lg-4 mb-9 mb-lg-0">
<div class="card shadow-sm p-5 mb-5">
<div class="border-bottom text-center pb-5 mb-5">
<!-- Status -->
<div class="d-flex justify-content-end mb-1">
<span class="btn btn-xs btn-soft-success btn-pill">
<small class="fas fa-circle mr-1"></small>
Online
</span>
</div>
<!-- End Status -->
<!-- Avatar -->
<div class="mb-3 mx-auto">
<img class="img-fluid rounded-circle" src="../../assets/img/160x160/img22.jpg" width="110" height="110" alt="Image Description">
</div>
<!-- End Avatar -->
<h1 class="h5">Jorge Fields</h1>
<!-- Review -->
<div class="mb-2">
<span class="text-warning">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star-half-alt"></small>
</span>
<span class="font-weight-semi-bold ml-2">4.7</span>
<small class="text-muted">(39 reviews)</small>
</div>
<!-- End Review -->
<!-- Additional Info -->
<ul class="list-inline text-secondary font-size-1 mb-4">
<li class="list-inline-item">
<small class="fas fa-map-marker-alt mr-1"></small>
London, UK
</li>
<li class="list-inline-item text-muted">•</li>
<li class="list-inline-item">
Joined Jun 2015
</li>
</ul>
<!-- End Additional Info -->
<div class="mb-2">
<a class="btn btn-block btn-sm btn-soft-primary transition-3d-hover" href="#">Hire Me</a>
</div>
<a class="text-muted small" href="#">
<small class="fas fa-flag mr-1"></small>
Report this user
</a>
</div>
<div class="border-bottom pb-5 mb-5">
<div id="SVGemployeeStatsIcon" class="svg-preloader row">
<div class="col-6 mb-5">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-35.svg" alt="SVG"
data-parent="#SVGemployeeStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">$35.00</span>
<span class="d-block text-secondary font-size-1">Hourly rate</span>
</div>
<!-- End Stats -->
</div>
<div class="col-6 mb-5">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-37.svg" alt="SVG"
data-parent="#SVGemployeeStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">30</span>
<span class="d-block text-secondary font-size-1">Jobs done</span>
</div>
<!-- End Stats -->
</div>
<div class="col-6">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-5.svg" alt="SVG"
data-parent="#SVGemployeeStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">85%</span>
<span class="d-block text-secondary font-size-1">Success rate</span>
</div>
<!-- End Stats -->
</div>
<div class="col-6">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-7.svg" alt="SVG"
data-parent="#SVGemployeeStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">345</span>
<span class="d-block text-secondary font-size-1">Repeat clients</span>
</div>
<!-- End Stats -->
</div>
</div>
</div>
<div class="border-bottom pb-5 mb-5">
<h2 class="font-size-1 font-weight-semi-bold text-uppercase mb-3">Bio</h2>
<p class="font-size-1 mb-0">I love coding and problem solving. I have 3+ years of experience in the web development sector. Love working on both server and client side code. I like to get to know my clients closely to facilitate better communication.</p>
</div>
<div class="border-bottom pb-5 mb-5">
<h3 class="font-size-1 font-weight-semi-bold text-uppercase mb-3">Languages</h3>
<!-- Languages -->
<span class="d-block font-size-1 font-weight-medium mb-1">English - <span class="text-muted font-weight-normal">Advanced</span></span>
<span class="d-block font-size-1 font-weight-medium">French - <span class="text-muted font-weight-normal">Unspecified</span></span>
<!-- End Languages -->
</div>
<div class="border-bottom pb-5 mb-5">
<h3 class="font-size-1 font-weight-semi-bold text-uppercase mb-3">Skills</h3>
<!-- Skills -->
<a class="btn btn-xs btn-gray mb-1" href="#">Android</a>
<a class="btn btn-xs btn-gray mb-1" href="#">iOS</a>
<a class="btn btn-xs btn-gray mb-1" href="#">PHP</a>
<a class="btn btn-xs btn-gray mb-1" href="#">Developer</a>
<a class="btn btn-xs btn-gray mb-1" href="#">JavaScript</a>
<a class="btn btn-xs btn-gray mb-1" href="#">CSS3</a>
<a class="btn btn-xs btn-gray mb-1" href="#">HTML5</a>
<a class="btn btn-xs btn-gray mb-1" href="#">Bootstrap</a>
<a class="btn btn-xs btn-gray mb-1" href="#">Angular</a>
<a class="btn btn-xs btn-gray mb-1" href="#">React.js</a>
<!-- End Skills -->
</div>
<div class="border-bottom pb-5 mb-5">
<h3 class="font-size-1 font-weight-semi-bold text-uppercase mb-3">Rewards</h3>
<!-- Rewards -->
<div class="mb-3">
<img class="max-width-5 mr-1" src="../../assets/svg/illustrations/top-level-award.svg" alt="Image Description" title="Top Seller">
<img class="max-width-5 mx-1" src="../../assets/svg/illustrations/verified-user.svg" alt="Image Description" title="Verified user">
<img class="max-width-5 ml-1" src="../../assets/svg/illustrations/top-endorsed.svg" alt="Image Description" title="Top Endorsed">
</div>
<!-- End Rewards -->
<p class="small mb-0">Industry expertise: IT, Technology and Business</p>
</div>
<div class="border-bottom pb-5 mb-5">
<h3 class="font-size-1 font-weight-semi-bold text-uppercase mb-3">Work experience</h3>
<!-- Work Experience Info -->
<ul class="list-unstyled u-indicator-vertical-dashed">
<li class="media u-indicator-vertical-dashed-item">
<span class="btn btn-xs btn-icon btn-soft-success rounded-circle mr-3">
<span class="btn-icon__inner">S</span>
</span>
<div class="media-body">
<h4 class="font-size-1 mb-1">Product Director</h4>
<ul class="list-unstyled small text-secondary mb-0">
<li>
<a href="#">Spotify Inc.</a>
</li>
<li>Jan 2008 to Mar 2010</li>
<li>San Francisco, California</li>
</ul>
</div>
</li>
<li class="media u-indicator-vertical-dashed-item">
<span class="btn btn-xs btn-icon btn-soft-primary rounded-circle mr-3">
<span class="btn-icon__inner">D</span>
</span>
<div class="media-body">
<h4 class="font-size-1 mb-1">Channel Sales Director</h4>
<ul class="list-unstyled small text-secondary mb-0">
<li>
<a href="#">Dropbox Inc.</a>
</li>
<li>Apr 2010 to Sep 2015</li>
<li>Newark, NJ</li>
</ul>
</div>
</li>
<li class="media u-indicator-vertical-dashed-item">
<span class="btn btn-xs btn-icon btn-soft-danger rounded-circle mr-3">
<span class="btn-icon__inner">A</span>
</span>
<div class="media-body">
<h4 class="font-size-1 mb-1">Business manager</h4>
<ul class="list-unstyled small text-secondary mb-0">
<li>
<a href="#">Airbnb Inc.</a>
</li>
<li>Oct 2015 to Present</li>
<li>San Francisco, California</li>
</ul>
</div>
</li>
</ul>
<!-- End Work Experience Info -->
</div>
<h4 class="font-size-1 font-weight-semi-bold text-uppercase mb-3">Linked accounts</h4>
<!-- Linked Account -->
<a class="media align-items-center mb-3" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 text-dark mb-0">Slack</h4>
<small class="d-block text-secondary">jorgefields.slack.com</small>
</div>
</a>
<!-- End Linked Account -->
<!-- Linked Account -->
<a class="media align-items-center" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img19.png" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 text-dark mb-0">Twitter</h4>
<small class="d-block text-secondary">twitter.com/jorgefields</small>
</div>
</a>
<!-- End Linked Account -->
</div>
</div>
</div>
<!-- End Sidebar Info -->
Job seekers also viewed
567k+ reviews
430 reviews
Asana
5k+ reviews
≪!-- Sidebar Info -->
<div class="row">
<div class="col-lg-4 mb-9 mb-lg-0">
<!-- Sidebar Info -->
<div class="card shadow-sm p-5 mb-5">
<div class="border-bottom text-center pb-5 mb-5">
<!-- Avatar -->
<div class="mb-3 mx-auto">
<img class="img-fluid rounded-circle" src="../../assets/img/160x160/img3.jpg" width="110" height="110" alt="Image Description">
</div>
<!-- End Avatar -->
<h1 class="h5">Slack</h1>
<!-- Review -->
<div class="mb-2">
<span class="text-warning">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
</span>
<span class="font-weight-semi-bold ml-2">4.91</span>
<small class="text-muted">(12k+ reviews)</small>
</div>
<!-- End Review -->
<div class="mb-4">
<a class="font-size-1" href="#">www.slack.com</a>
</div>
<div class="mb-2">
<!-- Buttons -->
<a class="btn btn-sm btn-soft-success transition-3d-hover mr-1" href="#">Follow</a>
<a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">64 Open Jobs</a>
<!-- End Buttons -->
</div>
<a class="text-muted small" href="#">
<small class="fas fa-flag mr-1"></small>
Report
</a>
</div>
<div class="border-bottom pb-5 mb-5">
<div id="SVGCompanyStatsIcon" class="svg-preloader row">
<div class="col-6 mb-5">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-8.svg" alt="SVG"
data-parent="#SVGCompanyStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">San Francisco</span>
<span class="d-block text-secondary font-size-1">Headquarters</span>
</div>
<!-- End Stats -->
</div>
<div class="col-6 mb-5">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-11.svg" alt="SVG"
data-parent="#SVGCompanyStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">2014</span>
<span class="d-block text-secondary font-size-1">Founded</span>
</div>
<!-- End Stats -->
</div>
<div class="col-6 mb-5">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-7.svg" alt="SVG"
data-parent="#SVGCompanyStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">12,000+</span>
<span class="d-block text-secondary font-size-1">Employees</span>
</div>
<!-- End Stats -->
</div>
<div class="col-6 mb-5">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-13.svg" alt="SVG"
data-parent="#SVGCompanyStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">Internet</span>
<span class="d-block text-secondary font-size-1">Industry</span>
</div>
<!-- End Stats -->
</div>
<div class="col-6">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-22.svg" alt="SVG"
data-parent="#SVGCompanyStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">Unknown</span>
<span class="d-block text-secondary font-size-1">Revenue</span>
</div>
<!-- End Stats -->
</div>
<div class="col-6">
<!-- Stats -->
<div class="text-center">
<figure class="ie-height-48 max-width-5 mb-2 mx-auto">
<img class="js-svg-injector" src="../../assets/svg/icons/icon-34.svg" alt="SVG"
data-parent="#SVGCompanyStatsIcon">
</figure>
<span class="h6 d-block font-weight-medium mb-0">$25 - $45</span>
<span class="d-block text-secondary font-size-1">Avg. Salary</span>
</div>
<!-- End Stats -->
</div>
</div>
</div>
<div class="border-bottom pb-5 mb-5">
<h4 class="font-size-1 font-weight-semi-bold text-uppercase mb-3">Linked accounts</h4>
<!-- Linked Account -->
<a class="media align-items-center mb-3" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 text-dark mb-0">Slack</h4>
<small class="d-block text-secondary">slack.com</small>
</div>
</a>
<!-- End Linked Account -->
<!-- Linked Account -->
<a class="media align-items-center mb-3" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img19.png" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 text-dark mb-0">Twitter</h4>
<small class="d-block text-secondary">twitter.com/slack</small>
</div>
</a>
<!-- End Linked Account -->
<!-- Linked Account -->
<a class="media align-items-center" href="#">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img20.png" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 text-dark mb-0">Facebook</h4>
<small class="d-block text-secondary">facebook.com/slack</small>
</div>
</a>
<!-- End Linked Account -->
</div>
<h4 class="font-size-1 font-weight-semi-bold text-uppercase mb-3">Job seekers also viewed</h4>
<!-- Related Companies -->
<div class="media align-items-center mb-3">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img17.png" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 mb-0">
<a href="#">Google</a>
</h4>
<div class="d-md-flex align-items-md-center">
<!-- Review -->
<span class="text-warning small">
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
</span>
<small class="text-muted ml-2">567k+ reviews</small>
<!-- End Review -->
</div>
</div>
</div>
<!-- End Related Companies -->
<!-- Related Companies -->
<div class="media align-items-center mb-3">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img20.png" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 mb-0">
<a href="#">Facebook</a>
</h4>
<div class="d-md-flex align-items-md-center">
<!-- Review -->
<span class="text-warning small">
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="far fa-star"></span>
</span>
<small class="text-muted ml-2">430 reviews</small>
<!-- End Review -->
</div>
</div>
</div>
<!-- End Related Companies -->
<!-- Related Companies -->
<div class="media align-items-center mb-3">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img13.png" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 mb-0">
<a href="#">Asana</a>
</h4>
<div class="d-md-flex align-items-md-center">
<!-- Review -->
<span class="text-warning small">
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="far fa-star"></span>
<span class="far fa-star"></span>
</span>
<small class="text-muted ml-2">5k+ reviews</small>
<!-- End Review -->
</div>
</div>
</div>
<!-- End Related Companies -->
<!-- View More - Collapse -->
<div class="collapse" id="collapseRelatedCompanies">
<!-- Related Companies -->
<div class="media align-items-center mb-3">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img21.png" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 mb-0">
<a href="#">Dribbble</a>
</h4>
<div class="d-md-flex align-items-md-center">
<!-- Review -->
<span class="text-warning small">
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
</span>
<small class="text-muted ml-2">15k+ reviews</small>
<!-- End Review -->
</div>
</div>
</div>
<!-- End Related Companies -->
<!-- Related Companies -->
<div class="media align-items-center mb-3">
<div class="u-sm-avatar mr-3">
<img class="img-fluid" src="../../assets/img/160x160/img15.png" alt="Image Description">
</div>
<div class="media-body">
<h4 class="font-size-1 mb-0">
<a href="#">Spotify</a>
</h4>
<div class="d-md-flex align-items-md-center">
<!-- Review -->
<span class="text-warning small">
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
<span class="fas fa-star"></span>
</span>
<small class="text-muted ml-2">987 reviews</small>
<!-- End Review -->
</div>
</div>
</div>
<!-- End Related Companies -->
</div>
<!-- End View More - Collapse -->
<!-- View More - Link -->
<a class="link link-collapse small font-size-1" data-toggle="collapse" href="#collapseRelatedCompanies" role="button" aria-expanded="false" aria-controls="collapseRelatedCompanies">
<span class="link-collapse__default">View more</span>
<span class="link-collapse__active">View less</span>
<span class="link__icon ml-1">
<span class="link__icon-inner">+</span>
</span>
</a>
<!-- End View More - Link -->
</div>
</div>
</div>
<!-- End Sidebar Info -->