Responsive Portfolio Resume

By Laurel Beyers

F6
#
How do I use This?

A Responsive Portfolio Resume section for anyone's personal website or this layout could be used for featured information.

HTML
<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;
}

JS