A Responsive Portfolio Resume section for anyone's personal website or this layout could be used for featured information.
<div class="portfolio-resume row">
<div class="large-4 columns">
<div class="portfolio-resume-wrapper">
<img class="portfolio-resume-headshot" src="https://placehold.it/175" alt="headshot">
<h3 class="portfolio-resume-header">Skills</h3>
<ul>
<li>Playing Cornhole</li>
<li>Balancing on my head</li>
<li>Drinking milk</li>
<li>Going to sleep</li>
<li>Not updating my phone apps</li>
</ul>
</div>
</div>
<div class="large-4 columns">
<div class="portfolio-resume-wrapper">
<h3 class="portfolio-resume-header">Experience</h3>
<div class="portfolio-resume-spacing">
<h5><strong>Nanny for Goats</strong></h5>
<p>I spent a year at a farm in Ireland raising baby goats. I had to feed them, pet them and play. </p>
<ul>
<li>Making goats noises</li>
<li>Cleaning their stalls</li>
<li>Milking the goats</li>
</ul>
</div>
<div class="portfolio-resume-spacing">
<h5><strong>SandCastle Builder</strong></h5>
<p>I have crafted the skill of sandcastles growing up on the beaches of Galveston.</p>
<ul>
<li>Avoiding Jellyfish</li>
<li>Applying the right amount of water</li>
<li>Wearing sunscreen</li>
</ul>
</div>
</div>
</div>
<div class="large-4 columns">
<div class="portfolio-resume-wrapper">
<h3 class="portfolio-resume-header">About Me</h3>
<p>My eclectic background and hippy upbringing makes me a rare commodity. I'd love to get together and talk over a non-GMO kale smoothie. Email or call me anytime!</p>
<div class="portfolio-resume-contact-info">
<a href="mailto:#"><i class="fa fa-envelope" aria-hidden="true"></i>someone@email.com</a>
</div>
<div class="portfolio-resume-contact-info">
<a href="tel:+14083410600"><i class="fa fa-phone" aria-hidden="true"></i></i>555.555.5555</a>
</div>
</div>
</div>
</div>
$portfolio-resume-spacing: 2rem;
.portfolio-resume-spacing {
margin-bottom: $portfolio-resume-spacing;
}
.portfolio-resume-wrapper {
padding: 2rem 4rem;
}
.portfolio-resume-headshot {
margin-bottom: 2rem;
border-radius: 50%;
}
.portfolio-resume-header {
text-transform: uppercase;
padding-bottom: 1rem;
border-bottom: 1px solid $light-gray;
font-weight: bold;
margin-bottom: 1rem;
}
.portfolio-resume-contact-info {
margin-bottom: 0.75rem;
a {
color: $black;
}
.fa {
font-size: 1.4rem;
padding-right: 0.8rem;
vertical-align: middle;
color: $black;
}
}
.portfolio-resume-spacing {
margin-bottom: 2rem;
}
.portfolio-resume-wrapper {
padding: 2rem 4rem;
}
.portfolio-resume-headshot {
margin-bottom: 2rem;
border-radius: 50%;
}
.portfolio-resume-header {
text-transform: uppercase;
padding-bottom: 1rem;
border-bottom: 1px solid #e6e6e6;
font-weight: bold;
margin-bottom: 1rem;
}
.portfolio-resume-contact-info {
margin-bottom: 0.75rem;
}
.portfolio-resume-contact-info a {
color: #0a0a0a;
}
.portfolio-resume-contact-info .fa {
font-size: 1.4rem;
padding-right: 0.8rem;
vertical-align: middle;
color: #0a0a0a;
}